/* ============================================================
   The Carne Asada Experience — coming soon page
   ------------------------------------------------------------
   Token system (see README for the full rationale):

     surface   #171310  embers-charcoal   — the page ground
     content   #F3EEE3  masa cream        — primary text, 15.9:1 on surface
     muted     #C7BBAC  warm ash          — secondary text, 9.8:1 on surface
     accent    #FF6B35  brasa ember       — primary action, links, glow, 6.5:1 on surface
     accent-2  #E8A33D  cempasúchil gold  — dividers, eyebrow, hover, 8.6:1 on surface
     ink       #1D1712  near-black        — text set ON the accent button

   The page commits to a single dark, night-grill aesthetic rather than
   switching by system preference — a deliberate brand choice (an upscale
   restaurant teaser, not a utility), so contrast and motion accessibility
   are held to a high bar throughout instead.
   ============================================================ */

:root {
  --surface: #171310;
  --surface-raised: #1F1A15;
  --content: #F3EEE3;
  --muted: #C7BBAC;
  --accent: #FF6B35;
  --accent-2: #E8A33D;
  --ink: #1D1712;
  --border: #35291F;

  --font-display: "Fraunces", ui-serif, Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;

  color-scheme: dark;
}

/* Increased-contrast: push borders and muted text harder */
@media (prefers-contrast: more) {
  :root {
    --muted: #E4DACD;
    --border: #55442F;
  }
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--surface);
  color: var(--content);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
}

/* ---------- language switch ---------- */

.lang-switch {
  position: fixed;
  top: max(var(--space-2), env(safe-area-inset-top));
  right: max(var(--space-2), env(safe-area-inset-right));
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.7rem;
  background: rgba(23, 19, 16, 0.55);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.lang-btn {
  background: none;
  border: none;
  padding: 0.25rem 0.35rem;
  min-height: 0;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
  border-radius: 0.3rem;
  transition: color 0.15s ease;
}

.lang-btn:hover {
  color: var(--content);
}

.lang-btn.is-active {
  color: var(--accent-2);
  font-weight: 600;
  cursor: default;
}

.lang-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.lang-sep {
  color: var(--border);
}

@media (prefers-reduced-motion: reduce) {
  .lang-btn {
    transition: none;
  }
}

@media (prefers-contrast: more) {
  .lang-switch {
    background: var(--surface-raised);
    border-color: var(--content);
  }
}

/* ---------- background scene ---------- */

.scene {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.bg-photos {
  position: absolute;
  inset: 0;
}

.bg-photo {
  position: absolute;
  inset: -5%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  /* A light blur takes the edge off high-frequency detail (grate lines,
     bright flame licks) that would otherwise fight with the text sitting
     on top — subtle enough that the photography still reads clearly,
     paired with the scrim and text-shadow below rather than replacing
     them. inset:-5% keeps the blurred edges safely offscreen. */
  filter: blur(3px) saturate(1.08) contrast(1.04);
  transition: opacity 2.4s ease;
  animation: slow-zoom 22s ease-in-out infinite alternate;
  will-change: opacity, transform;
}

.bg-photo.is-active {
  opacity: 1;
}

@keyframes slow-zoom {
  from { transform: scale(1); }
  to   { transform: scale(1.09); }
}

/* Photos stay sharp and vivid up top; the scrim only takes over toward
   the bottom, where the card sits, so text contrast holds without
   burying the photography. */
.scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(23, 19, 16, 0.12) 0%,
    rgba(23, 19, 16, 0.18) 30%,
    rgba(23, 19, 16, 0.62) 58%,
    rgba(23, 19, 16, 0.88) 75%,
    rgba(23, 19, 16, 0.97) 100%
  );
}

@media (prefers-reduced-motion: reduce) {
  .bg-photo {
    transition: none;
    animation: none;
  }
}

@media (prefers-contrast: more) {
  .scrim {
    background: linear-gradient(
      to bottom,
      rgba(23, 19, 16, 0.35) 0%,
      rgba(23, 19, 16, 0.75) 45%,
      rgba(23, 19, 16, 0.97) 70%
    );
  }
}

