/* Studio Awakening — global styles */
:root {
  --bg: #0A0C12;
  --bg-elev: #11141C;
  --bg-elev-2: #161A24;
  --primary: #F5A623;
  --primary-soft: #FFCC66;
  --secondary: #DB5227;
  --ui: #3F3A42;
  --muted: #76828E;
  --white: #F5F5F5;
  --ink-on-accent: #0A0C12;
  --line: rgba(245, 245, 245, 0.08);
  --line-2: rgba(245, 245, 245, 0.14);

  --font-display: 'Anton', 'Bebas Neue', Impact, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --title-scale: 1;
  --title-weight: 400;
  --title-tracking: 0.005em;
  --title-leading: 0.92;
  --title-case: uppercase;
  --body-size: 14px;
  --eyebrow-size: 12px;
  --eyebrow-track: 0.18em;
  --radius: 14px;
  --radius-btn: 999px;
  --container-pad: 48px;
  --section-gap: 100px;
  --card-gap: 24px;
  --border-w: 1px;
  --dur-fast: 220ms;
  --dur-mid: 380ms;
  --dur-slow: 800ms;
  --hover-zoom: 1.06;
  --hover-intensity: 1;
  --marquee-dur: 40s;
}

* { box-sizing: border-box; }
html {
  scrollbar-gutter: stable;
}
html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--white);
  font-family: var(--font-body);
  font-size: var(--body-size);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body { overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
img, video { display: block; max-width: 100%; }
input, textarea, select { font-family: inherit; }

::selection { background: var(--primary); color: var(--bg); }

.font-display {
  font-family: var(--font-display);
  font-weight: var(--title-weight);
  letter-spacing: var(--title-tracking);
  line-height: var(--title-leading);
  text-transform: var(--title-case);
}
.font-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }

.eyebrow {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: var(--eyebrow-track);
  font-size: var(--eyebrow-size);
  font-weight: 600;
  color: var(--primary);
}
.eyebrow-muted { color: var(--muted); }

.grain {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 9000;
  opacity: 0.07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.2 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.85'/></svg>");
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #1c2029; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #2a2f3a; }

.btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 22px;
  border-radius: var(--radius-btn);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  transition: background 300ms cubic-bezier(.2,.7,.2,1),
              color 220ms,
              border-color 300ms cubic-bezier(.2,.7,.2,1),
              transform 480ms cubic-bezier(.22,1,.36,1),
              box-shadow 480ms cubic-bezier(.22,1,.36,1);
  white-space: nowrap;
}
.btn-primary { background: var(--primary); color: var(--ink-on-accent); }
.btn-primary:hover { background: var(--white); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(245,140,20,0.3); }
.btn-ghost { border: var(--border-w) solid var(--line-2); color: var(--white); }
.btn-ghost:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-1px); }
.btn .arrow {
  width: 22px; height: 22px; border-radius: 999px;
  background: rgba(0,0,0,0.18);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px;
}
.btn-ghost .arrow { background: rgba(255,255,255,0.06); }

.lift { transition: transform 380ms cubic-bezier(.2,.7,.2,1), border-color 220ms; }

.reveal { opacity: 0; transform: translateY(28px); transition: opacity 800ms cubic-bezier(.2,.7,.2,1), transform 800ms cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: translateY(0); }

.page { animation: pageIn var(--dur-slow) cubic-bezier(.2,.7,.2,1); }
@keyframes pageIn { from { opacity: 0; transform: scale(1.02); } to { opacity: 1; transform: scale(1); } }
.page-fade { animation-name: pageFade; }
.page-up { animation-name: pageUp; }
.page-none { animation: none; }
@keyframes pageFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pageUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }

.scan-lines::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 8999;
  background-image: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px, rgba(0,0,0,.18) 3px);
  mix-blend-mode: multiply; opacity: .35;
}

