/* ============================================================
   HOME
   ============================================================ */

.hero {
    position: relative;
    overflow: hidden;
    /* Tall enough to feel like an entrance, never taller than the screen. */
    min-height: min(92vh, 820px);
    display: flex;
    align-items: center;
    padding-block: var(--space-7) var(--space-8);
}

.hero__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    align-items: center;
    width: 100%;
}

@media (min-width: 900px) {
    .hero__inner {
        grid-template-columns: 1.02fr 0.98fr;
        gap: var(--space-8);
    }
}

.hero__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    text-align: center;
    align-items: center;
}

@media (min-width: 900px) {
    .hero__content {
        text-align: left;
        align-items: flex-start;
    }
}

.hero__title {
    /* Scales from phone to desktop without a breakpoint. */
    font-size: clamp(2.4rem, 9vw, 5.25rem);
    font-weight: var(--weight-medium);
    line-height: 0.98;
    letter-spacing: -0.02em;
    margin: 0;
}

/* El nombre de Yuna, en oro que se desliza. Styled by element, not by
   class, so translators never see CSS in the string they translate. */
.hero__title em {
    font-style: normal;
    background: linear-gradient(
        100deg,
        var(--gold) 0%,
        var(--gold-ink-mid) 30%,
        var(--gold-bright) 46%,
        var(--gold-ink-mid) 62%,
        var(--gold) 100%
    );
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: gild-sweep 7s var(--ease-in-out) infinite;
}

@media (prefers-reduced-motion: reduce) {
    .hero__title em { animation: none; }
}

.hero__text {
    max-width: 46ch;
    font-size: clamp(1rem, 2.2vw, 1.2rem);
    color: var(--text-secondary);
    margin: 0;
    text-wrap: pretty;
}

/* El formulario ocupa la columna: a su ancho natural el boton no cabia al
   lado de la fecha y caia debajo, y con los dos botones de abajo quedaban
   tres botones de oro en fila india. */
.hero__finder {
    align-self: stretch;
    max-width: 36rem;
}

.hero__finder .finder {
    margin-block: var(--space-2);
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    justify-content: center;
    margin-top: var(--space-2);
}

@media (min-width: 900px) {
    .hero__actions {
        justify-content: flex-start;
    }
}

/* --- Stats --------------------------------------------------- */

.hero__stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-6);
    justify-content: center;
    margin-top: var(--space-2);
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-style: italic;
    color: var(--text-muted);
}

@media (min-width: 900px) {
    .hero__stats { justify-content: flex-start; }
}

.hero__stat strong {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-style: normal;
    font-weight: var(--weight-medium);
    color: var(--accent-ink);
    /* Lining tabular figures: the number is counted up by script, so the
       digits must not shift the layout as they change width. */
    font-variant-numeric: lining-nums tabular-nums;
    /* A halo rather than a gradient fill: the colour itself has to keep
       carrying the contrast the token was measured for. */
}

/* --- Portrait ------------------------------------------------ */

.hero__portrait {
    position: relative;
    justify-self: center;
    width: min(100%, 460px);
    /* Keeps the halo from being clipped by the grid cell. */
    isolation: isolate;
}

.hero__portrait img {
    width: 100%;
    border-radius: var(--radius-sm);
}

/* Yuna flota despacio dentro de su marco. */
.hero__portrait .portrait-flip {
    animation: portrait-float 9s var(--ease-in-out) infinite;
}

@keyframes portrait-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}

/* Halo behind Yuna. */
.hero__portrait::before {
    content: "";
    position: absolute;
    inset: -12%;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(
        circle at 50% 45%,
        color-mix(in srgb, var(--gold) 30%, transparent),
        color-mix(in srgb, var(--secondary) 14%, transparent) 45%,
        transparent 68%
    );
    animation: halo-breathe 6s var(--ease-in-out) infinite;
}

@keyframes halo-breathe {
    0%, 100% { opacity: 0.75; transform: scale(1); }
    50%      { opacity: 1;    transform: scale(1.07); }
}

/* A slowly turning ring of light, like a zodiac wheel. */
/* El marco de las cartas de Yuna: un filete de oro separado del retrato
   y otro pegado a el. Es el adorno de la pagina; por eso el retrato ya no
   flota ni gira nada a su alrededor. */
