:root{--ink:#0a1836;--deep:#0b1f4d;--txt:#eaf0ff;--mute:#a9b6d6;--peach:#ffc9a0;
--chrome:linear-gradient(100deg,#ffffff 0%,#cfe6ff 18%,#9ec9ff 30%,#e8c8ff 45%,#ffffff 55%,#ffd6b0 68%,#a8d8ff 82%,#ffffff 100%)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Manrope,system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--ink);color:var(--txt);-webkit-font-smoothing:antialiased;line-height:1.6}
a{color:inherit}
.skip{position:absolute;left:-999px;top:8px;background:#fff;color:#000;padding:8px 12px;border-radius:8px;z-index:10}.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--peach);outline-offset:4px;border-radius:6px}
.nav{position:absolute;inset:0 0 auto;display:flex;justify-content:space-between;align-items:center;padding:28px clamp(20px,5vw,64px);z-index:5}
.logo{font-weight:800;font-size:22px;letter-spacing:-.02em;text-decoration:none}
.nav nav a{margin-left:28px;text-decoration:none;font-size:14px;color:#dfe7ff;opacity:.85}.nav nav a:hover{opacity:1}
/* hero */
.hero{position:relative;min-height:100svh;display:grid;place-items:center;overflow:hidden;isolation:isolate}
.sky{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#071537 0%,#0e2a66 28%,#2d4f97 48%,#7c84b8 62%,#e7a98b 74%,#ffc9a0 80%,#ffe3c8 84%,#c8d4ea 100%)}









.hero-inner{text-align:center;padding:0 20px;margin-top:-6vh}
.eyebrow{font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:#cdd8f5;opacity:.8;margin-bottom:12px}
.chrome{font-weight:800;letter-spacing:-.045em;line-height:.95;background:var(--chrome);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
animation:sheen 9s ease-in-out infinite alternate;filter:drop-shadow(0 6px 30px rgba(170,200,255,.35))}
h1.chrome{font-size:clamp(88px,19vw,260px)}
@keyframes sheen{to{background-position:100% 0}}
.tag{margin-top:18px;font-size:clamp(20px,2.4vw,28px);font-weight:600;letter-spacing:-.01em}
.tag span{display:block;font-weight:400;font-size:.7em;color:#d4ddf5;opacity:.85}
.cta{display:inline-block;margin-top:34px;padding:13px 24px;border-radius:999px;text-decoration:none;font-weight:600;font-size:15px;
background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:.25s}
.cta:hover{background:rgba(255,255,255,.26);transform:translateY(-2px)}
/* sections */
main{background:linear-gradient(180deg,#c8d4ea 0,#6f80ad 9%,#1b2f63 26%,var(--ink) 48%)}
section{padding:clamp(72px,10vw,140px) clamp(20px,5vw,64px);max-width:1200px;margin:0 auto}
.section-h{font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:var(--mute);font-weight:600;margin-bottom:28px}
.work .section-h{color:#25345e}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{position:relative;padding:34px 30px 30px;border-radius:24px;display:flex;flex-direction:column;min-height:330px;
background:linear-gradient(160deg,rgba(255,255,255,.22),rgba(255,255,255,.06));border:1px solid rgba(255,255,255,.28);
backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);box-shadow:0 20px 50px -20px rgba(5,15,45,.6),inset 0 1px 0 rgba(255,255,255,.4);transition:transform .35s,box-shadow .35s}
.card:hover{transform:translateY(-6px);box-shadow:0 30px 70px -20px rgba(5,15,45,.75),inset 0 1px 0 rgba(255,255,255,.5)}
.num{font-size:13px;color:#e6ecff;opacity:.7;font-weight:600}
.card h3{font-size:40px;font-weight:800;letter-spacing:-.035em;margin-top:44px;background:var(--chrome);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent}
.kicker{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--peach);font-weight:600;margin:4px 0 14px}
.card p:not(.kicker){color:#dbe3f8;font-size:15.5px}
.card a{margin-top:auto;padding-top:24px;font-weight:600;text-decoration:none;font-size:15px}
.card a::after{content:"";position:absolute;inset:0;border-radius:24px}
.card a:hover{color:var(--peach)}
.lede{font-size:clamp(24px,3.2vw,40px);line-height:1.3;font-weight:500;letter-spacing:-.02em;max-width:22ch;max-width:900px;color:#e9eeff}
.contact{text-align:center;padding-bottom:110px}
.chrome.small{font-size:clamp(56px,10vw,128px)}
.mail{display:inline-block;margin-top:22px;font-size:clamp(18px,2vw,22px);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:4px}
.mail:hover{color:var(--peach);border-color:var(--peach)}
.foot{border-top:1px solid rgba(255,255,255,.08);padding:28px clamp(20px,5vw,64px);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--mute)}
.legal{opacity:.7}
@media (max-width:860px){.cards{grid-template-columns:1fr}.card{min-height:0}.card h3{margin-top:22px}.nav nav a{margin-left:16px}}
@media (max-width:420px){.nav nav a:nth-child(2){display:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}
section.hero{max-width:none;padding:0;margin:0;min-height:min(100svh,1000px);height:min(100svh,1000px)}
@media (max-width:860px){section.hero{min-height:560px}}

/* ---- Stage 1: living sky ---- */
.stars{position:absolute;inset:0 0 50% 0;background-image:radial-gradient(1px 1px at 12% 18%,#fff,transparent),radial-gradient(1px 1px at 33% 8%,#fff,transparent),radial-gradient(1.5px 1.5px at 58% 14%,#fff,transparent),radial-gradient(1px 1px at 77% 22%,#fff,transparent),radial-gradient(1px 1px at 88% 6%,#fff,transparent),radial-gradient(1px 1px at 46% 27%,#fff,transparent),radial-gradient(1px 1px at 22% 33%,#fff,transparent);opacity:.45;animation:twinkle 6s ease-in-out infinite alternate}
@keyframes twinkle{to{opacity:.15}}
.sunwrap{position:absolute;left:14%;top:70%;width:0;height:0;will-change:transform}
.sun{position:absolute;left:0;top:0;width:46vmin;height:46vmin;transform:translate(-50%,-50%);border-radius:50%;
background:radial-gradient(circle,#fffaf0 0 6%,#ffe2b8 10%,rgba(255,190,140,.55) 26%,rgba(255,170,120,.18) 48%,transparent 70%);animation:breathe 8s ease-in-out infinite}
@keyframes breathe{50%{opacity:.85;transform:translate(-50%,-50%) scale(1.06)}}
.rays{position:absolute;left:0;top:0;width:150vmax;height:150vmax;margin:-75vmax 0 0 -75vmax;border-radius:50%;
background:repeating-conic-gradient(from 0deg,transparent 0deg,rgba(255,228,195,.10) 1.5deg,transparent 3.5deg,transparent 6deg,rgba(255,236,212,.06) 7.5deg,transparent 9.5deg,transparent 13deg);
-webkit-mask:radial-gradient(circle,#000 0,rgba(0,0,0,.5) 14%,transparent 50%);mask:radial-gradient(circle,#000 0,rgba(0,0,0,.5) 14%,transparent 50%);
animation:spin 160s linear infinite;will-change:transform}
.rays.r2{animation-duration:240s;animation-direction:reverse;opacity:.6;transform:rotate(4deg)}
@keyframes spin{to{transform:rotate(360deg)}}
.streak{position:absolute;inset:0;width:100%;height:100%}
.streak .glow{stroke-width:9;opacity:.18}
.streak path{stroke-dasharray:1 1;stroke-dashoffset:1}
.streak path.go{animation:draw 4.5s cubic-bezier(.6,0,.2,1) forwards}
@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.streak path.fade{transition:opacity 1.2s;opacity:0}
.haze{position:absolute;left:0;right:0;bottom:12%;height:30%;background:radial-gradient(ellipse 60% 100% at 20% 100%,rgba(255,200,160,.45),transparent 70%);pointer-events:none}
.cl-wrap{position:absolute;left:0;right:0;bottom:0;will-change:transform;pointer-events:none}
.cl{--r:5.217;height:var(--h);width:calc(var(--h)*var(--r)*3);background-repeat:repeat-x;background-size:auto 100%;will-change:transform;animation:drift var(--t) linear infinite}
.far{--h:clamp(160px,30vh,300px);--r:8;--t:260s;background-image:url(assets/cloud-far.webp);opacity:.9;margin-bottom:9vh}
.mid{--h:clamp(190px,34vh,380px);--r:6.316;--t:170s;background-image:url(assets/cloud-mid.webp);margin-bottom:3vh}
.near{--h:clamp(220px,38vh,460px);--r:5.217;--t:110s;background-image:url(assets/cloud-near.webp);margin-bottom:-6vh}
@keyframes drift{to{transform:translateX(calc(var(--h)*var(--r)*-1))}}
section.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:12%;background:linear-gradient(transparent,#c8d4ea);pointer-events:none}
@media (max-width:860px){.sunwrap{left:18%;top:68%}.sun{width:70vmin;height:70vmin}}
.hero-inner{position:relative;z-index:2}
.cta{background:rgba(14,32,80,.38);border-color:rgba(255,255,255,.45);box-shadow:0 8px 30px -10px rgba(10,25,70,.6)}
.cta:hover{background:rgba(14,32,80,.55)}
/* ---- Stage 2: scroll descent ---- */
.cl{margin-bottom:0!important}
.cl-rise{position:absolute;left:0;right:0;will-change:transform;pointer-events:none}
.cl-rise .cl-wrap{position:relative}
.cl-fill{height:160vh;margin-bottom:-160vh}
.r-far{bottom:9vh}.r-mid{bottom:3vh}.r-near{bottom:-6vh;z-index:3}
.day{position:absolute;inset:0;background:linear-gradient(180deg,#4f8fdc 0%,#7fb3ea 40%,#d6e8fb 70%,#fff1e2 85%);opacity:0;will-change:opacity}
.fog{position:absolute;inset:0;z-index:4;background:linear-gradient(180deg,rgba(214,224,242,.85),#c8d4ea);opacity:0;pointer-events:none;will-change:opacity}
.hero-inner h1,.hero-inner .tag,.hero-inner .eyebrow,.hero-inner .cta{will-change:transform,opacity}
section.hero::after{z-index:5}
.r-near .cl-fill{background:linear-gradient(180deg,#abb8da 0,#c9d3ec 18vh,#d3dcf0 30vh,#e8eef9 70vh,#dde5f4 160vh)!important;position:relative}
.r-near .cl-fill::before,.r-near .cl-fill::after{content:"";position:absolute;left:-10%;right:-10%;height:46vh;background:url(assets/cloud-near.webp) repeat-x 0 0/auto 100%;opacity:.55;transform:scaleY(-1)}
.r-near .cl-fill::before{top:-2vh}
.r-near .cl-fill::after{top:38vh;opacity:.35;transform:none;background-image:url(assets/cloud-mid.webp);background-position:-400px 0}
.fog{background:radial-gradient(ellipse 80% 70% at 50% 40%,#f4f7fd,#d9e2f3 60%,#c8d4ea)}
/* ---- Stage 3: project scenes ---- */
main{background:var(--ink)}
.bridge{height:45vh;background:linear-gradient(180deg,#c8d4ea 0%,#8a9cc8 30%,#2a427e 70%,#132654 100%)}
section.scenes{max-width:none;padding:0;margin:0;position:relative;background:linear-gradient(180deg,#132654,#0b1a40 60%,var(--ink));overflow:hidden}
.scenes-h{position:absolute;top:clamp(24px,5vh,48px);left:clamp(20px,5vw,64px);z-index:3;margin:0;color:var(--mute)}
.scene{min-height:100svh;display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:clamp(24px,5vw,80px);padding:clamp(80px,12vh,120px) clamp(20px,6vw,96px);max-width:1400px;margin:0 auto;position:relative;z-index:2}
.idx{font-size:13px;font-weight:600;letter-spacing:.2em;color:#e6ecff}.idx span{opacity:.45}
.pname{font-size:clamp(64px,10vw,168px);margin:10px 0 6px}
.scene .kicker{font-size:14px}
.line{font-size:clamp(17px,1.5vw,21px);color:#d6def3;max-width:34ch;margin-top:10px}
.visit{display:inline-flex;gap:8px;margin-top:30px;padding:13px 22px;border-radius:999px;text-decoration:none;font-weight:600;font-size:15px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:background .25s,transform .25s}
.visit:hover{background:rgba(255,255,255,.2);transform:translateY(-2px);color:var(--peach)}
.motif{display:grid;place-items:center}
.motif svg{width:min(100%,520px);height:auto;filter:drop-shadow(0 30px 60px rgba(0,8,30,.55))}
.scene-glow{position:absolute;inset:0;z-index:1;pointer-events:none}
.scene-glow i{position:absolute;right:-10vw;top:10vh;width:70vw;height:80vh;border-radius:50%;opacity:0;filter:blur(20px)}
.g1{background:radial-gradient(closest-side,rgba(255,190,130,.35),transparent)}
.g2{background:radial-gradient(closest-side,rgba(120,255,220,.25),transparent)}
.g3{background:radial-gradient(closest-side,rgba(210,170,255,.3),transparent)}
.scene-dots{display:none}
/* animated motif details */
.h-hour,.h-min,.h-sec{transform-origin:200px 200px}
.h-sec{animation:spin 60s steps(60) infinite}.h-min{animation:spin 3600s linear infinite;transform:rotate(60deg)}
.grid circle.canary{fill:#ffd36b;filter:drop-shadow(0 0 6px #ffd36b)}
.scanbar{animation:scan 4s ease-in-out infinite}
@keyframes scan{from{transform:translateY(0)}to{transform:translateY(460px)}}
/* pinned mode (JS) */
.scenes.pinned{height:100svh}
.scenes.pinned .scene{position:absolute;inset:0;margin:auto}
.scenes.pinned .scene-dots{display:flex;flex-direction:column;gap:12px;position:absolute;right:clamp(16px,3vw,40px);top:50%;transform:translateY(-50%);z-index:3;list-style:none}
.scene-dots li{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.3);transition:transform .3s,background .3s}
.scene-dots li.on{background:#fff;transform:scale(1.6)}
@media (max-width:860px){
 .scene{grid-template-columns:1fr;gap:8px;text-align:left;align-content:center;padding-top:90px}
 .motif{order:-1}.motif svg{width:min(62vw,300px)}
 .pname{font-size:clamp(56px,17vw,96px)}
 .line{font-size:16px}
 .scene-glow i{right:-30vw;top:0;width:120vw;height:60vh}
}
@media (prefers-reduced-motion:reduce){.scene-glow i{opacity:.6}}
/* ---- Stage 4: micro-interactions (pointer only, via .fx) ---- */
.fx .motif{position:relative}
.fx .motif svg{transform-style:preserve-3d;will-change:transform}
.glint{position:absolute;inset:6%;border-radius:50%;pointer-events:none;opacity:0;mix-blend-mode:screen;
background:radial-gradient(circle at var(--gx,50%) var(--gy,30%),rgba(255,255,255,.6),rgba(200,225,255,.25) 16%,rgba(240,200,255,.12) 30%,transparent 46%)}
.fx .mag{position:relative;will-change:translate}
.fx .visit,.fx .cta{overflow:hidden;transition:background .3s,box-shadow .35s,color .25s}
.fx .visit::after,.fx .cta::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;
background:radial-gradient(120px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.35),rgba(214,190,255,.12) 40%,transparent 70%)}
.fx .visit:hover::after,.fx .cta:hover::after{opacity:1}
.fx .visit:hover,.fx .cta:hover{transform:none;box-shadow:0 0 0 1px rgba(255,255,255,.35),0 10px 40px -8px rgba(190,170,255,.55),0 0 60px -10px rgba(255,200,160,.45)}
.fx .nav nav a:hover,.fx .logo:hover{text-shadow:0 0 18px rgba(200,220,255,.8);opacity:1}
.fx .mail:hover{text-shadow:0 0 22px rgba(255,201,160,.6)}
.fx .chrome.hot{animation-play-state:paused;background-position:var(--bp,50%) 0;transition:background-position .4s cubic-bezier(.2,.8,.2,1)}
.fx .chrome.hot{background-size:300% 100%}
.cursor-glow{position:fixed;left:0;top:0;width:420px;height:420px;margin:-210px 0 0 -210px;border-radius:50%;pointer-events:none;z-index:50;opacity:0;transition:opacity .4s;
background:radial-gradient(closest-side,rgba(190,215,255,.10),rgba(255,210,180,.05) 50%,transparent);mix-blend-mode:screen}
/* ---- Stage 5: progress line + sunrise finale ---- */
.progress{position:fixed;left:0;top:0;height:2px;width:100%;z-index:60;transform-origin:0 50%;transform:scaleX(0);pointer-events:none;
background:linear-gradient(90deg,#9ec9ff,#e8c8ff 35%,#fff 50%,#ffd6b0 70%,#a8d8ff);box-shadow:0 0 10px rgba(220,200,255,.7)}
.finale{position:relative;overflow:hidden;isolation:isolate;min-height:150svh;display:flex;flex-direction:column;
background:linear-gradient(180deg,var(--ink) 0%,#0e2457 30%,#1d3c80 50%,#2d4f97 62%,#3d5aa0 70%)}
.f-sky{position:absolute;inset:0;z-index:-1}
.f-dawn{position:absolute;inset:0;opacity:0;will-change:opacity;
background:linear-gradient(180deg,rgba(11,24,54,0) 0%,rgba(14,42,102,.6) 32%,#2d4f97 50%,#7c84b8 62%,#e7a98b 72%,#ffc9a0 78%,#ffe3c8 83%,#c8d4ea 100%)}
.f-sunwrap{position:absolute;left:22%;bottom:22%;width:0;height:0;will-change:transform;transform:translateY(30vh)}
.f-sunwrap .sun{animation:none}
.f-sunwrap .rays{opacity:.8}
.f-cl{position:absolute;left:-5%;right:-5%;background-repeat:repeat-x;background-size:auto 100%;will-change:transform}
.f-far{bottom:17%;height:clamp(150px,22vh,260px);background-image:url(assets/cloud-far.webp);opacity:.85;animation:fdrift 220s linear infinite}
.f-mid{bottom:8%;height:clamp(180px,26vh,320px);background-image:url(assets/cloud-mid.webp);animation:fdrift 150s linear infinite reverse}
.f-near{bottom:-2%;height:clamp(200px,30vh,380px);background-image:url(assets/cloud-near.webp);animation:fdrift 100s linear infinite}
.f-far::after,.f-mid::after,.f-near::after{content:"";position:absolute;left:0;right:0;top:100%;height:40vh;background:#abb8da}
@keyframes fdrift{to{background-position:-2400px 0}}
.finale .about{padding-top:clamp(120px,18vh,200px)}
.finale .contact{padding-bottom:0}
.finale .lede{color:#eef2ff;text-shadow:0 2px 30px rgba(5,15,45,.5)}
.foot{background:#abb8da;color:#1f2d58;border-top:0;position:relative;z-index:2}
.foot .legal{opacity:1;color:#1a2650}
@media (max-width:860px){.finale{min-height:140svh}.f-sunwrap{left:30%;bottom:24%}}
@media (prefers-reduced-motion:reduce){.f-dawn{opacity:1}.f-sunwrap{transform:none}.progress{display:none}}
/* ---- v2.1 performance pass ---- */
/* 1. No continuous repaint of text: static iridescent fill, glow via text-shadow, no filter */
.chrome{animation:none;filter:none;background-position:30% 0;text-shadow:0 6px 34px rgba(170,200,255,.28)}
.card h3,.pname{text-shadow:none}
/* 2. Streak: compositor clip-path reveal instead of stroke-dashoffset repaint */
.streak-wrap{position:absolute;inset:0;clip-path:inset(0 100% 0 0);will-change:clip-path}
.streak-wrap.go{animation:reveal 4.5s cubic-bezier(.6,0,.2,1) forwards}
.streak-wrap.fade{opacity:0;transition:opacity 1.2s}
@keyframes reveal{to{clip-path:inset(0 0 0 0)}}
.streak path{stroke-dasharray:none!important;stroke-dashoffset:0!important;animation:none!important}
/* 3. Smaller ray layers (was 150vmax x2 per sun) */
.rays{width:96vmax;height:96vmax;margin:-48vmax 0 0 -48vmax;
-webkit-mask:radial-gradient(circle,#000 0,rgba(0,0,0,.5) 22%,transparent 72%);mask:radial-gradient(circle,#000 0,rgba(0,0,0,.5) 22%,transparent 72%)}
/* 4. Cloud strips just wide enough (viewport + one tile) */
.cl{width:calc(100vw + var(--h)*var(--r) + 4px);transform:translate3d(0,0,0)}
@keyframes drift{to{transform:translate3d(calc(var(--h)*var(--r)*-1),0,0)}}
.cl-rise{will-change:auto}.cl-fill{height:100vh;margin-bottom:-100vh}
.hero.descending .cl-rise,.hero.descending .day,.hero.descending .fog{will-change:transform,opacity}
.r-near .cl-fill::after{display:none}
/* 5. Finale clouds: transform drift on inner track (was background-position = repaint every frame) */
.f-cl{animation:none!important;background:none!important;overflow:hidden;contain:paint}
.f-track{position:absolute;inset:0;width:calc(100vw + var(--tw) + 4px);background-repeat:repeat-x;background-size:auto 100%;animation:fdr var(--t) linear infinite}
.f-far{--tw:calc(clamp(150px,22vh,260px)*8);--t:220s}.f-far .f-track{background-image:url(assets/cloud-far.webp)}
.f-mid{--tw:calc(clamp(180px,26vh,320px)*6.316);--t:150s}.f-mid .f-track{background-image:url(assets/cloud-mid.webp);animation-direction:reverse}
.f-near{--tw:calc(clamp(200px,30vh,380px)*5.217);--t:100s}.f-near .f-track{background-image:url(assets/cloud-near.webp)}
.f-cl{overflow:visible;contain:none}
@keyframes fdr{to{transform:translate3d(calc(var(--tw)*-1),0,0)}}
/* 6. No backdrop-filter / blend modes / big filters */
.cta,.visit,.fx .visit,.fx .cta{backdrop-filter:none;-webkit-backdrop-filter:none}
.visit{background:rgba(255,255,255,.12)}
.glint,.cursor-glow{mix-blend-mode:normal}
.cursor-glow{background:radial-gradient(closest-side,rgba(190,215,255,.07),rgba(255,210,180,.03) 50%,transparent)}
.motif svg{filter:none}
.motif{position:relative}
.motif::before{content:"";position:absolute;left:12%;right:12%;bottom:-2%;height:18%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,8,30,.55),transparent);pointer-events:none}
.scene-glow i{filter:none}
.grid circle.canary{filter:none}
/* 7. Pause animations that are offscreen / not active */
.off-hero .sky *,.off-finale .f-sky *{animation-play-state:paused!important}
.scenes.pinned .scene:not(.live) *{animation-play-state:paused!important}
/* 8. Lite tier: drop the costliest ambient motion, keep the look */
.lite .rays,.lite .stars,.lite .sun,.lite .f-far .f-track,.lite .f-mid .f-track,.lite .far,.lite .mid{animation:none!important}
.lite .glint,.lite .cursor-glow{display:none}
/* streak reveal v2: two opposing compositor translates (outer clips, inner stays put) */
.streak-wrap{clip-path:none;will-change:transform;overflow:hidden;transform:translate3d(-100%,0,0)}
.streak-in{position:absolute;inset:0;will-change:transform;transform:translate3d(100%,0,0)}
.streak-wrap.go{animation:revO 4.5s cubic-bezier(.6,0,.2,1) forwards}
.streak-wrap.go .streak-in{animation:revI 4.5s cubic-bezier(.6,0,.2,1) forwards}
@keyframes revO{to{transform:translate3d(0,0,0)}}
@keyframes revI{to{transform:translate3d(0,0,0)}}
.progress{will-change:transform}
.scenes.pinned .motif,.scenes.pinned .pname,.scenes.pinned .scene-text>*{will-change:transform,opacity}
.fx .chrome.sweep{animation:sweep 1.1s cubic-bezier(.3,.7,.2,1) 1}
@keyframes sweep{from{background-position:30% 0}50%{background-position:100% 0}to{background-position:30% 0}}
/* ---- v2.2: Midchat scene (HTML motif: transform/opacity only) ---- */
.g4{background:radial-gradient(closest-side,rgba(80,230,210,.28),transparent)}
.chatwin{width:min(100%,460px);aspect-ratio:1/1;border-radius:28px;position:relative;display:flex;flex-direction:column;overflow:hidden;
background:linear-gradient(160deg,#173a63 0%,#0f2550 55%,#0b1c40 100%);box-shadow:0 0 0 1.5px rgba(160,255,235,.35),inset 0 1px 0 rgba(255,255,255,.18),0 0 80px -10px rgba(80,230,210,.35)}
.chatwin::before{content:"";position:absolute;inset:-1.5px;border-radius:inherit;padding:2px;pointer-events:none;
background:linear-gradient(135deg,#b8fff0,#d8d0ff 40%,#fff 60%,#9fe3ff);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.cw-bar{display:flex;gap:7px;padding:16px 18px 6px}.cw-bar i{width:10px;height:10px;border-radius:50%;background:rgba(220,235,255,.25)}
.cw-body{flex:1;display:flex;flex-direction:column;gap:9px;padding:10px 20px;justify-content:flex-end}
.bub{max-width:82%;padding:9px 14px;border-radius:16px;font-size:clamp(12px,1.05vw,15px);line-height:1.3;color:#e8f1ff;transform-origin:0 100%}
.bub.me{align-self:flex-end;background:rgba(255,255,255,.14);border-bottom-right-radius:5px;transform-origin:100% 100%}
.bub.pl{background:linear-gradient(120deg,rgba(80,230,210,.22),rgba(150,190,255,.14));border:1px solid rgba(160,255,235,.3);border-bottom-left-radius:5px}
.bub b{background:linear-gradient(100deg,#b8fff0,#e8c8ff 50%,#ffd6b0);-webkit-background-clip:text;background-clip:text;color:transparent;margin-right:6px}
.cw-input{margin:6px 16px 16px;height:38px;border-radius:12px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);display:flex;align-items:center;padding:0 14px}
.cw-input span{width:2px;height:16px;background:#b8fff0;animation:caret 1.1s steps(2) infinite}
@keyframes caret{50%{opacity:0}}
.scenes.pinned .chatwin,.scenes.pinned .bub{will-change:transform,opacity}
@media (max-width:860px){.chatwin{width:min(80vw,330px)}.bub{font-size:12px;padding:7px 11px}.cw-body{gap:6px;padding:8px 14px}}
.lite .cw-input span{animation:none}
/* ---- v2.3: Chrome compositing hygiene ---- */
.fx .cl-wrap,.fx .sunwrap{will-change:transform}
.cursor-glow{will-change:transform;contain:strict}

/* Garlic scan line: HTML overlay (composited transform) instead of animating inside the SVG */
.s-garlic .motif{position:relative}
.scanclip{position:absolute;left:50%;top:50%;width:min(100%,520px);aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none;overflow:hidden;
clip-path:polygon(50% 7.5%,85% 20%,85% 47.5%,80% 62%,70% 75%,50% 93%,30% 75%,20% 62%,15% 47.5%,15% 20%)}
.scanbar2{position:absolute;left:0;right:0;top:-15%;height:15%;background:linear-gradient(180deg,rgba(159,255,230,0),rgba(159,255,230,.45));will-change:transform;animation:scan2 4s ease-in-out infinite}
@keyframes scan2{to{transform:translateY(780%)}}
.lite .scanbar2{animation:none;opacity:0}
@media (max-width:860px){.scanclip{width:min(62vw,300px)}}
/* Rays: pre-baked image, no mask / conic gradient (cheap rotating texture in Chrome) */
.rays{background:url(assets/rays.webp) center/100% 100% no-repeat!important;-webkit-mask:none!important;mask:none!important}
/* Midchat window edge: double-background border instead of mask-composite */
.chatwin{border:2px solid transparent;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 0 80px -10px rgba(80,230,210,.35);
background:linear-gradient(160deg,#173a63 0%,#0f2550 55%,#0b1c40 100%) padding-box,linear-gradient(135deg,#b8fff0,#d8d0ff 40%,#fff 60%,#9fe3ff) border-box}
.chatwin::before{display:none}
/* Hidden overlays take no layer until used */
.day,.fog{visibility:hidden}