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

:root {
  --navy: #142d41;
  --deep-navy: #0D1E2B;
  --medium-blue: #1F4E6B;
  --teal: #2bf0b4;
  --teal-dark: #1ac99b;
  --orange: #F0A32B;
  --off-white: #F9FAFB;
  --muted: #8aa3b5;
  --transition: 0.3s ease;
}

html, body { height: 100%; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  background: radial-gradient(ellipse at 50% 40%, var(--navy) 0%, var(--deep-navy) 70%);
  color: var(--off-white);
  overflow: hidden;
}

#field { position: fixed; inset: 0; width: 100%; height: 100%; }

.vignette {
  position: fixed; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(5, 12, 18, 0.75) 100%);
}

main {
  position: relative; z-index: 2;
  min-height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 2rem 1.5rem;
}

.logo {
  width: min(320px, 65vw); color: var(--off-white);
  filter: drop-shadow(0 0 0 rgba(43, 240, 180, 0));
  transition: filter 0.6s ease;
  animation: riseLogo 1.6s ease backwards, introGlow 4s ease-in-out backwards;
}
.logo:hover { filter: drop-shadow(0 0 28px rgba(43, 240, 180, 0.6)); }
@keyframes introGlow {
  0% { filter: blur(10px) drop-shadow(0 0 0 rgba(43, 240, 180, 0)); }
  35% { filter: blur(0) drop-shadow(0 0 32px rgba(43, 240, 180, 0.7)); }
  100% { filter: blur(0) drop-shadow(0 0 0 rgba(43, 240, 180, 0)); }
}
@keyframes rise { from { opacity: 0; transform: translateY(12px); filter: blur(10px); } }
@keyframes riseLogo { from { opacity: 0; transform: translateY(12px); } }

h1 {
  margin-top: 2.5rem;
  font-size: clamp(2rem, 6vw, 4rem);
  font-weight: 700; line-height: 1.15; letter-spacing: -0.02em;
  animation: rise 1.6s ease 0.8s both;
}
h1 span {
  background: linear-gradient(90deg, var(--teal), var(--orange));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.whisper {
  margin-top: 1.5rem; min-height: 1.8em; line-height: 1.6;
  text-wrap: balance;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  font-weight: 300; letter-spacing: 0.14em; text-transform: uppercase;
  font-size: clamp(0.8rem, 1.8vw, 0.95rem);
  color: var(--muted);
  animation: rise 1.6s ease 1.2s both;
}
.whisper span { display: inline-block; }

.signup-open {
  margin-top: 3rem; cursor: pointer; font: inherit;
  color: var(--off-white);
  border: 1px solid rgba(43, 240, 180, 0.4);
  background: var(--navy);
  padding: 0.85rem 2rem; border-radius: 999px;
  font-size: 0.95rem; letter-spacing: 0.08em;
  transition: all var(--transition);
  animation: rise 1.6s ease 1.6s both;
}
.signup-open:hover, .signup-open:focus-visible {
  background: var(--teal); color: var(--deep-navy);
  box-shadow: 0 0 28px rgba(43, 240, 180, 0.5); outline: none;
}

dialog.takeover {
  position: fixed; inset: 0; width: 100%; height: 100%;
  max-width: none; max-height: none; margin: 0; border: none;
  background: #000; color: var(--off-white);
  align-items: center; justify-content: center; padding: 2rem 1.5rem;
}
dialog.takeover[open] { display: flex; animation: fadeIn 0.9s ease; }
dialog.takeover.closing { animation: fadeOut 0.5s ease forwards; }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes fadeOut { to { opacity: 0; } }
.takeover-inner { width: min(460px, 100%); text-align: center; }
.takeover h2 {
  font-size: clamp(1.8rem, 5vw, 2.75rem); font-weight: 700;
  letter-spacing: -0.02em; line-height: 1.15;
}
.takeover h2 span {
  background: linear-gradient(90deg, var(--teal), var(--orange));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.close {
  position: absolute; top: 1.25rem; right: 1.5rem;
  background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: 2rem; line-height: 1; transition: color var(--transition);
}
.close:hover, .close:focus-visible { color: var(--teal); outline: none; }
.signup { margin-top: 3rem; display: flex; flex-direction: column; gap: 2.5rem; text-align: left; }
.signup input {
  min-width: 0;
  background: transparent; color: var(--off-white);
  border: none; border-bottom: 1px solid rgba(138, 163, 181, 0.5); border-radius: 0;
  padding: 0.6rem 0; font: inherit; font-size: 1.15rem;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.signup input::placeholder { color: var(--muted); }
.signup input:focus { outline: none; border-bottom-color: var(--teal); box-shadow: 0 1px 0 0 var(--teal); }
.signup input:-webkit-autofill {
  -webkit-text-fill-color: var(--off-white);
  transition: background-color 9999s ease-in-out 0s;
}
.signup button {
  margin-top: 1rem; align-self: center;
  color: var(--off-white); cursor: pointer; font: inherit;
  border: 1px solid rgba(43, 240, 180, 0.4);
  background: var(--navy);
  padding: 0.85rem 2rem; border-radius: 999px;
  font-size: 0.95rem; letter-spacing: 0.08em;
  transition: all var(--transition);
}
.signup button:hover, .signup button:focus-visible {
  background: var(--teal); color: var(--deep-navy);
  box-shadow: 0 0 28px rgba(43, 240, 180, 0.5); outline: none;
}
.signup button:disabled { opacity: 0.6; cursor: wait; }
.signup-msg { margin-top: 1rem; min-height: 1.5em; font-size: 0.9rem; color: var(--muted); }
.signup-msg.ok { color: var(--teal); }
.signup-msg.err { color: var(--orange); }
.hp { position: absolute; left: -9999px; }

.lang {
  position: fixed; top: 1.25rem; right: 1.5rem; z-index: 3;
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.8rem; letter-spacing: 0.15em;
  appearance: none; -webkit-appearance: none;
  background: rgba(20, 45, 65, 0.6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='%238aa3b5' stroke-width='1.5'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 0.7rem center;
  border: 1px solid rgba(43, 240, 180, 0.3); border-radius: 999px;
  color: var(--muted); cursor: pointer; padding: 0.4rem 1.9rem 0.4rem 0.9rem;
  transition: color var(--transition), border-color var(--transition);
}
.lang:hover, .lang:focus-visible { color: var(--teal); border-color: var(--teal); outline: none; }
.lang option { background: var(--deep-navy); color: var(--off-white); }

footer {
  position: fixed; bottom: 1.25rem; left: 0; right: 0; z-index: 3;
  text-align: center; font-size: 0.75rem; letter-spacing: 0.15em;
  color: var(--muted);
}

@media (max-width: 600px) { .logo { width: 65vw; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}