/* The night forest. One world, tinted per scene by #bg (a colour wash over the wisteria forest):
   doors' amber -> wisteria violet (2022) -> ember amber (2023) -> dusk (2025) -> lilac, indigo, rose, amber (covers) -> indigo (wall) -> night.
   Type: Shippori Mincho for display, Klee One for hand-written captions, Yuji Boku (brush) for kanji, Alex Brush for the poem. */
@property --a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --p { syntax: "<percentage>"; inherits: false; initial-value: 0%; }

:root {
  --night: #0F0A22; --night2: #1B1238; --ink: #14101F;
  --wist: #7C5CC4; --wist-l: #A78BE0; --wist-p: #D8C8F5;
  --amber: #F2A33A; --amber-l: #FFD27A; --gold: #E8C26A;
  --crim: #C8352F; --rose: #FF8FB5; --cream: #F6EBD4; --paper: #EEDFB8;
  --f-disp: "Shippori Mincho B1", "Hina Mincho", Georgia, serif;
  --f-hand: "Klee One", "Segoe Print", cursive;
  --f-jp: "Yuji Boku", "Shippori Mincho B1", serif;
  --f-cal: "Alex Brush", "Great Vibes", cursive;
  --f-ar: "Aref Ruqaa", "Amiri", serif;
  --fg: var(--cream);
  --pulse: 0;
}
body[data-tone="dark"] { --fg: #1E1248; }
body[data-tone="light"] { --fg: var(--cream); }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--night); -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0; font-family: var(--f-disp); color: var(--cream); background: var(--night);
  overflow-x: hidden; -webkit-font-smoothing: antialiased; touch-action: manipulation;
}
body.is-locked { overflow: hidden; height: 100dvh; }
h1, h2, p, figure { margin: 0; font-weight: inherit; }
.lenis.lenis-stopped { overflow: hidden; }
img, video { display: block; max-width: 100%; user-select: none; -webkit-user-drag: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }

.hand { font-family: var(--f-hand); font-weight: 600; }
.disp { font-family: var(--f-disp); font-weight: clamp(500, var(--w, 700), 800); }
.jp { font-family: var(--f-jp); font-weight: 400; }
.split-line { overflow: hidden; display: block; padding-bottom: .08em; }
.beat { transform: scale(calc(1 + var(--pulse) * .035)); }

/* ---------- the world every scene sits in ---------- */
#world { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: var(--night); }
.w-forest { position: absolute; inset: -4%; background: url("../img/ds/forest.webp") 50% 40% / cover no-repeat; will-change: transform; }
#bg { position: absolute; inset: 0; background: var(--night); mix-blend-mode: color; opacity: .72; }
.w-fog, .b-fog, .dv-fog { -webkit-mask-image: linear-gradient(transparent, #000 45%); mask-image: linear-gradient(transparent, #000 45%); }   /* the fog image is cropped mid-cloud: fade its top edge */
.w-fog { position: absolute; left: -6%; right: -6%; bottom: -4%; height: 62%; background: url("../img/ds/fog.webp") 50% 100% / cover no-repeat; mix-blend-mode: screen; opacity: .3; animation: fogA 46s ease-in-out infinite alternate; will-change: transform; }
.w-fog.f2 { opacity: .2; height: 48%; animation-name: fogB; animation-duration: 62s; transform: scaleX(-1); }
@keyframes fogA { from { transform: translate3d(-3%, 0, 0); } to { transform: translate3d(3%, -2%, 0); } }
@keyframes fogB { from { transform: scaleX(-1) translate3d(3%, 0, 0); } to { transform: scaleX(-1) translate3d(-3%, -3%, 0); } }
.w-canopy { position: absolute; left: 50%; top: -2%; height: max(clamp(150px, 34dvh, 340px), 21.5vw); display: flex; transform: translateX(-50%); pointer-events: none; animation: sway 9s ease-in-out infinite alternate; transform-origin: 50% 0; }
.w-canopy img, .dv-canopy img { height: 100%; width: auto; max-width: none; flex: none; }
.w-canopy .mir, .dv-canopy .mir { transform: scaleX(-1); }
@keyframes sway { from { transform: translateX(-50%) rotate(-.35deg); } to { transform: translateX(-50%) rotate(.35deg); } }
.w-vig { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 42%, transparent 52%, rgba(6, 3, 18, .6) 100%); pointer-events: none; }
#story { position: relative; z-index: 1; opacity: 0; }      /* opacity, not visibility: some children set visibility themselves */
body.started #story { opacity: 1; }
#fx { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 50; }
#grain {
  position: fixed; inset: 0; z-index: 4; pointer-events: none; opacity: .09; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.scene { position: relative; }
.pin { position: relative; width: 100%; height: 100dvh; overflow: hidden; }

/* ---------- HUD ---------- */
#hud {
  position: fixed; z-index: 55; top: max(14px, env(safe-area-inset-top)); left: 0; right: 0; padding: 0 16px;
  display: flex; justify-content: space-between; align-items: center; pointer-events: none; opacity: 0; color: var(--fg);
  transition: color .6s;
}
#hud > * { pointer-events: auto; }
.era { font-size: 28px; --w: 700; line-height: 1; height: 1.1em; overflow: hidden; display: grid; letter-spacing: .02em; }
.era-in { grid-area: 1 / 1; display: flex; }
.era .ch { display: inline-block; will-change: transform; }
#snd { width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid currentColor; display: grid; place-items: center; background: rgba(15, 10, 34, .25); }
#skip {
  position: fixed; z-index: 56; bottom: max(16px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%);
  padding: 8px 20px; font-size: 18px; color: var(--cream); border: 1.5px solid rgba(246, 235, 212, .45); border-radius: 99px; opacity: .8; background: rgba(15, 10, 34, .35);
}

