/* Keys to My Heart: chronological timeline. Colours sampled from the film. */
@font-face{font-family:Fraunces;src:url(fonts/Fraunces.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:Fraunces;src:url(fonts/Fraunces-Italic.woff2) format("woff2");font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:Old;src:url(fonts/OldStandardTT-Bold.woff2)}
@font-face{font-family:Lime;src:url(fonts/Limelight-Regular.woff2)}
@font-face{font-family:Grand;src:url(fonts/GrandHotel-Regular.woff2)}
@font-face{font-family:Fasc;src:url(fonts/FascinateInline-Regular.woff2)}
@font-face{font-family:Tilt;src:url(fonts/TiltWarp-Regular.woff2)}
@font-face{font-family:Sedg;src:url(fonts/SedgwickAveDisplay-Regular.woff2)}
@font-face{font-family:Fred;src:url(fonts/Fredoka-Bold.woff2)}
@font-face{font-family:Geist;src:url(fonts/Geist-SemiBold.woff2);font-weight:100 900}
@font-face{font-family:Mono;src:url(fonts/GeistMono-Regular.woff2)}
@font-face{font-family:Elite;src:url(fonts/SpecialElite-Regular.woff2)}
@font-face{font-family:Hand;src:url(fonts/Caveat-Bold.woff2)}

:root{--clay:#D97757;--paper:#f4ecda;--ink:#1a1408;--pencil:#5b7fb5;--teal:#1f8a80;--yellow:#efa91e}
*{box-sizing:border-box;margin:0}
html{background:var(--paper)}
body{color:var(--ink);font:17px/1.45 Georgia,serif;overflow-x:clip}
img{display:block;width:100%;height:auto}
.a{display:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Without JS: an ordinary stacked page */
.p{position:relative;min-height:100vh;padding:clamp(20px,4vw,56px);overflow:hidden}
#star,#disc,#scrub{display:none}

/* With JS: pinned stage and horizontal rail */
.js #track{height:1400vh}
.js #stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.js #rail{display:flex;width:900%;height:100%;will-change:transform}
.js .p{flex:0 0 calc(100%/9);width:calc(100%/9);height:100%;min-height:0;--off:0;--reveal:1}
.js .a{display:block;position:absolute;aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none}
.js #star{display:block;position:absolute;left:0;top:0;width:100px;height:100px;margin:-50px 0 0 -50px;overflow:visible;z-index:30;pointer-events:none}
#star path{fill:var(--clay);stroke:var(--clay);stroke-width:7;stroke-linejoin:round}

.frame{position:relative;z-index:2;margin:0;transform:translateX(calc(var(--off,0)*var(--d,0)*100vw))}
.copy{position:relative;z-index:2;transform:translateX(calc(var(--off,0)*var(--c,0)*100vw))}
.bar{position:absolute;left:0;right:0;top:0;z-index:5;display:flex;justify-content:space-between;gap:16px;padding:18px clamp(20px,4vw,56px)}
h1,h2{font-weight:400;line-height:1}

/* ── disc + timeline handle ──────────────── */
.js #disc{display:block;position:absolute;left:0;top:0;width:200px;height:200px;margin:-100px 0 0 -100px;z-index:20;pointer-events:none}
/* a gradient, not box-shadow: a scaled box-shadow rasterised into a visible rectangle */
#shade{position:absolute;left:-16%;right:-16%;top:-5%;bottom:-13%;border-radius:50%;opacity:var(--shade,1);background:radial-gradient(closest-side,rgba(26,20,8,.2) 66%,rgba(26,20,8,.07) 84%,rgba(26,20,8,0))}
#plate{position:absolute;inset:0;border-radius:50%;background:var(--plate,#fde7ce);box-shadow:inset 0 0 0 2.5px rgba(26,20,8,.2)}
#disc::before,#disc::after,#wheel,#walker{z-index:1}
/* the printed disc: rim with eight viewing notches, and the ground she walks on */
#disc::before{content:"";position:absolute;inset:0;border-radius:50%;opacity:var(--ring,1);background:repeating-conic-gradient(from -2.5deg,#3a332c 0 5deg,transparent 5deg 45deg);-webkit-mask:radial-gradient(closest-side,transparent 94%,#000 94.5%);mask:radial-gradient(closest-side,transparent 94%,#000 94.5%)}
#disc::after{content:"";position:absolute;left:50%;top:50%;width:47px;height:47px;margin:-23.5px 0 0 -23.5px;border-radius:50%;border:1.2px solid #3a332c;box-shadow:0 0 0 2.2px #fde7ce,0 0 0 2.8px rgba(58,51,44,.45);opacity:var(--ring,1)}
#wheel{position:absolute;inset:0;opacity:var(--ring,1)}
#wheel i{position:absolute;left:50%;top:50%;width:39px;height:71px;margin:-35.5px 0 0 -19.5px;background:url(img/walk-8.webp) 0 0/800% 100% no-repeat}
#walker{position:absolute;left:31.5px;top:0;width:137px;height:200px;opacity:var(--walker,0);transform:scaleX(var(--face,-1))}
#wA,#wB{position:absolute;inset:0;background:0 0/800% 100% no-repeat}
#rim{position:absolute;inset:-5px;z-index:1;border-radius:50%;opacity:0;background:conic-gradient(var(--clay) calc(var(--sweep,0)*1turn),transparent 0);-webkit-mask:radial-gradient(closest-side,transparent 92%,#000 93%);mask:radial-gradient(closest-side,transparent 92%,#000 93%)}

.js #scrub{display:flex;align-items:center;gap:14px;position:absolute;left:clamp(14px,4vw,56px);right:clamp(14px,4vw,56px);bottom:18px;height:64px;z-index:19;color:var(--ui,#1a1408);transition:color .3s}
#scrub button{all:unset;cursor:pointer;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;font:16px Mono,monospace}
#scrub button:hover{background:color-mix(in srgb,currentColor 14%,transparent)}
#rule{position:relative;flex:1;height:100%}
#rule::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:currentColor;opacity:.55}
#ticks{list-style:none;padding:0;position:absolute;inset:0}
#ticks li{position:absolute;top:50%;width:1px;height:9px;margin-top:-4px;background:currentColor}
#ticks span{position:absolute;bottom:13px;left:50%;transform:translateX(-50%);font:11px/1 Mono,monospace;white-space:nowrap;opacity:.72}
#ticks li.on span{opacity:1}
#range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:grab;touch-action:none}
#range:active{cursor:grabbing}
:focus-visible{outline:2px solid var(--clay);outline-offset:3px}
#scrub:has(#range:focus-visible) #rule::before{height:3px;opacity:1}

/* ── 0 HERO: white page, black serif, one accent ── */
.p-hero{background:#f8f5ee;display:grid;place-items:center}
/* Rigid type against the fluid disc. Soft, wonky old-style: a 1920s title that can still bend */
.hero-title{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(16px,3vw,48px);font-family:Fraunces,Old,serif;font-weight:800;font-variation-settings:"opsz" 144,"SOFT" 100,"WONK" 1;letter-spacing:-.025em;pointer-events:none}
.side{display:flex;flex-direction:column;align-items:flex-start}
.side:last-child{align-items:flex-end}
.word{display:inline-block;padding:.08em .06em .2em;margin:-.08em -.06em -.2em;overflow:clip;transform:translateX(calc(var(--off,0)*var(--k,0)*100vw))}
.word.big{font-size:clamp(58px,9.2vw,176px);line-height:.92}
.word.small{font-size:clamp(30px,4.6vw,84px);line-height:1;font-style:italic;font-weight:500;color:var(--clay)}
.wi{display:inline-block;will-change:transform}
.l{display:inline-block;text-align:center;transform-origin:50% 88%}
.js .hero-title:not(.ready) .wi{visibility:hidden}
/* the supporting text sits on the disc's axis: one line above it, the promise below it */
.hero-kicker,.hero-note{position:absolute;left:50%;transform:translateX(-50%);z-index:21;text-align:center;font-family:Geist,"Helvetica Neue",Helvetica,Arial,sans-serif;white-space:nowrap}
.hero-kicker{bottom:calc(50% + var(--heroD,500px)/2 + 20px);font-size:min(calc((var(--free,160px) - 38px)*.72),6vw);line-height:1;font-weight:600;letter-spacing:-.028em}
.hero-kicker br,.hero-note .lead br{display:none}
.hero-note{top:calc(50% + var(--heroD,500px)/2 + 20px)}
.hero-note .lead{display:block;font-size:min(calc(var(--free,160px)*.3),4.2vw);font-weight:600;line-height:1.02;letter-spacing:-.025em}
.hero-note .sub{display:block;font-size:min(calc(var(--free,160px)*.128),1.9vw);font-weight:400;line-height:1.25;margin-top:.4em;letter-spacing:-.012em;opacity:.72}
.hero-note .cue{display:inline-block;margin-top:.4em;font-size:min(calc(var(--free,160px)*.09),1.3vw);font-weight:500;color:#b4532f}
/* tall windows: both blocks stack and grow into the free space */
.tall .hero-kicker{font-size:min(calc(var(--free)*.25),8.4vw);line-height:.93}
.tall .hero-kicker br,.tall .hero-note .lead br{display:inline}
.tall .hero-note{white-space:normal;width:min(46vw,620px)}
.tall .hero-note .lead{font-size:min(calc(var(--free)*.16),5.2vw);line-height:.98}
.tall .hero-note .sub{font-size:min(calc(var(--free)*.064),2.2vw);margin-top:.5em;text-wrap:balance}
.tall .hero-note .cue{font-size:min(calc(var(--free)*.05),1.7vw)}
@media (prefers-reduced-motion:no-preference){.hero-kicker,.hero-note{animation:heroText .9s cubic-bezier(.16,1,.3,1) 1.15s backwards}.hero-note{animation-delay:1.3s}}
@keyframes heroText{from{opacity:0;transform:translate(-50%,16px)}to{opacity:1;transform:translate(-50%,0)}}

/* ── 1 STILL: gallery wall ── */
.p-still{background:#050605;color:#c9c5b6;display:grid;grid-template-columns:minmax(0,1.7fr) minmax(220px,1fr);gap:5vw;align-items:center;padding-bottom:110px;font-family:Elite,monospace}
.p-still .bar{font:12px Elite,monospace;letter-spacing:.14em;text-transform:uppercase}
.p-still h2{font:clamp(28px,3.1vw,50px)/1.08 Old,serif;margin-bottom:18px}
.p-still .frame{--d:.1;box-shadow:0 0 0 1px #2a2c28}
.p-still p{font-size:15px}

/* ── 2 PENCIL: animation paper, blue lines ── */
.p-pencil{background:#f9e6cd;color:#5f5245;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(240px,1fr);gap:4vw;align-items:center;padding-bottom:110px;font-family:Hand,cursive;
 background-image:linear-gradient(rgba(91,127,181,.2) 1px,transparent 1px),linear-gradient(90deg,rgba(91,127,181,.2) 1px,transparent 1px);background-size:44px 44px}
.p-pencil .bar{color:var(--pencil);font:20px Hand,cursive}
.p-pencil h2{font:clamp(44px,5.2vw,86px)/.98 Hand,cursive;color:#3e352c}
.p-pencil p{font-size:25px;line-height:1.15;margin-top:16px;color:var(--pencil)}
.p-pencil .frame{--d:-.14;mix-blend-mode:multiply}
.p-pencil .copy{--c:.2}

/* ── 3 INK: intertitle, heavy border ── */
.p-ink{background:#fbecd8;color:#241e13;display:grid;grid-template-columns:minmax(260px,1fr) minmax(0,1.5fr);gap:4vw;align-items:center;padding-bottom:110px}
.p-ink::after{content:"";position:absolute;inset:12px;border:7px double #241e13;pointer-events:none}
.p-ink .bar{top:18px;font:15px Old,serif;padding-inline:42px}
.p-ink .kick{font:14px Old,serif;letter-spacing:.32em;text-transform:uppercase;margin-bottom:12px}
.p-ink h2{font:clamp(54px,7.2vw,124px)/.92 Lime,serif}
.p-ink h2 em{font:italic clamp(34px,4vw,66px)/1.1 Old,serif;display:block}
.p-ink .copy>p:last-child{font-family:Old,serif;margin-top:18px;max-width:30em}
.p-ink .frame{--d:.12;border:5px solid #241e13}

/* ── 4 CEL: theatre, painted colour ── */
.p-cel{background:linear-gradient(#dfa796 0 66%,#8fb0a8 66%);color:#3f1d22;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(250px,1fr);gap:3vw;align-items:center;padding:clamp(60px,9vh,90px) 13vw 110px}
.curtain{position:absolute;top:0;bottom:0;width:13vw;z-index:3;background:repeating-linear-gradient(90deg,#8e2a2a 0 22px,#b63c35 22px 44px);transform:translateX(calc(var(--off,0)*var(--d)*100vw))}
.curtain.l{left:0;--d:.5}.curtain.r{right:0;--d:-.25}
.p-cel .bar{padding-inline:15vw;font:22px Grand,cursive;color:#5b2329}
.p-cel h2{font:clamp(46px,5.6vw,94px)/.96 Grand,cursive}
.p-cel h2 em{font:normal .92em Fasc,serif;color:#a5322e}
.p-cel p{font-size:17px;margin-top:14px}
.p-cel .frame{--d:.22;box-shadow:0 22px 40px -22px rgba(63,29,34,.6)}
.p-cel .copy{--c:-.1}

/* ── 5 MOD: the rupture ── */
.p-mod{background:#f4e0c9;color:#17332f;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(220px,.62fr);gap:3vw;align-items:center;padding:60px clamp(20px,5vw,80px) 110px}
.shape{position:absolute;transition:none;transform:translate(calc((1 - var(--reveal))*var(--x,0)*1vw),calc((1 - var(--reveal))*var(--y,0)*1vh)) rotate(calc((1 - var(--reveal))*var(--r,0)*1deg))}
.s1{--x:-60;--r:-90;left:-14vh;top:-14vh;width:56vh;height:56vh;background:var(--yellow);border-radius:50%}
.s2{--y:90;--r:90;left:34vw;bottom:-30vh;width:60vh;height:60vh;background:var(--teal);border-radius:50%}
.s3{--x:70;--r:180;right:-8vw;top:0;width:30vw;height:38vh;background:var(--yellow);border-radius:0 0 0 100%}
.s4{--y:-70;--r:-45;left:48vw;top:7vh;width:13vh;height:13vh;background:var(--clay);border-radius:50%}
.p-mod .bar{font:20px Tilt,sans-serif}
.p-mod h2{position:relative;font:clamp(66px,10.8vw,206px)/.86 Tilt,sans-serif;letter-spacing:-.03em}
.p-mod h2 span{display:inline-block;transform:translateY(calc((1 - var(--reveal))*90vh))}
.p-mod h2 span:nth-child(2){transform:translateY(calc((1 - var(--reveal))*-90vh))}
.p-mod .copy>p{font:19px Tilt,sans-serif;margin-top:18px}
.p-mod .frame{justify-self:end;width:min(100%,calc((100vh - 190px)*.571));border-radius:0;transform:translateX(calc((1 - var(--reveal))*55vw))}

/* ── 6 NINETIES: painted feature ── */
.p-nineties{background:#32221c;color:#f8e6c8;display:grid;grid-template-columns:minmax(220px,.62fr) minmax(0,1.4fr);gap:5vw;align-items:center;padding:60px clamp(20px,6vw,100px) 110px}
.p-nineties .bg{position:absolute;inset:-6%;background-size:cover;background-position:50% 20%;filter:blur(16px) saturate(1.2) brightness(.62);transform:translateX(calc(var(--off,0)*.24*100vw))}
.p-nineties .bar{font:21px Sedg,cursive}
.p-nineties h2{font:clamp(52px,7vw,122px)/.95 Sedg,cursive}
.p-nineties p{font-size:19px;margin-top:16px}
.p-nineties .frame{--d:.1;width:min(100%,calc((100vh - 190px)*.571));box-shadow:0 26px 50px -22px rgba(0,0,0,.8)}
.p-nineties .copy{--c:.22}

/* ── 7 3D: the frame is the room ── */
.p-threed{background:#0f0d12;color:#ffe6c9;padding:0}
.p-threed .frame{position:absolute;left:50%;bottom:84px;width:max(100%,calc((100svh - 84px)*1.7778));aspect-ratio:16/9;transform:translateX(-50%) scale(calc(1 + var(--off,0)*.28));transform-origin:50% 60%}
.p-threed .frame img{width:100%;height:100%}
.p-threed .bar{font:17px Fred,sans-serif;text-shadow:0 1px 8px #000}
.p-threed .copy{position:absolute;left:clamp(20px,5vw,80px);top:74px;--c:.3;max-width:30em}
.p-threed h2{font:clamp(38px,4.6vw,80px)/1 Fred,sans-serif;text-shadow:0 2px 26px rgba(217,119,87,.75),0 1px 10px #000}
.p-threed .copy p{margin-top:10px;text-shadow:0 1px 8px #000}

/* ── 8 TODAY: editorial UI ── */
.p-today{background:var(--paper);color:var(--ink);display:grid;grid-template-columns:minmax(260px,.72fr) minmax(0,1.28fr);gap:4vw;align-items:center;padding:60px clamp(20px,6vw,100px) 110px;font-family:Geist,sans-serif}
.p-today .bar{font:13px Mono,monospace}
.count{display:flex;align-items:baseline;font:clamp(110px,17vw,300px)/.8 Geist,sans-serif;letter-spacing:-.05em}
.count span{font-size:.28em;letter-spacing:0;color:var(--clay);margin-left:.2em}
.p-today h2{font:clamp(26px,3.2vw,50px)/1.05 Geist,sans-serif;margin-top:26px}
.p-today p:not(.count){margin-top:8px;font-size:18px}
.links{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:24px!important}
.cta{display:inline-block;padding:12px 20px;background:var(--ink);color:var(--paper);text-decoration:none;font:14px Mono,monospace}
.cta:hover{background:var(--clay);color:var(--ink)}
.agents{font:13px Mono,monospace;color:inherit}
.p-today .frame{--d:.12;width:100%;aspect-ratio:16/9;background:#000}
#play{all:unset;display:block;width:100%;height:100%;cursor:pointer}
#play img{width:100%;height:100%;object-fit:cover}
.film iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt{position:absolute;right:0;top:calc(100% + 8px);font:12px Mono,monospace;color:inherit}
#tri{fill:var(--paper);opacity:0}
.w{display:inline-block}
.wi2{display:inline-block}
.p-today .w,.p-threed .w{overflow:clip;padding-bottom:.14em;margin-bottom:-.14em}

#epilogue{padding:56px clamp(20px,6vw,100px);font-family:Geist,sans-serif;font-size:15px;max-width:60em}
#epilogue p+p{margin-top:10px;opacity:.75}

@keyframes boil{0%{transform:translate(0,0)}50%{transform:translate(.6px,-.8px)}100%{transform:translate(-.6px,.5px)}}
@media (prefers-reduced-motion:no-preference){.p-ink h2{animation:boil .33s steps(1) infinite}}

/* ── Phones: image above, text below ── */
@media (max-width:760px),(max-aspect-ratio:1/1){
 .p-still,.p-pencil,.p-ink,.p-cel,.p-mod,.p-nineties,.p-today{grid-template-columns:1fr;grid-template-rows:auto auto;align-content:center;gap:18px;padding:64px 16px 104px}
 .p-ink .frame{order:-1}.p-mod .frame,.p-nineties .frame{order:-1;justify-self:center;width:calc((100svh - 400px)*.571);max-width:70vw}
 .p-cel{padding-inline:9vw}.curtain{width:7vw}.p-cel .bar{padding-inline:10vw}
 .bar span:nth-child(2){display:none}
 .hero-title{flex-direction:column;justify-content:space-between;align-items:center;text-align:center;padding:13svh 0 22svh}
 .side,.side:last-child{flex-direction:row;align-items:baseline;gap:.22em}
 .word.big{font-size:min(19vw,12svh)}.word.small{font-size:min(9vw,6svh)}
 .p-today .frame{order:-1}
 .s1{width:30vh;height:30vh;left:-10vh;top:-8vh}.s2{width:34vh;height:34vh;bottom:-16vh;left:42vw}.s3{width:26vw;height:16vh}.s4{display:none}
 .hero-kicker{bottom:auto;top:18px;font-size:min(9vw,5svh)}
 .hero-note{top:auto;bottom:30px;width:calc(100% - 32px);white-space:normal}
 .hero-note .lead{font-size:min(7.6vw,4.4svh)}.hero-note .sub{font-size:min(4vw,2.3svh)}.hero-note .cue{font-size:min(3.6vw,2svh)}
 .p-mod h2{font-size:min(20vw,11svh)}.count{font-size:min(32vw,17svh)}
 #ticks span{display:none}#ticks li.on span{display:block}
 #scrub button{display:none}
}