/* Kirjautumissivujen animoitu tausta (AuthLayout.razor, 2026-10-28).
   Yksi 16 s kierto: viivat piirtyvät (stroke-dashoffset, pathLength=1) → pidetään → pyyhkiytyvät samassa järjestyksessä.
   --d = elementin viive kierron sisällä. */
.auth-stage {
    --as-ink: #1e3a8a;
    --as-brand: #1d4ed8;
    --as-dim: #64748b;
    --as-grid: rgba(37, 99, 235, .07);
    --as-grid2: rgba(37, 99, 235, .035);
    --as-sky: radial-gradient(1200px 700px at 50% 40%, #ffffff 0%, #eef3fb 70%, #e6eef9 100%);
    --as-cloud: #ffffff;
    --as-cycle: 16s;
    --as-fall: -20px;       /* lumen/lehtien lähtökorkeus; korkealla näytöllä ylempää (ks. media max-aspect-ratio) */
    --as-fallk: 1;          /* putoamisajan kerroin samaan suhteeseen */
    --as-note: #ffffff;
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 24px 16px;
    box-sizing: border-box;
    background-color: #f4f7fb;
    background-image:
        linear-gradient(var(--as-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--as-grid) 1px, transparent 1px),
        linear-gradient(var(--as-grid2) 1px, transparent 1px),
        linear-gradient(90deg, var(--as-grid2) 1px, transparent 1px),
        var(--as-sky);
    background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px, 100% 100%;
    transition: background-color .6s;
}
/* ── Vuorokaudenajat (AuthLayout: data-tod) ── */
.auth-stage[data-tod="dawn"] {
    --as-sky: linear-gradient(180deg, #c7d2fe 0%, #fbcfe8 45%, #fed7aa 78%, #fff7ed 100%);
    --as-grid: rgba(79, 70, 229, .06); --as-grid2: rgba(79, 70, 229, .03);
    --as-ink: #3730a3; --as-dim: #6b7280; --as-cloud: #fff1f2;
}
.auth-stage[data-tod="dusk"] {
    --as-sky: linear-gradient(180deg, #1e1b4b 0%, #4c1d95 32%, #db2777 62%, #fb923c 84%, #fed7aa 100%);
    --as-grid: rgba(255, 255, 255, .06); --as-grid2: rgba(255, 255, 255, .03);
    --as-ink: #1e1b4b; --as-dim: #ffedd5; --as-brand: #312e81; --as-cloud: #fbcfe8;
}
.auth-stage[data-tod="night"] {
    --as-sky: radial-gradient(1400px 800px at 50% 10%, #172554 0%, #0b1530 55%, #020617 100%);
    --as-grid: rgba(148, 163, 184, .07); --as-grid2: rgba(148, 163, 184, .035);
    --as-ink: #93c5fd; --as-dim: #cbd5e1; --as-brand: #60a5fa; --as-cloud: rgba(148, 163, 184, .18);
    --as-note: #0f172a;
    background-color: #020617;
}
.auth-stage[data-tod="dusk"] .as-line, .auth-stage[data-tod="dusk"] .as-dim { opacity: .7; }
.auth-stage[data-tod="night"] .as-line, .auth-stage[data-tod="night"] .as-dim { opacity: .75; }
.auth-stage[data-tod="dusk"] .as-area-lbl { fill: #fff; }
.auth-scene { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; overflow: visible; }
/* Korkea/kapeahko näyttö (kapeampi kuin 16:9): koko piirros leveyteen alareunaan, ettei talo rajaudu pois.
   Taivas (tähdet y < 0, lumi/lehdet ylempää) jatkuu piirroksen yläpuolelle. */
@media (max-aspect-ratio: 16/9) {
    .auth-scene { top: auto; height: auto; aspect-ratio: 16 / 9; }
    .auth-stage { --as-fall: -900px; --as-fallk: 2; }
}
.auth-content { position: relative; z-index: 1; width: 100%; display: flex; justify-content: center; }
.auth-content > div:first-child { box-shadow: 0 10px 40px rgba(15, 23, 42, .12) !important; }

/* Viivat */
.as-line, .as-dim {
    fill: none;
    stroke: var(--as-ink);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    opacity: .55;
    animation: as-draw var(--as-cycle) cubic-bezier(.6, 0, .3, 1) var(--d, 0s) infinite both;
}
.as-thin { stroke-width: 3; }
.as-ground { stroke-width: 3; opacity: .35; }
.as-roof { stroke: var(--as-brand); stroke-width: 10; opacity: .9; }
.as-dim { stroke: var(--as-dim); stroke-width: 2; opacity: .8; }
.as-txt {
    font: 600 22px Inter, "Segoe UI", system-ui, sans-serif;
    fill: var(--as-dim);
    opacity: 0;
    font-variant-numeric: tabular-nums;
    animation: as-pop var(--as-cycle) ease var(--d, 0s) infinite both;
}
.as-small { font-size: 18px; }
.as-area-lbl { font-size: 26px; font-weight: 700; fill: var(--as-brand); }
.as-area {
    fill: #3b82f6;
    opacity: 0;
    animation: as-area var(--as-cycle) ease var(--d, 0s) infinite both;
}

@keyframes as-draw {
    0%        { stroke-dashoffset: 1; opacity: .55; }
    12%       { stroke-dashoffset: 0; }
    78%       { stroke-dashoffset: 0; opacity: .55; }
    90%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes as-pop {
    0%        { opacity: 0; transform: translateY(6px); }
    5%, 72%   { opacity: 1; transform: none; }
    82%, 100% { opacity: 0; transform: none; }
}
@keyframes as-area {
    0%        { opacity: 0; }
    6%        { opacity: .16; }
    12%       { opacity: .08; }
    18%       { opacity: .14; }
    60%       { opacity: .1; }
    70%, 100% { opacity: 0; }
}

/* Mittapiste kulkee harjaa pitkin (offset-path) */
.as-probe {
    fill: var(--as-brand);
    stroke: #fff;
    stroke-width: 3;
    offset-path: path("M140 492 L380 300 L620 492");
    offset-rotate: 0deg;
    opacity: 0;
    filter: drop-shadow(0 0 6px rgba(37, 99, 235, .7));
    animation: as-probe var(--as-cycle) ease-in-out 1.8s infinite both;
}
@keyframes as-probe {
    0%        { offset-distance: 0%; opacity: 0; }
    4%        { opacity: 1; }
    24%       { offset-distance: 100%; opacity: 1; }
    28%       { offset-distance: 100%; opacity: 0; }
    100%      { offset-distance: 100%; opacity: 0; }
}

/* Nosturi: vaunu liikkuu puomilla, koukku heiluu */
.as-trolley { animation: as-trolley 14s ease-in-out infinite; }
@keyframes as-trolley {
    0%, 100% { transform: translateX(0); }
    45%, 55% { transform: translateX(-90px); }
}
.as-hook { transform-origin: 1452px 272px; transform-box: view-box; animation: as-swing 4.6s ease-in-out infinite; }
@keyframes as-swing {
    0%, 100% { transform: rotate(2.4deg); }
    50%      { transform: rotate(-2.4deg); }
}

/* Pilvet ajelehtivat */
.as-cloud path { fill: var(--as-cloud); opacity: .9; }
.as-cloud-1 { animation: as-cloud 70s linear infinite; }
.as-cloud-2 { animation: as-cloud 95s linear -40s infinite; }
@keyframes as-cloud {
    from { transform: translate(-200px, 150px); }
    to   { transform: translate(1800px, 150px); }
}
.as-cloud-2 { animation-name: as-cloud2; }
@keyframes as-cloud2 {
    from { transform: translate(-200px, 210px); }
    to   { transform: translate(1800px, 210px); }
}

/* ── Aurinko / kuu / tähdet ── */
.as-sun-halo { fill: #fde68a; opacity: .55; }
.as-sun-disc { fill: #fcd34d; }
.as-sun { animation: as-sunpulse 6s ease-in-out infinite; }
.as-sun-day { transform: translate(1470px, 110px); }
.as-sun-dawn { transform: translate(170px, 300px); }
.as-sun-dawn .as-sun-disc { fill: #fb923c; } .as-sun-dawn .as-sun-halo { fill: #fda4af; }
.as-sun-dusk { transform: translate(1440px, 380px); }
.as-sun-dusk .as-sun-disc { fill: #f97316; } .as-sun-dusk .as-sun-halo { fill: #fb7185; opacity: .7; }
@keyframes as-sunpulse { 0%, 100% { opacity: 1; } 50% { opacity: .88; } }
.as-star { fill: #fff; animation: as-twinkle 4s ease-in-out infinite; }
@keyframes as-twinkle { 0%, 100% { opacity: .9; } 50% { opacity: .15; } }

/* ── Revontulet: pehmeä hehku + "verhon" pystyjuovat (katkoviiva leveällä viivalla), aaltoilevat ja sykkivät ── */
.as-aurora { mix-blend-mode: screen; }
.as-au-glow { fill: none; stroke: #34d399; stroke-width: 90; opacity: .28; animation: as-au-wave 14s ease-in-out infinite; }
.as-au-rays { fill: none; stroke: #6ee7b7; stroke-width: 64; stroke-dasharray: 3 8; opacity: .36;
    animation: as-au-wave 14s ease-in-out infinite, as-au-shimmer 3.2s linear infinite; }
.as-au-2.as-au-glow { stroke: #a78bfa; opacity: .22; animation-duration: 19s; animation-direction: reverse; }
.as-au-2.as-au-rays { stroke: #67e8f9; opacity: .32; animation-duration: 19s, 4.4s; animation-direction: reverse, normal; }
@keyframes as-au-wave {
    0%, 100% { transform: translate(0, 0) scaleY(1); opacity: .26; }
    50% { transform: translate(-60px, 14px) scaleY(1.15); opacity: .46; }
}
@keyframes as-au-shimmer { to { stroke-dashoffset: -40; } }

/* ── Linnut ── */
.as-bird { animation: as-fly 22s linear infinite; }
.as-wing { fill: none; stroke: var(--as-ink); stroke-width: 2.6; stroke-linecap: round; opacity: .6; transform-box: fill-box; transform-origin: center; animation: as-flap .9s ease-in-out infinite; }
@keyframes as-fly { from { transform: translate(-80px, var(--by, 150px)); } to { transform: translate(1700px, calc(var(--by, 150px) - 60px)); } }
@keyframes as-flap { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(-.5); } }

/* ── Puu ja kukat ── */
.as-crown circle { opacity: 0; animation: as-pop var(--as-cycle) ease 2s infinite both; }
.as-tree-spring .as-crown circle { fill: #86efac; }
.as-tree-summer .as-crown circle { fill: #22c55e; }
.as-tree-autumn .as-crown circle { fill: #f59e0b; }
.as-tree-autumn .as-crown circle:nth-child(2) { fill: #ea580c; }
.as-tree-autumn .as-crown circle:nth-child(3) { fill: #facc15; }
.auth-stage[data-tod="night"] .as-crown circle, .auth-stage[data-tod="dusk"] .as-crown circle { filter: brightness(.55); }
.as-blossom { fill: #fbcfe8; stroke: #f472b6; stroke-width: 1.5; opacity: 0; animation: as-pop var(--as-cycle) ease 2.6s infinite both; }
.as-snowcap { fill: none; stroke: #fff; stroke-width: 6; stroke-linecap: round; }
.as-flower path { stroke: #16a34a; stroke-width: 2.5; }
.as-flower circle { fill: var(--fc); }
.as-flower { opacity: 0; animation: as-pop var(--as-cycle) ease 1.2s infinite both; }

/* ── Talvi: lumikenttä, katon lumi, hiutaleet ── */
.as-snowfield { fill: #ffffff; opacity: .85; }
.auth-stage[data-tod="night"] .as-snowfield { fill: #cbd5e1; opacity: .16; }
.auth-stage[data-tod="dusk"] .as-snowfield { fill: #fde7f3; opacity: .55; }
.as-roofsnow { fill: none; stroke: #fff; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; opacity: 0;
    animation: as-pop var(--as-cycle) ease var(--d, 0s) infinite both; }
.as-flake { fill: #fff; stroke: rgba(100, 116, 139, .35); stroke-width: .8; animation: as-snow 14s linear infinite; }
.auth-stage[data-tod="night"] .as-flake { stroke: none; opacity: .9; }
@keyframes as-snow {
    0% { transform: translate(0, var(--as-fall)); }
    25% { transform: translate(14px, calc(var(--as-fall) + (920px - var(--as-fall)) * .25)); }
    50% { transform: translate(-6px, calc(var(--as-fall) + (920px - var(--as-fall)) * .5)); }
    75% { transform: translate(12px, calc(var(--as-fall) + (920px - var(--as-fall)) * .75)); }
    100% { transform: translate(0, 920px); }
}

/* ── Syksy: putoavat lehdet ── */
.as-leaf { transform-box: fill-box; transform-origin: center; animation: as-leaf 14s linear infinite; }
.as-leaf-0 { fill: #f97316; } .as-leaf-1 { fill: #dc2626; } .as-leaf-2 { fill: #eab308; }
@keyframes as-leaf {
    0% { transform: translate(0, calc(var(--as-fall) - 10px)) rotate(0deg) scale(var(--ls, 1)); }
    25% { transform: translate(40px, calc(var(--as-fall) + (760px - var(--as-fall)) * .25)) rotate(140deg) scale(var(--ls, 1)); }
    50% { transform: translate(-10px, calc(var(--as-fall) + (760px - var(--as-fall)) * .5)) rotate(250deg) scale(var(--ls, 1)); }
    75% { transform: translate(50px, calc(var(--as-fall) + (760px - var(--as-fall)) * .75)) rotate(400deg) scale(var(--ls, 1)); }
    100% { transform: translate(10px, 760px) rotate(520deg) scale(var(--ls, 1)); opacity: 0; }
}

/* ── Ilta/yö: ikkunavalot syttyvät, nosturin huippuvalot vilkkuvat ── */
.as-win { fill: #fcd34d; opacity: 0; animation: as-winlight var(--as-cycle) ease var(--d, 0s) infinite both; }
@keyframes as-winlight { 0%, 6% { opacity: 0; } 10%, 80% { opacity: .85; } 90%, 100% { opacity: 0; } }
.as-beacon { fill: #ef4444; animation: as-beacon 1.6s steps(1) infinite; }
@keyframes as-beacon { 0%, 60% { opacity: 1; } 61%, 100% { opacity: .15; } }

/* ── Joulu: valot räystäällä ── */
.as-xmas { opacity: 0; animation: as-pop var(--as-cycle) ease var(--d, 0s) infinite both; }
.as-bulb { animation: as-bulb 1.4s ease-in-out infinite; }
.as-bulb-0 { fill: #ef4444; } .as-bulb-1 { fill: #facc15; } .as-bulb-2 { fill: #22c55e; } .as-bulb-3 { fill: #3b82f6; }
@keyframes as-bulb { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ── Työmaatarkastaja (18 s kierto): kävely 0–28 %, kuvat 30–44 % (salama 34 + 39 %), muistiinpano 44–66 %, paluu 68–96 % ── */
.as-insp { animation: as-insp-move 18s linear infinite; }
@keyframes as-insp-move {
    0%        { transform: translateX(0); }
    28%, 68%  { transform: translateX(-227px); }
    96%, 100% { transform: translateX(0); }
}
.as-insp-face { animation: as-insp-turn 18s linear infinite; }
@keyframes as-insp-turn { 0%, 66.9% { transform: scaleX(1); } 67%, 99.9% { transform: scaleX(-1); } 100% { transform: scaleX(1); } }
.as-insp-limb { fill: none; stroke: var(--as-ink); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.as-insp-head { fill: #f6d3b3; stroke: var(--as-ink); stroke-width: 2.4; }
.as-insp-hat { fill: #facc15; stroke: #a16207; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.as-insp-vest { fill: #f97316; stroke: #c2410c; stroke-width: 1.6; stroke-linejoin: round; }
.as-insp-stripe { stroke: #fef9c3; stroke-width: 2.2; }
.as-insp-board { fill: #fff; stroke: #92400e; stroke-width: 2; }
.as-insp-cam { fill: #1f2937; stroke: #0f172a; stroke-width: 1.4; }
.as-insp-lens { fill: #93c5fd; }
.as-insp-penline { stroke: #1d4ed8; stroke-width: 2; stroke-linecap: round; }
.auth-stage[data-tod="night"] .as-insp-face, .auth-stage[data-tod="dusk"] .as-insp-face { filter: brightness(.82); }

.as-insp-leg { transform-box: fill-box; transform-origin: 50% 0; animation: as-insp-step .62s ease-in-out infinite alternate; }
.as-insp-leg-b { animation-delay: -.62s; }
@keyframes as-insp-step { from { transform: rotate(20deg); } to { transform: rotate(-20deg); } }
.as-insp-legs-walk { animation: as-insp-show-walk 18s linear infinite; }
.as-insp-legs-stand { animation: as-insp-show-stand 18s linear infinite; }
@keyframes as-insp-show-walk  { 0%, 27.9% { opacity: 1; } 28%, 67.9% { opacity: 0; } 68%, 95.9% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes as-insp-show-stand { 0%, 27.9% { opacity: 0; } 28%, 67.9% { opacity: 1; } 68%, 95.9% { opacity: 0; } 96%, 100% { opacity: 1; } }

.as-insp-p-walk  { animation: as-insp-pose-walk 18s linear infinite; }
.as-insp-p-photo { animation: as-insp-pose-photo 18s linear infinite; }
.as-insp-p-write { animation: as-insp-pose-write 18s linear infinite; }
@keyframes as-insp-pose-walk  { 0%, 29.9% { opacity: 1; } 30%, 65.9% { opacity: 0; } 66%, 100% { opacity: 1; } }
@keyframes as-insp-pose-photo { 0%, 29.9% { opacity: 0; } 30%, 43.9% { opacity: 1; } 44%, 100% { opacity: 0; } }
@keyframes as-insp-pose-write { 0%, 43.9% { opacity: 0; } 44%, 65.9% { opacity: 1; } 66%, 100% { opacity: 0; } }
.as-insp-flash { fill: #fffbeb; opacity: 0; animation: as-insp-flash 18s linear infinite; }
@keyframes as-insp-flash {
    0%, 33.9% { opacity: 0; } 34% { opacity: .95; } 35.5% { opacity: 0; }
    38.9% { opacity: 0; } 39% { opacity: .95; } 40.5%, 100% { opacity: 0; }
}
.as-insp-pen { animation: as-insp-pen .45s ease-in-out infinite alternate; }
@keyframes as-insp-pen { from { transform: translate(0, 0); } to { transform: translate(-2.5px, 1.2px); } }

/* Muistiinpanokupla: kuva ilmestyy salaman jälkeen, rivit kirjoittuvat, lopuksi kuittaus */
.as-insp-note { opacity: 0; animation: as-insp-note 18s ease infinite; }
@keyframes as-insp-note { 0%, 34% { opacity: 0; } 36%, 67% { opacity: 1; } 71%, 100% { opacity: 0; } }
.as-insp-paper { fill: var(--as-note); stroke: var(--as-ink); stroke-width: 1.6; stroke-opacity: .45; filter: drop-shadow(0 3px 6px rgba(15, 23, 42, .15)); }
.as-insp-thumb rect { fill: #dbeafe; stroke: var(--as-ink); stroke-width: 1.4; stroke-opacity: .6; }
.as-insp-thumb path { fill: none; stroke: var(--as-brand); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.as-insp-thumb { opacity: 0; animation: as-insp-thumb 18s ease infinite; }
@keyframes as-insp-thumb { 0%, 34% { opacity: 0; } 35.5%, 100% { opacity: 1; } }
.as-insp-ln, .as-insp-ok { fill: none; stroke: var(--as-ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: .6;
    stroke-dasharray: 1; stroke-dashoffset: 1; animation: 18s linear infinite; }
.as-insp-ok { stroke: #16a34a; stroke-width: 3.2; opacity: 1; animation-name: as-insp-ok; }
.as-insp-ln1 { animation-name: as-insp-ln1; } .as-insp-ln2 { animation-name: as-insp-ln2; }
.as-insp-ln3 { animation-name: as-insp-ln3; } .as-insp-ln4 { animation-name: as-insp-ln4; }
@keyframes as-insp-ln1 { 0%, 46% { stroke-dashoffset: 1; } 50%, 100% { stroke-dashoffset: 0; } }
@keyframes as-insp-ln2 { 0%, 50% { stroke-dashoffset: 1; } 53%, 100% { stroke-dashoffset: 0; } }
@keyframes as-insp-ln3 { 0%, 53% { stroke-dashoffset: 1; } 58%, 100% { stroke-dashoffset: 0; } }
@keyframes as-insp-ln4 { 0%, 58% { stroke-dashoffset: 1; } 61%, 100% { stroke-dashoffset: 0; } }
@keyframes as-insp-ok  { 0%, 62% { stroke-dashoffset: 1; } 64.5%, 100% { stroke-dashoffset: 0; } }

/* Kapea näyttö: piirros haaleana kortin takana */
@media (max-width: 760px) {
    /* Puhelimessa talo näkyy kortin alla (piirros alalaitaan, nosturi rajautuu pois). */
    .auth-scene { inset: auto auto 0 -6%; width: 170%; height: 42%; opacity: .5; }
    .auth-stage { align-items: flex-start; padding-top: 12vh; }
}

/* Liikeherkät käyttäjät: valmis piirros ilman animaatioita */
@media (prefers-reduced-motion: reduce) {
    .as-line, .as-dim, .as-txt, .as-area, .as-probe, .as-trolley, .as-hook, .as-cloud-1, .as-cloud-2,
    .as-bird, .as-wing, .as-crown circle, .as-blossom, .as-flower, .as-roofsnow, .as-win, .as-xmas, .as-bulb,
    .as-au-glow, .as-au-rays, .as-star, .as-sun,
    .as-insp, .as-insp-face, .as-insp-leg, .as-insp-legs-walk, .as-insp-legs-stand, .as-insp-p-walk, .as-insp-p-photo,
    .as-insp-p-write, .as-insp-flash, .as-insp-pen, .as-insp-note, .as-insp-thumb, .as-insp-ln, .as-insp-ok { animation: none !important; }
    /* Tarkastaja seisoo paikallaan muistiinpano valmiina */
    .as-insp { transform: translateX(-227px); }
    .as-insp-legs-walk, .as-insp-p-walk, .as-insp-p-photo, .as-insp-flash { opacity: 0; }
    .as-insp-ln, .as-insp-ok { stroke-dashoffset: 0; }
    .as-crown circle, .as-blossom, .as-flower, .as-roofsnow, .as-xmas { opacity: 1; }
    .as-win { opacity: .85; }
    .as-flake, .as-leaf, .as-bird { display: none; }
    .as-line, .as-dim { stroke-dashoffset: 0; }
    .as-txt { opacity: 1; }
    .as-area { opacity: .1; }
    .as-probe { opacity: 0; }
}