@property --dusk { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --night { syntax: "<number>"; inherits: true; initial-value: 0; }
:root {
  --paper: #f5f0e7; --paper2: #fffcf7; --ink: #292430; --sub: #676170;
  --violet: #6b548c; --violet-d: #3c2c56; --amber: #e7b75a; --amber-d: #b8862c;
  --night1: #0e0e24; --night2: #2a2140; --dusk1: #46346c; --dusk2: #ee966f; --day1: #68a0d6; --day2: #cee4f2;
  --serif: "Noto Serif JP", "Noto Serif KR", serif; --sans: "Noto Sans JP", "Noto Sans KR", system-ui, sans-serif;
  --r: 18px; --step: 10px;
  --hand: "Klee One", "Noto Serif JP", serif;
  --t: 0; /* scroll progress of the page, 0..1 (set by JS) */
}
html[lang="ko"] body { word-break: keep-all; }
html[lang="ja"] body { word-break: auto-phrase; }
html[lang="ko"] { --hand: "Gowun Batang", "Noto Serif KR", serif; --serif: "Noto Serif KR", "Noto Serif JP", serif; --sans: "Noto Sans KR", "Noto Sans JP", system-ui, sans-serif; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--night1); font-family: var(--sans); line-height: 1.8; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2 { font-family: var(--serif); font-weight: 900; letter-spacing: .02em; line-height: 1.25; margin: 0 0 .6em; }
h2 { font-size: clamp(27px, 3.6vw, 48px); text-wrap: balance; }
em { font-style: normal; color: var(--amber); }

/* fixed sky: day -> dusk -> night as you scroll (JS sets --t) */
.sky { position: fixed; inset: 0; z-index: -1;
  background: linear-gradient(180deg, var(--night1), var(--night2)); }
.sky::before, .sky::after { content: ""; position: absolute; inset: 0; transition: opacity .2s linear; }
.sky::before { background: linear-gradient(180deg, var(--day1), var(--day2)); opacity: calc(1 - min(1, var(--t) * 3)); }
.sky::after { background: linear-gradient(180deg, var(--dusk1), var(--dusk2)); opacity: calc(max(0, min(1, var(--t) * 3)) - max(0, min(1, (var(--t) - .45) * 3))); }
#stars { position: absolute; inset: 0; width: 100%; height: 100%; opacity: clamp(0, calc((var(--t) - .3) * 2.5), 1); z-index: 1; }

/* nav */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; align-items: center; gap: 24px; padding: 14px clamp(16px, 4vw, 40px);
  transition: background .3s, box-shadow .3s; }
.nav.solid { background: rgba(245, 240, 231, .86); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 1px 0 rgba(0,0,0,.06); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--serif); font-weight: 900; font-size: 20px; color: var(--paper2); }
.brand img { border-radius: 9px; }
.nav.solid .brand, .nav.solid .links a { color: var(--ink); }
.links { display: flex; gap: 22px; margin-left: auto; }
.links a { text-decoration: none; font-size: 14px; font-weight: 500; color: var(--paper2); opacity: .9; }
.links a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.lang { display: flex; border-radius: 999px; overflow: hidden; border: 1px solid rgba(255,255,255,.4); }
.nav.solid .lang { border-color: rgba(0,0,0,.15); }
.lang button { background: none; border: 0; padding: 6px 11px; font: 600 12px var(--sans); color: var(--paper2); cursor: pointer; }
.nav.solid .lang button { color: var(--ink); }
.lang button[aria-pressed="true"] { background: var(--amber); color: var(--ink); }

/* hero */
.hero { min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: clamp(16px, 4vw, 64px);
  padding: 110px clamp(20px, 6vw, 96px) 60px; position: relative; }