.hero__portrait::after {
    content: "";
    position: absolute;
    inset: -14px;
    z-index: -1;
    pointer-events: none;
    border: var(--border-width) solid color-mix(in srgb, var(--gold) 60%, transparent);
    border-radius: var(--radius-md);
    box-shadow: inset 0 0 0 5px transparent,
                inset 0 0 0 6px color-mix(in srgb, var(--gold) 28%, transparent);
}

.portrait-flip__face {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 70%, transparent),
                var(--shadow-lg);
}

@media (prefers-reduced-motion: reduce) {
    .hero__portrait::before,
    .hero__portrait .portrait-flip {
        animation: none;
    }
}

/* --- Floating glyphs ----------------------------------------- */

.hero__sparkle {
    position: absolute;
    color: var(--accent-ink);
    opacity: 0.4;
    pointer-events: none;
    animation: twinkle 5s var(--ease-in-out) infinite;
}

.hero__sparkle:nth-of-type(1) { top: 14%; left: 5%;  font-size: 1.4rem; animation-delay: 0s; }
.hero__sparkle:nth-of-type(2) { top: 72%; left: 9%;  font-size: 1rem;   animation-delay: 1.4s; }
.hero__sparkle:nth-of-type(3) { top: 20%; right: 7%; font-size: 1.2rem; animation-delay: 2.6s; }
.hero__sparkle:nth-of-type(4) { top: 84%; right: 14%; font-size: 0.9rem; animation-delay: 3.6s; }

@keyframes twinkle {
    0%, 100% { opacity: 0.18; transform: scale(0.85) rotate(0deg); }
    50%      { opacity: 0.65; transform: scale(1.15) rotate(12deg); }
}

@media (prefers-reduced-motion: reduce) {
    .hero__sparkle { animation: none; }
}

/* Hide the decorative glyphs on narrow screens: they crowd the text. */
@media (max-width: 639px) {
    .hero__sparkle { display: none; }
}

/* --- Scroll cue ----------------------------------------------- */

.hero__scroll-cue {
    position: absolute;
    left: 50%;
    bottom: var(--space-4);
    transform: translateX(-50%);
    color: var(--text-muted);
    opacity: 0.6;
    animation: cue-bob 2.6s var(--ease-in-out) infinite;
    pointer-events: none;
}

@keyframes cue-bob {
    0%, 100% { transform: translate(-50%, 0); }
    50%      { transform: translate(-50%, 8px); }
}

@media (prefers-reduced-motion: reduce) {
    .hero__scroll-cue { animation: none; }
}

@media (max-height: 700px) {
    .hero__scroll-cue { display: none; }
}

/* --- How it works ---------------------------------------------
   Es una secuencia de verdad, asi que lleva numeros: romanos, los de
   los arcanos mayores. Sin cajas: un filete de oro encima de cada paso. */

.steps {
    display: grid;
    gap: var(--space-6) var(--space-5);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
    counter-reset: step;
}

