:root{
  --void: #030304;
  --void-2: #09090b;
  --void-3: #101013;
  --haze: #f4f3ef;
  --dim: #8b8b92;
  --dim-2: #4c4c52;
  --red: #ff2b45;
  --blue: #1fd2ff;
  --violet: #b23bff;
  --line: rgba(244,243,239,0.08);
  --ease-out: cubic-bezier(.16,.84,.44,1);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; background:var(--void);}
body{
  background:var(--void);
  color:var(--haze);
  font-family:'Inter', sans-serif;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  cursor:none;
}
@media (max-width: 860px), (hover:none){ body{ cursor:auto; } }

::selection{background:var(--red); color:var(--void);}

.font-display{ font-family:'Anton', sans-serif; text-transform:uppercase; letter-spacing:0.01em; }
.font-mono{ font-family:'Space Mono', monospace; }

a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit;}

/* ============ CUSTOM CURSOR ============ */
#cursor-dot, #cursor-ring{
  position:fixed; top:0; left:0;
  pointer-events:none; z-index:9999;
  border-radius:50%;
  transform:translate(-50%,-50%);
  will-change:transform;
  mix-blend-mode: difference;
}
#cursor-dot{ width:6px; height:6px; background:#f4f3ef; }
#cursor-ring{
  width:34px; height:34px;
  border:1px solid #f4f3ef;
  background: transparent;
  transition: width .25s var(--ease-out), height .25s var(--ease-out), border-color .25s ease;
}
#cursor-ring.hover{
  width:52px; height:52px;
  border-color: #f4f3ef;
  background: transparent;
}
@media (max-width: 860px), (hover:none){ #cursor-dot, #cursor-ring{ display:none; } }

/* ============ PRELOADER ============ */
#preloader{
  position:fixed; inset:0; z-index:10000;
  background:var(--void);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1.6rem;
}
#preloader img{ height:22px; width:auto; opacity:0.92; }
.loader-bar-track{
  width:220px; height:1px;
  background:var(--line);
  position:relative;
  overflow:hidden;
}
.loader-bar-fill{
  position:absolute; top:0; left:0; bottom:0;
  width:0%;
  background:linear-gradient(90deg, var(--red), var(--violet));
}
#loader-pct{ font-family:'Space Mono', monospace; font-size:0.68rem; letter-spacing:0.2em; color:var(--dim); }
#preloader.done{
  animation: preloaderOut .8s var(--ease-out) forwards;
}
@keyframes preloaderOut{
  to{ opacity:0; visibility:hidden; transform:translateY(-2%); }
}

/* ============ PAGE TRANSITION WIPE ============ */
#page-wipe{
  position:fixed; inset:0; z-index:9998;
  background:var(--void);
  transform:translateY(101%);
  pointer-events:none;
}
#page-wipe.active{
  animation: wipeIn .55s var(--ease-out) forwards;
}
@keyframes wipeIn{ to{ transform:translateY(0%); } }

/* ============ NAV ============ */
#nav{
  position:fixed; top:0; left:0; right:0; z-index:60;
  transition: background-color .4s ease, border-color .4s ease, backdrop-filter .4s ease;
  border-bottom:1px solid transparent;
}
#nav.scrolled{
  background-color: rgba(3,3,4,0.82);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-link{
  position:relative;
  font-family:'Space Mono', monospace;
  font-size:0.72rem;
  letter-spacing:0.12em;
  color:var(--dim);
  transition:color .25s ease;
}
.nav-link.is-active{ color:var(--haze); }
.nav-link::after{
  content:''; position:absolute; left:0; bottom:-4px;
  width:0%; height:1px; background:var(--red);
  transition:width .3s ease;
}
.nav-link:hover{color:var(--haze);}
.nav-link:hover::after, .nav-link.is-active::after{width:100%;}

/* ============ TYPE / LAYOUT UTILS ============ */
.eyebrow{
  font-family:'Space Mono', monospace;
  font-size:0.7rem;
  letter-spacing:0.28em;
  color:var(--red);
}
.hairline{ height:1px; background:var(--line); }
.fade-up{ opacity:0; transform:translateY(36px); }
.fade-in{ opacity:0; }
.max-wrap{ max-width:1440px; margin:0 auto; padding-left:1.5rem; padding-right:1.5rem; }
@media(min-width:768px){ .max-wrap{ padding-left:2.5rem; padding-right:2.5rem; } }

/* ============ PAGE HERO (secondary pages) ============ */
.page-hero{
  position:relative;
  min-height:66vh;
  display:flex; align-items:flex-end;
  overflow:hidden;
  border-bottom:1px solid var(--line);
}
.page-hero canvas{ position:absolute; inset:0; width:100%; height:100%; }
.page-hero .hero-vignette{
  position:absolute; inset:0;
  background: radial-gradient(ellipse at 50% 30%, transparent 30%, rgba(3,3,4,0.5) 75%, var(--void) 100%);
  pointer-events:none;
}
.page-hero-content{ position:relative; z-index:2; width:100%; padding-bottom:4.5rem; }

