/* ============================================================
   Gate — operator hero scene (3D scaffold + 2D fallback)
   ============================================================ */
.gate-body{ height:100svh; overflow:hidden; }

.gate-scene{ position:fixed; inset:0; z-index:0; background:radial-gradient(ellipse at 60% 35%, #101a24 0%, var(--bg) 70%); }
#gateCanvas{ position:absolute; inset:0; width:100%; height:100%; display:block; opacity:0; transition:opacity 1.2s ease; }
#gateCanvas.is-ready{ opacity:1; }

.gate-fallback-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:62% 28%;
  filter:grayscale(.35) contrast(1.08) brightness(.85);
  opacity:1; transition:opacity .8s ease;
}
.gate-fallback-img.is-hidden{ opacity:0; }

.scan-line{
  position:absolute; inset-inline:0; height:2px; top:0;
  background:linear-gradient(90deg,transparent,var(--accent) 20%,var(--accent-2) 50%,var(--accent) 80%,transparent);
  box-shadow:0 0 12px 1px var(--accent);
  animation:scanSweep 4.5s ease-in-out infinite;
  opacity:.75;
}
@keyframes scanSweep{
  0%{ top:8%; opacity:0; }
  8%{ opacity:.75; }
  50%{ top:92%; opacity:.75; }
  58%{ opacity:0; }
  100%{ top:92%; opacity:0; }
}

.gate-scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(0deg, rgba(9,12,15,.96) 8%, rgba(9,12,15,.5) 46%, rgba(9,12,15,.25) 100%),
    linear-gradient(100deg, rgba(9,12,15,.55) 0%, rgba(9,12,15,.05) 55%);
}

.gate-chrome{
  position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between;
  padding:24px clamp(20px,4vw,48px);
}
.gate-status{ font-size:11px; color:var(--accent-2); letter-spacing:.12em; }
.gate-status .dots span{ animation:dotBlink 1.4s infinite; opacity:0; }
.gate-status .dots span:nth-child(1){ animation-delay:0s; }
.gate-status .dots span:nth-child(2){ animation-delay:.2s; }
.gate-status .dots span:nth-child(3){ animation-delay:.4s; }
@keyframes dotBlink{ 0%,100%{opacity:0;} 50%{opacity:1;} }

.gate-content{
  position:relative; z-index:2; max-width:1280px; margin-inline:auto; width:100%;
  padding:0 clamp(20px,5vw,64px);
  height:calc(100svh - 160px); display:flex; flex-direction:column; justify-content:center;
}
.gate-eyebrow{ display:flex; align-items:center; gap:12px; color:var(--accent-2); font-size:12px; letter-spacing:.16em; margin-bottom:20px;
  opacity:0; transform:translateY(16px); transition:opacity .85s ease, transform .85s cubic-bezier(.16,.84,.28,1); transition-delay:.15s; }
.gate-eyebrow .line{ width:34px; height:1px; background:var(--accent); }
body.loaded .gate-eyebrow{ opacity:1; transform:none; }

.gate-title{
  font-size:clamp(42px,7.5vw,104px); font-weight:700; letter-spacing:-.01em; line-height:.98; max-width:14ch; text-transform:uppercase;
  opacity:0; transform:translateY(20px); transition:opacity .9s ease, transform .9s cubic-bezier(.16,.84,.28,1); transition-delay:.32s;
}
body.loaded .gate-title{ opacity:1; transform:none; }

.gate-sub{
  margin-top:24px; max-width:46ch; color:var(--muted); font-size:clamp(15px,1.6vw,18px); font-family:var(--font-body);
  opacity:0; transform:translateY(16px); transition:opacity .85s ease, transform .85s cubic-bezier(.16,.84,.28,1); transition-delay:.6s;
}
body.loaded .gate-sub{ opacity:1; transform:none; }

.gate-cta{
  margin-top:38px; width:fit-content; letter-spacing:.14em; padding-inline:44px;
  opacity:0; transform:translateY(16px); transition:opacity .85s ease, transform .85s cubic-bezier(.16,.84,.28,1); transition-delay:.85s;
}
body.loaded .gate-cta{ opacity:1; transform:none; }

.gate-meta{
  position:relative; z-index:2; display:flex; justify-content:space-between; align-items:center;
  padding:0 clamp(20px,5vw,64px) 30px; font-size:10.5px; color:var(--muted-2); letter-spacing:.08em;
}

@media (prefers-reduced-motion:reduce){
  .scan-line{ animation:none; opacity:.3; }
  .gate-eyebrow,.gate-title,.gate-sub,.gate-cta{ opacity:1 !important; transform:none !important; transition:none !important; }
}

@media (max-width:640px){
  .gate-meta{ flex-direction:column; align-items:flex-start; gap:6px; }
  .gate-chrome{ flex-wrap:wrap; gap:10px 16px; }
  .gate-status{ order:3; flex-basis:100%; }
  .gate-content{ height:calc(100svh - 200px); }
}