*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: radial-gradient(ellipse 90% 65% at 50% 38%, #0d0d22 0%, #030308 100%);
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
}

#container { position: fixed; inset: 0; z-index: 1; }

/* ── Wordmark ──────────────────────────────────────────────────────── */
#wordmark {
  position: fixed; top: 66px; left: 0; right: 0;
  text-align: center; pointer-events: none; z-index: 20;
  font-family: 'Cormorant Garamond', serif; font-weight: 300;
  font-size: 32px; letter-spacing: 11px; text-transform: uppercase;
  color: rgba(255,255,255,0.92);
  animation: rise 2s ease 0.3s both;
}
#tagline {
  position: fixed; top: 108px; left: 0; right: 0;
  text-align: center; pointer-events: none; z-index: 20;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-weight: 300;
  font-size: 13px; letter-spacing: 2.5px;
  color: rgba(200,178,138,0.42);
  animation: rise 2s ease 0.8s both;
}

/* ── Phase legend ─────────────────────────────────────────────────── */
#phase-legend {
  position: fixed; left: 30px; top: 50%;
  transform: translateY(-50%);
  z-index: 20; display: block; pointer-events: none;
}
.pl-row {
  display: flex; align-items: center; gap: 9px; margin-bottom: 12px;
  font-family: 'Inter', sans-serif; font-size: 8.5px; font-weight: 300;
  letter-spacing: 3px; text-transform: uppercase; opacity: 0.5;
}
.pl-num {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-size: 13px; font-weight: 300;
  letter-spacing: 1px; min-width: 14px;
}
.pl-row.p1 { color: rgba(72,212,228,0.9); }
.pl-row.p2 { color: rgba(240,174,48,0.9); }
.pl-row.p3 { color: rgba(183,118,255,0.9); }

/* ── Navigation (hidden, kept for future use) ─────────────────────── */
#nav { display: none; }
.nav-btn {
  background: transparent; border: 1px solid rgba(180,200,230,0.14);
  color: rgba(180,200,230,0.38); font-family: 'Inter', sans-serif;
  font-size: 9px; font-weight: 300; letter-spacing: 4px;
  text-transform: uppercase; padding: 8px 22px;
  cursor: pointer; border-radius: 2px; transition: all 0.4s ease;
}
.nav-btn:hover  { border-color: rgba(200,178,128,0.38); color: rgba(200,178,128,0.72); }
.nav-btn.active { border-color: rgba(200,167,108,0.52); color: rgba(200,167,108,0.92); background: rgba(200,167,108,0.04); }

/* ── Bottom bar (CTA text) ────────────────────────────────────────── */
#bottom-bar {
  position: fixed; bottom: 24px; left: 0; right: 0;
  z-index: 20; text-align: center;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-size: 13px; letter-spacing: 1.2px;
  color: rgba(200,178,138,0.38);
  animation: rise 2s ease 1.7s both;
}
#bottom-bar a { color: rgba(200,167,108,0.55); text-decoration: none; transition: color 0.4s; }
#bottom-bar a:hover { color: rgba(200,167,108,0.92); }

/* ── Hint ─────────────────────────────────────────────────────────── */
#hint {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 20;
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: 13px; letter-spacing: 2px;
  color: rgba(180,200,230,0.22);
  pointer-events: none; transition: opacity 1s ease; white-space: nowrap;
}

/* ── Reset button ─────────────────────────────────────────────────── */
#reset-btn {
  position: fixed; bottom: 96px; left: 50%;
  transform: translateX(-50%);
  z-index: 20; display: none; /* shown as flex when focused */
  width: 80px; height: 80px;
  align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid rgba(200,167,108,0.3);
  color: rgba(200,167,108,0.6);
  cursor: pointer; border-radius: 4px;
  transition: all 0.3s ease;
}
#reset-btn:hover { border-color: rgba(200,167,108,0.75); color: rgba(200,167,108,0.95); }

