/* stage.css — the full-screen animation stage used on every subpage (entré, rooms, demo)
   and the line-art illustration system it plays. The stage fills the viewport under the
   topbar; text sits on top of the scene; "Læs mere" scrolls down to the readable content.

   Phases (set by site.js on [data-stage]):  intro → scene → sum
   Camera: a shared world (perspective floor + dust) pans with --cam and zooms per phase;
   scenes dolly in from the right and out to the left (reversed when going back). */

.fs {
  --fs-h: calc(100svh - var(--ug-topbar-h));
  --fs-gutter: clamp(1.5rem, 5vw, 6rem);
  --fs-ease: cubic-bezier(.65, 0, .35, 1);
  --fs-out: cubic-bezier(.16, 1, .3, 1);
  position: relative; height: var(--fs-h); min-height: 38rem; overflow: hidden; isolation: isolate;
  color: var(--ug-on-brand);
  background:
    radial-gradient(120% 90% at 72% 115%, var(--ug-brand-40) 0%, transparent 55%),
    radial-gradient(90% 70% at 10% -10%, var(--ug-brand-30) 0%, transparent 60%),
    linear-gradient(180deg, var(--ug-brand-20) 0%, var(--ug-brand) 55%, #003a32 100%);
}
.fs::after { /* vignette + legibility scrim behind the copy column */
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(4,21,18,.55) 0%, rgba(4,21,18,.22) 30%, transparent 48%),
    radial-gradient(140% 100% at 50% 50%, transparent 55%, rgba(4,21,18,.45) 100%);
  opacity: 0; transition: opacity 1.2s var(--fs-ease);
}
.fs[data-phase="scene"]::after { opacity: 1; }

