/* ============================================================
   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(2rem, 9vw, 4.75rem);
    font-weight: var(--weight-bold);
    line-height: 1.02;
    letter-spacing: -0.015em;
    margin: 0;
}

/* Styled by element, not by class, so translators never see CSS in the
   string they translate. Mirrors `.gilded` in effects.css. */
.hero__title em {
    font-style: normal;
    display: inline-block;
    /* Uses the ink golds, not the decorative ones: on the light theme the
       bright gold measured 2.52 against the page, below the 3.0 that large
       text needs. */
    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;
}

.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-6);
    justify-content: center;
    margin-top: var(--space-3);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-muted);
}

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

.hero__stat strong {
    display: block;
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: var(--weight-bold);
    letter-spacing: 0;
    text-transform: none;
    /* Violet leads; gold stays for the sparkle. */
    color: var(--secondary-contrast);
    /* 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. */
    text-shadow: 0 0 18px color-mix(in srgb, var(--gold) 45%, transparent);
}

/* --- 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-xl);
    animation: portrait-float 9s var(--ease-in-out) infinite;
}

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

/* 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. */
.hero__portrait::after {
    content: "";
    position: absolute;
    inset: -6%;
    z-index: -1;
    border-radius: 50%;
    border: 1px dashed color-mix(in srgb, var(--gold) 38%, transparent);
    animation: wheel-turn 64s linear infinite;
}

@keyframes wheel-turn {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .hero__portrait img,
    .hero__portrait::before,
    .hero__portrait::after {
        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 --------------------------------------------- */

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

.step {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-5);
    background: color-mix(in srgb, var(--bg-surface) 82%, transparent);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-lg);
    transition: transform var(--duration-base) var(--ease-out),
                border-color var(--duration-base) var(--ease-out);
}

.step:hover {
    transform: translateY(-4px);
    border-color: var(--border-accent);
}

.step::before {
    counter-increment: step;
    content: counter(step);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    /* The sans, not the display serif: Cormorant draws old-style figures, so
       the 1 came out as a small roman numeral and the 3 and 4 dropped below
       the baseline. Inter has lining figures, which is what a counter wants. */
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: var(--weight-bold);
    font-variant-numeric: lining-nums tabular-nums;
    /* The aurora drifts inside each disc, and each one starts a quarter of
       the cycle after the last, so the row reads as a sequence being lit
       rather than four identical buttons. */
    color: var(--text-on-accent);
    background-image: linear-gradient(
        120deg,
        var(--accent),
        var(--secondary),
        var(--gold-bright),
        var(--secondary),
        var(--accent)
    );
    background-size: 320% 100%;
    border-radius: var(--radius-pill);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 50%, transparent),
                0 0 16px color-mix(in srgb, var(--secondary) 35%, transparent);
    animation: step-aurora 7s linear infinite,
               step-breathe 3.4s var(--ease-in-out) infinite;
    animation-delay: calc(var(--step-index, 0) * -0.85s);
}

@keyframes step-aurora {
    to { background-position: 320% 50%; }
}

@keyframes step-breathe {
    0%, 100% {
        box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 50%, transparent),
                    0 0 14px color-mix(in srgb, var(--secondary) 30%, transparent);
    }
    50% {
        box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 75%, transparent),
                    0 0 26px color-mix(in srgb, var(--secondary) 55%, transparent),
                    0 0 10px color-mix(in srgb, var(--gold) 35%, transparent);
    }
}

/* The disc lifts and brightens when its card is hovered, so the whole step
   answers rather than just the text. */
.step:hover::before,
.step:focus-within::before {
    transform: translateY(-3px) scale(1.08);
    box-shadow: 0 0 0 1px var(--gold),
                0 0 30px color-mix(in srgb, var(--secondary) 65%, transparent);
}

.step::before {
    transition: transform var(--duration-base) var(--ease-out);
}

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

    .step:hover::before,
    .step:focus-within::before {
        transform: none;
    }
}

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

.step__text {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    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-xl);
    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-gates {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-5);
}

.home-gates > * {
    flex: 0 1 17rem;
}

@media (max-width: 479px) {
    .home-gates > * {
        flex-basis: 100%;
    }
}