.eyebrow { display: inline-block; padding: 4px 14px; border-radius: 999px; background: rgba(255,255,255,.55); font-size: 13px; font-weight: 700; color: var(--violet-d); letter-spacing: .08em; }
.hero h1 { font-size: clamp(36px, 4.4vw, 68px); color: var(--hero-ink); text-shadow: 0 2px 0 rgba(255,255,255,calc(.5 - var(--lite) * .5)), 0 2px 14px rgba(20,12,34,calc(var(--lite) * .35)); margin-top: .35em; }
.lead { font-size: clamp(16px, 1.5vw, 19px); color: var(--hero-ink); font-weight: 500; }
.lead2 { font-size: clamp(14px, 1.3vw, 17px); margin-top: 6px; opacity: .92; text-wrap: balance; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; align-items: center; }
.cta .soon { display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border-radius: 14px; background: color-mix(in srgb, var(--amber) calc(var(--night) * 100%), var(--ink)); color: color-mix(in srgb, var(--ink) calc(var(--night) * 100%), var(--paper2)); font-weight: 700; }
.cta .soon i { --dot: color-mix(in srgb, var(--ink) calc(var(--night, 0) * 100%), var(--amber)); width: 8px; height: 8px; border-radius: 50%; background: var(--dot); animation: pulse 2s infinite; }
.cta .plat { font-size: 14px; color: var(--hero-ink); font-weight: 600; }
.cta img.badge { height: 54px; width: auto; }
.cta img.badge[src*="google_play_en"] { height: 81px; margin: -13.5px -10px; }   /* the en Google Play PNG has built-in padding (ja/ko do not); this keeps its height equal to the others */
.cta-note { font-size: 13px; color: var(--hero-ink); opacity: .85; margin-top: 12px; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--dot) 70%, transparent); } 70% { box-shadow: 0 0 0 10px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.hero-art { position: relative; aspect-ratio: 1192 / 860; }
.diorama { position: absolute; inset: 0; }
.diorama .d { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; filter: drop-shadow(0 30px 30px rgba(20,12,34,.35)); }
.diorama .dusk { opacity: var(--dusk); } .diorama .night { opacity: var(--night); }
.phone { position: absolute; right: 1%; bottom: -16%; width: 29%; margin: 0; border-radius: 13% / 6%; overflow: hidden; border: 7px solid #17141f; outline: 2px solid rgba(255,255,255,.35); outline-offset: -1px;
  box-shadow: 14px 18px 0 rgba(20,12,34,.32), 0 30px 60px rgba(20,12,34,.25); background: #17141f; }
.phone img { width: 100%; border-radius: 10% / 4.6%; }
.phone::before { content: ""; position: absolute; z-index: 2; top: 1.6%; left: 50%; translate: -50% 0; width: 30%; height: 2.4%; border-radius: 99px; background: #17141f; }
.float { animation: float 6s ease-in-out infinite; }
@keyframes float { 0%,100% { transform: translateY(0) rotate(2deg);} 50% { transform: translateY(-12px) rotate(1deg);} }
.scroll-hint { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; text-decoration: none; background: rgba(255,255,255,.7); color: var(--ink); font-weight: 700; animation: bob 2.4s infinite; }
@keyframes bob { 50% { transform: translate(-50%, 6px); } }

/* sections */
.band { padding: clamp(80px, 12vw, 150px) clamp(20px, 6vw, 96px); position: relative; }
.band:not(.dark):not(.dusk) { background: var(--paper); }
.band.dark { background: linear-gradient(180deg, rgba(14,14,36,.92), rgba(42,33,64,.92)); color: var(--paper2); }
.band.dusk { background: linear-gradient(180deg, rgba(70,52,108,.94), rgba(160,90,110,.9)); color: var(--paper2); }
.paperband { background-image: radial-gradient(rgba(0,0,0,.035) 1px, transparent 1px); background-size: 4px 4px; }
.kicker { display: flex; align-items: center; gap: 12px; font: 600 12px var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--amber-d); margin: 0 0 14px; }
.kicker span { font: 900 15px var(--serif); letter-spacing: .1em; }
.kicker span::after { content: ""; display: inline-block; width: 28px; height: 1px; background: currentColor; vertical-align: middle; margin-left: 12px; opacity: .6; }
.center .kicker { justify-content: center; }
.dark .kicker, .dusk .kicker, .lifeline .kicker, .film .kicker { color: var(--amber); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 6vw, 90px); align-items: center; max-width: 1180px; margin: 0 auto; }
.split.rev .copy { order: 2; }
.copy p { font-size: 17px; color: var(--sub); max-width: 32em; }
.center { text-align: center; max-width: 820px; margin: 0 auto; }
.sub { font-size: 17px; opacity: .85; }
.card { margin: 0; max-width: 380px; justify-self: center; border-radius: var(--r); overflow: hidden; border: 6px solid var(--paper2); box-shadow: 16px 18px 0 rgba(60,44,86,.22); background: var(--paper2); }
.tilt-r { transform: rotate(2deg); } .tilt-l { transform: rotate(-2deg); }

/* moment */
.moment { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 70px); max-width: 1080px; margin: 50px auto 0; align-items: start; }
.mom-scene { border-radius: var(--r); overflow: hidden; border: 6px solid var(--paper2); box-shadow: 14px 16px 0 rgba(0,0,0,.35); max-width: 400px; justify-self: end; }
.mom-ui { background: var(--paper2); color: var(--ink); border-radius: var(--r); padding: clamp(22px, 3vw, 36px); box-shadow: 0 30px 60px rgba(0,0,0,.35); }
.mom-age { margin: 0; font-size: 13px; font-weight: 700; color: var(--violet); letter-spacing: .1em; }
.mom-q { text-wrap: balance; font-family: var(--serif); font-size: clamp(22px, 2.6vw, 30px); font-weight: 700; margin: 8px 0 4px; }
.mom-wait { font-size: 13px; color: var(--sub); margin: 0 0 18px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { font: 700 16px var(--sans); padding: 12px 18px; border-radius: 12px; border: 2px solid var(--violet); background: #efe9f6; color: var(--violet-d); cursor: pointer; box-shadow: 0 4px 0 var(--violet); transition: transform .08s, box-shadow .08s; }
.chip:hover { background: #e4dbf1; } .chip:active, .chip.on { transform: translateY(4px); box-shadow: 0 0 0 var(--violet); }
.chip.on { background: var(--violet); color: #fff; }
.mom-result { margin-top: 22px; border-top: 1px dashed #d6cbbb; padding-top: 18px; animation: rise .6s ease both; }
.skip { display: inline-block; margin: 0 0 12px; padding: 4px 12px; border-radius: 999px; background: var(--ink); color: var(--amber); font-weight: 700; font-size: 13px; letter-spacing: .1em; }
.badge { margin: 0; font-size: 13px; font-weight: 700; color: var(--amber-d); }
.back { margin: 6px 0; font-size: 16px; }
.inner { margin: 6px 0 0; font-family: var(--hand); font-weight: 600; font-size: 20px; color: var(--violet-d); }
.more { margin-top: 16px; background: none; border: 0; padding: 0; font: 700 15px var(--sans); color: var(--violet); cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.last { margin-top: 14px; border-radius: 14px; overflow: hidden; border: 1px solid #e6dccd; animation: rise .6s ease both; }
.fine { font-size: 12px; opacity: .7; margin-top: 18px; }
@keyframes rise { from { opacity: 0; transform: translateY(12px);} to { opacity: 1; transform: none; } }

/* hold demo */
.hold-demo { margin-top: 26px; background: var(--paper2); border-radius: var(--r); padding: 20px; box-shadow: 0 16px 40px rgba(60,44,86,.15); max-width: 440px; }
.hold-title { margin: 0 0 10px; font-family: var(--serif); font-weight: 900; font-size: 20px; }
.opt { padding: 12px 14px; border-radius: 12px; background: #fff; border: 1px solid #e6dccd; margin-bottom: 8px; font-weight: 500; }
.opt small { display: block; font-size: 11px; color: var(--sub); font-style: italic; }
.opt.lean { border-color: var(--amber); box-shadow: inset 4px 0 0 var(--amber); }
.hold { position: relative; width: 100%; margin-top: 6px; padding: 14px; border-radius: 12px; border: 0; background: var(--ink); color: #fff; font: 700 15px var(--sans); cursor: pointer; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
.hold .fill { position: absolute; inset: 0; width: 0; background: var(--violet); transition: width .1s linear; }
.hold .lbl { position: relative; }
.hold.done { background: var(--violet); }
.hold-msg { margin: 12px 0 0; font-size: 14px; color: var(--violet-d); font-weight: 600; animation: rise .5s ease both; }

/* reel */
.reel { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 40px clamp(0px, 4vw, 40px) 20px; max-width: 1280px; margin: 0 auto; scrollbar-width: thin; }
.frame { flex: 0 0 min(300px, 70vw); scroll-snap-align: center; margin: 0; position: relative; border-radius: 14px; overflow: hidden; border: 5px solid var(--paper2); box-shadow: 10px 12px 0 rgba(0,0,0,.25); background: var(--paper2); }
.frame figcaption { position: absolute; top: 10px; right: 10px; padding: 2px 12px; border-radius: 999px; background: var(--amber); color: var(--ink); font: 900 18px var(--serif); }
html[lang="ja"] .frame figcaption::after { content: "歳"; font-size: 13px; }
html[lang="ko"] .frame figcaption::after { content: "살"; font-size: 13px; }
html[lang="en"] .frame figcaption::before { content: "Age "; font-size: 13px; }

/* newspaper */
.newspaper { margin: 0; max-width: 400px; justify-self: center; border-radius: 6px; overflow: hidden; box-shadow: 0 2px 0 #e9e1d3, 0 4px 0 #ddd3c2, 0 30px 50px rgba(60,44,86,.25); transform-origin: top center; }
.newspaper.reveal { transform: translateY(-30px) scaleY(.6); opacity: 0; transition: transform 1.1s cubic-bezier(.2,.8,.2,1), opacity .6s; }
.newspaper.reveal.in { transform: none; opacity: 1; }

/* numbers */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1080px; margin: 0 auto; }
.stat { text-align: center; padding: 26px 18px; border-radius: var(--r); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); }
.stat b { display: block; font-family: var(--serif); font-size: clamp(40px, 5.5vw, 68px); color: var(--amber); line-height: 1.1; margin-bottom: 12px; }
.stat span { font-size: 14px; opacity: .85; display: block; text-wrap: balance; }
.stat b small { font-size: .38em; margin-right: .15em; color: var(--paper2); opacity: .8; font-weight: 700; }

/* faq */
.faq { max-width: 760px; margin: 30px auto 0; }
details { background: var(--paper2); border-radius: 14px; padding: 4px 22px; margin-bottom: 12px; box-shadow: 0 6px 18px rgba(60,44,86,.08); }
summary { cursor: pointer; padding: 16px 0; font-weight: 700; font-size: 16px; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
summary::after { content: "+"; font-family: var(--serif); font-size: 22px; color: var(--violet); line-height: 1; }
details[open] summary::after { content: "−"; }
details p { margin: 0 0 18px; color: var(--sub); }

/* final */
.final { padding: clamp(100px, 14vw, 180px) 20px; color: var(--paper2); text-align: center; }
.final-icon { border-radius: 28px; margin: 0 auto 26px; box-shadow: 0 20px 40px rgba(0,0,0,.4); }
.final .cta { justify-content: center; }
.final .cta .soon { background: var(--amber); color: var(--ink); }
.final .cta .soon i { --dot: var(--ink); }   /* amber button: dark dot */
.final .cta .plat { color: var(--paper2); }
.foot { background: #0b0a1a; color: #b8b1c6; font-size: 13px; padding: 28px 20px; }
.foot-in { max-width: 1180px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
.foot a { color: #e6e0f0; }

/* reveal */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .8s ease; }
.reveal.in { opacity: 1; transform: none; }
.tilt-r.reveal.in { transform: rotate(2deg); } .tilt-l.reveal.in { transform: rotate(-2deg); }

/* hero extras */
html[lang="ja"] .hero h1 span, html[lang="ko"] .hero h1 span { white-space: nowrap; }
.hero h1 em { display: inline-block; text-wrap: balance; }
.hero-copy > * { animation: rise .9s cubic-bezier(.2,.8,.2,1) both; }
.hero-copy > :nth-child(2) { animation-delay: .08s; } .hero-copy > :nth-child(3) { animation-delay: .2s; }
.hero-copy > :nth-child(4) { animation-delay: .32s; } .hero-copy > :nth-child(5) { animation-delay: .4s; }
.hero-art { animation: rise 1.2s .15s cubic-bezier(.2,.8,.2,1) both; }
.diorama { transition: transform .6s cubic-bezier(.2,.8,.2,1), filter .8s ease; }
.hero[data-season="spring"] .diorama { filter: saturate(1.05); }
.hero[data-season="summer"] .diorama { filter: saturate(1.18) contrast(1.03); }
.hero[data-season="autumn"] .diorama { filter: sepia(.22) saturate(1.15) hue-rotate(-8deg); }
.hero[data-season="winter"] .diorama { filter: saturate(.62) brightness(1.06) contrast(.96); }
.season-fx { position: absolute; inset: -12% -6% -6%; width: 112%; height: 118%; pointer-events: none; z-index: 1; }
.season-pill { position: absolute; left: 6%; top: 2%; z-index: 2; display: flex; align-items: center; gap: 8px; margin: 0; padding: 5px 14px 5px 10px; border-radius: 999px;
  background: rgba(18,15,30,.55); color: #fff; font: 700 13px var(--sans); letter-spacing: .08em; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.season-pill i { width: 10px; height: 10px; border-radius: 2px; background: var(--sc, #f3a6c0); transition: background .6s; }
.hero[data-season="summer"] { --sc: #7cc96b; } .hero[data-season="autumn"] { --sc: #e08a3c; } .hero[data-season="winter"] { --sc: #dfeaf6; }
.clouds { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; opacity: calc((1 - min(1, var(--t) * 6)) * (1 - var(--night) * .8) * (1 - var(--hp, 0))); }
/* hero: one game day every 16 s: day ~5 s, dusk holds ~2 s, night ~4 s, dawn holds ~1 s; the season turns every 2 days (JS sets data-season) */
.hero { --lite: min(1, calc(var(--dusk) * .9 + var(--night))); --hero-ink: color-mix(in srgb, var(--paper2) calc(var(--lite) * 100%), var(--ink)); animation: daycycle 16s linear infinite; }
@keyframes daycycle { 0%, 30% { --dusk: 0; --night: 0; } 36%, 47% { --dusk: 1; --night: 0; } 53%, 76% { --dusk: 1; --night: 1; } 82%, 88% { --dusk: 1; --night: 0; } 94%, 100% { --dusk: 0; --night: 0; } }
.hero-sky { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero-sky i { position: absolute; inset: 0; }
.hs-day { background: linear-gradient(180deg, var(--day1), var(--day2)); }
.hs-dusk { opacity: var(--dusk); background: linear-gradient(180deg, var(--dusk1), #b9708a 55%, var(--dusk2)); }
.hs-night { opacity: var(--night); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='220' shape-rendering='crispEdges'%3E%3Cg fill='%23fff'%3E%3Crect x='20' y='30' width='2' height='2'/%3E%3Crect x='90' y='12' width='2' height='2' opacity='.6'/%3E%3Crect x='150' y='70' width='3' height='3'/%3E%3Crect x='230' y='25' width='2' height='2' opacity='.7'/%3E%3Crect x='290' y='90' width='2' height='2'/%3E%3Crect x='60' y='120' width='2' height='2' opacity='.5'/%3E%3Crect x='200' y='150' width='2' height='2' opacity='.8'/%3E%3Crect x='120' y='190' width='2' height='2' opacity='.5'/%3E%3Crect x='270' y='200' width='3' height='3' opacity='.6'/%3E%3C/g%3E%3C/svg%3E"), linear-gradient(180deg, #0e0e24, #2a2140 70%, #3c2c56); }
.hero .eyebrow { background: rgba(255,255,255,calc(.55 - var(--night) * .35)); color: color-mix(in srgb, var(--paper2) calc(var(--night) * 100%), var(--violet-d)); }
.clouds i { position: absolute; display: block; width: 192px; height: 64px; image-rendering: pixelated; opacity: .85;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 8' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff' d='M7 1h5v1h2v1h3v1h3v1h2v3H1V6h2V4h2V2h2z'/%3E%3Cpath fill='%23dfeaf6' d='M1 7h22v1H1z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  animation: drift 90s linear infinite; }
.clouds .c1 { top: 16%; left: -10%; } .clouds .c2 { top: 58%; left: 30%; transform: scale(.6); animation-duration: 130s; animation-delay: -40s; opacity: .6; }
.clouds .c3 { top: 30%; left: 60%; transform: scale(.8); animation-duration: 110s; animation-delay: -70s; opacity: .7; }
@keyframes drift { from { translate: -20vw 0; } to { translate: 120vw 0; } }

/* lifeline: pinned, scroll scrubs the years */
.lifeline { height: 560vh; position: relative; color: var(--paper2); background: linear-gradient(180deg, rgba(70,52,108,.94), rgba(120,70,110,.92) 60%, rgba(42,33,64,.95)); }
.pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); grid-template-rows: auto 1fr auto; align-items: center;
  gap: 0 clamp(20px, 3.5vw, 48px); padding: 90px clamp(20px, 6vw, 96px) 34px; max-width: 1280px; margin: 0 auto; }
.ll-copy { grid-column: 1 / -1; align-self: end; }
.ll-copy .sub { max-width: 46em; margin: 0; }
.ll-copy h2 { font-size: clamp(26px, 2.6vw, 40px); margin-bottom: .3em; }
.ll-copy h2 br { content: ""; } .ll-copy h2 br::after { content: " "; }
.ll-side { align-self: center; min-width: 0; }
.ll-side .age { margin: 0; }
.ll-side .age b { font-size: clamp(64px, 7vw, 108px); }
.choice { margin-top: 12px; background: var(--paper2); color: var(--ink); border-radius: 16px; padding: 16px 16px 12px; box-shadow: 0 18px 40px rgba(10,6,24,.3); min-height: 120px; }
.choice:empty { display: none; }
.ch-tag { display: inline-block; margin: 0 0 8px; padding: 2px 10px; border-radius: 999px; background: #efe9f6; color: var(--violet-d); font: 700 11px var(--sans); letter-spacing: .06em; }
.ch-prompt { margin: 0 0 6px; font-size: 13px; line-height: 1.65; color: #4a4352; }
.ch-lean { margin: 0 0 10px; font-family: var(--hand); font-size: 14px; font-weight: 600; color: var(--violet-d); }
.ch-body.short { display: none; }
.ch-opts { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ch-opts li { position: relative; padding: 8px 12px; border-radius: 10px; border: 1px solid #e6dccd; background: #fff; font-size: 14px; font-weight: 500; color: #8a8292; }
.ch-opts li small { display: block; font-size: 10px; font-style: italic; color: var(--sub); }
.ch-opts li.picked { color: var(--ink); border-color: var(--violet); box-shadow: inset 4px 0 0 var(--violet); font-weight: 700; }
.ch-opts li.picked::after { content: attr(data-by); display: block; margin-top: 2px; font-size: 11px; font-weight: 700; color: var(--violet); }
.ch-note { margin: 8px 0 0; font-size: 12px; color: var(--sub); }
.ch-body { margin: 0; font-size: 14px; line-height: 1.7; color: #4a4352; }
.age { margin: 18px 0 0; font-family: var(--serif); line-height: 1; display: flex; align-items: baseline; gap: 6px; }
.age b { font-size: clamp(72px, 11vw, 150px); font-weight: 900; color: var(--amber); font-variant-numeric: tabular-nums; }
.age .unit { font-size: 22px; font-weight: 700; opacity: .9; }
html[lang="en"] .age { flex-direction: row-reverse; justify-content: flex-end; }
.stage { min-width: 0; }
.stage-screen { position: relative; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #120f1e; border: 6px solid var(--paper2);
  box-shadow: 16px 18px 0 rgba(0,0,0,.28), 0 40px 70px rgba(10,6,24,.35); }
.stage-screen video, .stage-screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; opacity: 0; transition: opacity .45s ease; }
.stage-screen .on { opacity: 1; }
.stage-screen .tag { position: absolute; z-index: 3; left: 14px; top: 12px; padding: 3px 12px; border-radius: 999px; background: rgba(18,15,30,.72); color: var(--amber); font: 900 15px var(--serif); }
.stage-cap { margin: 4px 2px 0; font-family: var(--serif); font-size: clamp(18px, 1.6vw, 22px); font-weight: 900; }
.stage-strip { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; margin-top: 10px; }
.stage-strip button { padding: 0; border: 2px solid transparent; border-radius: 6px; overflow: hidden; background: #120f1e; cursor: pointer; aspect-ratio: 16 / 9; opacity: .55; transition: opacity .2s, border-color .2s; }
.stage-strip button img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.stage-strip button.on { opacity: 1; border-color: var(--amber); }
.ll-track { grid-column: 1 / -1; position: relative; height: 34px; border-top: 1px solid rgba(255,255,255,.25); }
.ll-track i { position: absolute; left: 0; top: -2px; height: 3px; width: calc(var(--lp, 0) * 100%); background: var(--amber); box-shadow: 0 0 12px rgba(231,183,90,.7); }
.ll-track span { position: absolute; top: 8px; left: calc(var(--p) * 100%); transform: translateX(-50%); font: 600 11px var(--sans); letter-spacing: .1em; opacity: .6; }
.ll-track span:first-of-type { transform: none; } .ll-track span:last-of-type { transform: translateX(-100%); }

/* film */
.film { padding: clamp(80px, 12vw, 150px) clamp(20px, 6vw, 96px); background: #0b0a1a; color: var(--paper2); }
.screen { position: relative; max-width: 1080px; margin: 40px auto 0; border-radius: 20px; overflow: hidden; box-shadow: 0 40px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.08); background: #000; }
.screen video { width: 100%; height: auto; display: block; aspect-ratio: 16 / 9; }
.play { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: flex; align-items: center; gap: 12px; padding: 16px 28px 16px 22px; border-radius: 999px; border: 0;
  background: rgba(255,252,247,.94); color: var(--ink); font: 700 16px var(--sans); cursor: pointer; box-shadow: 0 10px 30px rgba(0,0,0,.4); transition: transform .2s; }
.play:hover { transform: scale(1.04); }
.screen.playing .play { display: none; }

/* hero scroll: pinned for 60vh; mask shrinks it into a card, layers move at different speeds, the next section rises over it */
.hero-wrap { height: 160vh; height: 160svh; position: relative; }
.hero { --hp: 0; position: sticky; top: 0; overflow: hidden;
  clip-path: inset(calc(var(--hp) * 4%) calc(var(--hp) * 3.5%) 0 round calc(var(--hp) * 36px)); }
.hero::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: rgba(14,14,36,calc(var(--hp) * .45)); }
.hero-copy { translate: 0 calc(var(--hp) * -70px); opacity: calc(1 - var(--hp) * 1.1); }
.hero-art { translate: 0 calc(var(--hp) * -30px); scale: calc(1 + var(--hp) * .12); }
.hero .phone { translate: calc(var(--hp) * -30px) calc(var(--hp) * -150px); }
.hero-sky { scale: calc(1 + var(--hp) * .15); }
.clouds { translate: 0 calc(var(--hp) * -120px); }   /* clouds rise away with the copy instead of drifting over it */
.scroll-hint { opacity: calc(1 - var(--hp) * 3); }
.curtain { margin-top: -60vh; margin-top: -60svh; z-index: 4; border-radius: 36px 36px 0 0; box-shadow: 0 -24px 60px rgba(14,14,36,.28); }

/* responsive */
@media (max-width: 900px) {
  .links { display: none; }
  .lang { margin-left: auto; }
  .hero { grid-template-columns: 1fr; text-align: left; padding-top: 96px; }
  .hero-art { margin-top: 10px; }
  .split, .moment { grid-template-columns: 1fr; }
  .split.rev .copy { order: 0; }
  .mom-scene { justify-self: center; max-width: 320px; }
  .stats { grid-template-columns: 1fr; }
  .pin { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr auto; padding-top: 70px; gap: 8px; align-items: start; }
  .ll-side { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 0 12px; align-self: start; margin-top: 6px; }
  .ll-side .choice { grid-column: 1 / -1; margin-top: 6px; padding: 12px; min-height: 0; }
  .ch-prompt, .ch-body.long { display: none; } .ch-body.short { display: block; } .ch-lean { font-size: 13px; margin-bottom: 6px; } .ch-opts li { padding: 6px 10px; font-size: 13px; } .ch-opts { gap: 4px; }
  .stage-strip { display: none; }
  .ll-copy h2 { font-size: 28px; margin-bottom: .3em; } .ll-copy .sub { display: none; }
  .ll-side .age b { font-size: 52px; }
  .stage { align-self: center; } .stage-cap { font-size: 15px; } .stage-strip { gap: 4px; }
  .nav { gap: 10px; } .brand { font-size: 17px; } .brand img { width: 30px; height: 30px; }
  .lang button { padding: 6px 8px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .float, .scroll-hint, .cta .soon i, .clouds i, .hero-copy > *, .hero-art, .hero { animation: none; }
  .hero-wrap { height: auto; } .hero { position: relative; clip-path: none; } .hero::after { display: none; } .curtain { margin-top: 0; }
  .season-fx { display: none; }
  .stage-screen video, .stage-screen img { transition: none; }
  .reveal, .newspaper.reveal { opacity: 1; transform: none; transition: none; }
}