:root {
  --ink: #050505;
  --paper: #ece9e2;
}

* { box-sizing: border-box; }
html, body { width:100%; height:100%; margin:0; background:var(--ink); }
body { overflow:hidden; color:var(--paper); font-family: Arial, Helvetica, sans-serif; }

.experience {
  position:relative;
  width:100vw;
  height:100svh;
  background:#030303;
  overflow:hidden;
  cursor:none;
  isolation:isolate;
}

.hero-video {
  position:absolute;
  inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:0;
  filter:saturate(.72) contrast(1.08) brightness(.54);
  transition: opacity 1.8s ease;
  z-index:-7;
}
.hero-video.is-live { opacity:.72; }

.ambient {
  position:absolute;
  inset:-10%;
  z-index:-8;
  will-change: transform, opacity, filter;
  transition: opacity 2.4s ease, filter 2.4s ease, background 2.4s ease;
}

.ambient-a {
  background:
    radial-gradient(60% 44% at 74% 38%, rgba(67,81,95,.42), transparent 65%),
    radial-gradient(38% 26% at 23% 68%, rgba(80,64,45,.26), transparent 72%),
    linear-gradient(120deg, #030303 18%, #0b0e12 51%, #030303 78%);
  animation: driftA 15s ease-in-out infinite alternate;
}
.ambient-b {
  background:
    radial-gradient(46% 30% at 15% 18%, rgba(93,103,111,.18), transparent 72%),
    radial-gradient(35% 18% at 82% 74%, rgba(111,82,48,.18), transparent 70%);
  mix-blend-mode:screen;
  filter:blur(8px);
  animation: driftB 22s ease-in-out infinite alternate;
}
.ambient-c {
  background: linear-gradient(180deg, transparent 0 58%, rgba(0,0,0,.35) 76%, rgba(0,0,0,.8) 100%);
  z-index:-5;
}

.experience.scene-2 .ambient-a {
  background:
    radial-gradient(58% 36% at 28% 54%, rgba(38,63,54,.32), transparent 65%),
    radial-gradient(28% 30% at 79% 21%, rgba(125,112,91,.18), transparent 72%),
    linear-gradient(110deg,#030303 14%,#08100c 52%,#030303 84%);
}
.experience.scene-3 .ambient-a {
  background:
    radial-gradient(52% 38% at 74% 54%, rgba(109,84,58,.28), transparent 68%),
    radial-gradient(32% 18% at 31% 30%, rgba(58,69,81,.24), transparent 72%),
    linear-gradient(125deg,#020202 19%,#0d0b09 50%,#020202 82%);
}
.experience.scene-4 .ambient-a {
  background:
    radial-gradient(48% 30% at 24% 28%, rgba(60,74,89,.32), transparent 68%),
    radial-gradient(30% 24% at 82% 72%, rgba(84,94,103,.17), transparent 72%),
    linear-gradient(125deg,#020202 17%,#070b10 53%,#020202 83%);
}

.grain {
  position:absolute;
  inset:-100%;
  z-index:7;
  opacity:.07;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.75'/%3E%3C/svg%3E");
  animation: grain .24s steps(2) infinite;
}

.vignette {
  position:absolute;
  inset:0;
  z-index:5;
  pointer-events:none;
  background:
    radial-gradient(circle at center, transparent 30%, rgba(0,0,0,.23) 68%, rgba(0,0,0,.76) 100%),
    linear-gradient(180deg, rgba(0,0,0,.12), transparent 24%, transparent 75%, rgba(0,0,0,.35));
}

.center-stage {
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  text-align:center;
  z-index:10;
  pointer-events:none;
}
.brand {
  position:absolute;
  margin:0;
  font-weight:400;
  font-size:clamp(18px,1.6vw,28px);
  letter-spacing:.58em;
  transform:translateX(.29em);
  opacity:0;
  filter:blur(5px);
  animation: brandReveal 8.4s cubic-bezier(.22,.61,.36,1) .95s forwards;
}
.whisper {
  position:absolute;
  margin:0;
  bottom:max(28px, env(safe-area-inset-bottom));
  font-size:10px;
  letter-spacing:.22em;
  text-transform:lowercase;
  color:rgba(236,233,226,.58);
  opacity:0;
  opacity:.65;
}




.chapter, .mark, .edge-copy {
  position:absolute;
  z-index:11;
  font-size:9px;
  letter-spacing:.28em;
  color:rgba(236,233,226,.44);
  text-transform:uppercase;
  user-select:none;
}
.chapter { left:24px; bottom:22px; }
.mark { right:24px; bottom:22px; }
.edge-copy { right:24px; top:22px; opacity:.6; text-transform:lowercase; letter-spacing:.18em; }

.intro-shutter {
  position:absolute;
  inset:0;
  background:#000;
  z-index:50;
  animation: shutter 1.9s cubic-bezier(.7,0,.2,1) forwards;
}

.cursor-dot,.cursor-ring {
  position:fixed;
  left:0; top:0;
  border-radius:50%;
  pointer-events:none;
  transform:translate(-50%,-50%);
  z-index:100;
  opacity:0;
}
.cursor-dot { width:3px; height:3px; background:rgba(255,255,255,.8); }
.cursor-ring { width:26px; height:26px; border:1px solid rgba(255,255,255,.26); }
.experience.has-cursor .cursor-dot,.experience.has-cursor .cursor-ring{ opacity:1; }

@keyframes shutter { 0%,35% {opacity:1;} 100%{opacity:0; visibility:hidden;} }
@keyframes brandReveal {
  0%{opacity:0; filter:blur(6px); letter-spacing:.9em;}
  18%{opacity:.93; filter:blur(0); letter-spacing:.58em;}
  60%{opacity:.93;}
  100%{opacity:.93; filter:blur(0);}
}
@keyframes whisperReveal {
  0%,12%{opacity:0; transform:translateY(6px)}
  24%,70%{opacity:.9; transform:translateY(0)}
  100%{opacity:0; transform:translateY(-4px)}
}

@keyframes driftA { from{transform:scale(1.06) translate3d(-1.5%,0,0)} to{transform:scale(1.12) translate3d(1.5%,-1.2%,0)} }
@keyframes driftB { from{transform:scale(1.05) translate3d(0,0,0)} to{transform:scale(1.1) translate3d(-2%,1.5%,0)} }
@keyframes grain { 0%{transform:translate3d(0,0,0)} 25%{transform:translate3d(2%,-1%,0)} 50%{transform:translate3d(-1%,2%,0)} 75%{transform:translate3d(1%,1%,0)} 100%{transform:translate3d(-2%,-2%,0)} }

@media (max-width: 760px) {
  .experience { cursor:auto; }
  .cursor-dot,.cursor-ring { display:none; }
  .brand { font-size:19px; letter-spacing:.43em; transform:translateX(.215em); }
  .whisper { bottom:max(24px, env(safe-area-inset-bottom)); font-size:9px; }
  .chapter { left:16px; bottom:16px; }
  .mark { right:16px; bottom:16px; }
  .edge-copy { right:16px; top:16px; }
  

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; }
  .intro-shutter{display:none}
  .brand{opacity:.9;filter:none}
}

@media (hover:none), (pointer:coarse) { .experience { cursor:auto; } .cursor-dot,.cursor-ring { display:none; } }
@media (prefers-reduced-motion:reduce) {
  .ambient,.grain { animation:none!important; transition:none; }
  .brand { animation:none!important; opacity:.93; filter:none; }
  .whisper { animation:none!important; opacity:.85; }