/* ═══════════════════════════════════════════════════════════
   GATEWAY SCENE — Experience selector
   ═══════════════════════════════════════════════════════════ */

.gateway-scene {
  position: relative;          /* in normal document flow — scrollable */
  z-index: 2;
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 48px 20px 40px;
  /* No transition: this is a page-level switch, not a subtle animation */
}

.gateway-scene.gw-hidden {
  display: none;               /* fully removed from layout, footer moves up */
}

/* ── Inner container ─────────────────────────────────────── */
.gw-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  max-width: 920px;   /* widened from 680px to fit 3 cards per row */
  width: 100%;
}

/* ── Welcome block ───────────────────────────────────────── */
.gw-welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  animation: gwFadeUp 0.7s ease both;
}

.gw-hello {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--t3);
}

.gw-logo-wrap { margin: 4px 0; }

.gw-logo {
  height: 44px;
  width: auto;
  display: block;
}

.gw-tagline {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--t3);
  opacity: 0.65;
  margin: 0;
}

/* ── "Choose" heading ────────────────────────────────────── */
.gw-choose {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--t2);
  margin: 0;
  animation: gwFadeUp 0.7s 0.1s ease both;
}

.gw-choose::before,
.gw-choose::after {
  content: '·';
  margin: 0 12px;
  color: var(--mp);
  opacity: 0.55;
}

/* ── Cards row ───────────────────────────────────────────── */
.gw-cards {
  display: flex;
  gap: 24px;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
}

/* ── Base card ───────────────────────────────────────────── */
.gw-card {
  position: relative;
  width: 260px;
  min-height: 310px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.09);
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 28px 22px 22px;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease;
  animation: gwCardIn 0.65s ease both;
}

.gw-card:nth-child(2) { animation-delay: 0.13s; }

@keyframes gwFadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes gwCardIn {
  from { opacity: 0; transform: translateY(24px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Compass X card ─────────────────────────────────────── */
.gw-card-compass:hover {
  transform: translateY(-8px);
  border-color: rgba(232,0,138,0.32);
  background: rgba(232,0,138,0.045);
  box-shadow:
    0 28px 72px rgba(232,0,138,0.16),
    0 0 0 1px rgba(232,0,138,0.10);
}

.gw-card-compass:active { transform: translateY(-3px); }

/* ── Pizza card — active, amber hover ────────────────────── */
.gw-card-pizza:hover {
  transform: translateY(-8px);
  border-color: rgba(180, 100, 20, 0.32);
  background: rgba(180, 100, 20, 0.045);
  box-shadow:
    0 28px 72px rgba(180, 100, 20, 0.15),
    0 0 0 1px rgba(180, 100, 20, 0.10);
}

.gw-card-pizza:active { transform: translateY(-3px); }

/* Meze × Avalanche partnership card */
.gw-card-partner { cursor: pointer; }
.gw-card-partner:hover {
  transform: translateY(-8px);
  border-color: rgba(232, 65, 66, 0.36);
  box-shadow: 0 18px 48px rgba(232, 65, 66, 0.16);
}
.gw-card-partner:active { transform: translateY(-3px); }

.partner-vis {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.partner-logo {
  height: 38%;
  width: auto;
  display: block;
}
.partner-meze { filter: drop-shadow(0 0 10px rgba(232, 0, 138, 0.30)); }
.partner-avax { filter: drop-shadow(0 0 10px rgba(232, 65, 66, 0.30)); }
.partner-x {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 700;
  color: var(--ar);
  opacity: 0.85;
  line-height: 1;
}

.gwc-active {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ar);
  font-weight: 700;
  letter-spacing: 0.12em;
}
.gwc-active-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ar);
}

/* ── Capture card — "More to come" ─────────────────────── */
.gw-card-capture {
  opacity: 0.78;
  cursor: default;
  pointer-events: none;
}
.capture-vis {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.capture-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--mp);
  opacity: 0.4;
  animation: captureDotPulse 1.8s ease-in-out infinite;
}
.capture-dot-1 { animation-delay: 0s; }
.capture-dot-2 { animation-delay: 0.3s; }
.capture-dot-3 { animation-delay: 0.6s; }
@keyframes captureDotPulse {
  0%, 100% { opacity: 0.35; transform: scale(0.85); }
  50%       { opacity: 1;    transform: scale(1.15); }
}

.gwc-innovating {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--mp);
  font-weight: 700;
  letter-spacing: 0.12em;
}
.gwc-innovating-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--mp);
  box-shadow: 0 0 0 0 rgba(232, 0, 138, 0.55);
  animation: liveDotPulse 1.6s ease-out infinite;
}

/* When the description stands alone (no title) — give it more presence */
.gwc-desc-solo {
  font-size: 14px;
  color: var(--text);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.005em;
}
[data-theme="day"] .gw-card-partner:hover {
  border-color: rgba(232, 65, 66, 0.30);
  box-shadow: 0 18px 48px rgba(232, 65, 66, 0.12);
}

/* ── Visual container ────────────────────────────────────── */
.gwc-visual {
  width: 130px;
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════
   MINI COMPASS (inside Compass X card)
   ══════════════════════════════════════════════════════════ */
.mini-compass {
  position: relative;
  width: 120px;
  height: 120px;
}

.mc-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  border: 1px solid rgba(232,0,138,0.32);
  animation: mc-spin var(--mc-spd, 12s) linear infinite;
}

.mc-r1 { width: 118px; height: 118px; --mc-spd: 15s; transform: translate(-50%,-50%); }
.mc-r2 { width: 82px;  height: 82px;  --mc-spd: 9s;  transform: translate(-50%,-50%); animation-direction: reverse; border-style: dashed; opacity: 0.55; }
.mc-r3 { width: 50px;  height: 50px;  --mc-spd: 5.5s; transform: translate(-50%,-50%); opacity: 0.8; }

