/* ============================================================
   WHEN TO LOOK — Main Stylesheet
   Design: Deep indigo night sky, warm gold accents, nebula glow
   ============================================================ */

/* ---------- 1. Custom Properties + Reset ---------- */
:root {
  --navy:   #0B0F1A;
  --navy2:  #131827;
  --gold:   #D4A853;
  --gold-dim: #a07a30;
  --text:   #E8E6E1;
  --muted:  #8892a4;
  --card-bg: rgba(255,255,255,0.04);
  --card-border: rgba(255,255,255,0.09);
  --font-serif: 'Instrument Serif', Georgia, serif;
  --font-sans:  'DM Sans', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--navy);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ---------- 2. Star Field ---------- */
.stars-layer,
.stars-large,
.stars-micro {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none;
}

/* .stars-layer — small + medium stars via pseudo-elements */
.stars-layer::before,
.stars-layer::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  border-radius: 50%;
}

/* Small stars (1px) — dense layer */
.stars-layer::before {
  background: transparent;
  box-shadow:
    42px 18px rgba(255,255,255,0.7),
    87px 143px rgba(255,255,255,0.5),
    134px 67px rgba(255,255,255,0.8),
    201px 234px rgba(255,255,255,0.4),
    267px 89px rgba(255,255,255,0.7),
    312px 312px rgba(255,255,255,0.6),
    389px 178px rgba(255,255,255,0.5),
    445px 56px rgba(255,255,255,0.8),
    498px 290px rgba(255,255,255,0.4),
    567px 134px rgba(255,255,255,0.7),
    623px 401px rgba(255,255,255,0.5),
    689px 223px rgba(255,255,255,0.6),
    734px 345px rgba(255,255,255,0.8),
    801px 78px rgba(255,255,255,0.4),
    867px 456px rgba(255,255,255,0.7),
    923px 189px rgba(255,255,255,0.5),
    978px 523px rgba(255,255,255,0.6),
    1045px 267px rgba(255,255,255,0.8),
    1112px 389px rgba(255,255,255,0.4),
    1167px 112px rgba(255,255,255,0.7),
    1223px 478px rgba(255,255,255,0.5),
    23px 456px rgba(255,255,255,0.6),
    156px 567px rgba(255,255,255,0.8),
    289px 623px rgba(255,255,255,0.4),
    423px 534px rgba(255,255,255,0.7),
    556px 689px rgba(255,255,255,0.5),
    678px 578px rgba(255,255,255,0.6),
    789px 712px rgba(255,255,255,0.8),
    901px 634px rgba(255,255,255,0.4),
    1034px 723px rgba(255,255,255,0.7),
    1145px 589px rgba(255,255,255,0.5),
    1256px 667px rgba(255,255,255,0.6),
    67px 734px rgba(255,255,255,0.8),
    198px 812px rgba(255,255,255,0.4),
    334px 756px rgba(255,255,255,0.7),
    467px 889px rgba(255,255,255,0.5),
    589px 823px rgba(255,255,255,0.6),
    712px 901px rgba(255,255,255,0.8),
    845px 845px rgba(255,255,255,0.4),
    978px 934px rgba(255,255,255,0.7),
    1089px 867px rgba(255,255,255,0.5),
    1200px 956px rgba(255,255,255,0.6),
    145px 323px rgba(255,255,255,0.7),
    278px 167px rgba(255,255,255,0.5),
    512px 445px rgba(255,255,255,0.8),
    645px 278px rgba(255,255,255,0.4),
    778px 512px rgba(255,255,255,0.7);
  animation: twinkle 6s ease-in-out infinite alternate;
}

/* Medium stars (2px) — sparser */
.stars-layer::after {
  background: transparent;
  width: 2px;
  height: 2px;
  box-shadow:
    78px 234px rgba(255,255,255,0.8),
    234px 89px rgba(255,255,255,0.6),
    456px 312px rgba(255,255,255,0.9),
    623px 167px rgba(255,255,255,0.7),
    789px 445px rgba(255,255,255,0.8),
    945px 234px rgba(255,255,255,0.6),
    1089px 567px rgba(255,255,255,0.9),
    167px 623px rgba(255,255,255,0.7),
    345px 789px rgba(255,255,255,0.8),
    512px 678px rgba(255,255,255,0.6),
    678px 856px rgba(255,255,255,0.9),
    856px 712px rgba(255,255,255,0.7),
    1023px 878px rgba(255,255,255,0.8),
    312px 456px rgba(255,255,255,0.6),
    867px 123px rgba(255,255,255,0.9),
    1156px 345px rgba(255,255,255,0.7);
  animation: twinkle 8s ease-in-out infinite alternate;
  animation-delay: 2s;
}