.vignette-layer {
  position: fixed; inset: 0; pointer-events: none; z-index: 8998;
  background: radial-gradient(ellipse at center, transparent 40%, #000 110%);
}

.container { width: 100%; max-width: 1640px; margin: 0 auto; padding: 0 var(--container-pad); }
@media (max-width: 768px) { :root { --container-pad: 32px; --section-gap: 80px; } }
@media (max-width: 480px) { :root { --container-pad: 20px; --section-gap: 60px; } }
@media (max-width: 720px) { .container { padding: 0 calc(var(--container-pad) * 0.5); } }

@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee-track {
  display: inline-flex; gap: 64px; white-space: nowrap;
  animation: marquee var(--marquee-dur) linear infinite;
}

.live-dot {
  width: 7px; height: 7px; border-radius: 999px;
  background: var(--primary);
  box-shadow: 0 0 0 0 rgba(245,166,35,0.6);
  animation: pulse 1.6s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(245,166,35,0.6); }
  70% { box-shadow: 0 0 0 12px rgba(245,166,35,0); }
  100% { box-shadow: 0 0 0 0 rgba(245,166,35,0); }
}

.zoom-wrap { overflow: hidden; }
.zoom-wrap img, .zoom-wrap video {
  transition: transform 1400ms cubic-bezier(.2,.7,.2,1), filter 800ms cubic-bezier(.2,.7,.2,1);
  width: 100%; height: 100%; object-fit: cover;
}
.zoom-wrap:hover img, .zoom-wrap:hover video { transform: scale(var(--hover-zoom)); }

