/* Wizu Labs — C1 "Portal" motion prototype (Claude). Base = readable static page; html.fx = cinematic mode. */
@font-face{font-family:Anton;src:url('assets/fonts/anton.woff2') format('woff2');font-display:swap}
@font-face{font-family:Manrope;src:url('assets/fonts/manrope.woff2') format('woff2');font-weight:200 800;font-display:swap}
:root{--ink:#272525;--cream:#f5f1e8;--orange:#ef7d55;--lime:#e9ff4f;--night:#0d0b10;--page:#0d0b10;--r:14vmin;--cx:50%;--cy:50%}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--night);color:var(--cream);font:400 17px/1.55 Manrope,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
body{background:var(--page);transition:background-color .8s ease;overflow-x:hidden}
a{color:inherit}
img,video{display:block;max-width:100%}
.skip{position:absolute;left:-999px;top:8px;z-index:50;background:var(--lime);color:var(--ink);padding:8px 14px}
.skip:focus{left:8px}

/* header */
.bar{position:fixed;inset:0 0 auto 0;z-index:30;display:flex;justify-content:space-between;align-items:center;padding:18px clamp(16px,3vw,40px);mix-blend-mode:difference;color:#fff}
.brand{font:800 32px/1 Manrope,sans-serif;letter-spacing:-2px;text-decoration:none}
.bar nav{display:flex;gap:clamp(12px,2.4vw,32px);font:700 12px/1 Manrope;letter-spacing:.14em;text-transform:uppercase}
.bar nav a{text-decoration:none;display:inline-block}
@media(max-width:700px){.bar nav a:not(:last-child){display:none}.brand{font-size:27px}}

/* fx canvas + cursor */
#fx{position:fixed;inset:0;width:100vw;height:100vh;z-index:8;pointer-events:none;display:none}
html.fx #fx{display:block}
.cursor{position:fixed;left:0;top:0;z-index:40;pointer-events:none;display:none;mix-blend-mode:difference}
.cursor span{display:block;width:34px;height:34px;margin:-17px 0 0 -17px;border:1.5px solid #fff;border-radius:50%;transition:width .25s,height .25s,margin .25s,background .25s}
.cursor.hot span{width:74px;height:74px;margin:-37px 0 0 -37px;background:#fff}
@media(hover:hover) and (pointer:fine){html.fx .cursor{display:block}html.fx,html.fx a,html.fx button{cursor:none}}

/* ---------- 1. intro ---------- */
.intro{position:relative;background:var(--night)}
.intro-stage{position:relative;min-height:100vh;display:grid;place-items:center;overflow:hidden;padding:120px 20px 80px;text-align:center}
.portal-film{position:absolute;inset:0;z-index:0}
.portal-film .film{width:100%;height:100%;object-fit:cover;filter:saturate(1.15) contrast(1.05)}
.film-shade{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 55%,transparent 30%,rgba(13,11,16,.55) 100%)}
.ring{display:none}
.intro-kicker{position:relative;z-index:3;font:700 12px/1 Manrope;letter-spacing:.22em;text-transform:uppercase;color:var(--lime);align-self:end}
.intro-title{position:relative;z-index:3;font:400 clamp(58px,12.5vw,240px)/.84 Anton,Impact,sans-serif;text-transform:uppercase;letter-spacing:-.01em;color:var(--cream);text-shadow:0 0 60px rgba(0,0,0,.35)}
.intro-sub{position:relative;z-index:3;max-width:34ch;margin:22px auto 0;font-weight:500;color:#fff;opacity:.9;align-self:start}
.scroll-hint,.skip-intro{display:none}

html.fx .intro{height:270vh}
html.fx .intro-stage{position:sticky;top:0;height:100vh;padding:0;display:block}
html.fx .portal-film{clip-path:circle(var(--r) at 50% 50%);will-change:clip-path}
html.fx .ring{display:block;position:absolute;left:50%;top:50%;width:calc(var(--r) * 2 + 18px);height:calc(var(--r) * 2 + 18px);transform:translate(-50%,-50%) rotate(-90deg);z-index:2;overflow:visible;pointer-events:none}
.ring circle{fill:none;stroke:var(--lime);stroke-width:1.2;vector-effect:non-scaling-stroke;stroke-dasharray:604;stroke-dashoffset:604;filter:drop-shadow(0 0 8px var(--lime)) drop-shadow(0 0 22px rgba(233,255,79,.6));transition:stroke-dashoffset 2.2s cubic-bezier(.7,0,.2,1) .2s}
body.ready .ring circle{stroke-dashoffset:0}
html.fx .intro-kicker{position:absolute;left:0;right:0;top:calc(50% - var(--r) - 46px);text-align:center;opacity:var(--uiA,1)}
html.fx .intro-title{position:absolute;left:50%;top:50%;width:min(96vw,1500px);transform:translate(-50%,-50%) scale(var(--ts,1));opacity:var(--ta,1);mix-blend-mode:difference;color:#fff;text-shadow:none;pointer-events:none}
html.fx .intro-sub{position:absolute;left:0;right:0;bottom:12vh;margin:auto;opacity:var(--uiA,1)}
html.fx .scroll-hint{display:flex;position:absolute;left:50%;bottom:28px;transform:translateX(-50%);z-index:3;flex-direction:column;align-items:center;gap:10px;font:700 11px/1 Manrope;letter-spacing:.22em;text-transform:uppercase;opacity:var(--uiA,1)}
.scroll-hint i{width:1px;height:46px;background:linear-gradient(var(--lime),transparent);animation:drip 1.6s ease-in-out infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
html.fx .skip-intro{display:block;position:absolute;left:clamp(16px,3vw,40px);bottom:28px;z-index:4;background:none;border:1px solid rgba(255,255,255,.4);color:#fff;font:700 11px/1 Manrope;letter-spacing:.18em;text-transform:uppercase;padding:12px 16px;border-radius:99px;opacity:var(--uiA,1)}

/* split letters */
.ch{display:inline-block;will-change:transform}
html.fx body.is-loading .ch{opacity:0;transform:translateY(.6em) rotate(8deg) scale(.9);filter:blur(10px)}
html.fx .ch{transition:opacity .9s ease,transform 1.1s cubic-bezier(.16,1,.3,1),filter .9s ease;transition-delay:calc(var(--i) * 34ms + 300ms)}

/* ---------- 2. marquee ---------- */
.marquee{position:relative;z-index:3;background:var(--lime);color:var(--ink);overflow:hidden;padding:2.2vw 0;transform:skewY(-2deg);margin:-3vw 0 4vw}
.track{display:flex;width:max-content;font:400 clamp(44px,8vw,140px)/1 Anton,sans-serif;text-transform:uppercase;white-space:nowrap;will-change:transform}
.track span{padding-right:.4em}
.track.reverse{color:transparent;-webkit-text-stroke:1.5px var(--ink)}

/* ---------- 3. worlds ---------- */
.worlds{position:relative;z-index:2}
.worlds-stage{position:relative}
.world{position:relative;min-height:100vh;display:grid;grid-template-columns:minmax(0,46fr) minmax(0,54fr);background:var(--c,#222);color:var(--k,#fff)}
.world-bg{order:2;background:var(--img) center/cover no-repeat;min-height:60vh}
.world-copy{order:1;display:flex;flex-direction:column;justify-content:center;gap:18px;padding:120px clamp(20px,5vw,80px) 80px}
.world-kicker{font:700 12px/1.3 Manrope;letter-spacing:.2em;text-transform:uppercase;opacity:.75}
.world-title{font:400 clamp(64px,9.6vw,200px)/.84 Anton,sans-serif;text-transform:uppercase;letter-spacing:-.01em;color:var(--k);text-shadow:0 .04em 0 color-mix(in srgb,var(--k) 18%,transparent)}
.world-tag{font:500 clamp(18px,1.6vw,24px)/1.35 Manrope;max-width:30ch}
.world-meta{font-size:14px;opacity:.85;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.pill{display:inline-block;padding:6px 11px;border:1.5px solid currentColor;border-radius:99px;font:800 11px/1 Manrope;letter-spacing:.12em;text-transform:uppercase}
.cta{align-self:flex-start;display:inline-flex;gap:10px;align-items:center;padding:16px 24px;background:var(--lime);color:var(--ink);font:800 14px/1 Manrope;letter-spacing:.02em;text-decoration:none;border:2px solid var(--ink);box-shadow:5px 5px 0 var(--ink);transition:box-shadow .2s,transform .2s}
.cta:hover{box-shadow:2px 2px 0 var(--ink)}
.world-rail{display:none}
.glitch{position:relative}
@media(max-width:800px){.world{grid-template-columns:1fr}.world-bg{order:1;min-height:52vh}.world-copy{order:2;padding:36px 20px 60px}}

html.fx .worlds{height:calc(100vh * 8)}
html.fx .worlds-stage{position:sticky;top:0;height:100vh;overflow:hidden}
html.fx .world{position:absolute;inset:0;min-height:0;clip-path:circle(var(--p,0%) at var(--wx,50%) var(--wy,50%));will-change:clip-path}
html.fx .world:first-child{clip-path:none}
html.fx .world-bg{position:relative;overflow:hidden;min-height:0;background:none}
html.fx .world-bg::before{content:"";position:absolute;inset:-6%;background:var(--img) center/cover no-repeat;transform:translate3d(var(--px,0),var(--py,0),0) scale(var(--zoom,1.12));transition:transform .25s linear}
html.fx .world-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--c) 0%,transparent 22%),radial-gradient(circle at var(--lx,60%) var(--ly,40%),rgba(255,255,255,.18),transparent 45%);mix-blend-mode:normal}
html.fx .world-copy>*{transform:translateY(calc(var(--copy,0) * 60px));opacity:calc(1 - var(--copy,0) * 1.4)}
html.fx .world-rail{display:flex;position:absolute;left:clamp(16px,3vw,40px);bottom:28px;z-index:20;align-items:baseline;gap:6px;font:400 32px/1 Anton;color:var(--railk,#fff);mix-blend-mode:difference}
.world-rail span{font:700 12px/1 Manrope;letter-spacing:.15em}
.rail-bar{width:min(28vw,260px);height:2px;background:rgba(255,255,255,.25);margin-left:14px;align-self:center}
.rail-bar i{display:block;height:100%;width:calc(var(--wp,0) * 100%);background:#fff}
@media(max-width:800px){html.fx .world-bg::after{background:linear-gradient(0deg,var(--c) 0%,transparent 26%)}html.fx .world-copy{padding:24px 20px 90px;justify-content:flex-start}html.fx .world{grid-template-rows:52% 48%}}

/* neon glitch */
html.fx .world[data-fx="rain"] .world-title{animation:flick 5s infinite steps(1)}
@keyframes flick{0%,100%{opacity:1}42%{opacity:1}43%{opacity:.35}44%{opacity:1}71%{opacity:1}72%{opacity:.6;transform:translateX(3px)}73%{opacity:1;transform:none}}
html.fx .world[data-fx="rain"] .world-copy{text-shadow:0 0 18px rgba(0,240,255,.5)}

/* ---------- 4. studio ---------- */
.studio{position:relative;z-index:3;background:#c4b8f0;color:var(--ink);padding:16vh clamp(20px,5vw,80px) 14vh}
.eyebrow{font:700 12px/1 Manrope;letter-spacing:.22em;text-transform:uppercase;margin-bottom:28px}
.giant{font:400 clamp(56px,10vw,190px)/.86 Anton,sans-serif;text-transform:uppercase;letter-spacing:-.005em}
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.04em}
.w>i{display:inline-block;font-style:normal}
html.fx .w>i{transform:translateY(105%) rotate(4deg);transition:transform 1s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i) * 60ms)}
html.fx .in .w>i{transform:none}
.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:40px;margin-top:9vh;max-width:1100px}
.pillars b{font:400 28px/1 Anton}
.pillars h3{font:400 clamp(28px,3vw,44px)/1 Anton;text-transform:uppercase;margin:10px 0}
.platforms{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin-top:8vh}
.platforms li{padding:10px 16px;border:2px solid var(--ink);border-radius:99px;font:800 13px/1 Manrope;background:var(--cream)}

/* ---------- 5. contact ---------- */
.contact{position:relative;z-index:3;background:var(--night);color:var(--cream);padding:18vh clamp(20px,5vw,80px);display:grid;gap:28px}
.contact-title{color:var(--cream)}
.contact p{max-width:44ch;opacity:.8}
.contact .cta{justify-self:start}
.foot{position:relative;z-index:3;background:var(--lime);color:var(--ink);padding:40px clamp(20px,5vw,80px);display:grid;gap:12px;font-size:13px}
.foot .brand{font-size:28px}

/* controls */
.motion-toggle{position:fixed;right:16px;bottom:16px;z-index:35;font:800 11px/1 Manrope;letter-spacing:.14em;text-transform:uppercase;padding:10px 14px;border-radius:99px;border:1.5px solid #fff;background:rgba(0,0,0,.45);color:#fff;backdrop-filter:blur(6px)}
.magnet{transition:transform .35s cubic-bezier(.2,.8,.2,1)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* mobile refinements */
@media(max-width:800px){
  html.fx .world-rail{top:70px;bottom:auto;left:auto;right:16px;font-size:24px}
  .rail-bar{display:none}
  html.fx .scroll-hint span{display:none}
  html.fx .intro-sub{bottom:16vh;padding:0 24px}
  html.fx .skip-intro{bottom:20px;right:auto;left:16px}
  
}

/* world titles: solid, readable, letter-by-letter entrance when the world opens */
html.fx .world .ch{display:inline-block;transform:translateY(.55em) rotate(6deg);opacity:0;filter:blur(6px);transition:transform .9s cubic-bezier(.16,1,.3,1),opacity .6s ease,filter .6s ease;transition-delay:calc(var(--i) * 32ms)}
html.fx .world.on .ch{transform:none;opacity:1;filter:none}
html.fx .world[data-fx="rain"] .world-title{text-shadow:0 0 18px #5ff2ff,0 0 42px rgba(255,79,216,.55)}
html.fx .world[data-fx="firefly"] .world-title{text-shadow:0 0 22px rgba(255,211,107,.55)}
html.fx .portal-film .film{transform:scale(1.04)}

.wd{display:inline-block;white-space:nowrap}