/* ============================================================
   gate.css
   The entry screen. Two elements only: the title and a small
   call to action. Clicking fires an impulse through the particle
   field (js/particles.js -> burst) while the gate blurs away.

   The background is a vignette rather than a flat fill, so the
   particle field stays visible around the edges.
   ============================================================ */

.gate{
  position:fixed;
  inset:0;
  z-index:var(--z-gate);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:100%;
  padding:2rem;
  text-align:center;
  background:radial-gradient(
    circle at 50% 48%,
    rgba(8,9,10,.52) 0%,
    rgba(8,9,10,.88) 58%,
    rgba(8,9,10,.96) 100%
  );
  transition:
    opacity var(--dur-slow) var(--ease),
    transform var(--dur-slow) var(--ease),
    filter var(--dur-slow) var(--ease);
}

/* --- title --- */
.gate__title{
  font-size:clamp(2.5rem,10.5vw,4.9rem);
  font-weight:600;
  letter-spacing:-.045em;
  line-height:1.1;
  padding-bottom:.08em;      /* descender clearance */
  perspective:640px;
}

/* One span per character, injected by js/gate.js.
   Each letter starts tiny and blurred, then punches out to full size
   with a slight overshoot, cascaded by --c. */
.gate__title .ch{
  display:inline-block;
  opacity:0;
  transform:scale(.18);
  filter:blur(16px);
  transform-origin:50% 55%;
}

.gate__title .ch--space{ width:.28em }

@media (prefers-reduced-motion: no-preference){
  .gate__title .ch{
    animation:char-pop 1.05s cubic-bezier(.2,1.42,.36,1) forwards;
    animation-delay:calc(var(--c) * 62ms + 180ms);
  }
}
@media (prefers-reduced-motion: reduce){
  .gate__title .ch{ opacity:1; transform:none; filter:none }
}

@keyframes char-pop{
  0%  { opacity:0; transform:scale(.18); filter:blur(16px) }
  55% { opacity:1 }
  100%{ opacity:1; transform:scale(1);   filter:blur(0) }
}

/* --- call to action --- */
.gate__cta{
  margin-top:1.6rem;
  padding-bottom:.45rem;
  font-size:.76rem;
  letter-spacing:.24em;
  text-transform:lowercase;
  border-bottom:1px solid var(--line);
  opacity:0;

  /* a light sweep travels across the glyphs, monochrome only */
  color:transparent;
  background:linear-gradient(
    100deg,
    rgba(255,255,255,.32) 18%,
    rgba(255,255,255,1)   46%,
    rgba(255,255,255,.32) 74%
  );
  background-size:240% 100%;
  -webkit-background-clip:text;
  background-clip:text;
}

@media (prefers-reduced-motion: no-preference){
  .gate__cta{
    animation:
      cta-in .85s var(--ease) 820ms forwards,
      sheen 3.8s linear 1600ms infinite;
  }
}
@media (prefers-reduced-motion: reduce){
  .gate__cta{ opacity:1; color:var(--text-dim); background:none }
}

@keyframes cta-in{
  from{ opacity:0; transform:translateY(10px) }
  to  { opacity:1; transform:none }
}

@keyframes sheen{
  from{ background-position:120% 0 }
  to  { background-position:-120% 0 }
}

.gate:hover .gate__cta{ border-color:var(--line-strong) }

/* --- exit --- */
.gate.is-open{
  opacity:0;
  transform:scale(1.07);
  filter:blur(14px);
  pointer-events:none;
}