.step {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    /* Un panel translucido: sin el, la rueda grabada del fondo cruzaba las
       letras y el texto de cada paso no se distinguia. */
    padding: var(--space-5);
    background: color-mix(in srgb, var(--bg-surface) 88%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: var(--border-width) solid var(--border);
    border-top: var(--border-width-thick) solid var(--border-accent);
    border-radius: var(--radius-md);
}

.step::before {
    counter-increment: step;
    content: counter(step, upper-roman);
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: var(--weight-medium);
    line-height: 1;
    color: var(--accent-ink);
}

.step__title {
    font-size: var(--text-xl);
    margin: 0;
}

.step__text {
    color: var(--text-primary);
    margin: 0;
}

/* --- Translucent panels over the sky --------------------------- */

.home .panel {
    background: color-mix(in srgb, var(--bg-surface) 84%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* ============================================================
   UNDER CONSTRUCTION
   Shared by the shop and the error pages.
   ============================================================ */

.construction {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-8) var(--space-4);
    text-align: center;
}

.construction__halo {
    position: absolute;
    top: 0;
    left: 50%;
    width: min(540px, 90vw);
    height: min(540px, 90vw);
    transform: translateX(-50%);
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(
        circle at 50% 40%,
        color-mix(in srgb, var(--secondary) 20%, transparent),
        color-mix(in srgb, var(--gold) 8%, transparent) 46%,
        transparent 68%
    );
    animation: halo-breathe 7s var(--ease-in-out) infinite;
}

.construction__portrait {
    width: min(200px, 48vw);
    height: auto;
    border-radius: 50%;
    filter: drop-shadow(var(--glow-moon));
}

.construction__title {
    font-size: clamp(1.4rem, 6vw, 2.6rem);
    margin: 0;
}

.construction__text {
    max-width: 48ch;
    font-size: var(--text-base);
    color: var(--text-secondary);
    margin: 0;
    text-wrap: pretty;
}

@media (prefers-reduced-motion: reduce) {
    .construction__halo { animation: none; }
}

/* ============================================================
   PORTRAIT FLIP
   The welcome artwork turns over to reveal the yin-yang piece.
   ============================================================ */

.portrait-flip {
    display: block;
    width: 100%;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    perspective: 1600px;
    border-radius: var(--radius-xl);
}

.portrait-flip__inner {
    position: relative;
    display: block;
    width: 100%;
    /* Square, matching both artworks, so the back never shifts the layout. */
    aspect-ratio: 1;
    transform-style: preserve-3d;
    transition: transform 900ms var(--ease-in-out);
}

/* Turns anticlockwise, so it reads as flipping back rather than forward. */
.portrait-flip.is-turned .portrait-flip__inner {
    transform: rotateY(-180deg);
}

.portrait-flip__face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.portrait-flip__face img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-xl);
}

.portrait-flip__face--back {
    transform: rotateY(180deg);
}

/* A quiet hint that the portrait can be turned. */
.portrait-flip__hint {
    position: absolute;
    right: var(--space-3);
    bottom: var(--space-3);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    color: var(--gold-bright);
    background: color-mix(in srgb, var(--yuna-indigo-950) 62%, transparent);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
    border-radius: var(--radius-pill);
    opacity: 0.75;
    transition: opacity var(--duration-fast) var(--ease-out),
                transform var(--duration-base) var(--ease-out);
}

.portrait-flip:hover .portrait-flip__hint,
.portrait-flip:focus-visible .portrait-flip__hint {
    opacity: 1;
    transform: rotate(90deg);
}

.portrait-flip:focus-visible {
    outline: var(--border-width-thick) solid var(--secondary);
    outline-offset: 6px;
}

/* The float already runs on .hero__portrait img; the flip owns the transform
   here, so the animation is dropped to avoid the two fighting. */
.hero__portrait .portrait-flip img {
    animation: none;
}

@media (prefers-reduced-motion: reduce) {
    .portrait-flip__inner {
        transition: none;
    }

    .portrait-flip__hint {
        transition: none;
    }
}

/* ============================================================
   EL HOROSCOPO EN LA PORTADA

   Primer bloque despues del hero, y el unico con fondo propio:
   es la puerta principal, y tiene que verse que lo es antes de
   leer nada.
   ============================================================ */

.section--daily {
    position: relative;
    /* Se sale del contenedor a los lados para ocupar el ancho entero, que
       es lo que lo separa del resto de secciones sin necesitar un borde. */
    background:
        radial-gradient(
            80% 60% at 50% 0%,
            color-mix(in srgb, var(--secondary) 12%, transparent),
            transparent 70%
        ),
        color-mix(in srgb, var(--secondary) 5%, transparent);
    border-block: var(--border-width) solid var(--border);
}

.daily__title {
    margin: 0;
    font-size: clamp(1.65rem, 5vw, 2.75rem);
    line-height: var(--leading-tight);
}

.daily__lead {
    max-width: 52ch;
    margin: var(--space-2) auto 0;
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--text-secondary);
    text-wrap: pretty;
}

