*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { overflow-x: hidden; font-family: 'Space Mono', monospace; }
#root { position: relative; z-index: 1; }
::selection { background: var(--acc, #c9923a); color: #000; }
::-webkit-scrollbar { width: 2px; }
::-webkit-scrollbar-track { background: var(--bg, #0b1410); }
::-webkit-scrollbar-thumb { background: var(--acc, #c9923a); }

/* ── Ken Burns ─────────────────────────────────────────────────────────── */
@keyframes kb0 { 0%{transform:scale(1)    translate(0%,0%)}    100%{transform:scale(1.12) translate(-2%,-1%)} }
@keyframes kb1 { 0%{transform:scale(1.1)  translate(1.5%,0%)}  100%{transform:scale(1)    translate(-1%,2%)}  }
@keyframes kb2 { 0%{transform:scale(1)    translate(2%,1%)}    100%{transform:scale(1.14) translate(-1%,-2%)} }
@keyframes kb3 { 0%{transform:scale(1.08) translate(-1%,2%)}   100%{transform:scale(1)    translate(2%,-1%)}  }
@keyframes kb4 { 0%{transform:scale(1)    translate(0%,2%)}    100%{transform:scale(1.1)  translate(-2%,-2%)} }
@keyframes kb5 { 0%{transform:scale(1.06) translate(-2%,-1%)}  100%{transform:scale(1)    translate(1%,2%)}   }

/* ── Glitch ────────────────────────────────────────────────────────────── */
.gl { position:relative; display:inline-block; }
.gl::before,.gl::after { content:attr(data-t); position:absolute; top:0; left:0; width:100%; height:100%; font:inherit; pointer-events:none; }
.gl::before { color:var(--acc,#c9923a); animation:gl1 7s infinite; clip-path:inset(0 0 100% 0); }
.gl::after  { color:var(--acc2,#7ecfa0); animation:gl2 7s infinite; clip-path:inset(0 0 100% 0); }
@keyframes gl1 {
  0%,89%,100%{clip-path:inset(0 0 100% 0);transform:translate(0)}
  90%{clip-path:inset(20% 0 42% 0);transform:translate(-7px,2px)}
  91%{clip-path:inset(58% 0 14% 0);transform:translate(7px,-2px)}
  92%{clip-path:inset(0 0 100% 0);transform:translate(0)}
}
@keyframes gl2 {
  0%,84%,100%{clip-path:inset(0 0 100% 0);transform:translate(0)}
  85%{clip-path:inset(44% 0 28% 0);transform:translate(7px,-2px)}
  86%{clip-path:inset(0 0 100% 0);transform:translate(0)}
}

/* ── Scroll reveal ─────────────────────────────────────────────────────── */
.rv { opacity:0; transform:translateY(40px); transition:opacity .9s ease,transform .9s cubic-bezier(.22,1,.36,1); }
.rv.in { opacity:1; transform:translateY(0); }

/* ── Shared hover motion utilities ─────────────────────────────────────── */
.zoom-surface { overflow:hidden; }
.zoom-media {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform:scale(var(--zoom-base,1));
  transition:transform .75s cubic-bezier(.22,1,.36,1), filter .28s ease;
  will-change:transform;
}
.zoom-surface:hover .zoom-media,
.zoom-surface:focus-within .zoom-media {
  transform:scale(var(--zoom-hover,1.05));
}

/* ── World hero parallax ───────────────────────────────────────────────── */
.world-hero {
  --hero-parallax: 0px;
}
.world-hero-bg {
  transform:translate3d(0,var(--hero-parallax),0) scale(1.045);
  will-change:transform;
}

/* ── H-scroll (kept for reference) ────────────────────────────────────── */
.hscroll { display:flex; overflow-x:auto; gap:14px; padding:0 32px 20px; scroll-snap-type:x mandatory; scrollbar-width:thin; scrollbar-color:var(--acc,#c9923a) transparent; }
.hscroll::-webkit-scrollbar { height:2px; }
.hscroll::-webkit-scrollbar-thumb { background:var(--acc,#c9923a); }

/* ── Marquee / Spin ────────────────────────────────────────────────────── */
@keyframes mq    { from{transform:translateX(0)}   to{transform:translateX(-50%)} }
@keyframes spin  { from{transform:rotate(0deg)}    to{transform:rotate(360deg)}   }
@keyframes spinr { from{transform:rotate(0deg)}    to{transform:rotate(-360deg)}  }

/* ── Loading / curtain ─────────────────────────────────────────────────── */
@keyframes lBarFill  { from{width:0} to{width:100%} }
@keyframes lCharIn   { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
@keyframes scrollPulse { 0%,100%{opacity:.45} 50%{opacity:.15} }
@keyframes filmFlash { 0%,100%{opacity:0} 50%{opacity:1} }

/* ── World hero (full-bleed video/image) ───────────────────────────────── */
.world-hero-full {
  position:relative;
  min-height:100vh;
  width:100%;
  overflow:hidden;
}
.world-hero-full > .world-hero-bg {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover;
  transform:translate3d(0,var(--hero-parallax,0px),0) scale(1.05);
  will-change:transform;
}
.world-hero-full > .world-hero-vignette {
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.15) 40%, rgba(0,0,0,0.78) 100%);
  pointer-events:none;
}

/* ── World card hover video ────────────────────────────────────────────── */
.world-state-card video {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity .4s ease;
  pointer-events:none;
}
.world-state-card.is-hover video { opacity:1; }

/* ── Works vertical stack ─────────────────────────────────────────────── */
.work-v { position:relative; height:clamp(260px,55vh,600px); overflow:hidden; cursor:pointer; border-bottom:1px solid rgba(255,255,255,0.06); }
.work-v-img { position:absolute; inset:-10%; width:120%; height:120%; object-fit:cover; transition:transform 1.2s cubic-bezier(.22,1,.36,1); }
.work-v:hover .work-v-img { transform:scale(1.05); }

/* ── Category tiles ───────────────────────────────────────────────────── */
.cat-tile { position:relative; height:clamp(130px,20vh,220px); overflow:hidden; cursor:pointer; }
.cat-tile-img { position:absolute; inset:-10%; width:120%; height:120%; object-fit:cover; transition:transform 1.2s cubic-bezier(.22,1,.36,1); filter:brightness(0.32) saturate(0.65); }
.cat-tile:hover .cat-tile-img { transform:scale(1.05); }

/* ── Project overlay ──────────────────────────────────────────────────── */
.proj-ov-panel { transition:transform .5s cubic-bezier(.16,1,.3,1); }

/* ── Custom cursor ────────────────────────────────────────────────────── */
.has-cursor, .has-cursor * { cursor:none !important; }
.cur-ring { position:fixed; border-radius:50%; pointer-events:none; z-index:9999; transition:width .2s,height .2s,border-color .2s,background .2s; will-change:transform; }
.cur-dot  { position:fixed; border-radius:50%; pointer-events:none; z-index:9999; will-change:transform; }

/* ── Grain overlay ────────────────────────────────────────────────────── */
.grain-ov { position:fixed; inset:0; pointer-events:none; z-index:9998; }
.grain-ov svg { position:absolute; width:100%; height:100%; }

/* ── Tweaks panel ─────────────────────────────────────────────────────── */
.tp { position:fixed; bottom:24px; right:24px; z-index:9999; border-radius:4px; padding:20px; width:264px; font-family:'Space Mono',monospace; font-size:11px; }
.tp label { display:block; font-size:9px; letter-spacing:.12em; text-transform:uppercase; margin-bottom:5px; margin-top:12px; }
.tp input[type=text] { width:100%; padding:6px 8px; font-family:'Space Mono',monospace; font-size:11px; border-radius:2px; }
.tp .chips { display:flex; gap:6px; flex-wrap:wrap; }
.tp .chip { padding:5px 10px; border-radius:2px; cursor:pointer; font-family:'Space Mono',monospace; font-size:9px; letter-spacing:.1em; transition:all .2s; }

/* ── Video work card overlay ──────────────────────────────────────────────── */
.work-v video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* ── Reel section ─────────────────────────────────────────────────────────── */
.reel-video-section { position:relative; width:100%; height:100vh; overflow:hidden; }
.reel-video-section video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* ── World selector cards ────────────────────────────────────────────────── */
.world-state-card:focus-visible {
  outline: 2px solid var(--acc, #c9923a);
  outline-offset: 2px;
}

/* ── Route transitions (home→world, world→world) ───────────────────────── */
.route-transition-shell {
  position: relative;
  opacity: 1;
}

.route-transition-shell::before,
.route-transition-shell::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
}

/* subtle tint shift */
.route-transition-shell::before {
  background:
    radial-gradient(circle at 20% 18%, color-mix(in srgb, var(--acc, #c9923a) 18%, transparent), transparent 58%),
    radial-gradient(circle at 78% 74%, color-mix(in srgb, var(--acc2, #7ecfa0) 12%, transparent), transparent 62%),
    linear-gradient(145deg, rgba(7, 10, 16, 0.08), rgba(7, 10, 16, 0.02));
  mix-blend-mode: screen;
}

/* lightweight pseudo-particle overlay */
.route-transition-shell::after {
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.18) 0 1px, transparent 1.3px),
    radial-gradient(circle, rgba(255,255,255,0.12) 0 1px, transparent 1.3px);
  background-size: 110px 110px, 160px 160px;
  background-position: 0 0, 34px 52px;
}

.route-transition-shell.route-exit {
  opacity: 0;
  transform: translateY(6px) scale(0.997);
  filter: saturate(0.94);
  transition: opacity 250ms ease, transform 250ms ease, filter 250ms ease;
}

.route-transition-shell.route-exit::before,
.route-transition-shell.route-enter::before {
  opacity: 1;
  transition: opacity 250ms ease;
}

.route-transition-shell.route-exit::after,
.route-transition-shell.route-enter::after {
  opacity: 0.45;
  animation: routeParticlesDrift 500ms linear;
  transition: opacity 250ms ease;
}

.route-transition-shell.route-enter {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: saturate(1);
  transition: opacity 250ms ease, transform 250ms ease, filter 250ms ease;
}

@keyframes routeParticlesDrift {
  from { background-position: 0 0, 34px 52px; }
  to   { background-position: 32px -40px, 70px 0; }
}