@keyframes mc-spin {
  from { transform: translate(-50%,-50%) rotate(0deg); }
  to   { transform: translate(-50%,-50%) rotate(360deg); }
}

.mc-coin {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
}

.mc-coin img { width: 100%; height: 100%; object-fit: contain; }

/* Orbit technique: positioned at center, rotated outward */
.mc-orbit {
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  transform: rotate(var(--a)) translateY(-55px);
  pointer-events: none;
}

.mc-dot {
  position: absolute;
  top: -3px; left: -3px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--mp);
  box-shadow: 0 0 6px var(--mp), 0 0 14px rgba(232,0,138,0.45);
  animation: mc-dot-pulse 2.2s ease infinite;
}

/* Stagger each dot's pulse phase */
.mc-orbit:nth-child(5)  .mc-dot { animation-delay: 0s;      }
.mc-orbit:nth-child(6)  .mc-dot { animation-delay: 0.275s;  }
.mc-orbit:nth-child(7)  .mc-dot { animation-delay: 0.55s;   }
.mc-orbit:nth-child(8)  .mc-dot { animation-delay: 0.825s;  }
.mc-orbit:nth-child(9)  .mc-dot { animation-delay: 1.1s;    }
.mc-orbit:nth-child(10) .mc-dot { animation-delay: 1.375s;  }
.mc-orbit:nth-child(11) .mc-dot { animation-delay: 1.65s;   }
.mc-orbit:nth-child(12) .mc-dot { animation-delay: 1.925s;  }

@keyframes mc-dot-pulse {
  0%,100% { opacity: 1;   box-shadow: 0 0 6px var(--mp), 0 0 14px rgba(232,0,138,0.45); }
  50%      { opacity: 0.2; box-shadow: 0 0 2px var(--mp); }
}

/* ══════════════════════════════════════════════════════════
   PIZZA VISUAL (inside Pizza Guy card)
   ══════════════════════════════════════════════════════════ */
.pizza-vis {
  position: relative;
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}

.pv-icon {
  width: 80px; height: 80px;
  color: var(--t2);
}

.pv-steam {
  animation: pv-steam-rise 2.4s ease-in-out infinite;
}

@keyframes pv-steam-rise {
  0%,100% { opacity: 0.28; transform: translateY(0); }
  50%      { opacity: 0.55; transform: translateY(-5px); }
}

.pv-glow {
  position: absolute;
  bottom: 4px; left: 50%;
  transform: translateX(-50%);
  width: 60px; height: 18px;
  background: radial-gradient(ellipse, rgba(232,0,138,0.1) 0%, transparent 70%);
}

/* MEZE coin centerpiece — sits steady while the pizza spins around it */
.pizza-meze-center {
  position: absolute;
  width: 28%;
  height: 28%;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  filter: drop-shadow(0 0 8px rgba(232, 0, 138, 0.45));
  pointer-events: none;
}

/* ── Card info section ───────────────────────────────────── */
.gwc-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.gwc-title {
  font-family: var(--font-sans);
  font-size: 19px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.02em;
}

.gwc-desc {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: var(--t3);
  text-transform: uppercase;
}

.gwc-cta {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.32em;
  color: var(--mp);
  text-transform: uppercase;
  margin-top: auto;
  padding-top: 4px;
  opacity: 0.85;
  transition: opacity 0.2s, letter-spacing 0.25s;
}

.gw-card-compass:hover .gwc-cta {
  opacity: 1;
  letter-spacing: 0.48em;
}

.gwc-badge {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--t3);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 4px;
  padding: 3px 9px;
  margin-top: auto;
}

/* ── Compass back button ─────────────────────────────────── */
.compass-back-btn {
  position: absolute;
  top: 70px;
  left: 22px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--t3);
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 0;
  z-index: 10;
  transition: color 0.2s ease;
}

.compass-back-btn:hover { color: var(--mp); }

/* ── Day mode overrides ──────────────────────────────────── */
[data-theme="day"] .gw-card {
  border-color: rgba(28,18,8,0.10);
  background: rgba(255,255,255,0.52);
}

[data-theme="day"] .gw-card-compass:hover {
  border-color: rgba(64, 37, 132,0.36);
  background: rgba(255,255,255,0.72);
  box-shadow: 0 28px 72px rgba(64, 37, 132,0.12), 0 0 0 1px rgba(64, 37, 132,0.12);
}

[data-theme="day"] .gwc-cta      { color: var(--amber); }
[data-theme="day"] .gwc-badge    { border-color: rgba(28,18,8,0.14); background: rgba(28,18,8,0.05); }
[data-theme="day"] .gw-choose::before,
[data-theme="day"] .gw-choose::after { color: var(--amber); }
[data-theme="day"] .gw-card-pizza:hover {
  border-color: rgba(140,80,15,0.38);
  background: rgba(255,255,255,0.72);
  box-shadow: 0 28px 72px rgba(140,80,15,0.12), 0 0 0 1px rgba(140,80,15,0.12);
}

/* ── Mobile ──────────────────────────────────────────────── */
@media (max-width: 560px) {
  .gw-cards   { gap: 16px; }
  .gw-card    { width: 100%; max-width: 300px; min-height: 270px; }
  .gwc-visual { width: 110px; height: 110px; }
  .mini-compass { width: 100px; height: 100px; }
  .mc-r1      { width: 98px;  height: 98px;  }
  .mc-r2      { width: 68px;  height: 68px;  }
  .mc-r3      { width: 40px;  height: 40px;  }
  .mc-orbit   { transform: rotate(var(--a)) translateY(-45px); }
  .compass-back-btn { top: 64px; left: 12px; }
}