/* Large stars (3px) — separate element */
.stars-large {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: transparent;
  box-shadow:
    189px 156px rgba(255,255,255,0.9),
    534px 89px rgba(255,255,255,0.85),
    878px 267px rgba(255,255,255,0.9),
    1134px 445px rgba(255,255,255,0.85),
    267px 534px rgba(255,255,255,0.9),
    712px 623px rgba(255,255,255,0.85),
    1023px 712px rgba(255,255,255,0.9),
    445px 867px rgba(255,255,255,0.85);
  animation: twinkle 10s ease-in-out infinite alternate;
  animation-delay: 1s;
}

/* Micro stars (1px) — dense fill layer */
.stars-micro {
  width: 1px;
  height: 1px;
  border-radius: 50%;
  background: transparent;
  box-shadow:
    19px 87px rgba(255,255,255,0.35),
    53px 312px rgba(255,255,255,0.28),
    91px 501px rgba(255,255,255,0.32),
    127px 44px rgba(255,255,255,0.25),
    163px 688px rgba(255,255,255,0.3),
    205px 403px rgba(255,255,255,0.27),
    241px 755px rgba(255,255,255,0.33),
    277px 201px rgba(255,255,255,0.29),
    313px 910px rgba(255,255,255,0.26),
    357px 130px rgba(255,255,255,0.31),
    401px 647px rgba(255,255,255,0.28),
    437px 362px rgba(255,255,255,0.34),
    481px 819px rgba(255,255,255,0.27),
    519px 73px rgba(255,255,255,0.3),
    563px 541px rgba(255,255,255,0.25),
    607px 256px rgba(255,255,255,0.32),
    641px 978px rgba(255,255,255,0.29),
    683px 430px rgba(255,255,255,0.26),
    727px 147px rgba(255,255,255,0.33),
    763px 702px rgba(255,255,255,0.28),
    809px 321px rgba(255,255,255,0.3),
    851px 865px rgba(255,255,255,0.27),
    893px 497px rgba(255,255,255,0.31),
    937px 62px rgba(255,255,255,0.25),
    971px 783px rgba(255,255,255,0.34),
    1013px 228px rgba(255,255,255,0.28),
    1057px 594px rgba(255,255,255,0.3),
    1099px 411px rgba(255,255,255,0.26),
    1141px 837px rgba(255,255,255,0.32),
    1183px 155px rgba(255,255,255,0.29),
    37px 934px rgba(255,255,255,0.27),
    79px 617px rgba(255,255,255,0.31),
    113px 268px rgba(255,255,255,0.25),
    149px 743px rgba(255,255,255,0.33),
    193px 51px rgba(255,255,255,0.28),
    229px 876px rgba(255,255,255,0.3),
    271px 476px rgba(255,255,255,0.26),
    307px 331px rgba(255,255,255,0.32),
    353px 699px rgba(255,255,255,0.29),
    397px 118px rgba(255,255,255,0.27),
    443px 554px rgba(255,255,255,0.31),
    487px 943px rgba(255,255,255,0.25),
    533px 388px rgba(255,255,255,0.34),
    577px 805px rgba(255,255,255,0.28),
    621px 193px rgba(255,255,255,0.3),
    667px 661px rgba(255,255,255,0.26),
    711px 27px rgba(255,255,255,0.32),
    757px 482px rgba(255,255,255,0.29),
    803px 737px rgba(255,255,255,0.27),
    847px 109px rgba(255,255,255,0.31),
    889px 573px rgba(255,255,255,0.25),
    933px 348px rgba(255,255,255,0.33),
    979px 917px rgba(255,255,255,0.28),
    1023px 462px rgba(255,255,255,0.3),
    1067px 83px rgba(255,255,255,0.26),
    1109px 629px rgba(255,255,255,0.32),
    1151px 294px rgba(255,255,255,0.29),
    1193px 751px rgba(255,255,255,0.27),
    1237px 38px rgba(255,255,255,0.31),
    1261px 519px rgba(255,255,255,0.25);
  animation: twinkle 12s ease-in-out infinite alternate;
  animation-delay: 3s;
}