.sun-text {
  background: linear-gradient(180deg, #FFCC66 0%, #F5A623 38%, #DB5227 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(5,6,10,0.86);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  z-index: 8000;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(12px, 4vw, 32px);
  overscroll-behavior: contain;
  animation: fadeIn 340ms cubic-bezier(.16,1,.3,1);
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.reel-modal { animation: modalIn 420ms cubic-bezier(.16,1,.3,1) both; }
@keyframes modalIn {
  from { opacity: 0; transform: translateY(24px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

/* ===== INTRO SCREEN ===== */
.intro-screen {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; cursor: pointer;
  user-select: none; -webkit-user-select: none;
}
.intro-mask {
  position: absolute; inset: 0;
  background: var(--bg);
  pointer-events: none;
  z-index: 0;
}
.intro-screen--fading {
  opacity: 0; pointer-events: none;
  transition: opacity 300ms cubic-bezier(.4,0,.2,1);
}

/* Side labels — vertically centred, flanking the window */
.intro-label {
  position: absolute; top: 50%; transform: translateY(-50%);
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 6rem);
  font-weight: 400; text-transform: uppercase;
  letter-spacing: 0.01em; line-height: 1.05;
  color: var(--white); pointer-events: none;
  transition: opacity 360ms ease;
}
.intro-label--left  { left:  clamp(24px, 5.5vw, 88px); text-align: left;
                      animation: introLabelLeft  900ms 220ms cubic-bezier(.2,.7,.2,1) both; }
.intro-label--right { right: clamp(24px, 5.5vw, 88px); text-align: right;
                      animation: introLabelRight 900ms 320ms cubic-bezier(.2,.7,.2,1) both; }
/* Labels are now inside .intro-mask and disappear via clip-path expansion — no opacity fade needed */
.intro-screen--text-out .intro-bracket { opacity: 0; }

/* Corner chrome */
.intro-corner-chrome {
  transition: opacity 300ms ease;
  animation: introFadeIn 700ms 80ms cubic-bezier(.2,.7,.2,1) both;
}
/* intro-corner-chrome stays visible — logo persists through full intro fade */
.intro-tagline {
  position: absolute; top: clamp(22px,3.5vh,40px); right: clamp(24px,4vw,56px);
  font-family: var(--font-mono); font-size: 8px;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted);
  transition: opacity 300ms ease;
  animation: introFadeIn 700ms 500ms cubic-bezier(.2,.7,.2,1) both;
}
.intro-screen--text-out .intro-tagline { opacity: 0; }

/* Portal window frame (transparent — hole in mask shows site behind) */
.intro-video-window {
  position: relative; flex-shrink: 0;
  width: clamp(160px, 21vw, 320px);
  aspect-ratio: 9 / 16;
  background: transparent;
  border: 1px solid rgba(245,166,35,0.28);
  will-change: transform; transform-origin: center center;
  z-index: 2;
  transition: border-color 400ms cubic-bezier(.2,.7,.2,1);
}
.intro-video-window:hover {
  border-color: rgba(245,166,35,0.65);
}
.intro-video-window__overlay {
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: rgba(10,12,18,0.25);
}
/* Glare: light source that follows the cursor inside the window */
.intro-video-window__glare {
  position: absolute; inset: 0; pointer-events: none; z-index: 3;
  border-radius: inherit;
  transition: opacity 400ms ease;
  opacity: 0;
}
.intro-video-window:hover .intro-video-window__glare { opacity: 1; }

/* "ENTER" inside window */
.intro-enter-label {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-mono); font-size: 8px;
  letter-spacing: 0.28em; text-transform: uppercase; color: rgba(255,255,255,0.85);
  pointer-events: none;
  transition: opacity 300ms ease;
  animation: introPulse 2.8s 1.6s cubic-bezier(.5,0,.5,1) infinite;
}
.intro-enter-label__dot { width: 4px; height: 4px; border-radius: 50%; background: var(--primary); flex-shrink: 0; }
.intro-screen--text-out .intro-enter-label { opacity: 0; transition: opacity 200ms ease; }

/* Amber corner brackets */
.intro-bracket {
  position: absolute; width: 14px; height: 14px; pointer-events: none;
  transition: opacity 250ms ease;
}
.intro-bracket--tl { top:-1px; left:-1px;   border-top:2px solid var(--primary); border-left:2px solid var(--primary); }
.intro-bracket--tr { top:-1px; right:-1px;  border-top:2px solid var(--primary); border-right:2px solid var(--primary); }
.intro-bracket--bl { bottom:-1px; left:-1px;  border-bottom:2px solid var(--primary); border-left:2px solid var(--primary); }
.intro-bracket--br { bottom:-1px; right:-1px; border-bottom:2px solid var(--primary); border-right:2px solid var(--primary); }

/* Bottom hint */
.intro-hint {
  position: absolute; bottom: clamp(24px,4.5vh,48px); left:50%; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 8px;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted);
  white-space: nowrap; pointer-events: none;
  transition: opacity 300ms ease;
  animation: introFadeIn 600ms 1100ms cubic-bezier(.2,.7,.2,1) both;
}
.intro-screen--text-out .intro-hint { opacity: 0; }

/* Entry keyframes */
@keyframes introLabelLeft {
  from { opacity:0; transform: translateY(-50%) translateX(-32px); }
  to   { opacity:1; transform: translateY(-50%) translateX(0); }
}
@keyframes introLabelRight {
  from { opacity:0; transform: translateY(-50%) translateX(32px); }
  to   { opacity:1; transform: translateY(-50%) translateX(0); }
}
@keyframes introFadeIn {
  from { opacity:0; }
  to   { opacity:1; }
}
@keyframes introPulse {
  0%,100% { opacity:0.38; }
  50%     { opacity:1; }
}

/* Mobile */
@media (max-width: 768px) {
  .intro-video-window { width: 52vw; }
  .intro-label { font-size: clamp(1.4rem, 7vw, 3rem); }
  .intro-label--left  { left: 10px; }
  .intro-label--right { right: 10px; }
}

/* ===== SHOWREEL MODAL ===== */
.reel-modal {
  position: relative;
  width: 100%; max-width: 1160px;
  border-radius: 12px; overflow: hidden;
  background: #000;
  box-shadow: 0 40px 120px rgba(0,0,0,0.7);
}
.reel-modal__frame {
  aspect-ratio: 16 / 9;
  width: 100%;
}
.reel-modal__frame iframe {
  width: 100%; height: 100%; border: none; display: block;
}
.reel-modal__close {
  position: absolute; top: 14px; right: 14px; z-index: 10;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(0,0,0,0.55); backdrop-filter: blur(8px);
  color: #fff; font-size: 15px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast) cubic-bezier(.2,.7,.2,1),
              transform 400ms cubic-bezier(.22,1,.36,1);
}
.reel-modal__close:hover { background: var(--primary); color: var(--bg); transform: scale(1.1) rotate(90deg); }
.reel-modal__close:active { transform: scale(0.95); transition-duration: 80ms; }

/* ===== LENIS SMOOTH SCROLL ===== */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-scrolling iframe { pointer-events: none; }

/* ===== TEXT SPLIT REVEAL ===== */
.sa-split {
  overflow: hidden;
  display: inline-block;
  vertical-align: bottom;
  line-height: inherit;
}
.sa-split__inner {
  display: inline-block;
  transform: translateY(105%);
  /* GSAP will override transform directly */
}
/* Preserve font styling on split containers */
.hero__title-a .sa-split,
.hero__title-b .sa-split,
.section-header__title .sa-split,
.specialty-hero__title .sa-split,
.cta-band__title .sa-split {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

/* ===== CUSTOM CURSOR ===== */
@media (pointer: fine) {
  body { cursor: none; }
  a, button, [role="button"], input, textarea, select { cursor: none; }
}
.sa-cursor {
  position: fixed; top: 0; left: 0;
  z-index: 10001; pointer-events: none;
  mix-blend-mode: difference;
}
.sa-cursor__dot {
  width: 8px; height: 8px;
  background: var(--white); border-radius: 50%;
  position: absolute; top: 0; left: 0;
}
.sa-cursor__ring {
  position: absolute; top: 0; left: 0;
  width: 36px; height: 36px;
  border: 1px solid rgba(245,166,35,0.7); border-radius: 50%;
  transform-origin: center;
  transition: width 440ms cubic-bezier(.16,1,.3,1),
              height 440ms cubic-bezier(.16,1,.3,1),
              border-color 280ms cubic-bezier(.2,.7,.2,1),
              opacity 220ms;
}
.sa-cursor--hover .sa-cursor__ring {
  width: 52px; height: 52px;
  border-color: var(--primary);
}
.sa-cursor--hidden .sa-cursor__dot,
.sa-cursor--hidden .sa-cursor__ring { opacity: 0; }
/* Intro: large amber ring when hovering the video window */
.sa-cursor--intro-enter .sa-cursor__dot { opacity: 0; transition: opacity 200ms ease; }
.sa-cursor--intro-enter .sa-cursor__ring {
  width: 72px; height: 72px;
  border-color: var(--primary);
  border-width: 1.5px;
  transition: width 550ms cubic-bezier(.16,1,.3,1),
              height 550ms cubic-bezier(.16,1,.3,1),
              border-color 280ms cubic-bezier(.2,.7,.2,1);
}

/* ===== HERO VIDEO ===== */
.hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 1;
  object-fit: cover;
  pointer-events: none;
  transition: opacity 1.2s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* ===== CAROUSEL VIDEO PREVIEW ===== */
.feat-carousel__slide {
  transition: transform 700ms cubic-bezier(.16,1,.3,1), box-shadow 400ms;
}
.feat-carousel__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 900ms cubic-bezier(.16,1,.3,1);
  z-index: 1;
  pointer-events: none;
}
.feat-carousel__slide--vidactive .feat-carousel__video { opacity: 1; }
.feat-carousel__slide--vidactive {
  transform: scale(1.12);
  z-index: 10;
  box-shadow: 0 0 0 2px rgba(245,166,35,0.9), 0 24px 60px rgba(0,0,0,0.7);
}
/* On mobile, reduce the expansion to avoid overflow issues */
@media (max-width: 600px) {
  .feat-carousel__slide--vidactive { transform: scale(1.05); }
}
.feat-carousel__viewport.has-vid-expanded { overflow: visible; }
.feat-carousel { overflow: hidden; }
.feat-carousel.has-vid-expanded { overflow: visible; }
.feat-carousel__sound-btn {
  position: absolute; top: 12px; right: 12px; z-index: 12;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(10,12,18,0.72);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(245,245,245,0.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: var(--white);
  opacity: 0; pointer-events: none;
  transition: opacity 350ms ease, background var(--dur-fast), transform var(--dur-fast);
}
.feat-carousel__slide--vidactive .feat-carousel__sound-btn {
  opacity: 1; pointer-events: auto;
}
.feat-carousel__sound-btn:hover {
  background: rgba(245,166,35,0.28); border-color: rgba(245,166,35,0.6);
  transform: scale(1.1);
}