/* ── Animations ───────────────────────────────────────────────────── */
@keyframes rise {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Identity cards ───────────────────────────────────────────────── */
.card {
  width: 124px; height: 164px;
  position: relative; cursor: pointer;
  border-radius: 3px; overflow: hidden;
  pointer-events: auto;
  transition: box-shadow 0.5s ease, border-color 0.5s ease;
  user-select: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}
.c-phase {
  position: absolute; top: 12px; left: 13px;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-weight: 300;
  font-size: 10px; letter-spacing: 1px;
  transition: opacity 0.25s ease;
}
.c-symbol {
  position: absolute; top: 28px; left: 0; right: 0;
  text-align: center; font-family: 'Inter', sans-serif;
  font-size: 50px; font-weight: 500;
  letter-spacing: -1px; line-height: 1;
  transition: opacity 0.25s ease;
}
.c-latin {
  position: absolute; bottom: 30px; left: 0; right: 0;
  text-align: center; font-family: 'Cormorant Garamond', serif;
  font-size: 12px; font-weight: 400; letter-spacing: 0.5px;
  transition: opacity 0.25s ease;
}
.c-english {
  position: absolute; bottom: 12px; left: 0; right: 0;
  text-align: center; font-family: 'Inter', sans-serif;
  font-size: 7.5px; font-weight: 300;
  letter-spacing: 3px; text-transform: uppercase;
  transition: opacity 0.25s ease;
}
.c-question {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 14px 12px;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-weight: 300;
  font-size: 11px; line-height: 1.68;
  text-align: center; opacity: 0;
  transition: opacity 0.45s ease; border-radius: 3px;
}
.card:hover .c-question { opacity: 1; }
.card:hover .c-symbol,
.card:hover .c-latin,
.card:hover .c-english,
.card:hover .c-phase    { opacity: 0; }

/* Focused card */
.card.focused .c-question { opacity: 1; font-size: 13px; line-height: 1.6; }
.card.focused .c-symbol,
.card.focused .c-latin,
.card.focused .c-english,
.card.focused .c-phase   { opacity: 0; }

/* ── Phase 1 — Teal ───────────────────────────────────────────────── */
.p1 { background: rgba(0,28,46,0.9); border: 1px solid rgba(0,162,188,0.18); box-shadow: 0 0 16px rgba(0,162,188,0.08); }
.p1:hover { border-color: rgba(0,200,222,0.6); box-shadow: 0 0 30px rgba(0,200,222,0.28); }
.p1 .c-symbol   { color: rgba(68,212,228,0.88); }
.p1 .c-phase    { color: rgba(68,212,228,0.38); }
.p1 .c-latin    { color: rgba(110,208,222,0.58); }
.p1 .c-english  { color: rgba(110,208,222,0.38); }
.p1 .c-question { background: rgba(0,14,28,0.97); color: rgba(92,212,228,0.9); }

/* ── Phase 2 — Amber ──────────────────────────────────────────────── */
.p2 { background: rgba(38,16,0,0.9); border: 1px solid rgba(188,108,0,0.18); box-shadow: 0 0 16px rgba(188,108,0,0.08); }
.p2:hover { border-color: rgba(220,142,16,0.6); box-shadow: 0 0 30px rgba(220,142,16,0.28); }
.p2 .c-symbol   { color: rgba(240,174,48,0.88); }
.p2 .c-phase    { color: rgba(240,174,48,0.38); }
.p2 .c-latin    { color: rgba(234,166,60,0.58); }
.p2 .c-english  { color: rgba(234,166,60,0.38); }
.p2 .c-question { background: rgba(24,8,0,0.97); color: rgba(240,174,52,0.9); }

/* ── Phase 3 — Violet ─────────────────────────────────────────────── */
.p3 { background: rgba(16,0,38,0.9); border: 1px solid rgba(136,66,208,0.18); box-shadow: 0 0 16px rgba(136,66,208,0.08); }
.p3:hover { border-color: rgba(164,94,240,0.6); box-shadow: 0 0 30px rgba(164,94,240,0.28); }
.p3 .c-symbol   { color: rgba(183,118,255,0.88); }
.p3 .c-phase    { color: rgba(183,118,255,0.38); }
.p3 .c-latin    { color: rgba(178,114,252,0.58); }
.p3 .c-english  { color: rgba(178,114,252,0.38); }
.p3 .c-question { background: rgba(10,0,24,0.97); color: rgba(183,118,255,0.9); }

/* ── Phase 4 — Crimson (Waitlist) ─────────────────────────────────── */
.p4 { background: rgba(28,4,8,0.9); border: 1px solid rgba(155,28,46,0.22); box-shadow: 0 0 16px rgba(155,28,46,0.1); }
.p4:hover { border-color: rgba(185,48,68,0.65); box-shadow: 0 0 30px rgba(155,28,46,0.32); }
.p4 .c-symbol   { color: rgba(230,80,100,0.88); }
.p4 .c-phase    { color: rgba(200,60,80,0.38); }
.p4 .c-latin    { color: rgba(220,90,110,0.6); }
.p4 .c-english  { color: rgba(210,70,90,0.38); }
.p4 .c-question { background: rgba(20,4,8,0.97); color: rgba(235,110,130,0.95); }

/* ── Waitlist form overlay ────────────────────────────────────────── */
#wl-backdrop {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(0,0,0,0); pointer-events: none;
  transition: background 0.45s ease; cursor: pointer;
}
#wl-backdrop.active {
  background: rgba(0,0,0,0.72); pointer-events: auto;
}