@keyframes twinkle {
  0%   { opacity: 0.6; }
  30%  { opacity: 1; }
  60%  { opacity: 0.3; }
  100% { opacity: 0.8; }
}

/* ---------- 3. Nebula Glow ---------- */
.nebula {
  position: fixed;
  top: -20vh; left: 50%;
  transform: translateX(-50%);
  width: 900px; height: 700px;
  z-index: 0; pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
    rgba(45, 212, 191, 0.07) 0%,
    rgba(99, 62, 193, 0.06) 40%,
    transparent 70%
  );
  animation: nebula-pulse 10s ease-in-out infinite alternate;
  filter: blur(60px);
}

@keyframes nebula-pulse {
  from { opacity: 0.6; transform: translateX(-50%) scale(1); }
  to   { opacity: 1;   transform: translateX(-50%) scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  .nebula { animation: none; }
  .stars-layer, .stars-large, .stars-micro { animation: none; }
}

/* ---------- 4. Layout ---------- */
.container { max-width: 860px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; }
section { position: relative; z-index: 1; }

/* ---------- 5. Hero Section ---------- */
#hero {
  min-height: 100vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: 80px 24px 60px;
  position: relative; z-index: 1;
}

.hero-eyebrow {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold); font-weight: 600; margin-bottom: 20px; display: block;
}

.hero-h1 {
  font-family: var(--font-serif);
  font-size: clamp(3rem, 8vw, 5.5rem);
  font-weight: 400; line-height: 1.1;
  color: var(--text); margin-bottom: 24px;
}

.hero-h1 em { font-style: italic; color: var(--gold); }

.hero-sub {
  font-size: 1.125rem; color: var(--muted);
  max-width: 500px; line-height: 1.7; margin-bottom: 40px;
}

.hero-form {
  display: flex; gap: 12px;
  max-width: 460px; width: 100%;
}

.hero-form input[type="email"] {
  flex: 1; padding: 14px 18px;
  background: rgba(255,255,255,0.07);
  border: 1px solid var(--card-border);
  border-radius: 8px; color: var(--text);
  font-size: 1rem; font-family: var(--font-sans);
  outline: none; transition: border-color 0.2s;
}

.hero-form input[type="email"]::placeholder { color: var(--muted); }
.hero-form input[type="email"]:focus { border-color: var(--gold); }

.hero-form button {
  padding: 14px 24px; background: var(--gold);
  color: var(--navy); font-weight: 700; font-size: 0.95rem;
  border: none; border-radius: 8px; cursor: pointer;
  white-space: nowrap; transition: background 0.2s, transform 0.1s;
}

.hero-form button:hover { background: #e0b55a; }
.hero-form button:active { transform: scale(0.98); }

.hero-error {
  font-size: 0.85rem; color: #f87171; margin-top: 8px; display: none;
}

@media (max-width: 520px) {
  .hero-form { flex-direction: column; }
}

/* ---------- 6. Confirmed Banner ---------- */
#confirmed-banner {
  position: fixed; top: 0; left: 0; right: 0;
  background: #065f46; color: #d1fae5;
  text-align: center; padding: 14px 24px;
  font-size: 0.9rem; z-index: 100;
  border-bottom: 1px solid #059669;
}

/* ---------- 7. How It Works ---------- */
#how-it-works { padding: 100px 0; }

#how-it-works h2 {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 5vw, 3rem);
  text-align: center; margin-bottom: 12px;
}

.section-sub {
  text-align: center; color: var(--muted); margin-bottom: 56px;
}

.steps {
  display: flex; align-items: flex-start; gap: 0;
}

.step {
  flex: 1;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px; padding: 32px 28px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.step-number {
  width: 36px; height: 36px;
  background: var(--gold); color: var(--navy);
  border-radius: 50%; font-weight: 700; font-size: 0.9rem;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}

.step h3 { font-size: 1.05rem; font-weight: 600; margin-bottom: 8px; }
.step p  { font-size: 0.9rem; color: var(--muted); line-height: 1.6; }

.step-connector {
  color: var(--gold); font-size: 1.4rem;
  padding: 0 16px; margin-top: 48px; flex-shrink: 0;
}

@media (max-width: 700px) {
  .steps { flex-direction: column; }
  .step-connector { transform: rotate(90deg); margin: 4px auto; }
}

/* ---------- 8. Email Preview ---------- */
#email-preview { padding: 80px 0 100px; text-align: center; }

#email-preview h2 {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 12px;
}

