/*
 * Login, register and the other account screens (layouts.auth), loaded only there.
 * Every colour comes from the --auth-* tokens in ui-core.css, which switch between day and night
 * (and turn a dusky mauve and orange in the Halloween season); the Halloween dress itself lives in season-halloween.css.
 *   .auth-scene ...... the fixed landscape behind the page (x-shop.auth-scene): sky and stars, the sun setting as the moon
 *                      rises at the top right (.sky-orb, ui-core.css), the mountains (x-shop.scene-land, styled in ui-core.css) with the video
 *                      author's wolf (scene-wolf.js); day cross-fades into night with the page (shop-core.js); in the Halloween season his bats
 *                      and witch fly over it (x-shop.sky-flight, season-halloween.css)
 *   .auth-shell ...... the small glass card in the middle of the screen, holding only the form
 *   .auth-main ....... serif title, lead, glass fields and the glowing button
 *   flashlight ....... at night the eye of a password field lights a torch (.auth-stage.flashlight-on): the beam
 *                      (.flash-beam), the torch on the eye (.flashlight) and the letters the beam falls on (.password-reveal,
 *                      over the field, whose own text turns transparent); the owl (.auth-owl) wakes in its light
 * Anything that moves runs only under prefers-reduced-motion: no-preference.
 */