.hero-title{
  font-family:'Anton', sans-serif;
  text-transform:uppercase;
  letter-spacing:0.005em;
  font-size:clamp(4.5rem, 16vw, 15rem);
  line-height:0.88;
  color:var(--haze);
  margin:0.5rem 0 1.5rem;
}
.hero-title-outline{
  color:transparent;
  -webkit-text-stroke: 1.5px rgba(244,243,239,0.85);
}

/* ============ SCROLL PROGRESS ============ */
#scroll-progress{
  position:fixed; top:0; left:0; height:2px;
  background:linear-gradient(90deg, var(--red), var(--violet));
  z-index:70; width:0%;
}

/* ============ FOOTER ============ */
footer{ border-top:1px solid var(--line); }

/* ============ BUTTONS ============ */
.btn-primary{
  font-family:'Space Mono', monospace;
  font-size:0.72rem;
  letter-spacing:0.18em;
  padding:1rem 2rem;
  background:var(--haze);
  color:var(--void);
  transition: background-color .3s ease, color .3s ease, transform .3s ease;
  display:inline-block;
}
.btn-primary:hover{ background:var(--red); color:#fff; transform:translateY(-2px); }
.btn-outline{
  font-family:'Space Mono', monospace;
  font-size:0.72rem;
  letter-spacing:0.18em;
  padding:1rem 2rem;
  border:1px solid rgba(244,243,239,0.2);
  transition: border-color .3s ease, color .3s ease, transform .3s ease;
  display:inline-block;
}
.btn-outline:hover{ border-color:var(--red); color:var(--red); transform:translateY(-2px); }

/* ============ FIELD INPUTS ============ */
.field-input{
  background:transparent;
  border:1px solid var(--line);
  color:var(--haze);
  transition: border-color .25s ease, background-color .25s ease;
}
.field-input:focus{ outline:none; border-color:var(--red); background:rgba(244,243,239,0.02); }
.field-input::placeholder{ color:#5a5a60; }

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  #preloader.done{animation:none; opacity:0; visibility:hidden;}
  #page-wipe.active{animation:none;}
}

/* ============ ROSTER SHOWCASE (CSS 3D carousel) ============ */
.rs-stage {
  --card-w: 380px;
  --card-h: 285px;   /* 4:3 landscape — most images fit; portrait letterboxes */
  --depth: 250px;    /* triangular prism radius (~ card-w * 0.66) */
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1500px;
  perspective-origin: 50% 45%;
  pointer-events: none;
  z-index: 0;
}
.rs-stage.rs-lg { --card-w: 460px; --card-h: 345px; --depth: 310px; }
.rs-stage.rs-sm { --card-w: 300px; --card-h: 225px; --depth: 195px; }

.rs-rotor {
  position: relative;
  width: var(--card-w);
  height: var(--card-h);
  transform-style: preserve-3d;
  transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transition: transform 1.4s cubic-bezier(0.65, 0.05, 0.35, 1);
  will-change: transform;
}

.rs-face {
  position: absolute;
  inset: 0;
  background: #050508;
  border: 1px solid rgba(244,243,239,0.08);
  overflow: hidden;
  box-shadow:
    0 30px 80px rgba(0,0,0,0.6),
    0 0 40px rgba(178,59,255,0.15) inset;
}
.rs-face img {
  width: 100%;
  height: 100%;
  object-fit: contain;   /* KEY: never stretch, always natural aspect */
  display: block;
}
.rs-face::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: 0 0 0 1px rgba(244,243,239,0.05) inset;
}
.rs-accent-0 { transform: rotateY(0deg) translateZ(var(--depth)); border-color: rgba(178,59,255,0.35); box-shadow: 0 30px 80px rgba(0,0,0,0.6), 0 0 60px rgba(178,59,255,0.25); }
.rs-accent-1 { transform: rotateY(120deg) translateZ(var(--depth)); border-color: rgba(31,210,255,0.35); box-shadow: 0 30px 80px rgba(0,0,0,0.6), 0 0 60px rgba(31,210,255,0.25); }
.rs-accent-2 { transform: rotateY(240deg) translateZ(var(--depth)); border-color: rgba(255,43,69,0.35); box-shadow: 0 30px 80px rgba(0,0,0,0.6), 0 0 60px rgba(255,43,69,0.25); }

/* Mobile: shrink so it doesn't overwhelm titles */
@media (max-width: 767px) {
  .rs-stage { --card-w: 250px; --card-h: 188px; --depth: 165px; }
  .rs-stage.rs-lg { --card-w: 280px; --card-h: 210px; --depth: 185px; }
}

/* Page hero variant — showcase sits behind title, dimmed */
.page-hero .rs-stage {
  opacity: 0.55;
}

/* Showcase mount wrapper inside page heroes */
.page-hero-showcase{
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 40%, rgba(178,59,255,0.05), transparent 60%),
              radial-gradient(ellipse at 30% 70%, rgba(31,210,255,0.03), transparent 60%);
}