:root{
  --gold: #c9a463;
  --gold-bright: #e0bd7f;
  --ivory: #f3ead9;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; background:#080303; font-family:'Jost','Helvetica Neue',Arial,sans-serif;}
img{max-width:100%; display:block;}
button{background:none; border:none; cursor:pointer; padding:0; font:inherit; color:inherit;}
a{cursor:pointer; color:inherit; text-decoration:none;}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ===================== GATE ===================== */
.gate{
  position:fixed; inset:0; z-index:100; background:#0a0200;
  display:flex; align-items:center; justify-content:center;
  transition:opacity 1s ease, visibility 1s ease;
}
.gate.hide{opacity:0; visibility:hidden; pointer-events:none;}
.gate-inner{display:flex; flex-direction:column; align-items:center; gap:15vh; padding:0 20px;}
.gate-choices{display:flex; flex-direction:column; gap:20px; align-items:flex-start;}
.gate-choice{display:flex; align-items:center; gap:14px; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ivory); transition:opacity .3s ease;}
.gate-choice.dim{color:#cfc3ae; opacity:.55;}
.gate-choice:hover{opacity:.8;}
.gate-icon-ring{width:28px; height:28px; border-radius:50%; border:1px solid #cfc3ae; display:flex; align-items:center; justify-content:center; color:#cfc3ae; flex:0 0 auto;}
.gate-icon-ring.gold{border-color:var(--gold); color:var(--gold);}

.gate-logo-wrap{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  padding:60px;
}
.gate-rings{
  position:fixed;
  z-index:0;
  pointer-events:none;
}
.gate-logo{
  position:relative;
  z-index:1;
  width:min(78vw,420px);
  filter:drop-shadow(0 0 var(--glow-blur,40px) rgba(230,196,140,var(--glow-alpha,.3)));
  transform:scale(var(--logo-scale,1));
  transition:filter .15s ease-out, transform .15s ease-out;
  will-change:filter, transform;
}


/* ===================== GLOBAL SPEAKER ===================== */
.global-speaker{
  position:fixed; top:22px; left:22px; z-index:60;
  width:34px; height:34px; border-radius:50%;
  border:1px solid rgba(255,255,255,.18);
  display:flex; align-items:center; justify-content:center;
  color:#cfc3ae; background:rgba(10,7,5,.4); backdrop-filter:blur(4px);
  transition:color .3s ease, border-color .3s ease;
}
.global-speaker[aria-pressed="true"]{color:var(--gold-bright); border-color:var(--gold);}

/* ===================== UNIFIED NAV — identical on every section ===================== */
.site-nav{
  position:fixed;
  top:3.3vw;
  right:11.5vw;
  z-index:50;
  display:flex;
  align-items:center;
  gap:2.1vw;
}
.nav-link{
  font-size:.72vw;
  min-font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ivory);
  white-space:nowrap;
  padding-bottom:.5vw;
  position:relative;
  transition:color .3s ease;
}
.nav-link.active{color:var(--gold-bright);}
.nav-link:hover{color:var(--gold-bright);}
.nav-underline{
  position:absolute;
  bottom:0;
  height:1.5px;
  background:var(--gold);
  transition:left .4s cubic-bezier(.65,0,.35,1), width .4s cubic-bezier(.65,0,.35,1);
}
@media (min-width:1900px){
  .nav-link{font-size:13px;}
}

/* ===================== CANVAS SECTIONS ===================== */
.canvas-section{position:relative; width:100%;}
.canvas-frame{
  position:relative; width:100%; line-height:0;
  opacity:0;
  transform:translateY(40px) scale(.985);
  transition:opacity 1.1s cubic-bezier(.16,1,.3,1), transform 1.1s cubic-bezier(.16,1,.3,1);
}
.canvas-frame.in-view{opacity:1; transform:translateY(0) scale(1);}
.canvas-art{width:100%; height:auto; display:block; user-select:none; -webkit-user-drag:none;}

/* ===================== ABOUT: WAVEFORM PLAYER ===================== */
.about-player{
  position:absolute;
  left:8.6%; top:39.7%; width:23.2%;
}
.waveform{
  display:flex;
  align-items:flex-end;
  gap:.25vw;
  height:5.2vw;
  min-height:40px;
  margin-bottom:1.2vw;
}
.waveform span{
  flex:1;
  background:rgba(255,255,255,.4);
  border-radius:1px;
  min-height:8%;
  transition:background .3s ease;
}
.waveform.is-playing span{
  background:var(--gold-bright);
  animation:wavePulse 1.1s ease-in-out infinite;
}
@keyframes wavePulse{
  0%,100%{transform:scaleY(.55);}
  50%{transform:scaleY(1);}
}

.player-buttons{display:flex; align-items:center; justify-content:center; gap:1.6vw;}
.home-skip, .home-play{
  width:2.1vw; height:2.1vw; min-width:24px; min-height:24px;
  display:flex; align-items:center; justify-content:center;
  color:var(--ivory);
  border-radius:50%;
  transition:color .3s ease, transform .15s ease;
}
.home-play{border:1px solid rgba(255,255,255,.5);}
.home-skip:hover, .home-play:hover{color:var(--gold-bright);}
.home-play:active, .home-skip:active{transform:scale(.92);}

/* ===================== LIVE: SHOWREEL PLAYER ===================== */
.showreel-slot{
  position:absolute;
  left:9.2%; top:28.6%; width:32%; height:31%;
}
.showreel-slot video{width:100%; height:100%; object-fit:cover; display:block;}
.showreel-play{
  position:absolute; inset:0; margin:auto; width:60px; height:60px;
  border-radius:50%; background:rgba(255,255,255,.14);
  backdrop-filter:blur(3px);
  border:1px solid rgba(255,255,255,.4);
  display:flex; align-items:center; justify-content:center;
  color:#fff;
  transition:opacity .4s ease, background .3s ease, transform .2s ease;
}
.showreel-play:hover{background:rgba(255,255,255,.22); transform:scale(1.06);}
.showreel-play.hidden{opacity:0; pointer-events:none;}
.showreel-controls{
  position:absolute; left:0; right:0; bottom:0;
  display:flex; align-items:center; gap:10px;
  padding:10px 14px;
  background:linear-gradient(0deg, rgba(0,0,0,.55), transparent);
  opacity:0;
  transition:opacity .3s ease;
}
.showreel-slot:hover .showreel-controls,
.showreel-slot:focus-within .showreel-controls{opacity:1;}
.showreel-controls button{
  width:22px; height:22px; flex:0 0 auto;
  color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.showreel-controls input[type=range]{
  -webkit-appearance:none; appearance:none; flex:1; height:16px; background:transparent; cursor:pointer;
}
.showreel-controls input[type=range]::-webkit-slider-runnable-track{height:2px; background:rgba(255,255,255,.35); border-radius:2px;}
.showreel-controls input[type=range]::-moz-range-track{height:2px; background:rgba(255,255,255,.35); border-radius:2px;}
.showreel-controls input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:10px; height:10px; border-radius:50%; background:var(--gold-bright); margin-top:-4px;
}
.showreel-controls input[type=range]::-moz-range-thumb{width:10px; height:10px; border-radius:50%; background:var(--gold-bright); border:none;}
.showreel-controls time{color:#fff; font-size:.7rem; flex:0 0 auto; width:32px;}

/* ===================== CONTACT HOTSPOTS ===================== */
.hotspot{position:absolute; display:block; background:transparent;}
.work-link{
  left:6%;   top:38.4%; width:22%;   height:8.1%;
  border-radius:3px;
}
.work-link::after{
  content:'';
  position:absolute;
  inset:-6%;
  border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(224,189,127,.55) 0%, rgba(224,189,127,.24) 42%, rgba(224,189,127,0) 72%);
  filter:blur(5px);
  opacity:.5;
  animation:ctaGlowFloat 3.4s ease-in-out infinite;
  pointer-events:none;
}
@keyframes ctaGlowFloat{
  0%,100%{ opacity:.4; transform:translateY(0) scale(1); }
  50%{ opacity:.75; transform:translateY(-3px) scale(1.05); }
}
.email-link{ left:6%;   top:51.1%; width:21.8%; height:3.3%; }
.phone-link{ left:6%;   top:59.9%; width:18.7%; height:3.9%; }

.social{
  top:83.7%; width:2.3%; height:2.9%; border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  color:var(--gold-bright);
  background:rgba(224,189,127,.1);
  border:1px solid rgba(224,189,127,.35);
  transition:box-shadow .3s ease, transform .2s ease, background .3s ease;
}
.social svg{width:58%; height:58%;}
.social:hover{ background:rgba(224,189,127,.22); box-shadow:0 0 0 6px rgba(224,189,127,.12), 0 0 18px rgba(224,189,127,.35); transform:scale(1.08); }
.social.instagram{ left:21.8%; }
.social.tiktok{    left:24.98%; }
.social.youtube{   left:28.16%; }
.social.facebook{  left:31.34%; }
.social.spotify{   left:34.52%; }
.social.apple{     left:37.7%; }

.nav-link:focus-visible, .hotspot:focus-visible, .home-skip:focus-visible, .home-play:focus-visible{
  outline:1px solid var(--gold-bright); outline-offset:2px;
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .waveform.is-playing span{animation:none;}
  .canvas-frame{opacity:1 !important; transform:none !important; transition:none !important;}
  .work-link::after{animation:none; display:none;}
}

/* ===================== MOBILE (placed last so it wins the cascade) ===================== */
@media (max-width:700px){
  .site-nav{
    position:fixed; top:4.2%; left:50%; transform:translateX(-50%);
    right:auto; gap:5.2vw;
  }
  .nav-link{font-size:2.7vw; letter-spacing:.1em;}

  .about-player{ left:60.2%; top:22.6%; width:34.3%; }
  .waveform{ display:none; }
  .player-buttons{ gap:5vw; margin-top:1.5vw; }
  .home-skip, .home-play{ width:6.5vw; height:6.5vw; }

  .showreel-slot{ left:3.4%; top:31.5%; width:56%; height:19.5%; }

  .work-link{  left:10.7%; top:2.1%;  width:78.6%; height:3.4%; }
  .email-link{ left:6%;    top:9.7%;  width:36%;   height:2.2%; }
  .phone-link{ left:6%;    top:14.4%; width:28%;   height:2.3%; }

  .social{ top:62.2%; width:3.7%; height:1.9%; }
  .social.instagram{ left:18.1%; }
  .social.tiktok{    left:23%; }
  .social.youtube{   left:27.9%; }
  .social.facebook{  left:32.8%; }
  .social.spotify{   left:37.7%; }
  .social.apple{     left:42.6%; }
}