@layer components {
    /* ---------- Landscape behind the page ---------- */
    .auth-scene { --orb-size: 54px; --orb-right: 9%; --orb-top: calc(var(--sticky-top) + 22px);
        position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: linear-gradient(180deg, var(--auth-sky-top), var(--auth-sky-high) 44%, var(--auth-sky-low) 78%, var(--auth-sky-foot)); }
    .auth-scene-stars { position: absolute; inset: 0 0 45%;
        background:
            radial-gradient(1.6px 1.6px at 6% 18%, var(--auth-star) 98%, transparent),
            radial-gradient(1px 1px at 14% 42%, var(--auth-star) 98%, transparent),
            radial-gradient(1.3px 1.3px at 22% 10%, var(--auth-star) 98%, transparent),
            radial-gradient(1px 1px at 31% 30%, var(--auth-star) 98%, transparent),
            radial-gradient(1.8px 1.8px at 39% 14%, var(--auth-star) 98%, transparent),
            radial-gradient(1px 1px at 47% 48%, var(--auth-star) 98%, transparent),
            radial-gradient(1.4px 1.4px at 56% 22%, var(--auth-star) 98%, transparent),
            radial-gradient(1px 1px at 63% 8%, var(--auth-star) 98%, transparent),
            radial-gradient(1.6px 1.6px at 71% 36%, var(--auth-star) 98%, transparent),
            radial-gradient(1px 1px at 79% 16%, var(--auth-star) 98%, transparent),
            radial-gradient(1.3px 1.3px at 86% 44%, var(--auth-star) 98%, transparent),
            radial-gradient(1.8px 1.8px at 93% 12%, var(--auth-star) 98%, transparent);
    }
    .auth-scene-stars::after { content: ''; position: absolute; inset: 0;
        background:
            radial-gradient(1.2px 1.2px at 10% 28%, var(--auth-star) 98%, transparent),
            radial-gradient(1.5px 1.5px at 27% 52%, var(--auth-star) 98%, transparent),
            radial-gradient(1px 1px at 44% 6%, var(--auth-star) 98%, transparent),
            radial-gradient(1.5px 1.5px at 60% 40%, var(--auth-star) 98%, transparent),
            radial-gradient(1.2px 1.2px at 75% 26%, var(--auth-star) 98%, transparent),
            radial-gradient(1px 1px at 97% 32%, var(--auth-star) 98%, transparent);
    }
    /* The sun and the moon (.sky-orb, ui-core.css) sit where these say; the witch circles the moon there. */
    .auth-scene .sky-flight { --moon-right: var(--orb-right); --moon-top: calc(var(--orb-top) - var(--sticky-top)); --moon-size: var(--orb-size); }

    .auth-scene-flies > i { position: absolute; left: var(--x); top: var(--y); width: 4px; height: 4px; border-radius: 50%; background: var(--auth-firefly); box-shadow: 0 0 8px 2px var(--auth-firefly); }
    .auth-scene-leaves > svg { position: absolute; left: var(--x); top: -30px; width: 18px; height: 18px; scale: var(--s); fill: var(--hw-orange); opacity: 0; }
    .auth-scene-leaves > svg.is-red { fill: var(--hw-orange-deep); }
    .auth-scene-leaves > svg.is-gold { fill: var(--hw-ember); }
    :root[data-theme="light"] .auth-scene-leaves > svg:nth-child(2n) { display: none; }

    /* ---------- The glass card ---------- */
    main.container:has(> .auth-stage) { padding-top: 0; padding-bottom: 0; }
    /* On a phone the card sits near the top (room for the pumpkins on its frame), the moon behind its glass, so the whole
       form shows above the bottom bar; on a larger screen it sits in the middle. */
    .auth-stage { display: grid; place-items: start center; min-height: calc(100svh - var(--sticky-top)); padding: 40px 14px 32px; }
    .auth-shell { position: relative; width: 100%; max-width: 420px; padding: 6px; border: 1px solid var(--auth-glass-line); border-radius: 24px; background: var(--auth-glass); box-shadow: var(--auth-glass-shadow); -webkit-backdrop-filter: blur(18px) saturate(1.25); backdrop-filter: blur(18px) saturate(1.25); }

    /* ---------- The form ---------- */
    .auth-main { position: relative; padding: 22px 16px 18px; }
    .auth-main h1 { margin: 0; font-family: var(--font-display); font-size: 28px; font-weight: 700; line-height: 1.15; text-align: center; color: var(--ink); }
    .auth-lead { max-width: 320px; margin: 6px auto 20px; color: var(--muted); font-size: 13.5px; line-height: 1.5; text-align: center; }
    .auth-main h1:last-child, .auth-main h1 + :not(.auth-lead) { margin-bottom: 20px; }
    .auth-main a:not(.btn) { color: var(--auth-accent); }
    .auth-main .auth-input > input { min-height: 48px; border-color: color-mix(in srgb, var(--auth-glass-line) 45%, var(--field-border)); border-radius: 14px; background: var(--auth-field); transition: border-color .2s, box-shadow .2s, background-color .2s; }
    .auth-main .auth-input > input:focus { border-color: var(--auth-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--auth-accent) 18%, transparent); }
    .auth-main .auth-input:focus-within > i { color: var(--auth-accent); }
    .auth-main .auth-input.is-invalid > input { border-color: var(--bad); }
    .auth-main input[type=checkbox] { accent-color: var(--auth-accent); }
    .auth-main .auth-submit { border: 0; border-radius: 14px; background: var(--auth-btn); color: #fff; box-shadow: 0 12px 26px -12px var(--auth-btn-glow); transition: box-shadow .25s, translate .25s, filter .25s; }
    .auth-main .auth-submit:hover { translate: 0 -1px; filter: brightness(1.06); box-shadow: 0 16px 34px -10px var(--auth-btn-glow), 0 0 0 4px color-mix(in srgb, var(--auth-btn-glow) 30%, transparent); }
    .auth-main .auth-submit:active { translate: 0 1px; }

    /* ---------- The flashlight (night) ---------- */
    .flash-beam, .password-reveal, .flashlight { position: fixed; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility 0s linear .7s; }
    .flash-beam { z-index: 991; filter: blur(12px); transform-origin: 0 50%; }
    .flash-beam::before { content: ''; position: absolute; inset: 0; background: var(--auth-beam); -webkit-mask: url(season/beam-mask.svg) 0 0 / 100% 100% no-repeat; mask: url(season/beam-mask.svg) 0 0 / 100% 100% no-repeat; }
    .password-reveal { z-index: 992; overflow: hidden; color: var(--auth-reveal-ink); }
    .password-reveal > span { position: absolute; inset: 0 auto 0 0; display: flex; white-space: pre; }
    .password-reveal .reveal-char { --lit: 0; position: relative; flex: none; width: var(--reveal-cell, 1ch); height: 100%; }
    .reveal-char > span { position: absolute; inset: 0; display: grid; place-items: center; transition: opacity 90ms linear; }
    .reveal-char .masked-char { opacity: calc(1 - var(--lit)); color: var(--auth-reveal-mask); }
    .reveal-char .plain-char { opacity: var(--lit); }
    .flashlight { z-index: 993; display: grid; width: 34px; height: 34px; place-items: center; filter: drop-shadow(0 0 8px var(--auth-flash-glow)); }
    .flashlight img { width: 33px; height: 33px; }
    .auth-stage.flashlight-on :is(.flash-beam, .password-reveal, .flashlight) { opacity: 1; visibility: visible; transition-delay: 0s; }
    /* The lit field keeps its caret but hides its own dots under the revealed letters (spaced to the same cells). */
    .auth-main .auth-input.is-torch-lit > input { color: transparent; -webkit-text-fill-color: transparent; caret-color: var(--auth-caret); letter-spacing: var(--reveal-gap, 0); }
    .auth-main .auth-input.is-torch-lit > input::placeholder { -webkit-text-fill-color: var(--auth-placeholder-lit); letter-spacing: normal; }
    .auth-input.is-torch-lit .auth-eye > i { opacity: 0; }

    /* The owl perched on the field above the lit one, seen only in the beam: it starts, then watches the torch and blinks. */
    .auth-owl { position: absolute; z-index: 2; left: 12px; bottom: calc(100% - 3.5px); width: 50.4px; height: 58.8px; opacity: 0; pointer-events: none; filter: drop-shadow(0 2.8px 4.2px var(--auth-owl-shadow)); transition: opacity .22s ease; }
    .auth-owl .owl-vector { display: block; width: 100%; height: 100%; overflow: visible; }
    .auth-owl .owl-breath { transform-origin: 1500px 3100px; }
    .auth-owl .owl-head { transform-origin: 1500px 1850px; transform: translate(var(--owl-head-x, 0px), var(--owl-head-y, 0px)) rotate(var(--owl-tilt, 0deg)); transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
    .auth-owl .owl-gaze { transform: translate(var(--owl-gaze-x, 0px), var(--owl-gaze-y, 0px)); transition: transform .26s ease-out; }
    .auth-owl .owl-eyes { transform-box: fill-box; transform-origin: center; }

    @media (min-width: 600px) {
        .auth-scene { --orb-size: 76px; --orb-top: calc(var(--sticky-top) + 4vh); }
        .auth-stage { place-items: center; padding: 56px 24px; }
        .auth-main { padding: 28px 30px 24px; }
        .auth-main h1 { font-size: 34px; }
    }
    @media (min-width: 1100px) {
        .auth-scene { --orb-size: 100px; --orb-right: 12%; --orb-top: calc(var(--sticky-top) + 6vh); }
    }

    @media (prefers-reduced-motion: no-preference) {
        .auth-shell { animation: auth-rise .8s cubic-bezier(.2, .8, .2, 1) both; }
        .auth-main > * { animation: auth-rise .7s cubic-bezier(.2, .8, .2, 1) both; }
        .auth-main > :nth-child(2) { animation-delay: .08s; }
        .auth-main > :nth-child(3) { animation-delay: .14s; }
        .auth-main > :nth-child(n+4) { animation-delay: .2s; }
        .auth-scene-stars { animation: auth-twinkle 3.4s ease-in-out infinite alternate; }
        .auth-scene-stars::after { animation: auth-twinkle 2.6s ease-in-out -1.3s infinite alternate-reverse; }
        .auth-scene-flies > i { animation: auth-fly 7s ease-in-out var(--d) infinite alternate, auth-blink 2.2s ease-in-out var(--d) infinite alternate; }
        .auth-scene-leaves > svg { animation: auth-fall var(--t) linear var(--d) infinite; }
        .auth-owl.is-lit .owl-breath { animation: owl-breathe 3.6s ease-in-out infinite; }
        .auth-owl.is-lit .owl-eyes { animation: owl-blink 4.8s ease-in-out infinite; }
        .auth-owl.just-lit .owl-vector { animation: owl-startle .65s cubic-bezier(.2, .8, .2, 1); }
    }
    @media (prefers-reduced-motion: reduce) {
        :is(.flash-beam, .password-reveal, .flashlight, .auth-owl, .reveal-char > span) { transition-duration: .01ms; transition-delay: 0s; }
    }
}

@keyframes auth-rise { from { opacity: 0; translate: 0 22px; } to { opacity: 1; translate: 0 0; } }
@keyframes auth-twinkle { from { opacity: .45; } to { opacity: 1; } }
@keyframes auth-fly { 0% { transform: translate(0, 0); } 50% { transform: translate(26px, -18px); } 100% { transform: translate(-14px, -34px); } }
@keyframes auth-blink { from { opacity: .15; } to { opacity: 1; } }
@keyframes auth-fall {
    0% { opacity: 0; transform: translate(0, 0) rotate(0); }
    8% { opacity: .9; }
    50% { transform: translate(60px, 52vh) rotate(220deg); }
    90% { opacity: .8; }
    100% { opacity: 0; transform: translate(-20px, 105vh) rotate(480deg); }
}
@keyframes owl-breathe { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-16px) scale(1.014, 1.018); } }
@keyframes owl-blink { 0%, 5%, 11%, 55%, 61%, 100% { transform: scaleY(1); } 8%, 58% { transform: scaleY(.06); } }
@keyframes owl-startle { 0%, 100% { transform: translateY(0); } 35% { transform: translateY(-4px) rotate(-3deg); } 65% { transform: translateY(-1px) rotate(2deg); } }