/* gate.css — press and hold the seal to open.
 *
 * js/gate.js fills the sindoor ring while the seal is held (1.1 s), drains it if the
 * finger lifts early, and on completion adds .is-open then .is-leaving. The gate is
 * exactly the column's size — nothing here is ever larger than the frame.
 */

.gate {
  position: fixed;
  z-index: 40;
  top: 0;
  bottom: 0;
  left: 50%;
  width: var(--col);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  padding: 0 var(--pad);
  text-align: center;
  background:
    url("../assets/img/paper-grain.png") repeat,
    var(--paper);
  transition: opacity 800ms var(--ease-out);
}

.gate.is-leaving {
  opacity: 0;
  pointer-events: none;
}

.gate[hidden] {
  display: none;
}

.gate__invocation {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 34px);
  left: 0;
  right: 0;
  font: 500 15px/1.3 var(--font-deva);
  letter-spacing: 0.04em;
  color: var(--gold);
}

.gate__seal {
  position: relative;
  width: 204px;
  height: 204px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 100%);
  cursor: pointer;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  transition: transform 320ms var(--ease-out);
}

.gate__seal.is-holding {
  transform: scale(0.96);
}

.gate.is-open .gate__seal {
  transform: scale(1.08);
  transition-duration: 700ms;
}

.gate__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: rotate(-90deg);
}

.gate__ring-track {
  fill: none;
  stroke: var(--rule);
  stroke-width: 1.2;
}

.gate__ring-fill {
  fill: none;
  stroke: var(--sindoor);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-dasharray: 603.19;
  stroke-dashoffset: 603.19;
}

.gate__art {
  position: absolute;
  left: 50%;
  top: 50%;
  width: auto;
  height: 136px;
  transform: translate(-50%, -52%);
  pointer-events: none;
}

.gate__names {
  font: italic 400 34px/1.1 var(--font-display);
  font-variation-settings: "opsz" 72;
}

.gate__hint {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 600 11px/1 var(--font-text);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* a quick tap instead of a hold: the hint says so */
.gate__hint.is-nudge {
  color: var(--sindoor);
  animation: hint-nudge 520ms var(--ease-out);
}

@keyframes hint-nudge {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-6px); }
  45%      { transform: translateX(5px); }
  70%      { transform: translateX(-3px); }
}

.gate__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sindoor);
  animation: dot-pulse 1.6s var(--ease-in-out) infinite;
}

@keyframes dot-pulse {
  0%, 100% { transform: scale(0.7); opacity: 0.45; }
  50%      { transform: scale(1.15); opacity: 1; }
}

.gate.is-open .gate__names,
.gate.is-open .gate__hint,
.gate.is-open .gate__invocation {
  opacity: 0;
  transition: opacity 400ms var(--ease-out);
}