/* ===========================================================
   SEONINJA — Intro video gate
   Tap-to-play splash → video → fade into the site.
   =========================================================== */
.intro-gate{
  position:fixed; inset:0; z-index:9999;
  background:#050507;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  opacity:1;
  transition:opacity .7s ease;
}
.intro-gate[hidden]{ display:none; }
.intro-gate.is-leaving{ opacity:0; }

/* lock the page behind the gate */
html.intro-locked, body.intro-locked{ overflow:hidden !important; height:100%; }

/* the video itself — cover the viewport */
.intro-video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  background:#050507;
  opacity:0;
  transition:opacity .4s ease;
}
.intro-gate.is-playing .intro-video{ opacity:1; }

/* subtle vignette + scanline texture over the video, on-brand */
.intro-gate::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px),
    radial-gradient(130% 100% at 50% 50%, transparent 55%, rgba(0,0,0,.6) 100%);
  mix-blend-mode:multiply; opacity:.55;
}

/* ---- tap-to-play state ---- */
.intro-play{
  position:relative; z-index:5;
  display:flex; flex-direction:column; align-items:center; gap:26px;
  background:none; border:0; cursor:pointer; padding:0;
  color:var(--text, #eef0f4);
  font-family:var(--mono, monospace);
  animation:introFadeUp .8s ease both;
}
.intro-gate.is-playing .intro-play{ display:none; }

.intro-play-ring{
  position:relative;
  width:124px; height:124px;
  display:grid; place-items:center;
  border:2px solid var(--red, #ff2230);
  border-radius:50%;
  box-shadow:0 0 0 0 var(--red-glow, rgba(255,34,48,.55));
  transition:transform .25s ease, box-shadow .25s ease;
  animation:introPulse 2.4s ease-out infinite;
}
.intro-play:hover .intro-play-ring{ transform:scale(1.06); box-shadow:0 0 34px 4px var(--red-glow, rgba(255,34,48,.55)); }
.intro-play-ring svg{ width:46px; height:46px; fill:var(--red, #ff2230); margin-left:6px; }

.intro-play-label{
  font-size:13px; letter-spacing:.42em; text-transform:uppercase;
  padding-left:.42em;
  color:var(--chrome, #cfd2da);
}
.intro-play-sub{
  font-family:var(--mono, monospace);
  font-size:11px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--text-dim, #6b6b76); margin-top:-14px;
}

/* ---- skip link ---- */
.intro-skip{
  position:absolute; z-index:6;
  right:24px; bottom:22px;
  display:none;
  background:rgba(8,8,10,.55);
  border:1px solid var(--line-2, #3c3c46);
  color:var(--chrome, #cfd2da);
  font-family:var(--mono, monospace);
  font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  padding:11px 18px; cursor:pointer;
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
  transition:border-color .2s ease, color .2s ease, background .2s ease;
  backdrop-filter:blur(4px);
}
.intro-gate.is-playing .intro-skip{ display:inline-block; }
.intro-skip:hover{ border-color:var(--red, #ff2230); color:#fff; background:rgba(20,8,10,.7); }

/* loading shimmer while the video buffers */
.intro-loading{
  position:absolute; z-index:5; bottom:38px; left:0; right:0;
  display:none; text-align:center;
  font-family:var(--mono, monospace);
  font-size:11px; letter-spacing:.34em; text-transform:uppercase;
  color:var(--text-dim, #6b6b76);
}
.intro-gate.is-buffering .intro-loading{ display:block; }

@keyframes introPulse{
  0%   { box-shadow:0 0 0 0 var(--red-glow, rgba(255,34,48,.55)); }
  70%  { box-shadow:0 0 0 26px rgba(255,34,48,0); }
  100% { box-shadow:0 0 0 0 rgba(255,34,48,0); }
}
@keyframes introFadeUp{
  from{ opacity:0; transform:translateY(16px); }
  to{ opacity:1; transform:translateY(0); }
}

@media (max-width:640px){
  .intro-play-ring{ width:104px; height:104px; }
  .intro-play-ring svg{ width:38px; height:38px; }
  .intro-play-label{ font-size:12px; letter-spacing:.34em; }
  .intro-skip{ right:16px; bottom:16px; }
}

@media (prefers-reduced-motion: reduce){
  .intro-play-ring{ animation:none; }
  .intro-play{ animation:none; }
  .intro-gate, .intro-video{ transition:none; }
}