/* ============================================================
   Entry gate — hold to enter (home only)
   ============================================================ */
html.gate-lock,html.gate-lock body{overflow:hidden}

.gate{
  position:fixed;inset:0;z-index:190;background:var(--ink);color:var(--text-hi);
  touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
  cursor:grab;overflow:hidden;
}
.gate.is-holding{cursor:grabbing}
.gate.is-entering{cursor:default}
.gate.is-open{background:transparent}
.gate__top,.gate__claim,.gate__hold,.gate__corner{transition:opacity .5s var(--ease-out)}
.gate.is-entering :is(.gate__top,.gate__claim,.gate__hold,.gate__corner){opacity:0;transition-delay:.35s;pointer-events:none}
.gate.is-open > :not(.gate__wipe){visibility:hidden}

.gate__stage{position:absolute;inset:0}
.gate__stage canvas{display:block;width:100%;height:100%}
.gate__stage::after{   /* vignette over the scene */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 55% 50%,transparent 45%,rgba(10,10,11,.85) 100%);
}

/* flat mark while three.js loads, or when WebGL is unavailable */
.gate__fallback{
  position:absolute;left:50%;top:46%;width:min(150px,32vw);height:auto;
  transform:translate(-50%,-50%);filter:drop-shadow(0 0 40px rgba(255,195,0,.35));
  transition:opacity .6s var(--ease-out);
}
.gate.has-gl .gate__fallback{opacity:0}

/* HUD corners */
.gate__corner{position:absolute;width:22px;height:22px;border:0 solid var(--yellow);opacity:.85;pointer-events:none}
.gate__corner--tl{top:16px;left:16px;border-top-width:2px;border-left-width:2px}
.gate__corner--tr{top:16px;right:16px;border-top-width:2px;border-right-width:2px}
.gate__corner--bl{bottom:16px;left:16px;border-bottom-width:2px;border-left-width:2px}
.gate__corner--br{bottom:16px;right:16px;border-bottom-width:2px;border-right-width:2px}

.gate__top{
  position:absolute;top:30px;left:44px;right:44px;
  display:flex;align-items:flex-start;justify-content:space-between;gap:24px;
  font:500 .6875rem/1.5 var(--font-mono);letter-spacing:0;text-transform:uppercase;color:var(--text-mid);
}
.gate__brand{display:flex;flex-direction:column;gap:4px}
.gate__brand strong{
  font-family:var(--font-display);font-weight:700;font-stretch:118%;
  font-size:1.125rem;letter-spacing:0;color:var(--text-hi);
}
.gate__meta{display:flex;gap:28px;margin-left:auto}
.gate__skip{
  background:none;border:0;padding:4px 0;cursor:pointer;
  font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--text-hi);
  transition:color .3s;
}
.gate__skip:hover,.gate__skip:focus-visible{color:var(--yellow)}

.gate__claim{
  position:absolute;left:44px;bottom:clamp(96px,14vh,140px);
  display:flex;flex-direction:column;pointer-events:none;
  font-family:var(--font-display);font-weight:700;font-stretch:118%;letter-spacing:0;
  font-size:clamp(1.5rem,3.2vw,3rem);line-height:.95;text-transform:uppercase;color:var(--text-hi);
}
.gate__claim em{font-style:normal;color:var(--yellow)}

/* the hold control */
.gate__hold{
  position:absolute;left:50%;bottom:clamp(28px,6vh,56px);transform:translateX(-50%);
  display:flex;align-items:center;gap:14px;padding:8px 22px 8px 8px;border:0;border-radius:999px;
  background:rgba(19,19,20,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);
  font:500 .75rem/1 var(--font-mono);letter-spacing:0;text-transform:uppercase;color:var(--text-hi);
  cursor:inherit;white-space:nowrap;
  transition:box-shadow .3s var(--ease-out),transform .3s var(--ease-out);
}
.gate.is-holding .gate__hold{box-shadow:inset 0 0 0 1px rgba(255,195,0,.55),0 0 40px rgba(255,195,0,.18);transform:translateX(-50%) scale(.97)}
.gate__ring{position:relative;width:40px;height:40px;flex:none}
.gate__ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.gate__ring circle{fill:none;stroke-width:2.5}
.gate__track{stroke:rgba(255,195,0,.2)}
.gate__fill{stroke:var(--yellow);stroke-linecap:round}
.gate__ring i{
  position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;background:var(--yellow);
  animation:gatePulse 1.6s var(--ease-out) infinite;
}
.gate.is-holding .gate__ring i{animation:none;transform:scale(1.3)}
@keyframes gatePulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
.gate__pct{color:var(--text-mid);font-variant-numeric:tabular-nums}
.gate__pct b{font-weight:600;color:var(--yellow)}

/* yellow wipe that carries the page in */
.gate__wipe{
  position:absolute;inset:0;z-index:3;background:var(--yellow);pointer-events:none;
  clip-path:circle(0% at 50% 50%);
}

@media (max-width:760px){
  .gate__top{top:26px;left:30px;right:30px}
  .gate__meta{display:none}
  .gate__claim{left:30px;bottom:112px;font-size:1.5rem}
  .gate__hold{padding-right:18px;gap:12px;font-size:.6875rem}
}
@media (prefers-reduced-motion:reduce){
  .gate__ring i{animation:none}
}