#wl-card {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  z-index: 50; width: 320px;
  background: rgba(20,4,8,0.98);
  border: 1px solid rgba(155,28,46,0.55);
  box-shadow: 0 0 80px rgba(155,28,46,0.28), 0 20px 60px rgba(0,0,0,0.6);
  border-radius: 4px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16,1,0.3,1);
}
#wl-card.active {
  opacity: 1; transform: translate(-50%,-50%) scale(1); pointer-events: auto;
}
#wl-card.flipping {
  animation: wlFlip 1.1s ease forwards;
  pointer-events: none;
}
@keyframes wlFlip {
  0%   { transform: translate(-50%,-50%) scale(1)   rotateY(0deg)   rotateZ(0deg);   opacity: 1; }
  40%  { transform: translate(-50%,-50%) scale(1)   rotateY(180deg) rotateZ(0deg);   opacity: 1; }
  70%  { transform: translate(-50%,-50%) scale(0.9) rotateY(180deg) rotateZ(270deg); opacity: 0.7; }
  100% { transform: translate(-50%,-50%) scale(0.1) rotateY(180deg) rotateZ(720deg); opacity: 0; }
}

#wl-close {
  position: absolute; top: 12px; right: 14px;
  background: none; border: none;
  color: rgba(230,80,100,0.4); font-size: 18px;
  cursor: pointer; transition: color 0.2s; line-height: 1;
}
#wl-close:hover { color: rgba(230,80,100,0.85); }

.wl-inner { padding: 32px 28px 28px; display: flex; flex-direction: column; gap: 16px; }
.wl-symbol {
  text-align: center; font-family: 'Inter', sans-serif;
  font-size: 44px; font-weight: 500; letter-spacing: -1px;
  color: rgba(230,80,100,0.12); line-height: 1;
}
.wl-title {
  text-align: center; margin-top: -10px;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-weight: 300;
  font-size: 18px; letter-spacing: 1px;
  color: rgba(235,110,130,0.85);
}
.wl-fields { display: flex; flex-direction: column; gap: 9px; }
.wl-fields input,
.wl-fields textarea {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(155,28,46,0.3);
  border-radius: 2px; color: rgba(255,255,255,0.78);
  font-family: 'Inter', sans-serif; font-size: 11px;
  font-weight: 300; letter-spacing: 0.8px;
  padding: 9px 12px; outline: none; width: 100%;
  transition: border-color 0.3s;
}
.wl-fields input:focus,
.wl-fields textarea:focus { border-color: rgba(185,48,68,0.65); }
.wl-fields input::placeholder,
.wl-fields textarea::placeholder { color: rgba(255,255,255,0.2); }
.wl-fields textarea { resize: none; font-size: 10.5px; line-height: 1.6; }
#wl-error {
  font-family: 'Inter', sans-serif; font-size: 10px;
  font-weight: 300; color: rgba(255,110,110,0.85);
  letter-spacing: 0.5px; min-height: 14px;
}
#wl-submit {
  background: rgba(155,28,46,0.22);
  border: 1px solid rgba(185,48,68,0.52);
  color: rgba(235,110,130,0.9);
  font-family: 'Inter', sans-serif; font-size: 9px;
  font-weight: 400; letter-spacing: 4px; text-transform: uppercase;
  padding: 11px; cursor: pointer; border-radius: 2px;
  transition: all 0.3s; margin-top: 4px;
}
#wl-submit:hover { background: rgba(155,28,46,0.45); border-color: rgba(185,48,68,0.82); }
#wl-submit:disabled { opacity: 0.4; cursor: not-allowed; }