/* Forced-colors (Windows High Contrast) replaces our colors with system
   ones but leaves text-shadow alone, where it can read as a smudge
   rather than a contrast aid — drop it and lean on the system palette. */
@media (forced-colors: active) {
  .eyebrow,
  .wordmark,
  .subhead {
    text-shadow: none;
  }
}

.ember-glow {
  position: absolute;
  left: 50%;
  bottom: -35vh;
  width: min(140vw, 1400px);
  height: min(140vw, 1400px);
  transform: translateX(-50%);
  background: radial-gradient(
    closest-side,
    rgba(255, 107, 53, 0.28),
    rgba(255, 107, 53, 0.10) 45%,
    rgba(255, 107, 53, 0) 70%
  );
  animation: glow-breathe 9s ease-in-out infinite;
}

@keyframes glow-breathe {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .ember-glow {
    animation: none;
  }
}

.grain {
  position: absolute;
  inset: -10%;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
}

/* ---------- layout ---------- */

.page {
  position: relative;
  z-index: 1;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Content sits in the lower half, inside the scrim's dark zone, so the
     photo above it stays unobstructed and sharp. */
  justify-content: flex-end;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-3) var(--space-4);
}

.card {
  width: 100%;
  max-width: 34rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin: 0 0 var(--space-3);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-2);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7), 0 2px 10px rgba(0, 0, 0, 0.45);
}

.eyebrow-mark {
  font-size: 0.7em;
  transform: translateY(-0.05em);
}

.wordmark {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.25rem, 5vw + 1rem, 4rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-wrap: balance;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6), 0 4px 28px rgba(0, 0, 0, 0.4);
}

.subhead {
  margin: 0;
  max-width: 30rem;
  color: var(--muted);
  font-size: clamp(1rem, 0.4vw + 0.95rem, 1.125rem);
  line-height: 1.6;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6), 0 2px 14px rgba(0, 0, 0, 0.4);
}

.grate-rule {
  width: 100%;
  max-width: 8rem;
  height: 2px;
  margin: var(--space-4) 0;
  background: linear-gradient(
    90deg,
    transparent,
    var(--accent-2) 20%,
    var(--accent) 50%,
    var(--accent-2) 80%,
    transparent
  );
  opacity: 0.7;
}

/* ---------- signup form ---------- */

.signup {
  width: 100%;
  max-width: 26rem;
}

.signup-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.signup-row {
  display: flex;
  gap: var(--space-1);
}

.signup-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 3rem;
  padding: 0 var(--space-2);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 0.6rem;
  color: var(--content);
  font-family: var(--font-body);
  font-size: 1rem;
}

.signup-input::placeholder {
  color: var(--muted);
  opacity: 0.7;
}

.signup-input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-color: var(--accent);
}

.signup-button {
  flex: 0 0 auto;
  height: 3rem;
  padding: 0 var(--space-3);
  background: var(--accent);
  color: var(--ink);
  border: none;
  border-radius: 0.6rem;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.signup-button:hover {
  background: var(--accent-2);
}

.signup-button:focus-visible {
  outline: 2px solid var(--content);
  outline-offset: 2px;
}

.signup-button:active {
  transform: translateY(1px);
}

@media (prefers-reduced-motion: reduce) {
  .signup-button {
    transition: none;
  }
}

.signup-hint {
  margin: var(--space-1) 0 0;
  font-size: 0.8125rem;
  color: var(--muted);
  opacity: 0.85;
  text-align: left;
}

.signup-status {
  margin: var(--space-2) 0 0;
  min-height: 1.25em;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--accent-2);
  text-align: left;
}

.signup.is-error .signup-input {
  border-color: var(--accent);
}

.signup.is-error .signup-status {
  color: var(--accent);
}

/* narrow phones: stack the input and button */
@media (max-width: 22rem) {
  .signup-row {
    flex-direction: column;
  }
  .signup-button {
    width: 100%;
  }
}

/* ---------- footer ---------- */

.footer {
  position: relative;
  z-index: 1;
  padding-bottom: var(--space-3);
  color: var(--muted);
  font-size: 0.8125rem;
  opacity: 0.7;
}