.daily__finder {
    margin: var(--space-5) 0 0;
    text-align: center;
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.daily__finder a {
    color: var(--secondary-contrast);
    font-weight: var(--weight-semibold);
}

/* ============================================================
   LAS PUERTAS

   Son cinco, y cinco no llena ninguna fila: en cuatro columnas
   deja una suelta a la izquierda y parece que algo se rompio.

   Flex y no rejilla, y es la unica razon por la que no es una
   rejilla como el resto de la pagina: `justify-content: center`
   en una rejilla centra las columnas, no lo que queda en la
   ultima fila, asi que la fila corta se seguia pegando a la
   izquierda. En flex cada fila se centra por su cuenta.

   Sin `flex-grow`, o los dos de la ultima fila se estirarian
   hasta llenar el ancho y se verian como tarjetas distintas de
   las de arriba.
   El nombre lleva `home-` porque `.gates` ya es de la pagina de
   lecturas: la hoja de lecturas se carga despues, le ponia
   `display: grid` encima y el flex de aqui no llegaba a aplicarse.
   ============================================================ */

.home-index {
    max-width: 58rem;
    margin: 0 auto;
    padding: 0 var(--space-4);
    list-style: none;
    background: color-mix(in srgb, var(--bg-surface) 80%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: var(--border-width) solid var(--border);
    border-top: var(--border-width-thick) solid var(--border-accent);
    border-radius: var(--radius-md);
}

.home-index > li:last-child .home-index__item {
    border-bottom: 0;
}

.home-index__item {
    display: grid;
    grid-template-columns: minmax(10rem, 1fr) 1.4fr auto;
    gap: var(--space-2) var(--space-6);
    align-items: baseline;
    padding: var(--space-5) var(--space-2);
    color: inherit;
    text-decoration: none;
    border-bottom: var(--border-width) solid var(--border);
    transition: background-color var(--duration-base) var(--ease-out);
}

.home-index__name {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: var(--weight-medium);
    line-height: 1.05;
    letter-spacing: var(--tracking-tight);
    transition: color var(--duration-base) var(--ease-out),
                transform var(--duration-base) var(--ease-out);
}

.home-index__text {
    color: var(--text-primary);
    text-wrap: pretty;
}

.home-index__arrow {
    align-self: center;
    color: var(--text-muted);
    transition: color var(--duration-base) var(--ease-out),
                transform var(--duration-base) var(--ease-out);
}

.home-index__item:hover,
.home-index__item:focus-visible {
    color: inherit;
    background: linear-gradient(90deg, var(--accent-soft), transparent 80%);
}

.home-index__item:hover .home-index__name,
.home-index__item:focus-visible .home-index__name {
    color: var(--accent-ink);
    transform: translateX(var(--space-2));
}

.home-index__item:hover .home-index__arrow,
.home-index__item:focus-visible .home-index__arrow {
    color: var(--accent-ink);
    transform: translate(3px, -3px);
}

@media (max-width: 639px) {
    .home-index__item {
        grid-template-columns: 1fr auto;
    }

    .home-index__text {
        grid-column: 1;
        grid-row: 2;
    }

    .home-index__arrow {
        grid-row: 1 / span 2;
        grid-column: 2;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-index__name,
    .home-index__arrow {
        transition: none;
    }
}

/* Cuatro hechos en fila, separados por un filete, sin caja alrededor. */
.home-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
    gap: var(--space-6) var(--space-5);
    margin: 0;
}

.home-facts__item {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-5);
    background: color-mix(in srgb, var(--bg-surface) 88%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: var(--border-width) solid var(--border);
    border-left: var(--border-width-thick) solid var(--border-accent);
    border-radius: var(--radius-md);
}

.home-facts__title {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: var(--weight-medium);
    color: var(--text-primary);
}

.home-facts__text {
    margin: 0;
    color: var(--text-primary);
}

/* El recuento de «¿Te sirvio?», bajo «Por que Yuna». */
.home-proof {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin: var(--space-5) 0 0;
    font-size: var(--text-lg);
    color: var(--text-primary);
}

.home-proof .material-symbols-rounded {
    color: var(--secondary-contrast);
}


/* Las lecturas populares, todas en una fila en el ordenador: con la
   rejilla comun la quinta caia sola en una segunda fila. */
.grid.home-spreads {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}