*{margin:0;padding:0;box-sizing:border-box;}
 
/* CURSOR */
#cur{position:fixed;width:8px;height:8px;background:var(--amber);border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);mix-blend-mode:difference;}
#ring{position:fixed;width:36px;height:36px;border:1px solid rgba(45,226,230,0.4);border-radius:50%;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);}
 
/* THREE CANVAS */
#three-canvas{position:absolute;inset:0;z-index:0;width:100%;height:100%;}
 
/* GRAIN */
.grain{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0.3;mix-blend-mode:overlay;
background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");}
 
/* VIGNETTE */
.vignette{position:absolute;inset:0;z-index:3;pointer-events:none;
background:radial-gradient(ellipse at center, transparent 40%, rgba(8,8,8,0.85) 100%);}
 
/* HERO LAYOUT */
#hero{position:relative;height:100vh;z-index:4;overflow:hidden;}
 
/* TOP BAR */
.top-bar{
  position:absolute;top:0;left:0;right:0;
  display:flex;justify-content:space-between;align-items:center;
  padding:32px 44px;
}
.logo{
  font-family:var(--font-display);font-size:20px;letter-spacing:0.14em;color:var(--offwhite);
  opacity:0;transform:translateY(-16px);
  transition:all 0.7s 0.3s cubic-bezier(.16,1,.3,1);
}
.logo.in{opacity:1;transform:translateY(0);}
.nav-links{
  display:flex;gap:36px;list-style:none;
  opacity:0;transform:translateY(-16px);
  transition:all 0.7s 0.4s cubic-bezier(.16,1,.3,1);
}
.nav-links.in{opacity:1;transform:translateY(0);}
.nav-links a{font-family:var(--font-mono);font-size:10px;letter-spacing:0.22em;text-transform:uppercase;color:var(--offwhite);text-decoration:none;opacity:0.75;transition:opacity 0.3s,color 0.3s;}
.nav-links a:hover{opacity:1;color:var(--amber);}
.avail{
  display:flex;align-items:center;gap:8px;
  opacity:0;transform:translateY(-16px);
  transition:all 0.7s 0.5s cubic-bezier(.16,1,.3,1);
}
.avail.in{opacity:1;transform:translateY(0);}
.avdot{width:5px;height:5px;border-radius:50%;background:var(--amber);animation:glow 2.5s infinite;}
@keyframes glow{0%,100%{box-shadow:0 0 0 0 rgba(45,226,230,.6);}50%{box-shadow:0 0 0 5px rgba(45,226,230,0);}}
.avtext{font-family:var(--font-mono);font-size:9px;letter-spacing:0.26em;text-transform:uppercase;color:var(--amber);}
 
/* HEADLINE — dead center, massive */
.headline-wrap{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  text-align:center;
  pointer-events:none;
  width:100%;
  padding:0 40px;
}
.hl-row{display:block;overflow:hidden;line-height:0.88;}
.hl-line{
  display:block;
  font-family:var(--font-display);
  letter-spacing:-0.01em;
  transform:translateY(110%);
  transition:transform 0.95s cubic-bezier(.16,1,.3,1);
}
.hl-line.in{transform:translateY(0);}
.l1{font-size:clamp(80px,15vw,200px);color:var(--offwhite);}
.l2{
  font-size:clamp(64px,12vw,165px);
  font-family:var(--font-serif);font-style:italic;font-weight:300;
  color:var(--amber);
  margin-top:-0.05em;
}
.l3{
  font-size:clamp(80px,15vw,200px);
  -webkit-text-stroke:1.5px rgba(240,235,226,0.7);
  color:transparent;
  margin-top:-0.05em;
}
 
/* Subtitle under headline */
.subtitle{
  margin-top:28px;
  font-family:var(--font-mono);font-size:10px;letter-spacing:0.32em;
  text-transform:uppercase;color:var(--offwhite);opacity:0;
  transition:opacity 0.8s 1s;
  display:flex;align-items:center;justify-content:center;gap:16px;
}
.subtitle.in{opacity:0.8;}
.sub-line{display:block;width:30px;height:1px;background:var(--amber);}
 
/* BOTTOM BAR */
.bottom-bar{
  position:absolute;bottom:0;left:0;right:0;
  display:grid;grid-template-columns:1fr auto 1fr;
  align-items:end;
  padding:28px 44px 32px;
  border-top:1px solid rgba(240,235,226,0.05);
}
.bl{
  opacity:0;transition:opacity 0.7s 1.1s;
}
.bl.in{opacity:1;}
.role{font-family:var(--font-mono);font-size:9px;letter-spacing:0.28em;text-transform:uppercase;color:var(--amber);line-height:2;}
.since{font-family:var(--font-mono);font-size:8px;letter-spacing:0.2em;text-transform:uppercase;color:var(--offwhite);opacity:0.78;margin-top:2px;}
 
/* Center scroll */
.bc{display:flex;flex-direction:column;align-items:center;gap:8px;justify-self:center;opacity:0;transition:opacity 0.7s 1.4s;}
.bc.in{opacity:1;}
.sline{width:1px;height:32px;background:linear-gradient(to bottom,transparent,var(--amber));position:relative;overflow:hidden;}
.sline::after{content:'';position:absolute;top:-100%;left:0;width:1px;height:100%;background:var(--offwhite);animation:drip 2.2s ease-in infinite 1s;}
@keyframes drip{0%{top:-100%;}100%{top:200%;}}
.slabel{font-family:var(--font-mono);font-size:8px;letter-spacing:0.3em;text-transform:uppercase;color:var(--offwhite);opacity:0.68;}
 
/* CTA */
.br{display:flex;justify-content:flex-end;align-items:flex-end;pointer-events:all;opacity:0;transition:opacity 0.7s 1.2s;}
.br.in{opacity:1;}
.cta{font-family:var(--font-mono);font-size:10px;letter-spacing:0.22em;text-transform:uppercase;color:var(--offwhite);text-decoration:none;display:flex;align-items:center;gap:10px;position:relative;}
.cta::after{content:'';position:absolute;bottom:-3px;left:0;width:0%;height:1px;background:var(--amber);transition:width 0.5s cubic-bezier(.77,0,.18,1);}
.cta:hover::after{width:100%;}
.cta:hover{color:var(--amber);}
.arr{font-size:14px;transition:transform 0.4s cubic-bezier(.16,1,.3,1);}
.cta:hover .arr{transform:translate(4px,-4px);}
 
/* MARQUEE */
.mstrip{position:absolute;left:0;right:0;bottom:80px;z-index:5;overflow:hidden;border-top:1px solid rgba(240,235,226,0.05);border-bottom:1px solid rgba(240,235,226,0.05);padding:9px 0;opacity:0;transition:opacity 0.6s 1.3s;pointer-events:none;}
.mstrip.in{opacity:1;}
.mtrack{display:flex;gap:48px;animation:mq 28s linear infinite;width:max-content;}
@keyframes mq{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.mitem{font-family:var(--font-display);font-size:clamp(10px,1.3vw,14px);letter-spacing:0.2em;color:rgba(240,235,226,0.62);white-space:nowrap;text-transform:uppercase;display:flex;align-items:center;gap:18px;}
.mdot{width:3px;height:3px;border-radius:50%;background:var(--amber);opacity:0.5;flex-shrink:0;}