/* gate.css — gate page (index.html) only. Design doc: §8.3, §12.2.
   Colour/font/z-index values live in tokens.css; none belong here.
   The gate loads no other stylesheet, so the gateShake keyframe (§12.4)
   and the Open Invite button recipe (§10.1, §6.5) are repeated here
   on purpose rather than shared from animations.css/components.css. */

/* ---- Page ---- */

body.gate {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

/* Grain overlay (§3.5 technique, verbatim data URI) */
body.gate::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: 0.045;
  background-size: 220px 220px;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23g)' opacity='1'/%3E%3C/svg%3E");
}

/* ---- Stage ---- */

.gate__stage {
  max-width: 24rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}

.gate__om {
  font-family: var(--font-devanagari);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  line-height: 1.2;
  color: var(--color-green-accent);
  opacity: 0.75;
}

.gate__namaste {
  font-family: var(--font-display);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(1.2rem, 3.8vw, 1.7rem);
  color: var(--color-green-accent);
}

.gate__kicker {
  font-family: var(--font-cinzel);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-size: clamp(0.58rem, 1.9vw, 0.7rem);
  color: var(--color-green-accent);
  margin-bottom: 28px;
}

.gate__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.2rem, 8vw, 4rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--color-name-text);
}

/* The "&" — on its own line between the stacked names (like the cover's ❦),
   styled with the footer recipe (§10.11): display italic, 0.55em, green */
.gate__amp {
  display: block;
  font-style: italic;
  font-size: 0.55em;
  color: var(--color-green-accent);
  margin: 0.15em 0;
}

/* ---- Form ---- */

.gate__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 40px;
  width: 100%;
}

.gate__label {
  color: var(--color-muted);
  font-size: 0.95rem;
}

.gate__input {
  width: 100%;
  background: transparent;
  border: 1px solid var(--color-border-md);
  color: var(--color-cream);
  text-align: center;
  padding: 12px 16px;
  letter-spacing: 0.2em;
}

.gate__input::placeholder {
  color: var(--color-muted);
}

.gate__input:focus-visible {
  outline: 1px solid var(--color-line-md);
  outline-offset: 2px;
}

/* Open Invite button recipe (§10.1) with the shimmer sweep (§6.5). The gate
   markup has no shine span, so the sweep rides on a pseudo-element. */
.gate__submit {
  position: relative;
  overflow: hidden;
  padding: 16px 40px;
  border: 1px solid var(--color-border-md);
  background: transparent;
  cursor: pointer;
  font-family: var(--font-cinzel);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.4em;
  font-size: clamp(0.62rem, 2.4vw, 0.72rem);
  color: var(--color-green-light);
}

.gate__submit:hover {
  border-color: var(--color-line-md);
}

.gate__submit::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%) skewX(-12deg);
  background: linear-gradient(105deg, transparent 30%, var(--glow-g-20) 50%, transparent 70%);
  transition: transform 0.7s ease-out;
  pointer-events: none;
}

.gate__submit:hover::after {
  transform: translateX(100%) skewX(-12deg);
}

.gate__submit:disabled {
  opacity: 0.7;
  cursor: default;
}

/* ---- Error ---- */

.gate__error {
  margin-top: 16px;
  color: var(--color-error);
}

.gate__error--shake {
  animation: gateShake 300ms ease-in-out;
}

@keyframes gateShake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-4px); }
  75%      { transform: translateX(4px); }
}

@media (prefers-reduced-motion: reduce) {
  .gate__error--shake { animation: none; }
  .gate__submit::after { transition: none; }
}