/* gate.css
   The start gate extras: the HOLD TO WAKE ring and the headphones line.
   (The simple ENTER button style lives in base.css.) Settings: COUNTDOWN_CONFIG.gateStyle / hold / headphones.
   Loaded by index.html (order matters). */

/* ============================================================
   HEADPHONES LINE (both gate styles)
   ============================================================ */
.lc-gate { flex-direction: column; gap: 34px; }
.lc-headphones {
  display: flex; align-items: center; gap: 10px;
  font: 500 10px/1 "Barlow", system-ui, sans-serif; letter-spacing: 0.32em;
  color: rgba(242, 242, 238, 0.5); pointer-events: none; white-space: nowrap;
}
.lc-headphones svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.lc-gate.is-hidden .lc-headphones { opacity: 0; transition: opacity 120ms ease; }

/* ============================================================
   HOLD TO WAKE — a ring that beats with the heart and fills while held
   --beat (0..1) = heartbeat pulse, --p (0..1) = how full the ring is (set by countdown.js)
   ============================================================ */
.lc-gate { touch-action: none; }                 /* phones: pressing the gate never scrolls / zooms the page */
.lc-gate.is-hold { cursor: pointer; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.lc-gate.is-hold * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.lc-hold {
  position: relative; width: 168px; height: 168px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; outline: none;
  transform: scale(calc(1 + var(--beat, 0) * (0.035 + var(--p, 0) * 0.04)));
  -webkit-tap-highlight-color: transparent;
}
/* soft red / blue glow that breathes with every beat and grows while held */
.lc-hold::before {
  content: ""; position: absolute; inset: -18px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(22, 180, 215, 0.26) 0%, rgba(255, 42, 42, 0.14) 45%, transparent 70%);
  opacity: calc(0.2 + var(--beat, 0) * 0.8 + var(--p, 0) * 0.6);
}
.lc-hold svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.lc-hold-track {
  fill: none; stroke: rgba(255, 255, 255, calc(0.16 + var(--beat, 0) * 0.4)); stroke-width: calc(1px + var(--beat, 0) * 0.8px);
}
.lc-hold-prog {
  fill: none; stroke: url(#lcHoldGrad); stroke-width: 2.4; stroke-linecap: round;
  stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p, 0) * 100);
  opacity: clamp(0, calc(var(--p, 0) * 40), 1);          /* hidden while empty (no dot from the round line cap) */
  filter: drop-shadow(0 0 calc(3px + var(--beat, 0) * 6px) rgba(22, 180, 215, 0.7));
}
.lc-hold-label {
  position: relative; white-space: nowrap; text-align: center;
  font: 500 11px/1.7 "Barlow", system-ui, sans-serif; letter-spacing: 0.34em; padding-left: 0.34em;
  color: rgba(242, 242, 238, calc(0.7 + var(--beat, 0) * 0.3));
}
.lc-hold:focus-visible .lc-hold-track { stroke: rgba(255, 255, 255, 0.6); }

/* the moment it opens: a bright flash of the ring */
.lc-gate.is-woken .lc-hold { animation: lc-wake 420ms ease-out forwards; }
@keyframes lc-wake {
  0%   { filter: brightness(1); }
  30%  { filter: brightness(2.6) drop-shadow(0 0 24px rgba(255, 255, 255, 0.8)); transform: scale(1.08); }
  100% { filter: brightness(1.4); transform: scale(1.18); opacity: 0.6; }
}

@media (max-width: 700px) {
  .lc-hold { width: 150px; height: 150px; }
  .lc-headphones { letter-spacing: 0.22em; font-size: 9px; }
}