/* AWARE — "an exhibition in eleven rooms". Base system shared by every room. Hearthlight tokens follow the app (constants/colors.ts). Gold is the only accent. */ @font-face{font-family:'Playfair Display';font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/playfair-400.woff2) format('woff2')} @font-face{font-family:'Playfair Display';font-style:italic;font-weight:400;font-display:swap;src:url(../assets/fonts/playfair-400-italic.woff2) format('woff2')} @font-face{font-family:'Playfair Display';font-style:normal;font-weight:500;font-display:swap;src:url(../assets/fonts/playfair-500.woff2) format('woff2')} @font-face{font-family:'Lato';font-style:normal;font-weight:300;font-display:swap;src:url(../assets/fonts/lato-300.woff2) format('woff2')} @font-face{font-family:'Lato';font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/lato-400.woff2) format('woff2')} @font-face{font-family:'Lato';font-style:normal;font-weight:700;font-display:swap;src:url(../assets/fonts/lato-700.woff2) format('woff2')} :root{ /* ink, warm toward the gold */ --ink:#0B100E; --ink-deep:#060908; --raised:#111915; --surface:#17211C; --surface-up:#1F2B25; --bone:#F2EBDD; --bone-muted:#CFC7B7; --bone-soft:#A59E8F; --gold:#D9BC7E; --gold-soft:#E8D19C; --gold-deep:#B08F52; --gold-wash:rgba(217,188,126,.09); --line:rgba(242,235,221,.10); --line-strong:rgba(242,235,221,.18); --line-gold:rgba(217,188,126,.5); --dusk:#9AA6CF; --serif:'Playfair Display',Georgia,'Times New Roman',serif; --sans:'Lato',system-ui,-apple-system,'Segoe UI',sans-serif; --gold-grad:linear-gradient(135deg,#F0DCA8 0%,#D9BC7E 52%,#B08F52 100%); --ease:cubic-bezier(.22,1,.36,1); --ease-io:cubic-bezier(.65,0,.35,1); --wrap:1280px; --gutter:clamp(20px,5vw,64px); --room-pad:clamp(96px,14vh,168px); color-scheme:dark; } *,*::before,*::after{box-sizing:border-box} html{background:var(--ink);-webkit-text-size-adjust:100%;scroll-padding-top:72px} body{margin:0;background:var(--ink);color:var(--bone);font:400 17px/1.65 var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-kerning:normal;overflow-x:clip} img,svg,canvas{display:block;max-width:100%} a{color:inherit} p,h1,h2,h3,figure,ul,ol{margin:0} ul,ol{padding:0;list-style:none} button{font:inherit;color:inherit} :focus-visible{outline:2px solid var(--gold-soft);outline-offset:3px;border-radius:6px} ::selection{background:rgba(217,188,126,.32);color:var(--bone)} .skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--gold);color:var(--ink);padding:10px 16px;border-radius:999px;font-weight:700} .skip:focus{top:12px} .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* ---------- type ---------- */ .wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)} /* Room label, exhibition style: "03 — Boundaries" */ .kicker{display:flex;align-items:center;gap:16px;font:700 12px/1.3 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--gold)} .kicker .n{color:var(--bone-muted);letter-spacing:.14em;font-variant-numeric:tabular-nums} .kicker .dash{color:var(--bone-soft);letter-spacing:0;margin-inline:-6px} .kicker::after{content:"";flex:0 0 56px;height:1px;background:linear-gradient(90deg,var(--gold),rgba(217,188,126,0))} .kicker.center{justify-content:center}.kicker.center::before{content:"";flex:0 0 56px;height:1px;background:linear-gradient(270deg,var(--gold),rgba(217,188,126,0))} /* The one enormous line per room */ .display-xl{font:400 clamp(56px,10.5vw,176px)/.92 var(--serif);letter-spacing:-.035em;text-wrap:balance} .display{font:400 clamp(40px,6vw,92px)/1 var(--serif);letter-spacing:-.025em;text-wrap:balance} .display-sm{font:400 clamp(30px,3.6vw,52px)/1.08 var(--serif);letter-spacing:-.015em;text-wrap:balance} .display-xl em,.display em,.display-sm em{font-style:italic;color:var(--gold-soft)} .lede{color:var(--bone-muted);font-size:clamp(17px,1.4vw,20px);line-height:1.6;max-width:34em} .label{font:700 12px/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--bone-soft)} .mono{font-variant-numeric:tabular-nums;letter-spacing:.06em} .fine{color:var(--bone-soft);font-size:13.5px;line-height:1.6} /* ---------- masthead ---------- */ .masthead{position:fixed;inset:0 0 auto;z-index:50;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:16px var(--gutter);padding-top:max(16px,env(safe-area-inset-top));transition:background .6s,border-color .6s,padding .6s;border-bottom:1px solid transparent} .masthead.solid{background:rgba(9,13,11,.94);border-color:var(--line);padding-block:11px} .masthead:not(.solid) .mark,.masthead:not(.solid) .room-counter{color:var(--bone)} .masthead:not(.solid) .mark span{text-shadow:0 1px 3px rgba(6,9,8,.6)} .mark{display:inline-flex;align-items:center;gap:12px;text-decoration:none;font:700 13px/1 var(--sans);letter-spacing:.36em} .mark-seed{width:28px;height:28px;fill:none;stroke:var(--gold);stroke-width:1.15;animation:spin 120s linear infinite} .room-counter{text-shadow:0 1px 3px rgba(6,9,8,.7);font:700 11.5px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--bone-soft);font-variant-numeric:tabular-nums;white-space:nowrap} .masthead .btn-ghost{justify-self:end} @media (max-width:720px){.masthead{grid-template-columns:1fr auto}.room-counter{display:none}} /* ---------- buttons ---------- */ .btn-gold{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:58px;padding:0 30px;border-radius:999px;background:var(--gold-grad);color:#0B100E;text-decoration:none;border:0;cursor:pointer;font:700 16.5px/1 var(--sans);letter-spacing:.01em;box-shadow:0 0 0 1px rgba(255,236,190,.4),0 12px 36px -8px rgba(217,188,126,.5),inset 0 1px 0 rgba(255,255,255,.5);transition:transform .6s var(--ease),box-shadow .6s var(--ease)} .btn-gold::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 32%,rgba(255,250,235,.55) 50%,transparent 68%);transform:translateX(-120%);animation:sheen 7s 2.6s var(--ease) infinite} .btn-gold:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(255,236,190,.55),0 18px 44px -8px rgba(217,188,126,.62),inset 0 1px 0 rgba(255,255,255,.55)} .btn-gold:active{transform:scale(.98)} .btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:0 20px;border-radius:999px;border:1px solid var(--line-gold);background:rgba(11,16,14,.35);color:var(--bone);text-decoration:none;cursor:pointer;font:700 13.5px/1 var(--sans);letter-spacing:.02em;transition:background .4s,border-color .4s} .btn-ghost:hover{background:var(--gold-wash);border-color:var(--gold)} .btn-ghost.small{min-height:38px;padding:0 18px;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase} .btn-ghost[aria-pressed="true"],.btn-ghost[aria-selected="true"]{background:var(--gold-wash);border-color:var(--gold);color:var(--gold-soft)} /* ---------- rooms ---------- */ .room{position:relative;z-index:1;isolation:isolate} .room-pad{padding-block:var(--room-pad)} /* A tall room with a sticky 100vh stage: set --room-h (e.g. 260vh) on the room's scroller. */ .scroller{position:relative;height:var(--room-h,250vh)} .stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;place-items:center} .hairline{height:1px;background:linear-gradient(90deg,transparent,var(--line-gold),transparent);border:0;margin:0} /* ---------- plates: real app screens, shown like museum plates ---------- */ /*
Plate 03 Boundaries
*/ .plate{display:grid;justify-items:center;gap:14px;margin:0} .plate-card{position:relative;width:var(--plate-w,clamp(240px,20vw,300px));border-radius:30px;padding:5px;background:linear-gradient(150deg,rgba(255,236,190,.5) 0%,rgba(217,188,126,.14) 20%,rgba(23,33,28,.95) 45%,rgba(17,25,21,.98) 72%,rgba(217,188,126,.28) 100%);box-shadow:inset 0 1px 0 rgba(255,246,222,.4),0 0 0 1px rgba(6,9,8,.7),0 30px 60px -22px rgba(0,0,0,.9),0 0 80px -10px rgba(217,188,126,.22)} .plate-card img{width:100%;height:auto;aspect-ratio:1179/2556;border-radius:25px;background:var(--raised)} .plate figcaption{display:flex;gap:10px;align-items:baseline;font:700 11.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--bone-muted)} .plate figcaption span{color:var(--gold)} /* ---------- reveals ---------- */ .js .reveal{opacity:0;transform:translateY(28px);transition:opacity 1.1s var(--ease) calc(var(--d,0) * 110ms),transform 1.2s var(--ease) calc(var(--d,0) * 110ms)} .js .reveal.in{opacity:1;transform:none} /* ---------- gold line art ---------- */ /* Strokes with pathLength="1" and class g-draw draw themselves when an ancestor gets .drawn. --i orders them; --gap sets the stagger. */ .g{fill:none;stroke:var(--gold);stroke-width:1;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;overflow:visible} .g-draw{stroke-dasharray:1 2;stroke-dashoffset:1.01;transition:stroke-dashoffset var(--dur,1.6s) var(--ease-io) calc(var(--i,0) * var(--gap,60ms))} .drawn .g-draw{stroke-dashoffset:0} .g-bound{stroke-opacity:.45} .g-node{fill:var(--ink);stroke:var(--gold)} /* ---------- colophon ---------- */ .colophon{border-top:1px solid var(--line);padding:32px var(--gutter) calc(32px + env(safe-area-inset-bottom));display:grid;gap:18px;max-width:var(--wrap);margin-inline:auto} .colophon-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 28px;color:var(--bone-soft);font-size:14px} .colophon nav{display:flex;flex-wrap:wrap;gap:6px 22px} .colophon nav a{color:var(--bone-muted);text-decoration:none} .colophon nav a:hover{color:var(--gold-soft)} /* ---------- keyframes ---------- */ @keyframes spin{to{transform:rotate(360deg)}} @keyframes sheen{0%{transform:translateX(-120%)}22%,100%{transform:translateX(120%)}} @keyframes fade{from{opacity:0}to{opacity:1}} /* ---------- stillness ---------- */ /* Reduced motion or "Pause motion": nothing loops, nothing slides. Rooms show a composed still. */ .paused *,.paused *::before,.paused *::after{animation-play-state:paused!important} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important} .js .reveal{transform:none;transition:opacity .6s ease} .g-draw{transition:none;stroke-dashoffset:0} } /* ---------- the journey: one day passes as you scroll ---------- */ /* Five sky washes behind the whole page (dawn → day → golden hour → dusk → night). main.js only changes their opacity, so scrolling never repaints a full-screen gradient. */ body{background:transparent} .journey{position:fixed;inset:0;z-index:-1;pointer-events:none;background:var(--ink)} .journey i{position:absolute;inset:0;opacity:0;will-change:opacity} .j-dawn{background:radial-gradient(ellipse 80% 60% at 18% 0%,rgba(232,201,160,.16),transparent 70%),radial-gradient(ellipse 60% 50% at 90% 100%,rgba(201,135,90,.06),transparent 70%)} .j-day{background:radial-gradient(ellipse 90% 60% at 50% 0%,rgba(217,188,126,.10),transparent 70%),radial-gradient(ellipse 70% 50% at 10% 100%,rgba(143,163,131,.07),transparent 70%)} .j-gold{background:radial-gradient(ellipse 85% 65% at 85% 10%,rgba(214,150,84,.17),transparent 70%),radial-gradient(ellipse 60% 50% at 0% 100%,rgba(217,188,126,.08),transparent 70%)} .j-dusk{background:radial-gradient(ellipse 90% 60% at 50% 0%,rgba(154,166,207,.14),transparent 72%),radial-gradient(ellipse 70% 50% at 100% 100%,rgba(201,135,90,.08),transparent 70%)} .j-night{background:radial-gradient(ellipse 90% 70% at 50% 0%,rgba(52,70,120,.20),transparent 72%),linear-gradient(180deg,rgba(6,9,8,0),rgba(6,9,8,.4))} .j-stars{background-image:radial-gradient(1px 1px at 12% 18%,rgba(242,235,221,.7),transparent 60%),radial-gradient(1px 1px at 34% 8%,rgba(242,235,221,.55),transparent 60%),radial-gradient(1.4px 1.4px at 58% 22%,rgba(232,209,156,.8),transparent 60%),radial-gradient(1px 1px at 76% 12%,rgba(242,235,221,.5),transparent 60%),radial-gradient(1px 1px at 88% 30%,rgba(242,235,221,.6),transparent 60%),radial-gradient(1.2px 1.2px at 22% 40%,rgba(242,235,221,.45),transparent 60%),radial-gradient(1px 1px at 66% 44%,rgba(242,235,221,.4),transparent 60%),radial-gradient(1px 1px at 46% 34%,rgba(242,235,221,.5),transparent 60%);background-size:100% 100%} /* the trail: a thin gold line that fills as you walk the page */ /* It sits beneath the rooms, so it never draws over a plate, a photo or a line of type. */ .trail-progress{position:fixed;left:calc(var(--gutter) * .42);top:22vh;bottom:22vh;width:1px;z-index:0;background:var(--line-strong);pointer-events:none} .trail-fill{position:absolute;inset:0;background:linear-gradient(180deg,var(--gold-deep),var(--gold-soft));transform-origin:top;transform:scaleY(var(--jp,0))} .trail-dot{position:absolute;left:-3px;top:0;width:7px;height:7px;border-radius:50%;background:var(--gold-soft);box-shadow:0 0 10px 2px rgba(232,209,156,.55);transform:translateY(calc(var(--jp,0) * (56vh - 7px)))} @media (max-width:900px){.trail-progress{display:none}} /* No grain over the content: noise on top of type, plates and photos read as dirt at 1x. Instead a whisper of noise sits only inside the sky washes, where it dithers the 8-bit banding of the very dark gradients. It's static, under everything, and drawn at its native pixel size. */ .journey::after{content:"";position:absolute;inset:0;background:url(../assets/grain.png) repeat;background-size:128px 128px;opacity:.14} @media (min-resolution:2dppx){.journey::after{background-size:128px 128px;opacity:.1}} /* ---------- room: clearing ---------- */ /* Room 01 — The Clearing. A forest at dawn, a veil of mist that parts where you rest, and the statement written in one enormous line. */ #room-clearing{--scene-h:100svh;min-height:max(100svh,720px);display:grid;overflow:hidden;background:var(--ink)} /* ---- the scene: photo, a dawn veil, the mist canvas, a floor that falls to ink ---- */ #room-clearing .cl-scene{position:absolute;inset:0 0 auto;height:max(100svh,720px);z-index:-1;overflow:hidden;background:#0d1410} /* The photo is full resolution at every size (srcset), so it stays sharp. It drifts very slowly (a compositor-only scale on the photo itself) and the scroll lifts it a little (JS, .cl-drift). */ #room-clearing .cl-drift{position:absolute;inset:-9% 0 0 0;will-change:transform} #room-clearing .cl-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 38%; filter:sepia(.32) saturate(1.12) contrast(1.1) brightness(.84);transform-origin:58% 40%;animation:cl-breathe 46s var(--ease-io) infinite alternate} @keyframes cl-breathe{from{transform:scale(1.001)}to{transform:scale(1.05)}} /* Warm the cool fog toward first light, and keep the left side quiet enough for the words. */ #room-clearing .cl-veil{position:absolute;inset:0;background: radial-gradient(70% 60% at 66% 28%,rgba(240,214,160,.16) 0%,rgba(240,214,160,0) 70%), linear-gradient(180deg,rgba(8,12,10,.62) 0%,rgba(8,12,10,.12) 22%,rgba(8,12,10,.1) 52%,rgba(8,12,10,.72) 86%,rgba(11,16,14,.96) 100%), linear-gradient(90deg,rgba(8,12,10,.82) 0%,rgba(8,12,10,.6) 30%,rgba(8,12,10,.18) 58%,rgba(8,12,10,.04) 78%,rgba(8,12,10,.24) 100%)} /* Mist lives low and at the edges; the trunks in the middle stay crisp. */ #room-clearing .cl-mist{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 2.6s var(--ease) .2s; -webkit-mask-image:radial-gradient(70% 62% at 62% 34%,rgba(0,0,0,.18) 0%,rgba(0,0,0,.5) 55%,#000 100%);mask-image:radial-gradient(70% 62% at 62% 34%,rgba(0,0,0,.18) 0%,rgba(0,0,0,.5) 55%,#000 100%)} #room-clearing.mist-on .cl-mist{opacity:1} #room-clearing .cl-floor{position:absolute;inset:auto 0 0;height:24%;background:linear-gradient(180deg,rgba(11,16,14,0),rgba(11,16,14,.55) 45%,var(--ink))} /* ---- the copy and the plate ---- */ #room-clearing .cl-grid{position:relative;width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:48px; min-height:max(100svh,720px);padding-top:120px;padding-bottom:clamp(48px,8.5vh,92px)} #room-clearing .cl-copy{max-width:60rem} #room-clearing .kicker{margin-bottom:clamp(22px,3.4vh,34px);color:var(--gold-soft)} #room-clearing .kicker .n{color:var(--bone-muted)} #room-clearing .kicker .dash{color:var(--bone-soft);letter-spacing:0} #room-clearing .cl-title{color:var(--bone);margin:0 0 clamp(26px,4vh,40px) -.04em;text-shadow:0 1px 2px rgba(6,9,8,.3)} #room-clearing .cl-line{display:block;white-space:nowrap} #room-clearing .cl-gold em{color:var(--gold-soft);padding-right:.06em} #room-clearing .lede{color:#E9E2D3;max-width:31em;text-shadow:0 1px 2px rgba(6,9,8,.55)} #room-clearing .cl-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 32px;margin-top:clamp(28px,4.2vh,40px)} #room-clearing .cl-enter{display:inline-flex;align-items:center;gap:12px;min-height:44px;font:700 12px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;text-decoration:none;color:var(--bone)} #room-clearing .cl-enter .cl-arrow{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid var(--line-gold);color:var(--gold-soft);letter-spacing:0;font-size:14px;transition:border-color .5s,background .5s,transform .8s var(--ease)} #room-clearing .cl-enter:hover .cl-arrow{border-color:var(--gold);background:var(--gold-wash);transform:translateY(3px)} #room-clearing .cl-meta{margin-top:22px;font:400 14px/1.5 var(--sans);letter-spacing:.03em;color:var(--bone-muted);text-shadow:0 1px 2px rgba(6,9,8,.5)} #room-clearing .cl-meta span{color:var(--gold);margin-inline:.45em} #room-clearing .cl-plate{--plate-w:clamp(232px,19vw,300px);align-self:end;margin-bottom:6px} #room-clearing .cl-plate figcaption{color:var(--bone-muted)} /* ---- arrival: letters rise and unblur one by one, then the rest settles in ---- */ .js #room-clearing .cl-line{opacity:0} .js #room-clearing.split .cl-line{opacity:1} #room-clearing .cl-l{display:inline-block;opacity:0;transform:translate3d(0,.3em,0); transition:opacity 1s var(--ease),transform 1.3s var(--ease);transition-delay:calc(var(--i) * 30ms + 100ms)} #room-clearing.go .cl-l{opacity:1;transform:none} #room-clearing.done .cl-l{transform:none;will-change:auto} .js #room-clearing .cl-up{opacity:0;transform:translate3d(0,18px,0);transition:opacity 1.4s var(--ease),transform 1.6s var(--ease);transition-delay:calc(.55s + var(--k) * 110ms)} .js #room-clearing .cl-plate.cl-up{transform:none;transition:opacity 1.2s var(--ease) .7s} .js #room-clearing.go .cl-up{opacity:1;transform:none} .js #room-clearing .kicker.cl-up{transition-delay:.1s} /* If the script never arrives, everything still shows. */ .js #room-clearing .cl-line,.js #room-clearing .cl-up{animation:cl-show 0s 8s forwards} #room-clearing.split .cl-line,#room-clearing.go .cl-up{animation:none} @keyframes cl-show{to{opacity:1;transform:none}} /* Still: everything at once. */ #room-clearing.still .cl-l,#room-clearing.still .cl-up,#room-clearing.still .cl-mist{transition:none!important} #room-clearing.still .cl-photo{animation:none} @media (prefers-reduced-motion:reduce){#room-clearing .cl-photo{animation:none}} /* ---- phones and narrow screens: copy over the forest, the plate after the copy ---- */ @media (max-width:860px){ #room-clearing{min-height:0} #room-clearing .cl-scene{height:100svh;min-height:640px} #room-clearing .cl-photo{object-position:50% 30%} #room-clearing .cl-veil{background: radial-gradient(90% 40% at 60% 12%,rgba(240,214,160,.14) 0%,rgba(240,214,160,0) 70%), linear-gradient(180deg,rgba(8,12,10,.55) 0%,rgba(8,12,10,.08) 14%,rgba(8,12,10,.18) 32%,rgba(8,12,10,.66) 50%,rgba(8,12,10,.86) 70%,var(--ink) 100%)} #room-clearing .cl-floor{height:34%} #room-clearing.mist-on .cl-mist{opacity:.7} #room-clearing .cl-grid{grid-template-columns:1fr;min-height:0;gap:0;padding-top:0;padding-bottom:var(--room-pad)} #room-clearing .cl-copy{min-height:max(100svh,640px);display:flex;flex-direction:column;justify-content:flex-end;padding-top:120px;padding-bottom:40px} #room-clearing .cl-plate{--plate-w:min(64vw,268px);justify-self:center;margin:56px 0 0} } @media (max-width:560px){ #room-clearing .kicker{display:block;letter-spacing:.24em;font-size:10.5px;line-height:1.75} #room-clearing .kicker::after{display:none} #room-clearing .kicker .dash{margin:0 .7em} #room-clearing .cl-title{font-size:clamp(50px,16.4vw,78px);line-height:.94} #room-clearing .lede{font-size:16.5px} #room-clearing .cl-actions{flex-direction:column;align-items:stretch;gap:8px} #room-clearing .cl-actions .btn-gold{width:100%} #room-clearing .cl-enter{justify-content:center} #room-clearing .cl-meta{text-align:center;font-size:12.5px} #room-clearing .cl-meta .cl-br{display:block;height:0;overflow:hidden;font-size:0} } /* ---------- room: threshold ---------- */ /* Room 02 — The Threshold. Above a rising gold line, a cold feed that never stops ticking. Below it, a still forest. Scroll lifts the line; whatever it passes becomes forest. Per frame only two things change: --y on the stage (clip + line) and the feed's transform. */ #room-threshold{background:var(--ink)} #room-threshold .th-scroller{--room-h:240vh} #room-threshold .th-stage{--y:95vh;display:block;background:#0c0f11} /* ---- the feed: cold, gray, endless ---- */ #room-threshold .th-feed{position:absolute;inset:0;z-index:2;background: radial-gradient(90% 70% at 70% 40%,#15191c 0%,#0d1012 70%,#0a0c0e 100%); clip-path:inset(0 0 calc(100% - var(--y)) 0);-webkit-clip-path:inset(0 0 calc(100% - var(--y)) 0)} #room-threshold .th-col{--cw:clamp(280px,25vw,356px);--slot:calc(var(--cw) * .9);position:absolute;top:0;bottom:0;left:71%;width:var(--cw);margin-left:calc(var(--cw) / -2);overflow:hidden; -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 16%,#000 84%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 16%,#000 84%,transparent 100%)} #room-threshold .th-track{display:grid;gap:0;will-change:transform} #room-threshold .th-card{box-sizing:border-box;height:var(--slot);padding:0 0 18px} #room-threshold .th-card-in{height:100%;display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:16px;background:#181d20;border:1px solid rgba(190,205,215,.08);box-shadow:0 20px 40px -24px rgba(0,0,0,.8)} #room-threshold .th-head{display:flex;align-items:center;gap:10px} #room-threshold .th-av{flex:0 0 30px;height:30px;border-radius:50%;background:#2c3337} #room-threshold .th-names{flex:1;display:grid;gap:6px} #room-threshold .th-bar{display:block;height:8px;border-radius:5px;background:#2b3236} #room-threshold .th-bar.dim{background:#232a2d} #room-threshold .th-media{flex:1;min-height:0;border-radius:10px;background:linear-gradient(160deg,#242a2e,#1c2124)} #room-threshold .th-tiles{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:6px} #room-threshold .th-tiles i{border-radius:10px;background:linear-gradient(160deg,#242a2e,#1c2124)} #room-threshold .th-acts{display:flex;gap:10px} #room-threshold .th-acts i{width:16px;height:16px;border-radius:50%;background:#22282b} #room-threshold .th-acts i:last-child{margin-left:auto;border-radius:4px} #room-threshold .th-frost{position:absolute;inset:0;pointer-events:none;background: linear-gradient(90deg,rgba(10,12,14,.96) 0%,rgba(10,12,14,.78) 34%,rgba(10,12,14,0) 56%)} /* ---- the forest: still, warm ---- */ #room-threshold .th-forest{position:absolute;inset:0;z-index:1;background:#1a1610;overflow:hidden} #room-threshold .th-trip{position:absolute;inset:0;background:#0b100e} #room-threshold .th-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 46%} /* The photo is already warm morning light: no sepia (it turned it to mud). Only a shade for the words. */ #room-threshold .th-warm{position:absolute;inset:0;background: linear-gradient(180deg,rgba(8,12,10,.5) 0%,rgba(8,12,10,.06) 26%,rgba(8,12,10,.2) 56%,rgba(8,12,10,.86) 100%), linear-gradient(90deg,rgba(8,12,10,.66) 0%,rgba(8,12,10,.28) 46%,rgba(8,12,10,0) 72%)} #room-threshold .th-photo{filter:saturate(.92) contrast(1.04) brightness(.9)} /* ---- copy, split by the line ---- */ #room-threshold .th-wrap{position:absolute;inset:0;margin:0 auto;width:100%;display:grid;grid-template-rows:auto 1fr auto;padding-top:clamp(96px,17vh,168px);padding-bottom:clamp(56px,11vh,112px)} #room-threshold .th-above .kicker{margin-bottom:clamp(20px,3vh,30px)} #room-threshold .th-feed .kicker{color:#b4bdc2} #room-threshold .th-feed .kicker .n{color:#859096} #room-threshold .th-feed .kicker::after{background:rgba(169,179,184,.3)} #room-threshold .kicker .dash{letter-spacing:0;color:var(--bone-soft)} #room-threshold .th-endless{color:#b9c2c6;max-width:12em} #room-threshold .th-below{grid-row:3;max-width:62rem} #room-threshold .th-below h2{color:var(--bone);margin-bottom:clamp(18px,2.6vh,26px);text-shadow:0 1px 2px rgba(6,9,8,.35),0 0 40px rgba(6,9,8,.25)} #room-threshold .th-below .lede{color:#E9E2D3;max-width:28em;text-shadow:0 1px 2px rgba(6,9,8,.6)} /* ---- the line ---- */ #room-threshold .th-line{position:absolute;left:0;right:0;top:0;height:1px;z-index:3;transform:translate3d(0,var(--y),0); background:linear-gradient(90deg,rgba(217,188,126,0) 0%,var(--gold) 14%,var(--gold-soft) 50%,var(--gold) 86%,rgba(217,188,126,0) 100%); box-shadow:0 0 14px rgba(232,209,156,.55),0 0 42px rgba(217,188,126,.28)} #room-threshold .th-tick{position:absolute;left:var(--gutter);top:-4px;width:9px;height:9px;border-radius:50%;background:var(--gold-soft);box-shadow:0 0 0 4px rgba(217,188,126,.16),0 0 18px rgba(232,209,156,.8)} @media (min-width:1360px){#room-threshold .th-tick{left:calc(50% - 640px + var(--gutter))}} /* ---- still: a composed split at the middle, both lines of copy, nothing ticking ---- */ #room-threshold.still .th-scroller{--room-h:100vh} #room-threshold.still .th-stage{--y:50vh} @media (prefers-reduced-motion:reduce){ #room-threshold .th-scroller{--room-h:100vh} #room-threshold .th-stage{--y:50vh!important} } /* ---- phones ---- */ @media (max-width:860px){ #room-threshold .th-col{--cw:min(78vw,320px);--slot:calc(var(--cw) * .92);left:50%;opacity:.9} #room-threshold .th-frost{background:linear-gradient(180deg,rgba(10,12,14,.97) 0%,rgba(10,12,14,.86) 27%,rgba(10,12,14,.1) 46%,rgba(10,12,14,.1) 100%)} #room-threshold .th-wrap{padding-top:max(104px,13vh);padding-bottom:max(56px,8vh)} #room-threshold .th-photo{object-position:50% 40%;filter:sepia(.18) saturate(1.05) contrast(1.05) brightness(.92)} #room-threshold .th-warm{background: linear-gradient(180deg,rgba(8,12,10,.42) 0%,rgba(8,12,10,.08) 26%,rgba(8,12,10,.5) 54%,rgba(8,12,10,.92) 100%), linear-gradient(0deg,rgba(176,128,60,.16),rgba(217,170,100,.08))} #room-threshold .th-below h2{font-size:clamp(38px,11vw,54px)} #room-threshold .th-below .lede{font-size:16.5px} } /* ---------- room: quests ---------- */ /* Room 06 — Side Quests, the showpiece. Two layouts: - default (no JS, reduced motion, Pause motion): a composed still of every beat, stacked. - #room-quests.sq-live: a pinned 100svh stage scrubbed by scroll (js/rooms/quests.js). */ #room-quests{--card-w:clamp(230px,20.5vw,320px);--shot-w:min(calc(70svh * .8),560px)} #room-quests .sq-stage{position:relative;display:flex;flex-direction:column;align-items:center;gap:clamp(48px,8vh,88px);padding:var(--room-pad) var(--gutter) clamp(40px,6vh,72px);overflow:hidden} /* ---------- background: aura + a turning Flower of Life ---------- */ #room-quests .sq-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0} #room-quests .sq-aura{position:absolute;inset:0;background:radial-gradient(42% 46% at 50% 56%,rgba(217,188,126,.13),rgba(217,188,126,.04) 55%,transparent 75%)} #room-quests .sq-bloom{position:absolute;left:50%;top:clamp(240px,34vh,380px);width:min(118vmin,1100px);aspect-ratio:1;margin-left:min(-59vmin,-550px);margin-top:min(-59vmin,-550px);stroke:var(--gold);stroke-width:.7;opacity:.22} #room-quests .sq-bloom .g-bound{stroke-opacity:.35} /* floating photos around the headline (live only): parallax depth */ #room-quests .sq-floats{display:none} #room-quests.sq-live .sq-floats{display:block;position:absolute;inset:0;z-index:1;pointer-events:none} #room-quests .sq-float{position:absolute;border-radius:16px;object-fit:cover;height:auto;box-shadow:0 0 0 1px rgba(217,188,126,.38),0 30px 60px -20px rgba(0,0,0,.9);will-change:transform;opacity:0} #room-quests .sq-float:nth-child(1){left:5%;top:15%;width:clamp(100px,8.5vw,140px);aspect-ratio:4/5;filter:blur(1.2px) brightness(.7)} #room-quests .sq-float:nth-child(2){left:3.5%;top:58%;width:clamp(120px,10.5vw,170px);aspect-ratio:4/5;filter:brightness(.8)} #room-quests .sq-float:nth-child(3){right:5%;top:13%;width:clamp(110px,9.5vw,150px);aspect-ratio:4/5;filter:blur(.6px) brightness(.75)} #room-quests .sq-float:nth-child(4){right:3.5%;top:64%;width:clamp(160px,13.5vw,220px);aspect-ratio:16/10;filter:brightness(.85)} /* ---------- 1. the headline ---------- */ #room-quests .sq-intro{position:relative;z-index:2;order:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:clamp(18px,3vh,30px);max-width:1180px} #room-quests .sq-intro .kicker{justify-content:center;flex-wrap:wrap;row-gap:12px} #room-quests .sq-intro .kicker::before{content:"";flex:0 0 48px;height:1px;background:var(--line-gold)} #room-quests .sq-new{display:inline-flex;align-items:center;gap:9px;margin-left:8px;padding:8px 14px 8px 12px;border-radius:999px;border:1px solid var(--line-gold);background:linear-gradient(180deg,rgba(217,188,126,.16),rgba(217,188,126,.06));color:var(--gold-soft);font-size:10px;letter-spacing:.26em;box-shadow:0 0 24px -6px rgba(217,188,126,.4)} #room-quests .sq-new i{position:relative;width:6px;height:6px;border-radius:50%;background:var(--gold-soft);box-shadow:0 0 8px 1px rgba(232,209,156,.8)} #room-quests .sq-new i::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--gold-soft);animation:sq-ping 2.8s var(--ease) infinite} @keyframes sq-ping{0%{transform:scale(.5);opacity:.9}70%,100%{transform:scale(2.2);opacity:0}} #room-quests .sq-title{font:400 clamp(50px,8.6vw,150px)/.98 var(--serif);letter-spacing:-.035em;text-wrap:balance} #room-quests .sq-title .w{display:inline-block;overflow:hidden;vertical-align:top;padding:.04em .02em .16em;margin:-.04em -.02em -.16em} #room-quests .sq-title .w>span{display:inline-block;transform-origin:0 100%} #room-quests .sq-title em{font-style:italic;padding-right:.08em;background:linear-gradient(100deg,#B08F52 0%,#E8D19C 30%,#FFF4DA 46%,#E8D19C 60%,#C9A765 100%);background-size:260% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sq-sheen 7s var(--ease-io) infinite} @keyframes sq-sheen{0%{background-position:100% 0}55%,100%{background-position:0 0}} #room-quests .sq-sub{max-width:31em;color:var(--bone-muted);font-size:clamp(17px,1.5vw,21px);line-height:1.55} #room-quests .sq-cue{display:none} /* ---------- captions (one per beat) ---------- */ #room-quests .sq-caps{position:relative;z-index:4;order:2;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;width:100%;max-width:1180px;counter-reset:none} #room-quests .sq-cap{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:baseline} #room-quests .sq-cn{font:italic 400 30px/1 var(--serif);color:var(--gold)} #room-quests .sq-cap h3{font:400 clamp(22px,2vw,28px)/1.15 var(--serif);letter-spacing:-.01em} #room-quests .sq-cap p{margin-top:8px;color:var(--bone-muted);font-size:15px;line-height:1.55} /* ---------- 2. the cards ---------- */ #room-quests .sq-deck{position:relative;z-index:2;order:3;display:flex;justify-content:center;gap:clamp(14px,2.4vw,34px);margin:0;padding:0} #room-quests .sq-card{position:relative;container-type:inline-size;width:var(--card-w);aspect-ratio:4/5;border-radius:22px;overflow:hidden;background:var(--raised);box-shadow:0 0 0 1px rgba(217,188,126,.4),inset 0 1px 0 rgba(255,246,222,.25),0 34px 60px -24px rgba(0,0,0,.95),0 0 70px -24px rgba(217,188,126,.35);cursor:default;-webkit-tap-highlight-color:transparent} #room-quests .sq-card[data-k="short"]{order:-1;transform:rotate(-5deg) translateY(18px)} #room-quests .sq-card[data-k="big"]{transform:rotate(5deg) translateY(18px)} #room-quests .sq-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%} #room-quests .sq-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,9,8,.55) 0%,rgba(6,9,8,0) 26%,rgba(6,9,8,0) 44%,rgba(6,9,8,.78) 78%,rgba(6,9,8,.95) 100%);pointer-events:none} #room-quests .sq-card-ui{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;justify-content:flex-end;padding:7cqi 7.5cqi 8cqi;gap:2.4cqi} #room-quests .sq-tier{position:absolute;top:6.5cqi;left:6.5cqi;display:inline-flex;align-items:center;gap:2.6cqi;padding:2.2cqi 4cqi 2.2cqi 2.4cqi;border-radius:999px;background:rgba(9,13,11,.62);border:1px solid var(--line-gold);font:700 max(8.5px,3.8cqi)/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-soft)} #room-quests .sq-mini{width:max(16px,8cqi);height:max(16px,8cqi);stroke:var(--gold-soft);stroke-width:1.1} #room-quests .sq-mini .sq-tick{display:none} #room-quests .sq-cname{font:400 max(14px,9cqi)/1.08 var(--serif);letter-spacing:-.01em;color:var(--bone);text-wrap:balance} #room-quests .sq-ctime{font-size:max(10.5px,4.6cqi);line-height:1.35;color:var(--bone-muted)} #room-quests .sq-glare{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .6s var(--ease);background:radial-gradient(60% 50% at var(--gx,50%) var(--gy,30%),rgba(255,240,205,.32),rgba(255,240,205,0) 70%);mix-blend-mode:screen} #room-quests .sq-card.hot .sq-glare{opacity:1} #room-quests .sq-card.hot{box-shadow:0 0 0 1px rgba(232,209,156,.75),inset 0 1px 0 rgba(255,246,222,.35),0 44px 80px -24px rgba(0,0,0,.95),0 0 90px -18px rgba(217,188,126,.6)} /* ---------- 3 + 4. the viewfinder and the seal ---------- */ #room-quests .sq-shot{--b:0;--ret:0;--fo:1;--fl:0;--scan:0;--scv:0;--chk:0;--hud:0;--dim:1;--ray:.3;--rs:1.3;--rr:0;--halo:1;--er:1;--glow:0;position:relative;z-index:3;order:4;width:var(--shot-w);aspect-ratio:4/5;margin:0;border-radius:26px;overflow:hidden;background:var(--raised);transform-origin:50% 50%;box-shadow:0 0 0 1px rgba(217,188,126,.45),0 50px 100px -30px rgba(0,0,0,.95),0 0 120px -30px rgba(217,188,126,.4)} #room-quests .sq-shot-photo{position:absolute;inset:0;overflow:hidden} #room-quests .sq-shot-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%;transform:scale(1.06)} #room-quests .sq-shot-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,9,8,.35) 0%,rgba(6,9,8,0) 22%,rgba(6,9,8,0) 55%,rgba(6,9,8,.85) 100%)} #room-quests .sq-shot-dim{position:absolute;inset:0;background:radial-gradient(60% 46% at 50% 44%,rgba(6,9,8,.25),rgba(6,9,8,.72));opacity:calc(var(--dim) * .85)} #room-quests .sq-rays{position:absolute;left:50%;top:44%;width:170%;aspect-ratio:1;translate:-50% -50%;transform:rotate(calc(var(--rr) * 1deg)) scale(var(--rs));opacity:var(--ray);stroke:#F6E3B4;stroke-width:1.4;stroke-linecap:round;fill:none;mix-blend-mode:screen;overflow:visible;-webkit-mask-image:radial-gradient(circle,#000 22%,rgba(0,0,0,.55) 42%,transparent 68%);mask-image:radial-gradient(circle,#000 22%,rgba(0,0,0,.55) 42%,transparent 68%)} #room-quests .sq-rays .l{stroke-opacity:.8} #room-quests .sq-rays .s{stroke-opacity:.45} #room-quests .sq-halo{position:absolute;left:50%;top:44%;width:110%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(circle,rgba(255,240,200,.6) 0%,rgba(232,209,156,.24) 24%,rgba(217,188,126,.05) 48%,transparent 66%);opacity:var(--halo);transform:scale(calc(.82 + var(--glow) * .32));mix-blend-mode:screen} #room-quests .sq-seal{position:absolute;left:50%;top:44%;width:70%;translate:-50% -50%;stroke:#F0D9A6;stroke-width:1.35;filter:drop-shadow(0 0 calc(6px + var(--glow) * 16px) rgba(255,226,160,calc(.5 + var(--glow) * .45)))} #room-quests .sq-seal .sq-tick{stroke-opacity:.6} #room-quests .sq-seal .sq-center{fill:#F0D9A6;stroke:none;opacity:var(--er)} #room-quests .sq-brackets{position:absolute;inset:7%;opacity:var(--b)} #room-quests .sq-brackets i{position:absolute;width:15%;aspect-ratio:1;border:0 solid var(--gold-soft);--sx:-1;--sy:-1;transform:translate(calc(var(--sx) * (1 - var(--b)) * 30px),calc(var(--sy) * (1 - var(--b)) * 30px));filter:drop-shadow(0 0 6px rgba(232,209,156,.5))} #room-quests .sq-brackets i:nth-child(1){left:0;top:0;border-width:2px 0 0 2px;border-top-left-radius:14px} #room-quests .sq-brackets i:nth-child(2){right:0;top:0;border-width:2px 2px 0 0;border-top-right-radius:14px;--sx:1} #room-quests .sq-brackets i:nth-child(3){left:0;bottom:0;border-width:0 0 2px 2px;border-bottom-left-radius:14px;--sy:1} #room-quests .sq-brackets i:nth-child(4){right:0;bottom:0;border-width:0 2px 2px 0;border-bottom-right-radius:14px;--sx:1;--sy:1} #room-quests .sq-reticle{position:absolute;left:50%;top:44%;width:18%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;border:1px solid rgba(242,235,221,.75);opacity:var(--ret);transform:scale(calc(1.7 - var(--fo) * .7))} #room-quests .sq-reticle i{position:absolute;left:50%;top:50%;width:14px;height:14px;translate:-50% -50%;background:linear-gradient(rgba(242,235,221,.85),rgba(242,235,221,.85)) center/1px 100% no-repeat,linear-gradient(rgba(242,235,221,.85),rgba(242,235,221,.85)) center/100% 1px no-repeat} #room-quests .sq-scan{position:absolute;inset:0;opacity:var(--scv);transform:translate3d(0,calc((var(--scan) - 1) * 100%),0);border-bottom:2px solid #F3DDA8;background:linear-gradient(180deg,transparent 62%,rgba(217,188,126,.07) 82%,rgba(232,209,156,.28) 100%);box-shadow:0 8px 26px 2px rgba(232,209,156,.45)} #room-quests .sq-hud{position:absolute;top:5.5%;left:50%;translate:-50% 0;display:inline-flex;align-items:center;gap:10px;padding:9px 14px;border-radius:999px;background:rgba(9,13,11,.66);border:1px solid var(--line-gold);font:700 10.5px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--bone);white-space:nowrap;opacity:var(--hud)} #room-quests .sq-rec{width:7px;height:7px;border-radius:50%;background:var(--gold-soft);box-shadow:0 0 8px 2px rgba(232,209,156,.7);animation:sq-blink 1.6s ease-in-out infinite} @keyframes sq-blink{50%{opacity:.25}} #room-quests .sq-check{position:absolute;left:50%;bottom:8%;translate:-50% 0;display:inline-flex;align-items:center;gap:12px;padding:12px 18px;border-radius:999px;background:rgba(9,13,11,.72);border:1px solid var(--line-gold);font:700 11px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--gold-soft);white-space:nowrap;opacity:var(--chk);transform:translateY(calc((1 - var(--chk)) * 12px))} #room-quests .sq-spin{width:14px;height:14px;border-radius:50%;border:1.5px solid rgba(232,209,156,.25);border-top-color:var(--gold-soft);animation:spin 1s linear infinite} #room-quests .sq-earned{position:absolute;left:0;right:0;bottom:6.5%;display:grid;justify-items:center;gap:6px;text-align:center;opacity:var(--er);transform:translateY(calc((1 - var(--er)) * 16px))} #room-quests .sq-earned-k{display:inline-flex;align-items:center;gap:10px;font:700 11px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--gold-soft)} #room-quests .sq-earned-k::before,#room-quests .sq-earned-k::after{content:"";width:22px;height:1px;background:var(--line-gold)} #room-quests .sq-earned-n{font:italic 400 clamp(28px,2.8vw,42px)/1.05 var(--serif);color:var(--bone)} #room-quests .sq-earned-m{font-size:14px;color:var(--bone-muted)} #room-quests .sq-flash{position:absolute;inset:0;background:radial-gradient(80% 70% at 50% 44%,#FFFDF6 0%,#FFF3D6 45%,rgba(255,236,196,.75) 100%);opacity:calc(var(--fl) * .88);pointer-events:none} #room-quests .sq-fx{display:none} /* ---------- 5. the rewards ---------- */ #room-quests .sq-rewards{position:relative;z-index:4;order:5;display:flex;flex-direction:column;width:100%;max-width:620px} #room-quests .sq-rw-head{margin-bottom:14px;color:var(--gold)} #room-quests .sq-rw-head span{color:var(--bone-soft)} #room-quests .sq-rw{display:grid;grid-template-columns:150px minmax(0,1fr);gap:28px;align-items:center;padding:20px 0;border-top:1px solid var(--line)} #room-quests .sq-rw:last-child{border-bottom:1px solid var(--line)} #room-quests .sq-rw-vis{display:grid;place-items:center;height:112px} #room-quests .sq-rw h3{font:400 clamp(22px,2.1vw,30px)/1.15 var(--serif);letter-spacing:-.01em} #room-quests .sq-rw p{margin-top:5px;color:var(--bone-muted);font-size:15px;line-height:1.5} #room-quests .sq-journal{grid-template-columns:repeat(3,44px);grid-auto-rows:44px;gap:7px;height:auto} #room-quests .sq-slot{position:relative;width:100%;height:100%;justify-self:stretch;align-self:stretch;border-radius:9px;overflow:hidden;box-shadow:0 0 0 1px rgba(217,188,126,.5)} #room-quests .sq-slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.62) saturate(.9)} #room-quests .sq-slot svg{position:absolute;inset:8%;width:84%;height:84%;stroke:#F3DDA8;stroke-width:1;filter:drop-shadow(0 0 3px rgba(232,209,156,.8))} #room-quests .sq-slot svg .sq-tick,#room-quests .sq-slot svg .sq-center{display:none} #room-quests .sq-slot:first-child{box-shadow:0 0 0 1.5px var(--gold-soft),0 0 18px 2px rgba(232,209,156,.45)} #room-quests .sq-slot-next{box-shadow:none;border:1px dashed var(--line-gold);background:rgba(217,188,126,.04)} #room-quests .sq-tree{width:120px;height:120px;stroke:var(--gold-soft);stroke-width:1.15;filter:drop-shadow(0 0 5px rgba(232,209,156,.45))} #room-quests .sq-emblem{width:112px;height:112px;stroke:var(--gold)} #room-quests .sq-emblem .sq-em-base{stroke-opacity:.42;stroke-width:.9} #room-quests .sq-emblem .sq-em-line{stroke:#F6E2B0;stroke-width:2;filter:drop-shadow(0 0 5px rgba(240,214,160,.9))} #room-quests .sq-emblem .sq-em-wait{stroke-opacity:.45;stroke-dasharray:.03 .03;stroke-width:1} #room-quests .sq-emblem .sq-em-node{fill:var(--ink);stroke:var(--gold-soft);stroke-width:1} #room-quests .sq-emblem .sq-em-node.on{fill:var(--gold-soft)} #room-quests .sq-foot{display:none} /* ================= the live, pinned sequence ================= */ #room-quests.sq-live .sq-scroller{height:360vh;height:360svh} #room-quests.sq-live .sq-stage{position:sticky;top:0;height:100vh;height:100svh;display:block;padding:0;gap:0} #room-quests.sq-live .sq-bloom{top:52%;opacity:.5;will-change:transform} #room-quests.sq-live .sq-intro{position:absolute;inset:0;margin:auto;justify-content:center;padding:72px var(--gutter) 40px;max-width:none} #room-quests.sq-live .sq-cue{display:flex;flex-direction:column;align-items:center;gap:12px;position:absolute;left:50%;bottom:28px;translate:-50% 0;font:700 10px/1 var(--sans);letter-spacing:.32em;text-transform:uppercase;color:var(--bone-soft)} #room-quests.sq-live .sq-cue span{width:1px;height:44px;background:linear-gradient(180deg,transparent,var(--gold));transform-origin:top;animation:sq-cue 2.4s var(--ease) infinite} @keyframes sq-cue{0%{transform:scaleY(0)}50%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}} #room-quests.sq-live .sq-title .w>span,#room-quests.sq-live .sq-sub{will-change:transform} #room-quests.sq-live .sq-caps{position:absolute;top:clamp(86px,12vh,118px);left:var(--gutter);width:min(400px,calc(100% - 2 * var(--gutter)));display:grid;grid-template-columns:minmax(0,1fr);gap:0;max-width:none} #room-quests.sq-live .sq-cap{grid-area:1/1;opacity:0;transform:translate3d(0,16px,0);transition:opacity .7s var(--ease),transform .9s var(--ease);pointer-events:none} #room-quests.sq-live .sq-cap.on{opacity:1;transform:none;transition-delay:.12s} #room-quests.sq-live .sq-deck{position:absolute;inset:0;display:block;pointer-events:none} #room-quests.sq-live .sq-card{position:absolute;left:50%;top:55%;margin-left:calc(var(--card-w) / -2);margin-top:calc(var(--card-w) * -.625);transform:none;visibility:hidden;cursor:pointer} #room-quests.sq-live .sq-shot{position:absolute;left:50%;top:55%;margin-left:calc(var(--shot-w) / -2);margin-top:calc(var(--shot-w) * -.625);visibility:hidden} #room-quests.sq-live .sq-shot-photo img{will-change:transform} #room-quests.sq-live .sq-seal .g-draw,#room-quests.sq-live .sq-tree .g-draw,#room-quests.sq-live .sq-emblem .g-draw{transition:none} #room-quests.sq-live .sq-fx{display:block;position:absolute;inset:0;width:100%;height:100%;z-index:5;pointer-events:none} #room-quests.sq-live .sq-rewards{position:absolute;left:52%;right:max(var(--gutter),5vw);top:16%;bottom:9%;justify-content:center;width:auto;max-width:560px;visibility:hidden} #room-quests.sq-live .sq-rw,#room-quests.sq-live .sq-rw-head{opacity:0} #room-quests.sq-live .sq-foot{position:absolute;z-index:6;left:var(--gutter);right:var(--gutter);bottom:26px;display:flex;align-items:center;justify-content:space-between;gap:16px;opacity:0;pointer-events:none} #room-quests .sq-ticks{display:flex;gap:8px} #room-quests .sq-ticks i{position:relative;width:38px;height:2px;border-radius:2px;background:var(--line-strong);overflow:hidden} #room-quests .sq-ticks b{position:absolute;inset:0;background:var(--gold-soft);transform:scaleX(0);transform-origin:left} #room-quests .sq-soon{display:inline-flex;align-items:center;gap:10px;padding:8px 14px;border-radius:999px;border:1px solid var(--line-gold);background:rgba(9,13,11,.55);font:700 10px/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--gold-soft)} #room-quests .sq-soon::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold-soft);box-shadow:0 0 8px 1px rgba(232,209,156,.8)} /* ================= after the sequence ================= */ #room-quests .sq-after{position:relative;z-index:1;padding-block:clamp(56px,10vh,120px) var(--room-pad)} #room-quests .sq-board-title{text-align:center;margin-bottom:clamp(36px,6vh,64px)} #room-quests .sq-levels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px)} #room-quests .sq-levels li{position:relative;display:grid;justify-items:center;text-align:center;gap:10px;padding:clamp(28px,3vw,40px) clamp(20px,2.4vw,34px) clamp(30px,3vw,40px);border-radius:28px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(23,33,28,.72),rgba(11,16,14,.5));overflow:hidden} #room-quests .sq-levels li::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 40% at 50% 18%,rgba(217,188,126,.1),transparent 70%);pointer-events:none} #room-quests .sq-lseal{width:clamp(112px,10vw,140px);stroke:var(--gold-soft);stroke-width:1.1;filter:drop-shadow(0 0 10px rgba(232,209,156,.35))} #room-quests .sq-lseal .g-draw{--dur:1.6s;--gap:90ms} #room-quests .sq-lseal .sq-tick{stroke-opacity:.5} #room-quests .sq-lseal .sq-center{fill:var(--gold-soft);stroke:none} #room-quests .sq-ln{margin-top:6px;font:400 clamp(64px,6.4vw,96px)/.9 var(--serif);background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent} #room-quests .sq-levels h3{font:400 clamp(22px,2vw,28px)/1.15 var(--serif)} #room-quests .sq-levels h3 span{display:block;margin-top:6px;font:700 10.5px/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--gold)} #room-quests .sq-lt{color:var(--bone);font-size:14.5px} #room-quests .sq-lx{color:var(--bone-muted);font-size:15px;line-height:1.55;max-width:22em} #room-quests .sq-lg{margin-top:4px;font:700 10px/1.3 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--bone-soft)} #room-quests .sq-marquee{position:relative;margin:clamp(48px,8vh,88px) calc(var(--gutter) * -1) 0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)} #room-quests .sq-mq-track{display:flex;width:max-content} #room-quests .sq-mq-track>div{display:flex;align-items:center;flex:none} #room-quests .sq-mq-track span{font:italic 400 clamp(24px,2.6vw,38px)/1.3 var(--serif);color:var(--bone-muted);white-space:nowrap} #room-quests .sq-mq-track i{width:7px;height:7px;margin:0 clamp(20px,2.4vw,36px);transform:rotate(45deg);border:1px solid var(--gold);flex:none} #room-quests .sq-close{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:center;margin-top:clamp(56px,10vh,110px)} #room-quests .sq-plates{display:flex;justify-content:center;gap:clamp(16px,2vw,32px);align-items:flex-start} #room-quests .sq-plates .plate{--plate-w:clamp(180px,17vw,250px)} #room-quests .sq-plates .plate:nth-child(2){margin-top:56px} #room-quests .sq-plates figcaption{white-space:nowrap} #room-quests .sq-facts{display:grid;gap:clamp(24px,4vh,36px)} #room-quests .sq-fh{font:400 clamp(28px,2.8vw,40px)/1.1 var(--serif);letter-spacing:-.015em} #room-quests .sq-fp{margin-top:12px;color:var(--bone-muted);font-size:16.5px;line-height:1.65;max-width:34em} #room-quests .sq-fp-sm{margin-top:0;font-size:15px} #room-quests .sq-rules{display:flex;flex-wrap:wrap;gap:8px} #room-quests .sq-rules li{padding:9px 15px;border-radius:999px;border:1px solid var(--line-strong);background:rgba(17,25,21,.5);font-size:14px;color:var(--bone)} #room-quests .sq-plan{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0} #room-quests .sq-plan div{padding:18px 20px;border-radius:18px;border:1px solid var(--line)} #room-quests .sq-plan div:last-child{border-color:var(--line-gold);background:var(--gold-wash)} #room-quests .sq-plan dt{font:700 10.5px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--gold)} #room-quests .sq-plan dd{margin:8px 0 0;color:var(--bone);font-size:15.5px;line-height:1.4} /* ================= phones and tablets ================= */ @media (max-width:899px){ #room-quests{--card-w:min(36vw,210px);--shot-w:min(80vw,calc(50svh * .8),420px)} #room-quests .sq-caps{grid-template-columns:repeat(2,minmax(0,1fr))} #room-quests .sq-deck{gap:2vw} #room-quests:not(.sq-live) .sq-deck{flex-wrap:wrap;gap:14px 12px;max-width:100%} #room-quests:not(.sq-live) .sq-card{width:min(calc((100vw - 2 * var(--gutter) - 12px) / 2),240px)} #room-quests:not(.sq-live) .sq-card[data-k="easy"]{order:-2;transform:none} #room-quests:not(.sq-live) .sq-card[data-k="easy"]{z-index:1} #room-quests.sq-live .sq-scroller{height:300vh;height:300svh} #room-quests.sq-live .sq-card,#room-quests.sq-live .sq-shot{top:57%} #room-quests.sq-live .sq-caps{top:74px} #room-quests.sq-live .sq-cap:last-child{display:none} #room-quests.sq-live .sq-rewards{left:var(--gutter);right:var(--gutter);top:50%;bottom:62px;max-width:none} #room-quests .sq-rw{grid-template-columns:86px minmax(0,1fr);gap:16px;padding:12px 0} #room-quests .sq-rw-vis{height:66px} #room-quests .sq-journal{grid-template-columns:repeat(3,25px);grid-auto-rows:25px;gap:4px} #room-quests .sq-slot{border-radius:6px} #room-quests .sq-tree,#room-quests .sq-emblem{width:66px;height:66px} #room-quests .sq-rw h3{font-size:19px} #room-quests .sq-rw p{font-size:13.5px;margin-top:3px} #room-quests .sq-rw-head{margin-bottom:6px} #room-quests .sq-levels{grid-template-columns:minmax(0,1fr);max-width:520px;margin-inline:auto} #room-quests .sq-close{grid-template-columns:minmax(0,1fr)} #room-quests .sq-plates .plate{--plate-w:min(40vw,230px)} } @media (max-width:520px){ #room-quests .sq-float:nth-child(1){left:-4%;top:12%;width:24vw} #room-quests .sq-float:nth-child(2){left:6%;top:76%;width:26vw} #room-quests .sq-float:nth-child(3){right:-3%;top:10%;width:25vw} #room-quests .sq-float:nth-child(4){right:4%;top:80%;width:34vw} #room-quests .sq-caps{grid-template-columns:minmax(0,1fr);gap:20px} #room-quests .sq-cn{font-size:24px} #room-quests .sq-cap h3{font-size:21px} #room-quests .sq-cap p{font-size:14px;margin-top:4px} #room-quests .sq-title{font-size:clamp(46px,13.4vw,64px)} #room-quests .sq-intro .kicker{font-size:10px;letter-spacing:.26em;gap:10px} #room-quests .sq-intro .kicker::before,#room-quests .sq-intro .kicker::after{flex-basis:20px} #room-quests .sq-new{margin-left:2px} #room-quests .sq-hud{font-size:9px;padding:7px 11px} #room-quests .sq-check{font-size:9.5px;padding:10px 14px;letter-spacing:.18em} #room-quests .sq-earned-n{font-size:26px} #room-quests .sq-earned-m{font-size:12.5px} #room-quests .sq-ticks i{width:24px} #room-quests .sq-soon{font-size:9px;letter-spacing:.2em;padding:7px 11px} #room-quests .sq-plan{grid-template-columns:minmax(0,1fr)} #room-quests .sq-mq-track span{font-size:22px} } /* the still: nothing loops */ @media (prefers-reduced-motion:reduce){ #room-quests .sq-new i::after,#room-quests .sq-title em,#room-quests .sq-rec,#room-quests .sq-spin{animation:none} #room-quests .sq-mq-track{flex-wrap:wrap;justify-content:center;width:auto} } .paused #room-quests .sq-mq-track{flex-wrap:wrap;justify-content:center;width:auto} #room-quests:not(.sq-live) .sq-mq-track>div:nth-child(2){display:none} #room-quests:not(.sq-live) .sq-mq-track,#room-quests:not(.sq-live) .sq-mq-track>div{flex-wrap:wrap;justify-content:center;width:auto;row-gap:6px} #room-quests:not(.sq-live) .sq-mq-track>div{flex:1 1 100%} #room-quests:not(.sq-live) .sq-marquee{-webkit-mask-image:none;mask-image:none;margin-inline:0} #room-quests{overflow-x:clip} /* ---------- room: boundaries ---------- */ /* Room 03 — Boundaries: "Seed, Flower, Cube". One screen: the line, the instrument, the plate. */ #room-boundaries .bd{display:grid;gap:clamp(36px,5vw,56px);padding-block:clamp(72px,10vh,104px) clamp(56px,8vh,88px);align-items:center} #room-boundaries .bd-copy{display:grid;gap:clamp(18px,2.2vw,28px);align-content:center} #room-boundaries .bd-h{font-size:clamp(42px,4.7vw,74px);line-height:1.02} #room-boundaries .bd-h em{white-space:nowrap} #room-boundaries .bd-lede{max-width:21em} #room-boundaries .bd-instrument{display:grid;justify-items:center;min-width:0} /* words rise out of their own masks as the room scrolls in (kit.js) */ #room-boundaries .k-w{display:inline-block;clip-path:inset(-.3em -.4em -.18em -.4em)} #room-boundaries .k-wi{display:inline-block;transform:translateY(calc((1 - var(--k,1)) * 1.25em));opacity:calc(.15 + .85 * var(--k,1))} /* tabs: museum labels with one gold rule that slides to the chosen strength */ #room-boundaries .bd-tabs{position:relative;display:flex;justify-content:center;border-bottom:1px solid var(--line-strong)} #room-boundaries [role="tab"]{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 clamp(14px,1.8vw,24px);background:none;border:0;cursor:pointer;font:700 12.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--bone-muted);transition:color .6s var(--ease)} #room-boundaries [role="tab"]:hover{color:var(--bone)} #room-boundaries [role="tab"][aria-selected="true"]{color:var(--bone)} #room-boundaries [role="tab"]:focus-visible{outline-offset:-4px;border-radius:4px} #room-boundaries .bd-tn{font:italic 400 15px/1 var(--serif);letter-spacing:.02em;color:var(--gold-deep);text-transform:none;transition:color .6s} #room-boundaries [aria-selected="true"] .bd-tn{color:var(--gold)} #room-boundaries .bd-ind{position:absolute;left:0;bottom:-1px;width:100px;height:2px;background:var(--gold);transform-origin:0 50%;transform:scaleX(0);transition:transform 1.1s var(--ease)} /* the drawing: turns and gathers with scroll (JS sets the group transform) */ #room-boundaries .bd-figure{position:relative;width:min(100%,500px,50vh);aspect-ratio:1;margin:clamp(18px,2.4vh,30px) auto clamp(14px,2vh,24px)} #room-boundaries .bd-figure::before{content:"";position:absolute;inset:6%;border-radius:50%;background:radial-gradient(closest-side,rgba(217,188,126,.10),rgba(217,188,126,.03) 62%,transparent);pointer-events:none} #room-boundaries .bd-svg{position:relative;width:100%;height:100%;transition:opacity .2s linear} #room-boundaries .bd-svg.bd-fade{opacity:0} #room-boundaries .bd-circles{stroke-width:1.25} #room-boundaries .bd-circles .g-draw{--gap:70ms;--dur:2s} #room-boundaries .bd-bound,#room-boundaries .bd-outer{stroke-width:1.1} #room-boundaries .bd-chords{stroke-width:1} #room-boundaries .bd-nodes circle{fill:var(--gold-soft);stroke:none} /* the rule, in plain words */ #room-boundaries .bd-panels{display:grid;width:100%;max-width:30em;text-align:center} #room-boundaries .bd-panel{grid-area:1/1;display:grid;justify-items:center;gap:10px;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .6s var(--ease),transform .9s var(--ease),visibility 0s .6s} #room-boundaries .bd-panel.on{opacity:1;visibility:visible;transform:none;transition:opacity 1s var(--ease) .3s,transform 1.2s var(--ease) .3s,visibility 0s} #room-boundaries .bd-fig{font:700 12px/1.3 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--gold)} #room-boundaries .bd-rule{font:400 clamp(24px,2.2vw,32px)/1.15 var(--serif);letter-spacing:-.01em;color:var(--bone);text-wrap:balance} #room-boundaries .bd-side{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:22px} #room-boundaries .bd-side .plate{--plate-w:min(42vw,200px)} #room-boundaries .bd-note{color:var(--bone-muted);font-size:14px;line-height:1.55;max-width:22em} @media (min-width:960px){ #room-boundaries .bd{grid-template-columns:minmax(0,1fr) minmax(0,auto) minmax(0,.8fr);column-gap:clamp(36px,4vw,72px);min-height:min(100svh,980px)} #room-boundaries .bd-instrument{width:min(500px,50vh,34vw)} #room-boundaries .bd-figure{width:100%} #room-boundaries .bd-side{grid-template-columns:1fr;justify-items:end;gap:18px} #room-boundaries .bd-side .plate{--plate-w:clamp(200px,16vw,244px)} #room-boundaries .bd-note{max-width:var(--plate-w,244px);width:clamp(200px,16vw,244px);font-size:13.5px} } @media (max-width:520px){ #room-boundaries [role="tab"]{padding:0 11px;letter-spacing:.14em;font-size:12px;gap:7px} } @media (prefers-reduced-motion:reduce){ #room-boundaries .bd-panel,#room-boundaries .bd-panel.on{transform:none;transition:opacity .4s ease,visibility 0s} #room-boundaries .bd-ind{transition:none} } #room-boundaries{overflow-x:clip} /* ---------- room: breath ---------- */ /* Room 04 — The Breath: one screen that asks only for one breath. */ #room-breath{background:linear-gradient(180deg,transparent 0%,rgba(6,9,8,.55) 14%,rgba(6,9,8,.55) 86%,transparent 100%)} #room-breath .br{display:grid;gap:28px 20px;padding-block:clamp(64px,9vh,96px);align-items:center; grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"head head" "sub plate" "inst inst"} #room-breath .br-copy{display:contents} #room-breath .br-headline{grid-area:head;display:grid;gap:18px} #room-breath .br-sub{grid-area:sub;display:grid;gap:18px;align-content:center} #room-breath .br-h{font-size:clamp(40px,4.7vw,74px);line-height:1.02} #room-breath .br-h em{white-space:nowrap} #room-breath .br-lede{font-size:clamp(16px,1.3vw,19px)} #room-breath .br-free{display:flex;gap:10px;align-items:center;white-space:nowrap;color:var(--bone-muted);font-size:14.5px} #room-breath .br-free span{font:700 11px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--gold);padding:7px 11px;border:1px solid var(--line-gold);border-radius:999px} #room-breath .k-w{display:inline-block;clip-path:inset(-.3em -.4em -.18em -.4em)} #room-breath .k-wi{display:inline-block;transform:translateY(calc((1 - var(--k,1)) * 1.25em));opacity:calc(.15 + .85 * var(--k,1))} /* the instrument */ #room-breath .br-instrument{grid-area:inst;display:grid;justify-items:center;width:100%} #room-breath .br-stage{position:relative;width:min(100%,480px,54vh);aspect-ratio:1;cursor:pointer;touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent} #room-breath .br-glow{position:absolute;inset:14%;border-radius:50%;background:radial-gradient(closest-side,rgba(232,209,156,.17),rgba(217,188,126,.06) 55%,transparent 100%);pointer-events:none} #room-breath .br-svg{position:relative;width:100%;height:100%} #room-breath .br-ticks{stroke:var(--gold);stroke-width:1} #room-breath .br-track{stroke:var(--line-strong);stroke-width:1} #room-breath .br-progress{stroke:var(--gold);stroke-width:2;stroke-linecap:round} #room-breath .br-tip{fill:var(--gold-soft);stroke:none} #room-breath .br-flower{stroke-width:1.3} #room-breath .br-bound,#room-breath .br-inner{stroke-width:1.1} #room-breath .br-meta{display:grid;justify-items:center;gap:12px;margin-top:clamp(10px,1.6vh,18px)} #room-breath .br-say{display:grid;height:1.4em;font:700 13.5px/1.4 var(--sans);letter-spacing:.36em;text-transform:uppercase;color:var(--gold-soft);text-align:center} #room-breath .br-word{grid-area:1/1;padding-left:.36em;opacity:0;transition:opacity .45s ease-out} #room-breath .br-word.on{opacity:1;transition:opacity 1.2s var(--ease) .4s} #room-breath .br-marks{display:flex;gap:12px;order:2} #room-breath .br-marks li{width:9px;height:9px;border-radius:50%;border:1px solid var(--gold-deep);transition:background .9s,border-color .9s} #room-breath .br-marks li.now{border-color:var(--gold-soft)} #room-breath .br-marks li.done{background:var(--gold);border-color:var(--gold)} #room-breath .br-count{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--bone-muted);font-variant-numeric:tabular-nums;transition:opacity .9s} #room-breath .br-count.quiet{opacity:0} #room-breath .br-hold{margin-top:clamp(16px,2.4vh,26px);min-height:48px;padding:0 26px;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation} #room-breath.holding .br-hold{background:var(--gold-wash);border-color:var(--gold);color:var(--gold-soft)} #room-breath .br-plate{grid-area:plate;--plate-w:min(36vw,170px);align-self:center} #room-breath .br-plate figcaption{white-space:nowrap} @media (min-width:1080px){ #room-breath .br{grid-template-columns:minmax(0,1fr) auto minmax(0,.62fr);grid-template-areas:"head inst plate" "sub inst plate"; column-gap:clamp(40px,4.5vw,80px);row-gap:clamp(24px,3vh,36px);min-height:min(100svh,960px);align-content:center} #room-breath .br-headline{align-self:end} #room-breath .br-sub{align-self:start;align-content:start} #room-breath .br-instrument{width:auto} #room-breath .br-plate{--plate-w:clamp(190px,15vw,236px);justify-self:end} } #room-breath{overflow-x:clip} /* ---------- room: outside ---------- */ /* Room 06 — Outside. The Trailhead lights petal by petal as you scroll: minutes, not miles. The figure is live SVG, so it stays sharp at any size. The plate never moves. */ #room-outside .o-scroller{height:190vh} #room-outside .o-grid{width:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) auto;gap:clamp(24px,3.5vw,56px);align-items:center;padding-top:64px} #room-outside .o-title{font-size:clamp(40px,4.6vw,72px);margin-top:18px} #room-outside .o-title em{display:block} #room-outside .k-w{display:inline-block;clip-path:inset(-.3em -.4em -.18em -.4em)} #room-outside .k-wi{display:inline-block;transform:translateY(calc((1 - var(--k,1)) * 1.25em));opacity:calc(.15 + .85 * var(--k,1))} #room-outside .o-lede{margin-top:18px} #room-outside .o-readout{margin-top:26px;max-width:26em} #room-outside .o-count{white-space:nowrap;font:400 clamp(17px,1.4vw,22px)/1.2 var(--serif);font-variant-numeric:tabular-nums lining-nums;color:var(--bone)} #room-outside .o-min,#room-outside .o-pet{color:var(--gold-soft)} #room-outside .o-arrow{color:var(--gold-deep);margin-inline:.2em} #room-outside .o-ruler{position:relative;height:2px;margin-top:12px;background:var(--line-strong)} #room-outside .o-fill{position:absolute;inset:0;background:var(--gold);transform-origin:0 50%;transform:scaleX(var(--o-p,0))} #room-outside .o-more{margin-top:16px;color:var(--bone-muted);font-size:15px;line-height:1.55;max-width:28em} #room-outside .o-sigil{position:relative;display:grid;place-items:center;min-width:0} #room-outside .o-glow{position:absolute;width:82%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(240,214,150,.3),rgba(217,188,126,.08) 46%,transparent 70%);opacity:calc(.25 + .75 * var(--o-p,0));transform:scale(calc(.85 + .2 * var(--o-p,0)))} #room-outside .o-svg{position:relative;width:min(100%,62vh);height:auto;stroke:var(--gold);transform:rotate(calc(var(--o-p,0) * 24deg))} #room-outside .o-ring{stroke-width:1.1;stroke-opacity:.7} #room-outside .o-ring.dim{stroke-opacity:.4} #room-outside .o-tick{stroke-width:.8;stroke-opacity:.55} #room-outside .o-gate{stroke-width:1.1;stroke-opacity:.5} #room-outside .o-base{stroke-width:.7;stroke-opacity:.2} #room-outside .o-petal{stroke:var(--gold-soft);stroke-width:1.5;opacity:var(--a,0);fill:rgba(240,214,150,.05)} #room-outside .o-trail{stroke:#F7E7BE;stroke-width:2.2;stroke-linecap:round;stroke-dasharray:1 2;stroke-dashoffset:calc(1.01 - var(--o-p,0) * 1.01)} #room-outside .o-sun{fill:#FFF0C8;stroke:none;filter:drop-shadow(0 0 5px rgba(255,232,170,.9))} #room-outside .o-core{fill:#FFF0C8;stroke:none} #room-outside .o-plate{--plate-w:clamp(220px,18vw,270px)} #room-outside.still .o-scroller{height:auto} #room-outside.still .o-stage{position:relative;height:auto;padding-block:var(--room-pad)} @media (max-width:1020px){ #room-outside .o-scroller{height:auto} #room-outside .o-stage{position:relative;height:auto;overflow:visible;padding-block:clamp(72px,10vh,104px)} #room-outside .o-grid{grid-template-columns:minmax(0,1fr);padding-top:0;justify-items:center;gap:32px} #room-outside .o-copy{width:100%} #room-outside .o-svg{width:min(88vw,460px)} #room-outside .o-plate{--plate-w:min(56vw,240px)} } /* ---------- room: inside ---------- */ /* Room 07 — Inside AWARE: seven features in one sideways sweep, about two screens of scroll. Desktop: a sticky stage whose track slides left as you scroll down (native scroll, never captured). The track moves in whole pixels and is never promoted to its own layer, so the app screens stay sharp. Card widths, gaps and padding are set in whole pixels by JS. Phones, narrow windows and stillness: a plain swipe row with snap points. */ #room-inside{--card-w:240px;--gap:64px;--pad:var(--gutter)} #room-inside .in-scroller{height:var(--in-h,200vh)} #room-inside .in-stage{display:block} #room-inside .in-flower{position:absolute;right:-12vw;top:50%;width:min(84vh,900px);translate:0 -50%;stroke:var(--gold);stroke-width:.8;opacity:.16;pointer-events:none;rotate:var(--in-rot,0deg)} #room-inside .in-frame{position:relative;height:100%;display:grid;grid-template-rows:auto 1fr auto;padding-top:clamp(84px,11vh,112px);padding-bottom:clamp(20px,3.4vh,36px)} #room-inside .in-head{width:100%;display:flex;justify-content:space-between;align-items:end;gap:24px} #room-inside .in-h{margin-top:16px;font-size:clamp(38px,4.4vw,68px);line-height:1.02} #room-inside .in-h em{white-space:nowrap} #room-inside .k-w{display:inline-block;clip-path:inset(-.3em -.4em -.18em -.4em)} #room-inside .k-wi{display:inline-block;transform:translateY(calc((1 - var(--k,1)) * 1.25em));opacity:calc(.15 + .85 * var(--k,1))} /* the counter rolls; a gold bar shows how far through the seven you are */ #room-inside .in-meta{display:grid;justify-items:end;gap:14px;padding-bottom:6px} #room-inside .in-count{display:flex;align-items:baseline;gap:.3em;font:400 clamp(30px,2.6vw,40px)/1 var(--serif);color:var(--bone-muted);white-space:nowrap;font-variant-numeric:tabular-nums lining-nums} #room-inside .in-now{color:var(--gold-soft)} #room-inside .in-of{color:var(--gold-deep);font-size:.8em} #room-inside .in-bar{position:relative;display:block;width:132px;height:2px;background:var(--line-strong)} #room-inside .in-bar i{position:absolute;inset:0;background:var(--gold);transform-origin:0 50%;transform:scaleX(var(--in-p,0))} #room-inside .k-odo{display:inline-flex} #room-inside .k-dg{display:inline-block;height:1.1em;overflow:hidden;transition:width .9s var(--ease)} #room-inside .k-col{display:flex;flex-direction:column;align-items:flex-start;transform:translateY(calc(var(--n,0) * -1.1em));transition:transform .9s var(--ease) calc(var(--j,0) * 60ms)} #room-inside .k-col span,#room-inside .k-ch{display:block;height:1.1em;line-height:1.1em} #room-inside .in-viewport{position:relative;overflow:hidden;display:flex;align-items:center;min-height:0} #room-inside .in-track{display:flex;gap:var(--gap);padding-inline:var(--pad);width:max-content;transform:translateX(var(--in-x,0px))} #room-inside .in-card{width:var(--card-w);flex:none;display:grid;align-content:start;opacity:var(--o,1);transition:opacity .7s var(--ease)} #room-inside .in-card .plate{justify-items:start} #room-inside .in-card .plate-card{--plate-w:var(--card-w);width:var(--card-w)} #room-inside .in-card .plate-card img{width:100%;height:auto} /* captions drift a little against the plates: plates never move on their own */ #room-inside .in-txt{transform:translateX(var(--dx,0px));transition:color .6s} #room-inside .in-name{margin-top:20px;font:400 clamp(24px,1.9vw,29px)/1.1 var(--serif);letter-spacing:-.01em;transition:color .6s var(--ease)} #room-inside .in-line{margin-top:8px;color:var(--bone-muted);font-size:15.5px;line-height:1.5;max-width:24ch} #room-inside .in-card.on .in-name{color:var(--gold-soft)} #room-inside .in-hint{display:flex;align-items:center;gap:14px;width:100%;color:var(--bone-muted);font-size:11.5px} #room-inside .in-hint-m{display:none} #room-inside .in-hint-line{flex:0 0 120px;height:1px;background:linear-gradient(90deg,var(--gold-deep),transparent)} /* Phones, narrow windows and stillness: a native swipe row, no sticky stage. */ #room-inside.swipe .in-scroller{height:auto} #room-inside.swipe .in-stage{position:relative;height:auto;overflow:visible} #room-inside.swipe .in-frame{height:auto;padding-block:clamp(72px,10vh,104px)} #room-inside.swipe .in-viewport{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;padding-block:28px 8px;-webkit-overflow-scrolling:touch} #room-inside.swipe .in-viewport::-webkit-scrollbar{display:none} #room-inside.swipe .in-track{transform:none;padding-inline:max(var(--gutter),calc((100vw - var(--wrap)) / 2 + var(--gutter)))} #room-inside.swipe .in-card{scroll-snap-align:center;--o:1} #room-inside.swipe .in-txt{transform:none} #room-inside.swipe .in-hint-d{display:none} #room-inside.swipe .in-hint-m{display:inline} #room-inside.swipe .in-flower{top:120px;translate:0 0;width:110vw;right:-50vw} @media (max-width:900px){ #room-inside{--card-w:min(60vw,240px);--gap:20px} #room-inside .in-head{flex-direction:column;align-items:start} #room-inside .in-meta{display:none} } #room-inside{overflow-x:clip} /* ---------- room: wisdom ---------- */ /* Room 08 — One line a day, then Premium: calm, honest, nothing hidden, about two screens. */ #room-wisdom{background:transparent} /* ---- (a) one line a day: the words light up as you read down the page ---- */ #room-wisdom .wi-one{display:grid;justify-items:center;align-content:center;text-align:center;min-height:min(78svh,760px);padding-block:clamp(72px,10vh,104px) clamp(40px,6vh,64px)} #room-wisdom .wi-text{width:min(100%,1040px);display:grid;justify-items:center} #room-wisdom .wi-date{display:flex;align-items:center;gap:14px;margin:clamp(36px,6vh,64px) 0 clamp(20px,3vh,28px);color:var(--bone-muted);font-size:12px} #room-wisdom .wi-wick{width:7px;height:7px;border-radius:50%;background:var(--gold-soft);box-shadow:0 0 0 5px rgba(217,188,126,.1),0 0 18px 3px rgba(232,209,156,.5);animation:wi-flicker 3.6s var(--ease-io) infinite alternate} @keyframes wi-flicker{from{box-shadow:0 0 0 5px rgba(217,188,126,.1),0 0 14px 2px rgba(232,209,156,.4)}to{box-shadow:0 0 0 6px rgba(217,188,126,.13),0 0 22px 5px rgba(232,209,156,.6)}} #room-wisdom .wi-line{color:var(--bone);font-size:clamp(38px,5.4vw,82px);line-height:1.06;max-width:17ch;margin-inline:auto;text-wrap:balance} #room-wisdom .wi-line .k-wi{display:inline-block;opacity:calc(.14 + .86 * var(--k,1));color:color-mix(in srgb,var(--bone) calc(var(--k,1) * 100%),var(--gold));transform:translateY(calc((1 - var(--k,1)) * .18em))} #room-wisdom .wi-nature{margin-top:clamp(18px,2.6vh,28px);font:italic 400 clamp(19px,1.7vw,24px)/1.4 var(--serif);color:var(--gold-soft);opacity:var(--wi-n,1);transform:translateY(calc((1 - var(--wi-n,1)) * 10px))} /* ---- (b) Premium, compact ---- */ #room-wisdom .wi-premium{padding-block:clamp(32px,5vh,56px) clamp(72px,10vh,112px)} #room-wisdom .wi-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:20px 64px;align-items:end;margin-bottom:clamp(28px,4vh,40px);padding-top:clamp(28px,4vh,40px);border-top:1px solid var(--line-gold)} #room-wisdom .wi-eyebrow{color:var(--gold);margin-bottom:14px;font-size:12px} #room-wisdom .wi-h{max-width:13em} #room-wisdom .wi-h .k-w{display:inline-block;clip-path:inset(-.3em -.4em -.18em -.4em)} #room-wisdom .wi-h .k-wi{display:inline-block;transform:translateY(calc((1 - var(--k,1)) * 1.25em));opacity:calc(.15 + .85 * var(--k,1))} #room-wisdom .wi-intro{color:var(--bone-muted);max-width:32em;font-size:17px} #room-wisdom .wi-intro strong{display:block;margin-top:8px;font-weight:400;color:var(--bone)} #room-wisdom .wi-plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px} #room-wisdom .wi-plan{position:relative;display:flex;flex-direction:column;gap:14px;padding:22px 24px 20px;border-radius:20px;border:1px solid var(--line-strong);background:linear-gradient(180deg,rgba(23,33,28,.85),rgba(17,25,21,.5));transition:border-color .6s var(--ease),transform .6s var(--ease)} #room-wisdom .wi-plan:hover{border-color:var(--line-gold)} #room-wisdom .wi-best{border-color:var(--line-gold);background:linear-gradient(180deg,rgba(217,188,126,.09),rgba(17,25,21,.5) 75%);box-shadow:inset 0 1px 0 rgba(255,236,190,.14)} #room-wisdom .wi-plan-name{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:26px;font:700 12px/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--bone-muted)} #room-wisdom .wi-tag{padding:6px 10px;border-radius:999px;border:1px solid var(--line-gold);color:var(--gold-soft);font-size:10.5px;letter-spacing:.16em;background:var(--gold-wash)} #room-wisdom .wi-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px} #room-wisdom .wi-amt{font:400 clamp(38px,3.2vw,48px)/1 var(--serif);letter-spacing:-.01em;color:var(--bone);font-variant-numeric:lining-nums proportional-nums} #room-wisdom .wi-best .wi-amt{color:var(--gold-soft)} #room-wisdom .wi-per{color:var(--bone-muted);font-size:15px} #room-wisdom .wi-sub{flex-basis:100%;font-size:14.5px;color:var(--gold)} #room-wisdom .wi-trial{margin-top:auto;padding-top:14px;border-top:1px solid var(--line-strong);font-size:14px;color:var(--bone-muted)} /* the prices roll in like an odometer, then sit still */ #room-wisdom .k-odo{display:inline-flex} #room-wisdom .k-dg{display:inline-block;height:1.12em;overflow:hidden;transition:width 1.8s var(--ease) .25s} #room-wisdom .k-col{display:flex;flex-direction:column;align-items:flex-start;transform:translateY(calc(var(--n,0) * -1.12em));transition:transform 1.8s var(--ease) calc(.25s + var(--j,0) * 110ms)} #room-wisdom .k-col span,#room-wisdom .k-ch{display:block;height:1.12em;line-height:1.12em} #room-wisdom .wi-terms{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 40px;align-items:start;margin-top:18px;padding:0 4px} #room-wisdom .wi-nolife{font:italic 400 18px/1.45 var(--serif);color:var(--bone)} #room-wisdom .wi-disclose{max-width:66em;color:var(--bone-muted);font-size:13.5px;line-height:1.6} #room-wisdom .wi-disclose a{color:var(--bone);text-underline-offset:3px;text-decoration-color:var(--gold-deep)} #room-wisdom .wi-disclose a:hover{color:var(--gold-soft)} /* Free vs Premium: a compact two-column checklist */ #room-wisdom .wi-compare{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(32px,4vw,64px);margin-top:clamp(32px,5vh,48px)} #room-wisdom .wi-col-h{margin-bottom:8px;padding-bottom:12px;border-bottom:1px solid var(--line-strong);font:700 12px/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--bone)} #room-wisdom .wi-col-gold .wi-col-h{color:var(--gold);border-color:var(--line-gold)} #room-wisdom .wi-col li{position:relative;padding:7px 0 7px 30px;color:var(--bone-muted);font-size:15.5px;line-height:1.45} #room-wisdom .wi-col-gold li{color:var(--bone)} #room-wisdom .wi-col li::before{content:"";position:absolute;left:1px;top:10px;width:16px;height:16px;border-radius:50%;border:1px solid var(--bone-soft);transition:transform .8s var(--ease) calc(.2s + var(--i,0) * 90ms),opacity .8s var(--ease) calc(.2s + var(--i,0) * 90ms)} #room-wisdom .wi-col li::after{content:"";position:absolute;left:7px;top:13px;width:4px;height:8px;border:solid var(--bone-muted);border-width:0 1.5px 1.5px 0;transform:rotate(45deg);clip-path:inset(0 0 var(--chk,0%) 0);transition:clip-path .7s var(--ease) calc(.5s + var(--i,0) * 90ms)} #room-wisdom .wi-col-gold li::before{border-color:var(--gold);background:var(--gold-wash)} #room-wisdom .wi-col-gold li::after{border-color:var(--gold-soft)} .js #room-wisdom .wi-col:not(.in) li::before{transform:scale(.4);opacity:0} .js #room-wisdom .wi-col:not(.in) li::after{--chk:100%} #room-wisdom .wi-cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:clamp(32px,5vh,48px)} #room-wisdom .wi-get{transition:transform .6s var(--ease),box-shadow .6s var(--ease),translate .7s var(--ease)} #room-wisdom .wi-req{color:var(--bone-muted);font-size:14px} @media (max-width:960px){ #room-wisdom .wi-plans{grid-template-columns:1fr;gap:10px} #room-wisdom .wi-plan{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 16px;padding:16px 18px} #room-wisdom .wi-plan-name{grid-column:1;justify-content:flex-start} #room-wisdom .wi-price{grid-column:2;grid-row:1;justify-content:flex-end;text-align:right} #room-wisdom .wi-trial{grid-column:1 / -1;margin:2px 0 0;padding:10px 0 0;border-top:1px solid var(--line);font-size:13.5px} #room-wisdom .wi-amt{font-size:34px} #room-wisdom .wi-per{font-size:13.5px} #room-wisdom .wi-sub{font-size:13px} #room-wisdom .wi-terms{grid-template-columns:1fr} #room-wisdom .wi-head{grid-template-columns:1fr} } @media (max-width:760px){ #room-wisdom .wi-compare{grid-template-columns:1fr;gap:24px} #room-wisdom .wi-col li{font-size:15px;padding-block:6px} } @media (max-width:560px){ #room-wisdom .wi-one{min-height:0} #room-wisdom .wi-line{font-size:clamp(34px,9.4vw,44px)} #room-wisdom .wi-cta{flex-direction:column;align-items:stretch;text-align:center} } @media (prefers-reduced-motion:reduce){#room-wisdom .wi-wick{animation:none}} .paused #room-wisdom .wi-wick{animation:none} /* ---------- room: finale ---------- */ /* Room 11 — Be. Here. Now. The room dims to forest-black around a fern that draws itself, three words land one per beat, and the page lets you go. */ #room-finale{position:relative;overflow:hidden;background:linear-gradient(180deg,transparent 0%,rgba(6,9,8,.5) 40%);min-height:max(100svh,760px);display:grid;align-items:center} /* The last light over the Quillayute River (full resolution at every size). As the room arrives the sky slowly goes from blue hour toward night: the photo dims and sinks a little, never to black. */ #room-finale .fi-night{position:absolute;inset:0;z-index:-2;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 26%,#000 80%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 26%,#000 80%,transparent 100%)} #room-finale .fi-night img{width:100%;height:100%;object-fit:cover;object-position:50% 62%;opacity:.62;filter:saturate(.85) contrast(1.05);transform:scale(1.06);transform-origin:50% 60%; transition:opacity 6s var(--ease-io) .2s,transform 9s var(--ease) .2s} #room-finale .fi-dim{position:absolute;inset:0;z-index:-1;background: radial-gradient(46% 50% at 50% 42%,rgba(6,9,8,.62) 0%,rgba(6,9,8,.4) 60%,rgba(6,9,8,0) 100%), linear-gradient(180deg,var(--ink) 0%,rgba(11,16,14,.2) 26%,rgba(6,9,8,.1) 64%,var(--ink-deep) 100%); opacity:.8;transition:opacity 6s var(--ease-io) .2s} #room-finale.on .fi-night img{opacity:.42;transform:none} #room-finale.on .fi-dim{opacity:1} #room-finale .fi-inner{display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:clamp(96px,13vh,150px);padding-bottom:clamp(72px,10vh,120px)} #room-finale .kicker .dash{letter-spacing:0;color:var(--bone-soft)} /* ---- the emblem ---- */ #room-finale .fi-emblem-wrap{position:relative;width:clamp(210px,min(24vw,31vh),320px);aspect-ratio:1;margin:clamp(36px,5.5vh,60px) 0 clamp(28px,4.4vh,48px)} #room-finale .fi-halo{position:absolute;inset:-30%;border-radius:50%;background:radial-gradient(closest-side,rgba(217,188,126,.16),rgba(217,188,126,.05) 55%,rgba(217,188,126,0));opacity:0;transition:opacity 3.2s var(--ease) 1.4s} #room-finale.on .fi-halo{opacity:1} #room-finale .fi-emblem{position:relative;width:100%;height:100%;stroke-width:1.3} #room-finale .fi-emblem .fi-ring{stroke-opacity:.7} #room-finale .fi-emblem .fi-ticks{stroke-opacity:.65} #room-finale .fi-emblem .fi-inner-ring{stroke-opacity:.3} #room-finale .fi-emblem .fi-stem{stroke-width:2.2} #room-finale .fi-emblem .fi-coil{stroke-width:1.9} #room-finale .fi-emblem .fi-leaf{stroke-width:1;stroke-opacity:.85} #room-finale .fi-emblem .fi-dot{fill:var(--gold);stroke:none;opacity:0;transition:opacity 1.6s var(--ease) var(--t,3s)} #room-finale .drawn .fi-dot{opacity:1} /* ---- the words, one per beat ---- */ #room-finale .fi-words{color:var(--bone);font-size:clamp(56px,9.6vw,160px);white-space:nowrap} #room-finale .fi-words em{color:var(--gold-soft)} .js #room-finale .fi-w{display:inline-block;opacity:0;transform:translate3d(0,.14em,0); transition:opacity 1.4s var(--ease),transform 1.7s var(--ease);transition-delay:calc(1.7s + var(--b) * .85s)} .js #room-finale.on .fi-w{opacity:1;transform:none} /* ---- the way out ---- */ #room-finale .fi-cta{display:flex;align-items:center;justify-content:center;gap:28px;margin-top:clamp(36px,5.5vh,56px)} #room-finale .fi-qr{display:flex;align-items:center;gap:14px;margin:0;text-align:left} #room-finale .fi-qr img{width:72px;height:72px;padding:6px;border-radius:12px;background:var(--bone)} #room-finale .fi-qr figcaption{font:700 11.5px/1.5 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--bone-muted);max-width:12em} #room-finale .fi-last{margin-top:clamp(40px,6vh,64px);font:italic 400 clamp(19px,1.6vw,23px)/1.4 var(--serif);color:var(--bone-muted)} .js #room-finale .fi-cta,.js #room-finale .fi-last{opacity:0;transition:opacity 1.8s var(--ease) 4.3s} .js #room-finale .fi-last{transition-delay:5.4s} .js #room-finale.on .fi-cta,.js #room-finale.on .fi-last{opacity:1} /* ---- still ---- */ #room-finale.still *,#room-finale.still{transition:none!important} @media (max-width:720px){ #room-finale .fi-night{inset:auto 0 0;height:min(118vw,620px)} #room-finale .fi-emblem-wrap{width:min(64vw,260px)} #room-finale .fi-words{font-size:clamp(56px,19vw,84px);line-height:.98;white-space:normal} #room-finale .fi-w{display:block} .js #room-finale .fi-w{display:block} #room-finale .fi-cta{flex-direction:column;width:100%} #room-finale .fi-cta .btn-gold{width:100%} #room-finale .fi-qr{display:none} } #room-finale .btn-play{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:58px;padding:0 28px;border-radius:999px;border:1px solid var(--line-gold);background:rgba(9,13,11,.5);color:var(--bone);font:700 16.5px/1 var(--sans);text-decoration:none} #room-finale .btn-play small{font:700 10.5px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--gold-soft)}