/* ── World (camera) ─────────────────────────────────────────────────── */
.fs__world { position: absolute; inset: -6% -24%; z-index: 0; transform: translate3d(calc(var(--cam, 0) * -2.6%), 0, 0) scale(var(--zoom, 1)); transition: transform 2s var(--fs-ease); will-change: transform; }
.fs[data-phase="intro"] .fs__world { --zoom: 1; }
.fs[data-phase="scene"] .fs__world { --zoom: 1.1; }
.fs[data-phase="sum"] .fs__world { --zoom: .94; }
.world { width: 100%; height: 100%; }
.world__floor path { fill: none; stroke: #fff; stroke-opacity: .13; stroke-width: 1.2; }
.world__line { stroke: #fff; stroke-opacity: .2; stroke-width: 1.4; }
.world__dust circle { fill: #fff; opacity: 0; animation: dust 14s linear calc(var(--i) * -.83s) infinite; }
.world__dust circle:nth-child(3n) { animation-duration: 19s; }
.world__dust circle:nth-child(4n+1) { animation-duration: 23s; fill: var(--ug-warning); }
@keyframes dust { 0% { opacity: 0; transform: translate(0, 30px); } 15% { opacity: .45; } 85% { opacity: .3; } 100% { opacity: 0; transform: translate(40px, -120px); } }

/* ── Scenes ─────────────────────────────────────────────────────────── */
.fs__scenes { position: absolute; z-index: 1; top: 5%; bottom: 11%; left: 35%; right: 2.5%; }
.fs__scene { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; visibility: hidden;
  transform: translate3d(9%, 2%, 0) scale(.9); transition: opacity .9s ease, transform 1.5s var(--fs-out), visibility 0s 1.5s; }
.fs__scene .ill { width: 100%; height: 100%; }
.fs__scene.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity 1s ease .35s, transform 1.6s var(--fs-out) .2s, visibility 0s; }
.fs__scene.is-out { opacity: 0; visibility: visible; transform: translate3d(-12%, -1%, 0) scale(1.12); filter: blur(3px); transition: opacity .7s ease, transform 1.1s var(--fs-ease), filter .7s, visibility 0s 1.1s; }
.fs[data-dir="back"] .fs__scene:not(.is-on):not(.is-out) { transform: translate3d(-9%, 2%, 0) scale(.9); }
.fs[data-dir="back"] .fs__scene.is-out { transform: translate3d(12%, -1%, 0) scale(1.12); }
.fs[data-phase="intro"] .fs__scenes, .fs[data-phase="sum"] .fs__scenes { pointer-events: none; }

/* ── Intro ──────────────────────────────────────────────────────────── */
.fs__intro { position: absolute; inset: 0; z-index: 3; display: grid; place-content: center; justify-items: center; text-align: center; padding: 0 var(--fs-gutter) 4rem;
  transition: opacity .8s ease, transform 1.2s var(--fs-ease), filter .8s; }
.fs[data-phase="scene"] .fs__intro, .fs[data-phase="sum"] .fs__intro { opacity: 0; transform: translate3d(0, -8vh, 0) scale(.96); filter: blur(6px); pointer-events: none; }
.fs__eyebrow { font-family: var(--ug-mono); font-size: var(--ug-text-s); letter-spacing: var(--ug-tracking-wide); text-transform: uppercase; color: var(--ug-on-brand-soft); margin: 0 0 1.25rem; display: inline-flex; align-items: center; gap: .75rem; }
.fs__eyebrow::before, .fs__eyebrow::after { content: ""; width: 2.5rem; height: 1px; background: currentColor; opacity: .5; transform-origin: right; }
.fs__eyebrow::after { transform-origin: left; }
.fs__title { color: #fff; font-size: clamp(3rem, 7.4vw, 6.75rem); font-weight: var(--ug-weight-light); line-height: .98; letter-spacing: -.035em; max-width: 14ch; text-wrap: balance; }
.fs__title .em { color: var(--ug-accent-70); }
.fs__lede { color: var(--ug-on-brand-quiet); font-size: clamp(1.1rem, 1.55vw, 1.4rem); max-width: 46ch; margin: 1.5rem auto 0; text-wrap: balance; }
.fs__chips { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; align-items: center; margin-top: 1.75rem; font-family: var(--ug-mono); font-size: var(--ug-text-xs); letter-spacing: var(--ug-tracking-label); text-transform: uppercase; color: var(--ug-on-brand-faint); }
.fs-chip { font-family: var(--ug-font); font-size: var(--ug-text-s); letter-spacing: .01em; text-transform: none; font-weight: var(--ug-weight-semibold); padding: .3rem .75rem; border-radius: var(--ug-radius-pill); color: #fff; text-decoration: none; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.06); display: inline-flex; align-items: center; gap: .4rem; transition: background .2s, border-color .2s; }
.fs-chip::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: var(--k, #fff); }
.fs-chip:hover { color: #fff; background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.6); }
.fs-chip--store { --k: var(--ug-slate-60); } .fs-chip--komplette { --k: var(--ug-brand-70); } .fs-chip--intelligente { --k: var(--ug-accent-60); }

/* intro choreography (runs whenever the phase is entered) */
.fs.is-intro-run .fs__eyebrow { animation: fs-fade .9s ease .1s both; }
.fs.is-intro-run .fs__eyebrow::before, .fs.is-intro-run .fs__eyebrow::after { animation: fs-line 1s var(--fs-out) .25s both; }
.fs.is-intro-run .fs__chips { animation: fs-rise .9s var(--fs-out) 1.5s both; }

/* ── Scene copy ─────────────────────────────────────────────────────── */
.fs__copy { position: absolute; z-index: 3; left: var(--fs-gutter); top: 46%; width: min(31rem, 31vw); transform: translateY(-50%); opacity: 0; pointer-events: none; transition: opacity .6s ease; }
.fs[data-phase="scene"] .fs__copy { opacity: 1; pointer-events: auto; transition-delay: .35s; }
.fs__step { font-family: var(--ug-mono); font-size: var(--ug-text-s); letter-spacing: var(--ug-tracking-label); color: var(--ug-on-brand-faint); display: flex; align-items: baseline; gap: .5rem; margin-bottom: 1.1rem; }
.fs__num { color: var(--ug-accent-70); font-size: 1.05rem; font-weight: 600; display: inline-block; }
.fs__h { color: #fff; font-size: clamp(2rem, 3.3vw, 3.25rem); font-weight: var(--ug-weight-light); line-height: 1.04; letter-spacing: -.028em; text-wrap: balance; }
.fs__p { color: var(--ug-on-brand-quiet); font-size: clamp(1.05rem, 1.25vw, 1.25rem); line-height: 1.55; margin-top: 1.1rem; max-width: 34ch; }
.fs__copy.is-out .fs__h .sw > span, .fs__copy.is-out .fs__p .sw > span, .fs__copy.is-out .fs__num { animation: fs-word-out .35s cubic-bezier(.7,0,.84,0) both; }

/* ── Split text (words revealed through a mask, line by line) ───────── */
.sw { display: inline-block; overflow: hidden; vertical-align: top; padding: .06em .02em .14em; margin: -.06em -.02em -.14em; }
.sw > span { display: inline-block; will-change: transform; }
.is-in .sw > span { animation: fs-word 1s cubic-bezier(.2, .85, .25, 1) calc(var(--d0, 0s) + var(--i) * 42ms) both; }
.is-in.split--soft .sw > span { animation: fs-word-soft .9s cubic-bezier(.2, .85, .25, 1) calc(var(--d0, 0s) + var(--i) * 14ms) both; }
.fs__title.is-in { --d0: .35s; }
.fs__lede.is-in { --d0: 1.05s; }
.fs__p.is-in { --d0: .35s; }
.fs__sumh.is-in { --d0: .25s; }
@keyframes fs-word { from { transform: translate3d(0, 108%, 0) rotate(4deg); } to { transform: none; } }
@keyframes fs-word-soft { from { opacity: 0; transform: translate3d(0, 55%, 0); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes fs-word-out { to { opacity: 0; transform: translate3d(0, -60%, 0); } }

/* ── Summary + perspective bubbles ("vup vup vup" → pills) ──────────── */
.fs__sum { position: absolute; inset: 0; z-index: 3; display: grid; place-content: center; justify-items: center; text-align: center; padding: 0 var(--fs-gutter) 5rem; opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility 0s .7s; }
.fs[data-phase="sum"] .fs__sum { opacity: 1; visibility: visible; transition: opacity .8s ease .3s, visibility 0s; }
.fs__sumh { color: #fff; font-size: clamp(1.7rem, 2.9vw, 2.8rem); font-weight: var(--ug-weight-light); line-height: 1.12; letter-spacing: -.026em; max-width: 30ch; text-wrap: balance; }
.fs__sump { color: var(--ug-on-brand-soft); font-size: var(--ug-text-l); margin: 1.5rem 0 1rem; }
.fs.is-sum-run .fs__sum .fs__eyebrow { animation: fs-fade .8s ease .1s both; }
.fs.is-sum-run .fs__sump { animation: fs-rise .8s var(--fs-out) 1.6s both; }
.fs.is-sum-run .fs__cta { animation: fs-rise .8s var(--fs-out) 3.6s both; }
.fs__cta { margin-top: 1.75rem; }
.fs__bubbles { display: flex; gap: .9rem; justify-content: center; flex-wrap: wrap; }
.bp { position: relative; display: inline-flex; align-items: center; height: 3.6rem; min-width: 3.6rem; padding: 0 .55rem; border-radius: var(--ug-radius-pill); border: 2px solid rgba(255,255,255,.55); background: var(--c); color: #fff; font: inherit; font-weight: var(--ug-weight-bold); font-size: var(--ug-text-l); cursor: pointer; box-shadow: 0 12px 30px -10px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.25); transition: transform .25s var(--ug-ease), box-shadow .25s, border-color .25s; }
.bp:hover { transform: translateY(-3px) scale(1.03); border-color: #fff; box-shadow: 0 18px 36px -12px rgba(0,0,0,.55); }
.bp__dot { width: 2.3rem; height: 2.3rem; border-radius: 50%; background: rgba(255,255,255,.3); flex: none; display: grid; place-items: center; }
.bp__dot::after { content: ""; width: .7rem; height: .7rem; border-radius: 50%; background: #fff; }
.bp__lab { display: block; overflow: hidden; white-space: nowrap; max-width: 12rem; padding: 0 1rem 0 .7rem; }
.bp::after { content: ""; position: absolute; inset: -2px; border-radius: inherit; border: 2px solid var(--c); opacity: 0; pointer-events: none; }
.fs.is-sum-run .bp { animation: bp-pop .75s cubic-bezier(.34, 1.8, .5, 1) calc(1.15s + var(--i) * .26s) both; }
.fs.is-sum-run .bp::after { animation: bp-ring .9s cubic-bezier(.2, .7, .3, 1) calc(1.2s + var(--i) * .26s) both; }
.fs.is-sum-run .bp__lab { animation: bp-open .8s var(--fs-out) calc(2.35s + var(--i) * .14s) both; }
@keyframes bp-pop { 0% { transform: scale(0); opacity: 0; } 40% { opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes bp-ring { 0% { opacity: .9; transform: scale(.8); } 100% { opacity: 0; transform: scale(1.9); } }
@keyframes bp-open { from { max-width: 0; padding: 0; opacity: 0; } to { max-width: 12rem; opacity: 1; } }

/* ── Controls ───────────────────────────────────────────────────────── */
.fs__ctrl { position: absolute; z-index: 4; left: var(--fs-gutter); bottom: 6.25rem; display: flex; align-items: center; gap: .45rem; }
.fs__dots { display: flex; gap: .35rem; margin-right: .6rem; }
.fs__dot { width: 2.4rem; height: 1.6rem; border: 0; padding: 0; background: none; cursor: pointer; display: grid; align-items: center; }
.fs__dot i { display: block; height: 3px; border-radius: 3px; background: rgba(255,255,255,.25); position: relative; overflow: hidden; }
.fs__dot i::after { content: ""; position: absolute; inset: 0; background: #fff; transform: scaleX(0); transform-origin: left; }
.fs__dot.is-done i::after { transform: scaleX(1); }
.fs__dot.is-on i::after { animation: fs-bar var(--dur, 7s) linear forwards; }
.fs__dot--sum i::after { background: var(--ug-accent-70); }
.fs__dot--sum.is-on i::after { animation: none; transform: scaleX(1); }
.fs.is-paused .fs__dot.is-on i::after { animation-play-state: paused; }
.fs__btn { width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.06); color: #fff; cursor: pointer; display: grid; place-items: center; padding: 0; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background .2s, border-color .2s, transform .2s var(--ug-ease); }
.fs__btn:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.6); transform: translateY(-1px); }
.fs__btn svg { width: .95rem; height: .95rem; }
.fs__btn .ico-pause { display: none; }
.fs.is-playing .fs__btn--play .ico-play { display: none; }
.fs.is-playing .fs__btn--play .ico-pause { display: block; }
@keyframes fs-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.fs__more { position: absolute; z-index: 4; left: 50%; bottom: 1.35rem; transform: translateX(-50%); display: inline-flex; align-items: center; gap: .6rem; height: 3.25rem; padding: 0 1.4rem 0 1.6rem; border-radius: var(--ug-radius-pill); color: #fff; text-decoration: none; font-weight: var(--ug-weight-semibold); font-size: var(--ug-text-m); border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.07); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: background .2s, border-color .2s; }
.fs__more:hover { color: #fff; background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.6); }
.fs__more svg { width: 1.05rem; height: 1.05rem; animation: fs-nudge 2.2s ease-in-out infinite; }
@keyframes fs-nudge { 0%, 100% { transform: none; } 50% { transform: translateY(4px); } }

@keyframes fs-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes fs-rise { from { opacity: 0; transform: translate3d(0, 18px, 0); } to { opacity: 1; transform: none; } }
@keyframes fs-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ── Phone / narrow: stack (desktop is the priority) ────────────────── */
@media (max-width: 860px) {
  .fs { height: auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; padding-bottom: 5.5rem; }
  .fs__world { inset: 0 -40%; }
  .fs__intro, .fs__sum, .fs__copy { position: relative; inset: auto; transform: none; width: auto; left: auto; top: auto; padding: 2.25rem 1.25rem 0; }
  .fs__intro { grid-row: 1; }
  .fs__scenes { position: relative; grid-row: 2; inset: auto; height: 62vw; margin: 1rem .5rem 0; }
  .fs__copy, .fs__sum { grid-row: 3; text-align: left; justify-items: start; padding-top: 1rem; }
  .fs[data-phase="intro"] .fs__copy, .fs[data-phase="intro"] .fs__sum, .fs[data-phase="scene"] .fs__sum, .fs[data-phase="sum"] .fs__copy { display: none; }
  .fs[data-phase="scene"] .fs__intro, .fs[data-phase="sum"] .fs__intro { opacity: 1; transform: none; filter: none; pointer-events: auto; }
  .fs[data-phase="sum"] .fs__scenes { display: none; }
  .fs__title { font-size: clamp(2.4rem, 11vw, 3.4rem); }
  .fs__ctrl { position: relative; left: auto; bottom: auto; grid-row: 4; padding: 1.25rem 1.25rem 0; }
  .fs__more { left: 1.25rem; transform: none; bottom: 1.25rem; }
  .fs::after { display: none; }
  .fs__ctrl { flex-wrap: wrap; row-gap: .6rem; }
}
@media (max-width: 480px) { .fs__dot { width: 1.4rem; } .fs__dots { gap: .25rem; margin-right: .2rem; } }

/* ═══ Illustrations ═══════════════════════════════════════════════════ */
.ill { display: block; width: 100%; height: auto; overflow: visible; }
.ill .l, .ill .lq, .ill .lt, .ill .la, .ill .ink, .ill .share, .ill .hand { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ill .l { stroke: #fff; stroke-width: 2.6; }
.ill .l--w { stroke-width: 3.4; }
.ill .lq { stroke: rgba(255,255,255,.42); stroke-width: 1.7; }
.ill .lt { stroke: rgba(255,255,255,.85); stroke-width: 2; stroke-dasharray: 2 9; }
.ill .la { stroke: var(--ug-accent-60); stroke-width: 6; }
.ill .la--thin { stroke-width: 3; }
.ill .ink { stroke: var(--ug-brand-10); stroke-width: 7; }
.ill .ink--s { stroke-width: 5; opacity: .55; }
.ill .share { stroke: #fff; stroke-width: 2.5; }
.ill .hand { stroke: #fff; stroke-width: 4; }
.ill .hand--h { stroke-width: 7; }
.ill .f { fill: rgba(255,255,255,.08); }
.ill .f2 { fill: rgba(255,255,255,.15); }
.ill .f3 { fill: rgba(255,255,255,.04); }
.ill .fa { fill: var(--ug-accent-60); }
.ill .fw { fill: var(--ug-warning); }
.ill .fg { fill: var(--ug-gron-60); }
.ill .fg2 { fill: var(--ug-gron-80); }
.ill .fsl { fill: var(--ug-slate-60); }
.ill .fwh { fill: #fff; }
.ill .fd { fill: var(--ug-brand-10); }
.ill .f-k { fill: var(--ug-neutral-90); }
.ill .fy { fill: rgba(255,240,117,.2); }
.ill .sh { fill: rgba(0,0,0,.22); }
.ill .rg { fill: none; stroke: #fff; stroke-width: 2; opacity: 0; }
.ill .halo { opacity: .28; }
.ill .halo--g { fill: var(--ug-gron-60); } .ill .halo--a { fill: var(--ug-accent-60); } .ill .halo--s { fill: var(--ug-slate-60); }
.ill .pp path, .ill .pp circle { fill: #fff; }
.ill .pp--b path, .ill .pp--b circle { fill: var(--ug-gron-60); }
.ill .pp--u path, .ill .pp--u circle { fill: var(--ug-accent-60); }
.ill .pp--a path, .ill .pp--a circle { fill: var(--ug-slate-60); }
.ill .pp .sh { fill: rgba(0,0,0,.22); }
.ill .c-a { color: var(--ug-accent-60); } .ill .c-w { color: var(--ug-warning); } .ill .c-wh { color: #fff; }
.ill .c-g { color: var(--ug-gron-60); } .ill .c-s { color: var(--ug-slate-50); } .ill .c-k { color: var(--ug-brand-10); }
.ill text { font-family: var(--ug-font); }
.ill .t { fill: #fff; font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.ill .ts { fill: rgba(255,255,255,.92); font-size: 14px; font-weight: 600; }
.ill .tq { fill: rgba(255,255,255,.62); font-family: var(--ug-mono); font-size: 12px; letter-spacing: .12em; }
.ill .tk { fill: var(--ug-brand-10); font-size: 16px; font-weight: 700; }
.ill .tk--l { font-size: 19px; }
.ill .tk--xs { font-size: 11px; letter-spacing: .08em; }

/* tilbygninger: documents, counters, phones */
.ill .fr { fill: #e5484d; }
.ill .fm { fill: var(--ug-brand-70); }
.ill .lk { fill: none; stroke: rgba(5,34,29,.13); stroke-width: 1.2; }
.ill .ink--t { stroke-width: 3.5; opacity: .32; }
.ill .lr { fill: none; stroke: var(--ug-warning); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 3 6; }
.ill .dash { fill: rgba(255,255,255,.03); stroke: rgba(255,255,255,.38); stroke-width: 1.6; stroke-dasharray: 5 6; }
.ill .pipe { fill: none; stroke: rgba(255,255,255,.16); stroke-width: 18; stroke-linecap: round; }
.ill .zz { fill: none; stroke: rgba(5,34,29,.18); stroke-width: 1.4; stroke-dasharray: 4 5; }
.ill .tn { fill: #fff; font-size: 64px; font-weight: 300; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.ill .tn--s { font-size: 36px; font-weight: 600; letter-spacing: -.02em; }
.ill .tn--k { fill: var(--ug-brand-10); }
.ill .t--xl { font-size: 32px; font-weight: 300; }
.ill .tqk { fill: rgba(5,34,29,.55); font-family: var(--ug-mono); font-size: 11px; letter-spacing: .12em; }
.ill .tk--xl { font-size: 27px; letter-spacing: -.02em; }
.ill .tk--r { fill: #c4252c; }
.ill .tk--w { fill: #fff; }
.ill [data-count] { font-variant-numeric: tabular-nums; }
.ill .is-tick { animation: ill-tick .9s ease; }
@keyframes ill-tick { 0% { fill: var(--ug-warning); } 100% { } }
.ill .tk.is-tick { animation-name: ill-tick-k; }
@keyframes ill-tick-k { 0% { fill: var(--ug-accent-50); } 100% { } }

/* stagger steps */
.ill .s0 { --d: .1s; } .ill .s1 { --d: .3s; } .ill .s2 { --d: .55s; } .ill .s3 { --d: .8s; } .ill .s4 { --d: 1.05s; }
.ill .s5 { --d: 1.3s; } .ill .s6 { --d: 1.55s; } .ill .s7 { --d: 1.8s; } .ill .s8 { --d: 2.05s; } .ill .s9 { --d: 2.3s; }
.ill .s10 { --d: 2.55s; } .ill .s11 { --d: 2.8s; } .ill .s12 { --d: 3.05s; }

/* every animated group transforms around its own centre */
.ill :is(.pop, .rise, .drop, .grow, .growx, .fly, .bob, .sway, .sway-b, .wave, .pulse, .beat, .ring, .spin, .spin-c, .float, .scan, .turn, .flip, .type, .tile, .shake, .gone) { transform-box: fill-box; transform-origin: center; }
.ill .grow { transform-origin: 50% 100%; }
.ill .growx { transform-origin: 0 50%; }
.ill .type { transform-origin: 100% 50%; transform: scaleX(0); }
.ill .turn { opacity: 0; }
.ill .sway { transform-origin: 50% 0; }
.ill .sway-b { transform-origin: 50% 100%; }
.ill .wave { transform-origin: 0 50%; }
.ill .spin { transform-origin: 50% 100%; }
.ill .turn { transform-origin: 0 50%; }

/* entry — only while the scene plays */
.is-on .ill .l, .is-on .ill .lq, .is-on .ill .la { stroke-dasharray: 1 2; stroke-dashoffset: 1; animation: ill-draw 1.5s cubic-bezier(.6, .05, .2, 1) var(--d, 0s) forwards; }
.is-on .ill .lt { animation: ill-fade .8s ease var(--d, 0s) both, ill-flow 1.1s linear infinite; }
.is-on .ill .pop { animation: ill-pop .75s cubic-bezier(.34, 1.56, .64, 1) var(--d, 0s) both; }
.is-on .ill .rise { animation: ill-rise 1.1s cubic-bezier(.16, 1, .3, 1) var(--d, 0s) both; }
.is-on .ill .drop { animation: ill-drop .95s cubic-bezier(.3, 1.35, .5, 1) var(--d, 0s) both; }
.is-on .ill .grow { animation: ill-grow 1s cubic-bezier(.16, 1, .3, 1) var(--d, 0s) both; }
.is-on .ill .growx { animation: ill-growx .9s cubic-bezier(.16, 1, .3, 1) var(--d, 0s) both; }
.is-on .ill .fade { animation: ill-fade 1s ease var(--d, 0s) both; }
.is-on .ill .lit { animation: ill-lit 1.3s ease var(--d, 0s) both; }
.is-on .ill .type { animation: ill-type 1.5s steps(18) var(--d, 0s) both; }
.is-on .ill .fly { animation: ill-fly 1.2s cubic-bezier(.5, 0, .2, 1) var(--d, 0s) both; }
.is-on .ill .flip { animation: ill-flip .6s cubic-bezier(.34, 1.56, .64, 1) var(--d, 0s) both; }
/* loops — start once the element has arrived */
.is-on .ill .bob { animation: ill-bob var(--bo, 4s) ease-in-out calc(var(--d, 0s) + .9s) infinite; }
.is-on .ill .sway { animation: ill-sway var(--sw, 3s) ease-in-out calc(var(--d, 0s) + .6s) infinite alternate; }
.is-on .ill .sway-b { animation: ill-sway-b var(--sw, 4s) ease-in-out calc(var(--d, 0s) + .6s) infinite alternate; }
.is-on .ill .wave { animation: ill-wave 1.6s ease-in-out calc(var(--d, 0s) + .5s) infinite alternate; }
.is-on .ill .pulse { animation: ill-pulse 1.6s ease-in-out calc(var(--d, 0s) + .8s) infinite; }
.is-on .ill .beat { animation: ill-beat 1.4s ease-in-out calc(var(--d, 0s) + .9s) infinite; }
.is-on .ill .ring { animation: ill-ring 2.4s cubic-bezier(.2, .6, .3, 1) calc(var(--d, 0s) + .4s) infinite; }
.is-on .ill .blink { animation: ill-blink var(--bl, 1.1s) steps(1) infinite; }
.is-on .ill .twinkle { animation: ill-blink 2.2s ease-in-out var(--tw, 0s) infinite; }
.is-on .ill .spin { animation: ill-spin var(--spin, 6s) linear infinite; }
.is-on .ill .float { animation: ill-float 3.2s ease-out calc(var(--d, 0s) + var(--fd, 0s)) infinite; }
.is-on .ill .float-wrap > g:nth-child(2) .float, .is-on .ill .float-wrap > g:nth-child(2).float { --fd: .8s; }
.is-on .ill .float-wrap > g:nth-child(3).float { --fd: 1.6s; }
.is-on .ill .float-wrap > g:nth-child(4).float { --fd: 2.4s; }
.is-on .ill .scan { animation: ill-scan 9s ease-in-out infinite alternate; }
.is-on .ill .turn { animation: ill-turn 4.5s cubic-bezier(.6, 0, .3, 1) calc(var(--d, 0s) + .6s) infinite; }
.is-on .ill .spin-c { animation: ill-spin var(--spin, 3s) linear infinite; }
.is-on .ill .shake { animation: ill-shake 2.4s ease-in-out calc(var(--d, 0s) + .8s) infinite; }
/* scaffolding and other construction aids: visible while building, gone in the final state */
.ill .gone { opacity: 0; }
.is-on .ill .gone { animation: ill-gone .9s ease var(--d, 0s) both; }

@keyframes ill-draw { to { stroke-dashoffset: 0; } }
@keyframes ill-flow { to { stroke-dashoffset: -22; } }
@keyframes ill-pop { 0% { opacity: 0; transform: scale(.15); } 50% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes ill-rise { from { opacity: 0; transform: translate(0, 34px); } to { opacity: 1; transform: none; } }
@keyframes ill-drop { 0% { opacity: 0; transform: translate(0, -90px); } 35% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes ill-grow { from { transform: scaleY(0); } to { transform: none; } }
@keyframes ill-growx { from { transform: scaleX(0); opacity: 0; } 30% { opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes ill-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ill-lit { 0% { opacity: 0; } 30% { opacity: 1; } 42% { opacity: .25; } 56% { opacity: 1; } 66% { opacity: .55; } 100% { opacity: 1; } }
@keyframes ill-type { from { transform: none; } to { transform: scaleX(0); } }
@keyframes ill-fly { 0% { opacity: 0; transform: translate(var(--fx, 0), var(--fy, 0)) scale(.85); } 25% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes ill-flip { from { transform: translate(0, 28px); } to { transform: none; } }
@keyframes ill-bob { 0%, 100% { transform: none; } 50% { transform: translate(0, -9px); } }
@keyframes ill-sway { from { transform: rotate(-3.5deg); } to { transform: rotate(3.5deg); } }
@keyframes ill-sway-b { from { transform: rotate(-2deg); } to { transform: rotate(2deg); } }
@keyframes ill-wave { from { transform: skewY(-7deg) scaleX(.94); } to { transform: skewY(6deg) scaleX(1); } }
@keyframes ill-pulse { 0%, 100% { transform: none; } 50% { transform: scale(1.12); } }
@keyframes ill-beat { 0%, 100% { transform: none; } 14% { transform: scale(1.09); } 28% { transform: scale(.98); } 42% { transform: scale(1.06); } 60% { transform: none; } }
@keyframes ill-ring { 0% { opacity: .85; transform: scale(.9); } 100% { opacity: 0; transform: scale(1.9); } }
@keyframes ill-blink { 0%, 100% { opacity: 1; } 50% { opacity: .1; } }
@keyframes ill-spin { to { transform: rotate(360deg); } }
@keyframes ill-float { 0% { opacity: 0; transform: translate(0, 10px) scale(.6); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(14px, -130px) scale(1.1); } }
@keyframes ill-scan { from { transform: translate(0, 0); } to { transform: translate(0, 240px); } }
@keyframes ill-turn { 0%, 30% { transform: none; opacity: 1; } 65%, 100% { transform: scaleX(-1); opacity: .0; } }
@keyframes ill-shake { 0%, 62%, 100% { transform: none; } 66% { transform: translate(-5px, 0) rotate(-2deg); } 72% { transform: translate(5px, 0) rotate(2deg); } 78% { transform: translate(-4px, 0) rotate(-1deg); } 84% { transform: translate(3px, 0); } }
@keyframes ill-gone { from { opacity: 1; } to { opacity: 0; } }

/* ── Reduced motion: everything in its final state, no loops ────────── */
@media (prefers-reduced-motion: reduce) {
  .fs__scene, .fs__intro, .fs__sum, .fs__copy, .fs__world { transition: none !important; }
  .fs__world { transform: none !important; }
  .is-on .ill *, .fs * { animation: none !important; }
  .is-on .ill :is(.l, .lq, .la) { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
  .ill .rg, .ill .float-wrap, .ill .turn { display: none; }
  .world__dust { display: none; }
}