.email-shell {
  max-width: 560px; margin: 48px auto 0;
  border-radius: 12px; overflow: hidden;
  border: 1px solid var(--card-border);
  box-shadow: 0 24px 80px rgba(0,0,0,0.5);
  text-align: left;
}

.email-chrome {
  background: #1e2330; padding: 12px 18px;
  border-bottom: 1px solid var(--card-border);
  font-size: 12px; color: var(--muted);
}

.email-chrome strong { color: var(--text); }
.email-body { background: #f6f7f9; }

/* ---------- 9. Footer ---------- */
footer {
  border-top: 1px solid var(--card-border);
  padding: 32px 24px; text-align: center;
  color: var(--muted); font-size: 0.85rem;
  position: relative; z-index: 1;
}

footer a { color: var(--gold); text-decoration: none; }

/* ---------- 10. Setup Page ---------- */
.setup-card {
  max-width: 600px; margin: 80px auto 60px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 16px; padding: 48px 40px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: relative; z-index: 1;
}

.setup-card h1 {
  font-family: var(--font-serif);
  font-size: 2rem; margin-bottom: 8px;
}

.setup-card > p {
  color: var(--muted); margin-bottom: 0;
}

.form-label-heading {
  display: block;
  font-size: 0.8rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--gold);
  font-weight: 600; margin: 32px 0 16px;
}

.checkbox-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px; margin-bottom: 32px;
}

.checkbox-item {
  display: flex; align-items: flex-start;
  gap: 10px; cursor: pointer;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--card-border);
  border-radius: 8px; padding: 12px 14px;
  transition: border-color 0.15s;
}

.checkbox-item:hover { border-color: var(--gold); }
.checkbox-item input[type="checkbox"] { margin-top: 3px; accent-color: var(--gold); }
.checkbox-label strong { font-size: 0.88rem; display: block; margin-bottom: 2px; }
.checkbox-label span   { font-size: 0.78rem; color: var(--muted); }

.location-row {
  display: flex; align-items: center;
  gap: 12px; margin-bottom: 8px; flex-wrap: wrap;
}

.btn-detect {
  padding: 10px 16px;
  background: rgba(212,168,83,0.15);
  border: 1px solid var(--gold);
  color: var(--gold); border-radius: 8px;
  font-size: 0.9rem; cursor: pointer;
  white-space: nowrap; transition: background 0.15s;
  font-family: var(--font-sans);
}

.btn-detect:hover { background: rgba(212,168,83,0.25); }

.city-input {
  flex: 1; min-width: 160px; padding: 10px 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--card-border);
  border-radius: 8px; color: var(--text);
  font-size: 0.9rem; font-family: var(--font-sans);
  outline: none; transition: border-color 0.2s;
}

.city-input::placeholder { color: var(--muted); }
.city-input:focus { border-color: var(--gold); }

.or-divider { color: var(--muted); font-size: 0.85rem; }

.location-status {
  font-size: 0.85rem; color: var(--muted);
  min-height: 20px; margin-bottom: 8px;
}

.location-status.success { color: #34d399; }
.location-status.error   { color: #f87171; }

.btn-submit {
  width: 100%; padding: 16px;
  background: var(--gold); color: var(--navy);
  font-weight: 700; font-size: 1rem;
  border: none; border-radius: 8px; cursor: pointer;
  transition: background 0.2s, transform 0.1s;
  margin-top: 8px; font-family: var(--font-sans);
}

.btn-submit:hover { background: #e0b55a; }
.btn-submit:active { transform: scale(0.99); }
.btn-submit:disabled { opacity: 0.5; cursor: not-allowed; }

.fine-print {
  text-align: center; font-size: 0.8rem;
  color: var(--muted); margin-top: 16px; line-height: 1.6;
}

@media (max-width: 600px) {
  .setup-card { margin: 40px 16px; padding: 32px 20px; }
  .checkbox-grid { grid-template-columns: 1fr; }
}

/* ---------- Accessibility ---------- */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}