/* ---------- gate: lit shoji doors. hold to breathe in, then walk through ---------- */
#gate { position: fixed; inset: 0; z-index: 60; overflow: hidden; background: var(--night); color: var(--cream); touch-action: none; }
.doors { position: absolute; left: 50%; top: 50%; width: max(103vw, calc(103dvh * 1.8467)); aspect-ratio: 2000 / 1083; transform: translate(-50%, -50%); will-change: transform; --hx: 0; --hy: 0; --hw: 1; --hh: 1; }
.doors > * { position: absolute; }
.d-frame { left: 0; top: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }
.d-hole { left: calc(var(--hx) * 100%); top: calc(var(--hy) * 100%); width: calc(var(--hw) * 100%); height: calc(var(--hh) * 100%); overflow: hidden; z-index: 2; }
.d-leaf { position: absolute; top: 0; height: 100%; width: 50.1%; max-width: none; will-change: transform; }
.d-leaf.l { left: 0; }
.d-leaf.r { right: 0; }
.d-light { left: calc(var(--hx) * 100%); top: calc(var(--hy) * 100%); width: calc(var(--hw) * 100%); height: calc(var(--hh) * 100%); z-index: 1; opacity: 0;
  background: radial-gradient(70% 90% at 50% 58%, #FFF6D2 0%, #FFD27A 28%, #F29A3A 58%, #8F4A8F 100%); }
.d-shade { position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: radial-gradient(120% 95% at 50% 46%, transparent 38%, rgba(8, 4, 22, .7) 100%), linear-gradient(transparent 52%, rgba(8, 4, 22, .78)); }
.gate-sound { position: absolute; z-index: 6; top: max(22px, env(safe-area-inset-top)); left: 0; right: 0; text-align: center; font-size: 19px; opacity: .8; text-shadow: 0 1px 10px rgba(0, 0, 0, .7); }
.gate-to { position: absolute; z-index: 6; top: calc(max(22px, env(safe-area-inset-top)) + 44px); left: 0; right: 0; text-align: center; font-size: clamp(18px, 4.6vw, 24px); letter-spacing: .12em; opacity: .9; text-shadow: 0 1px 12px rgba(0, 0, 0, .8); }
.seal { -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; position: absolute; z-index: 7; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; touch-action: none; }
.seal-body { position: absolute; inset: 0; border-radius: 50%; filter: drop-shadow(0 7px 12px rgba(0, 0, 0, .55)); }
.seal .half {
  position: absolute; inset: 0; border-radius: 53% 47% 52% 48% / 48% 54% 46% 52%;
  background: radial-gradient(circle at 35% 28%, #E4574D 0%, #B8292A 54%, #741316 100%);
  box-shadow: inset 0 3px 5px rgba(255, 255, 255, .3), inset 0 -5px 9px rgba(0, 0, 0, .35);
}
.seal .half.l { clip-path: inset(0 50% 0 0); }
.seal .half.r { clip-path: inset(0 0 0 50%); }
.seal .mono { position: absolute; inset: 0; display: grid; place-items: center; font-size: 44px; line-height: 1; color: rgba(255, 238, 214, .92); text-shadow: 0 1px 0 rgba(0, 0, 0, .35); pointer-events: none; }
.seal .ring { position: absolute; left: -16px; top: -16px; width: calc(100% + 32px); height: calc(100% + 32px); transform: rotate(-90deg); pointer-events: none; }
.seal .ring circle { fill: none; stroke: var(--amber-l); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; filter: drop-shadow(0 0 6px rgba(255, 210, 122, .8)); }
.seal.idle .seal-body { animation: breathe 3.4s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.09); } }
.gate-hint { position: absolute; z-index: 6; left: 0; right: 0; top: calc(50% + 78px); text-align: center; font-size: 28px; text-shadow: 0 2px 14px rgba(0, 0, 0, .8); }
.gate-sub { position: absolute; z-index: 6; left: 0; right: 0; top: calc(50% + 120px); margin: 0 auto; max-width: 30ch; text-align: center; font-size: 18px; opacity: .8; text-shadow: 0 2px 12px rgba(0, 0, 0, .8); }
#intro, #tcard { touch-action: none; }

/* ---------- opening: the ink circle and the title card ---------- */
#intro { position: fixed; inset: 0; z-index: 40; color: var(--cream); overflow: hidden; visibility: hidden; }
.in-bg { position: absolute; inset: 0; background: radial-gradient(100% 70% at 50% 46%, rgba(26, 14, 66, .56) 0%, rgba(12, 7, 34, .8) 100%); }
.in-top { position: absolute; top: max(11dvh, 70px); left: 0; right: 0; text-align: center; padding: 0 20px; }
.in-start { font-size: clamp(22px, 6vw, 30px); opacity: 0; }
.in-age { position: absolute; left: 0; right: 0; top: -.1em; font-size: clamp(56px, 16vw, 120px); line-height: 1; --w: 600; letter-spacing: .02em; }
.zero-wrap { --zh: min(50dvh, 82vw * 1.4); position: absolute; left: 50%; top: 50%; height: var(--zh); width: calc(var(--zh) * .7143); margin: calc(var(--zh) * -.48) 0 0 calc(var(--zh) * -.35715); }
.zero-wrap > * { position: absolute; }
.z-photo { left: 24%; top: 17%; width: 52%; height: 66%; border-radius: 50%; overflow: hidden; opacity: 0; background: #0A0716; }
.z-photo img { position: absolute; height: 121%; width: auto; max-width: none; left: -11%; top: -1%; }
.zero {
  inset: 0; width: 100%; height: 100%; color: var(--crim); overflow: visible;
  -webkit-mask-image: conic-gradient(from 0deg at 50% 50%, #000 var(--a), transparent calc(var(--a) + 5deg));
          mask-image: conic-gradient(from 0deg at 50% 50%, #000 var(--a), transparent calc(var(--a) + 5deg));
  filter: drop-shadow(0 0 14px rgba(200, 53, 47, .45));
}
.count { inset: 0; display: grid; place-items: center; font-size: min(36vw, 20dvh); --w: 800; opacity: 0; line-height: 1; font-variant-numeric: tabular-nums; }
.in-bot { position: absolute; left: 0; right: 0; bottom: max(8dvh, 64px); height: 26dvh; display: grid; place-items: center; padding: 0 22px; text-align: center; }
.in-bot > * { grid-area: 1 / 1; opacity: 0; }
.in-sub { font-size: clamp(21px, 5.6vw, 34px); --w: 500; }
.in-before { display: grid; gap: .3em; font-size: clamp(21px, 5.6vw, 32px); --w: 500; }
.in-before p { font-weight: 500; }
.in-absent { font-size: clamp(27px, 7.4vw, 50px); --w: 500; line-height: 1.12; max-width: 14ch; align-self: start; }
.in-glad { font-size: clamp(21px, 5.6vw, 28px); color: var(--wist-p); align-self: end; line-height: 1.15; }
.in-flash { position: absolute; inset: 0; background: #F1E6FF; opacity: 0; }
.in-slam { position: absolute; inset: 0; display: grid; place-items: center; font-size: clamp(120px, 38vw, 440px); --w: 800; color: #fff; opacity: 0; line-height: 1; z-index: 2; }

#tcard { position: fixed; inset: 0; z-index: 58; display: grid; place-content: center; justify-items: center; gap: .3em; text-align: center; padding: 0 20px; color: var(--cream); visibility: hidden; pointer-events: none; }
#tcard > * { position: relative; }
.tc-shade { position: absolute !important; inset: 0; background: radial-gradient(70% 58% at 50% 48%, rgba(8, 4, 24, .86), rgba(8, 4, 24, .5) 62%, transparent 100%); }
.tc-enso { position: absolute !important; left: 50%; top: 50%; width: min(96vw, 66dvh, 560px); aspect-ratio: 1; transform: translate(-50%, -52%); color: var(--crim); overflow: visible; opacity: .92;
  -webkit-mask-image: conic-gradient(from 20deg at 50% 50%, #000 var(--a), transparent calc(var(--a) + 5deg)); mask-image: conic-gradient(from 20deg at 50% 50%, #000 var(--a), transparent calc(var(--a) + 5deg));
  filter: drop-shadow(0 0 22px rgba(200, 53, 47, .5)); }
.tc-jp1 { font-size: clamp(60px, 18.5vw, 150px); line-height: 1.05; letter-spacing: .06em; text-shadow: 0 4px 26px rgba(0, 0, 0, .7), 0 0 40px rgba(167, 139, 224, .35); }
.tc-jp2 { display: flex; align-items: center; gap: .5em; font-size: clamp(24px, 7.4vw, 54px); line-height: 1.1; color: var(--amber-l); text-shadow: 0 2px 18px rgba(0, 0, 0, .7); }
.tc-jp2 i { font-style: normal; opacity: .7; }
.tc-en { margin-top: .5em; font-size: clamp(20px, 5.4vw, 34px); --w: 600; letter-spacing: .3em; text-transform: uppercase; text-shadow: 0 2px 16px rgba(0, 0, 0, .8); }
.tc-sub { font-size: clamp(16px, 4.2vw, 24px); --w: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--wist-p); text-shadow: 0 2px 14px rgba(0, 0, 0, .8); }
.tc-for { margin-top: .8em; font-size: clamp(17px, 4.4vw, 22px); opacity: .85; letter-spacing: .08em; text-shadow: 0 2px 12px rgba(0, 0, 0, .8); }

/* ---------- 2022: tunnel of photos ---------- */
.tunnel { --cw: min(66vw, 42dvh); }
.tunnel .pin { perspective: 1000px; perspective-origin: 50% 40%; }
.tun-yr { position: absolute; left: 0; right: 0; top: 7dvh; text-align: center; font-size: clamp(150px, 50vw, 560px); --w: 800; color: rgba(216, 200, 245, .26); line-height: 1; pointer-events: none; will-change: transform; letter-spacing: .02em; }
.tun-world { position: absolute; inset: 0; transform-style: preserve-3d; }
.t-card { position: absolute; left: 50%; top: 42%; width: var(--cw); will-change: transform, opacity; cursor: default; }
.t-card .face { position: relative; border-radius: 4px; overflow: hidden; border: 6px solid #F6EBD4; background: #F6EBD4; box-shadow: 0 22px 44px rgba(10, 5, 34, .55), 0 0 0 1px rgba(232, 194, 106, .55); }
.t-card .face::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(232, 194, 106, .5); pointer-events: none; }
.t-card img { width: 100%; height: auto; }
.t-card .veil { position: absolute; inset: 0; background: #2A1B5E; opacity: 0; pointer-events: none; }
.sticker { position: absolute; width: 62px; height: 62px; right: -22px; top: -24px; background: url("../img/ds/petals.webp") 0 0 / 500% 500% no-repeat; background-position: calc(var(--c, 0) * 25%) calc(var(--r, 0) * 25%); pointer-events: none; }
.sticker.s2 { right: auto; left: -24px; top: auto; bottom: -22px; width: 54px; height: 54px; }
.tun-cap { position: absolute; left: 0; right: 0; bottom: max(4.5dvh, 22px); z-index: 5; padding: 0 22px; text-align: center; color: var(--cream); min-height: 18dvh; display: grid; align-content: end; justify-items: center; gap: 4px; text-shadow: 0 2px 14px rgba(8, 4, 24, .85); }
.tc-date { font-size: clamp(22px, 5.8vw, 28px); color: var(--amber-l); }
.tc-line { font-size: clamp(18px, 4.8vw, 25px); --w: 500; max-width: 28ch; line-height: 1.3; }
.tc-hint { font-size: 20px; opacity: .75; margin-top: 4px; }
.flashveil { position: absolute; inset: 0; background: #E9DDFF; opacity: 0; pointer-events: none; z-index: 6; }

/* ---------- 2023: fog + board ---------- */
.wipe { background: #1d0e0a; --shade: 0; }
.wipe-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
#fogCv { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.wipe::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46%; background: linear-gradient(transparent, rgba(18, 8, 28, .78)); opacity: var(--shade, 0); pointer-events: none; }
.wipe-hint { position: absolute; left: 0; right: 0; top: 66%; text-align: center; font-size: clamp(28px, 7.4vw, 42px); color: #fff; text-shadow: 0 2px 14px rgba(20, 8, 40, .55); pointer-events: none; }
.wipe-cap { position: absolute; left: 0; right: 0; bottom: max(5dvh, 26px); padding: 0 24px; text-align: center; color: #fff; z-index: 2; pointer-events: none; opacity: 0; }
.wc-date { font-size: clamp(22px, 5.8vw, 28px); color: var(--amber-l); }
.wc-line { font-size: clamp(19px, 5vw, 26px); --w: 500; max-width: 26ch; margin: 4px auto 0; line-height: 1.3; }
.board { position: relative; padding: 8dvh 0 22dvh; color: var(--cream); }
.board-title { text-align: center; font-size: clamp(38px, 10.5vw, 100px); --w: 800; line-height: 1.05; padding: 0 5vw 9dvh; color: var(--cream); text-shadow: 0 3px 0 rgba(60, 20, 8, .55), 0 0 40px rgba(255, 190, 110, .25); }
.board-items { display: grid; gap: 9dvh 0; padding: 0 6vw; }
.pol { position: relative; width: min(64vw, 330px); justify-self: start; rotate: var(--r, -2deg); }
.pol:nth-child(even) { justify-self: end; }
.pol .card { background: #FBF3E2; padding: 10px 10px 34px; box-shadow: 0 16px 34px rgba(30, 10, 6, .5); }
.pol img { width: 100%; height: auto; }
.pol .tape { position: absolute; left: 50%; top: -14px; width: 92px; height: 28px; margin-left: -46px; background: rgba(216, 200, 245, .72); box-shadow: 0 2px 4px rgba(0, 0, 0, .18); rotate: var(--tr, 3deg); }
.pol .note { margin-top: 14px; max-width: 26ch; text-shadow: 0 1px 10px rgba(30, 10, 6, .7); }
.pol .n-date { font-size: 21px; color: var(--amber-l); }
.pol .n-line { font-size: 21px; line-height: 1.2; font-weight: 400; }
.pol:nth-child(even) .note { margin-left: auto; text-align: right; }

/* ---------- 2025: the cartoon film, at dusk ---------- */
.film .pin { background: #0A0716; }
.film-frame { position: absolute; left: 0; right: 0; top: 11dvh; bottom: 11dvh; overflow: hidden; --cw: min(66vw, 46dvh * .82); }
.film-frame::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 36%; z-index: 5; pointer-events: none; background: linear-gradient(transparent, rgba(10, 6, 28, .62)); }
.sky { position: absolute; inset: 0; background: linear-gradient(#120D33 0%, #2B1E63 30%, #5B3FA6 56%, #C77BA8 78%, #FFB27A 100%); overflow: hidden; }
.sky svg, .sky .moon, .sky .cn { position: absolute; will-change: transform; }
.sky .moon { right: 12%; top: 9%; width: clamp(54px, 13vw, 96px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 38% 36%, #FFF8E0, #F6E6B4 60%, #E9CF92); box-shadow: 0 0 40px 12px rgba(255, 236, 190, .35), 0 0 120px 40px rgba(255, 220, 160, .18); }
.sky .cn { left: 0; right: 0; top: 0; height: 40%; background: url("../img/ds/canopy.webp") 50% 0 / auto 100% repeat-x; opacity: .9; }
.char { position: absolute; bottom: -1%; width: var(--cw); height: auto; will-change: transform; filter: drop-shadow(0 12px 18px rgba(10, 5, 30, .45)); }
.char.her { left: 0; }
.char.him { right: 0; width: calc(var(--cw) * .98); }
.heart-big { position: absolute; left: 50%; top: 24%; width: clamp(54px, 15vw, 96px); margin-left: -.5em; fill: #E4574D; stroke: #FFE7C2; stroke-width: 1.1; paint-order: stroke; opacity: 0; filter: drop-shadow(0 6px 10px rgba(60, 10, 30, .4)); }
.shot { position: absolute; inset: 0; background: #0A0716; --ms: 0px; --mx: 0px; --my: 0px;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 21.5C5.5 16.6 2 13.2 2 9.1 2 6.2 4.2 4 7 4c1.9 0 3.7 1 5 2.8C13.3 5 15.1 4 17 4c2.8 0 5 2.2 5 5.1 0 4.1-3.5 7.5-10 12.4z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 21.5C5.5 16.6 2 13.2 2 9.1 2 6.2 4.2 4 7 4c1.9 0 3.7 1 5 2.8C13.3 5 15.1 4 17 4c2.8 0 5 2.2 5 5.1 0 4.1-3.5 7.5-10 12.4z'/></svg>");
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: var(--ms) var(--ms); mask-size: var(--ms) var(--ms);
  -webkit-mask-position: var(--mx) var(--my); mask-position: var(--mx) var(--my); }
.shot img { width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 50%; will-change: transform; }
.shot-duo img { object-position: 60% 50%; }
.shot-call img { object-position: 50% 38%; }
.film-sub.top { bottom: auto; top: calc(11dvh + 16px); }
.film-frame::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 26%; z-index: 5; pointer-events: none; background: linear-gradient(rgba(10, 6, 28, .5), transparent); }
.bar { position: absolute; left: 0; right: 0; height: 11dvh; background: #0A0716; z-index: 6; }
.bar.top { top: 0; } .bar.bot { bottom: 0; }
.film-date { position: absolute; z-index: 7; top: 5.5dvh; left: 0; right: 0; text-align: center; transform: translateY(-50%); font-size: clamp(20px, 5.4vw, 26px); color: var(--amber-l); letter-spacing: .1em; }
.film-sub { position: absolute; z-index: 7; left: 0; right: 0; bottom: calc(11dvh + 16px); padding: 0 22px; text-align: center; font-size: clamp(18px, 4.8vw, 27px); --w: 500; color: #FFF3DC; text-shadow: 0 1px 12px rgba(0, 0, 0, .7), 0 0 2px rgba(0, 0, 0, .7); max-width: 34ch; margin: 0 auto; }

/* ---------- now: magazine covers ---------- */
.covers { --cbg: #6B4CC0; --mast: #EFE4FF; --cink: #1E1248; }
.cv-issue { position: absolute; z-index: 3; top: max(78px, 10dvh); left: 0; right: 0; text-align: center; font-size: clamp(18px, 5vw, 24px); letter-spacing: .18em; text-transform: uppercase; color: var(--mast); opacity: .85; }
.cv-mast { position: absolute; z-index: 1; left: 0; top: 15dvh; white-space: nowrap; line-height: .85; --w: 800; letter-spacing: -.02em; color: var(--mast); will-change: transform; text-align: center; }
.cv-mast .ln { display: block; overflow: hidden; padding: .05em .05em .02em; }
.cv-mast .ch { display: inline-block; will-change: transform; }
.cv-imgs { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 100%; pointer-events: none; }
.cv-imgs img { position: absolute; bottom: 0; left: 50%; width: auto; max-width: none; opacity: 0; will-change: transform, opacity;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent); }
.cv-line { position: absolute; z-index: 4; left: 5vw; bottom: max(4.5dvh, 24px); max-width: min(58vw, 380px); font-size: clamp(17px, 4.6vw, 24px); line-height: 1.3; --w: 600; background: var(--cink); color: var(--cbg); padding: 11px 15px 12px; border-radius: 3px; rotate: -1.5deg; box-shadow: 0 10px 22px rgba(0, 0, 0, .3); border-left: 4px solid var(--crim); }

/* ---------- the wall ---------- */
.wall-title { position: absolute; z-index: 5; top: max(78px, 10dvh); left: 0; right: 0; padding: 0 6vw; text-align: center; font-size: clamp(26px, 7vw, 62px); --w: 700; line-height: 1.12; text-shadow: 0 2px 20px rgba(8, 4, 24, .7); }
.wall-rows { position: absolute; inset: 0; }
.wall-row { position: absolute; left: 0; display: flex; align-items: center; gap: 5vw; padding-left: 8vw; will-change: transform; --iw: 24vw; }
.wall-row:nth-child(1) { top: 30%; --iw: min(24vw, 200px); }
.wall-row:nth-child(2) { top: 55%; --iw: min(34vw, 300px); }
.wall-row:nth-child(3) { top: 80%; --iw: min(28vw, 240px); }
.w-item { position: relative; flex: none; width: var(--iw); rotate: var(--r, 0deg); cursor: zoom-in; transform: translateY(-50%); }
.w-item .fr { background: #F6EBD4; padding: 6px 6px 6px; border-radius: 3px; box-shadow: 0 12px 26px rgba(0, 0, 0, .5), 0 0 0 1px rgba(232, 194, 106, .4); }
.w-item img, .w-item video { width: 100%; height: auto; border-radius: 1px; }
.w-item .play { position: absolute; right: 12px; bottom: 12px; width: 38px; height: 38px; border-radius: 50%; background: var(--crim); color: #fff; display: grid; place-items: center; box-shadow: 0 4px 10px rgba(0, 0, 0, .35); }
.w-item .tag { position: absolute; left: -8px; bottom: -10px; max-width: 118%; padding: 3px 8px 4px; border-radius: 3px; background: #F6EBD4; color: #2A1B5E; font-size: clamp(14px, 3.6vw, 16px); line-height: 1.2; rotate: -2deg; box-shadow: 0 4px 10px rgba(0, 0, 0, .35); }

/* ---------- finale: the wish ---------- */
.fin .pin { background: transparent; }
#stars { position: absolute; inset: 0; width: 100%; height: 100%; }
.fin-top { position: absolute; z-index: 3; top: max(86px, 11dvh); left: 0; right: 0; text-align: center; padding: 0 20px; }
.fin-pre { font-size: clamp(21px, 5.6vw, 28px); opacity: 0; }
.fin-wish { font-size: clamp(48px, 14vw, 112px); line-height: 1.05; --w: 600; letter-spacing: .02em; }
.cake { position: absolute; z-index: 2; left: 50%; bottom: max(13dvh, 76px); width: min(88vw, 420px); transform: translateX(-50%); }
.cake svg { display: block; width: 100%; height: auto; overflow: visible; }
#ptext { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; }
.fin-hint { position: absolute; z-index: 5; left: 0; right: 0; bottom: max(3dvh, 14px); text-align: center; display: grid; justify-items: center; gap: 2px; opacity: 0; }
.fh-a { font-size: 26px; }
.fh-b { font-size: 18px; opacity: .65; text-decoration: underline; text-underline-offset: 4px; padding: 6px 10px; }
.fin-bday { position: absolute; z-index: 5; inset: 0; display: grid; align-content: end; justify-items: center; text-align: center; pointer-events: none; gap: 6px; padding: 0 20px max(17dvh, 90px); }
.fb-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.fb-plus { font-size: clamp(60px, 18vw, 130px); --w: 800; color: var(--amber-l); line-height: 1; opacity: 0; rotate: -5deg; }
.fb-sub { font-size: clamp(21px, 5.6vw, 28px); opacity: 0; color: var(--wist-p); }

/* ---------- the training ground: she comes in, and breathes ---------- */
.breath .pin { background: #07040F; }
.b-back { position: absolute; inset: -5% -4% -3%; background: url("../img/ds/scaffold.webp") 38% 50% / cover no-repeat; filter: saturate(.85) brightness(.78); will-change: transform; }
.b-back::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(70, 34, 140, .62), rgba(30, 14, 70, .3) 52%, rgba(8, 4, 24, .82)); mix-blend-mode: multiply; }
.b-aura { position: absolute; left: 50%; top: 52%; width: min(120vw, 92dvh); aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; opacity: 0; }
.b-aura i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255, 143, 181, .55); box-shadow: 0 0 46px rgba(255, 143, 181, .4), inset 0 0 46px rgba(255, 143, 181, .28); }
.b-aura i:nth-child(2) { inset: 12%; border-color: rgba(255, 210, 122, .5); box-shadow: 0 0 40px rgba(255, 210, 122, .35), inset 0 0 40px rgba(255, 210, 122, .22); }
.b-aura i:nth-child(3) { inset: 24%; border-color: rgba(216, 200, 245, .55); box-shadow: 0 0 36px rgba(216, 200, 245, .35), inset 0 0 36px rgba(216, 200, 245, .2); }
.b-tree { position: absolute; bottom: -4%; height: 96dvh; width: auto; max-width: none; filter: brightness(.5) saturate(.9) contrast(1.05); will-change: transform; pointer-events: none; }
.b-tree.l { left: -34%; }
.b-tree.r { right: -34%; transform: scaleX(-1); }
.b-ground { position: absolute; left: 50%; bottom: -6%; width: 150%; height: 46dvh; transform: translateX(-50%) perspective(800px) rotateX(58deg); transform-origin: 50% 100%;
  background: url("../img/ds/ground.webp") 50% 50% / 100% 100% no-repeat; -webkit-mask-image: radial-gradient(closest-side, #000 52%, transparent 100%); mask-image: radial-gradient(closest-side, #000 52%, transparent 100%); filter: brightness(.9); }
.b-fx { position: absolute; inset: 0; pointer-events: none; }
/* the glow lives on the wrapper: on the image itself the feet-fade mask would clip it to a visible box */
.b-who { position: absolute; left: 50%; bottom: -1%; height: min(80dvh, 118vw); aspect-ratio: 1181 / 1500; transform: translateX(-50%); will-change: transform;
  filter: drop-shadow(0 0 22px rgba(255, 143, 181, calc(var(--charge, 0) * .8))) drop-shadow(0 14px 22px rgba(0, 0, 0, .5)); }
.b-saida { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; -webkit-mask-image: linear-gradient(#000 88%, transparent); mask-image: linear-gradient(#000 88%, transparent); }
.b-hit { position: absolute; inset: 6% 8% 4%; border-radius: 40%; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.b-fog { position: absolute; left: -10%; right: -10%; bottom: -4%; height: 42%; background: url("../img/ds/fog.webp") 50% 100% / cover no-repeat; mix-blend-mode: screen; opacity: .4; pointer-events: none; animation: fogA 38s ease-in-out infinite alternate; }
#bCv { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; }
.b-hint { position: absolute; z-index: 6; left: 0; right: 0; bottom: max(5dvh, 26px); text-align: center; font-size: clamp(26px, 7vw, 38px); color: var(--cream); text-shadow: 0 2px 16px rgba(0, 0, 0, .8), 0 0 30px rgba(255, 143, 181, .4); pointer-events: none; opacity: 0; letter-spacing: .06em; }
.b-hint.ready { animation: hintPulse 1.8s ease-in-out infinite; }
@keyframes hintPulse { 50% { opacity: .55; transform: translateY(-4px); } }
.b-slash { position: absolute; left: -10%; width: 120%; height: 7px; border-radius: 50%; background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff 18%, #FFE9B8 60%, rgba(255, 143, 181, 0)); box-shadow: 0 0 22px 4px rgba(255, 214, 130, .75); mix-blend-mode: screen; pointer-events: none; }
.b-flash { position: absolute; inset: 0; z-index: 7; background: radial-gradient(circle at 50% 54%, #FFF7E0, #FFD9A8 40%, #FF9DBA 100%); opacity: 0; pointer-events: none; }

/* ---------- lightbox ---------- */
#lb { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 20px; background: rgba(10, 5, 28, .9); opacity: 0; }
#lb[hidden] { display: none; }
.lb-fig { margin: 0; text-align: center; }
.lb-fig img, .lb-fig video { max-width: 92vw; max-height: 74dvh; margin: 0 auto; border-radius: 4px; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
.lb-fig figcaption { font-family: var(--f-hand); font-weight: 600; font-size: 22px; margin-top: 14px; max-width: 30ch; margin-inline: auto; color: var(--wist-p); }
.lb-x { position: absolute; top: max(16px, env(safe-area-inset-top)); right: 16px; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid rgba(246, 235, 212, .5); display: grid; place-items: center; }

/* ---------- bigger screens ---------- */
@media (min-width: 900px) {
  .tunnel { --cw: min(26vw, 38dvh); }
  #hud { padding: 0 32px; top: max(22px, env(safe-area-inset-top)); }
  .board-items { grid-template-columns: repeat(3, 1fr); gap: 12dvh 4vw; padding: 0 8vw; }
  .pol { width: min(100%, 340px); justify-self: center !important; }
  .pol:nth-child(3n+2) { margin-top: 10dvh; }
  .pol:nth-child(even) .note { text-align: left; margin-left: 0; }
  .cv-line { left: 9vw; }
  .b-tree.l { left: -6%; }
  .b-tree.r { right: -6%; }
}
@media (prefers-reduced-motion: reduce) {
  .seal.idle .seal-body { animation: none; }
  .beat { transform: none; }
  .w-fog, .w-canopy, .b-fog { animation: none; }
}