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

/* ---------- Reset & Base ---------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --bg-deep:    #080c16;
  --bg-base:    #0B0F1A;
  --bg-mid:     #0f1422;
  --bg-card:    #141927;
  --text-white: #E8E6E1;
  --text-muted: #9a97b0;
  --text-dim:   #5c5a74;
  --gold:       #D4A853;
  --gold-light: #e8c07a;
  --gold-dark:  #b8883a;
  --border:     rgba(212, 168, 83, 0.15);
  --border-mid: rgba(232, 230, 225, 0.08);
  --font-serif: 'Instrument Serif', Georgia, serif;
  --font-sans:  'DM Sans', system-ui, sans-serif;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  background-color: var(--bg-base);
  color: var(--text-white);
  line-height: 1.6;
  font-weight: 300;
  overflow-x: hidden;
}

/* ---------- Star Field ---------- */
/* Three pseudo-element layers at different sizes and opacities */
/* Stars generated as comma-separated box-shadows */

.stars-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.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-small 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-medium 8s ease-in-out infinite alternate;
  animation-delay: 2s;
}

/* Large stars — handled via a separate element */
.stars-large {
  position: fixed;
  top: 0;
  left: 0;
  width: 3px;
  height: 3px;
  pointer-events: none;
  z-index: 0;
  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-large 10s ease-in-out infinite alternate;
  animation-delay: 1s;
}

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

@keyframes twinkle-medium {
  0%   { opacity: 0.8; }
  40%  { opacity: 0.3; }
  70%  { opacity: 1; }
  100% { opacity: 0.5; }
}

@keyframes twinkle-large {
  0%   { opacity: 1; }
  50%  { opacity: 0.4; }
  100% { opacity: 0.9; }
}

/* ---------- Layout Utilities ---------- */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

section {
  position: relative;
  z-index: 1;
}

/* ---------- Confirmed Banner ---------- */
#confirmed-banner {
  display: none;
  background: linear-gradient(135deg, rgba(212, 168, 83, 0.15), rgba(212, 168, 83, 0.05));
  border: 1px solid var(--gold);
  color: var(--gold-light);
  text-align: center;
  padding: 16px 24px;
  font-size: 0.95rem;
  position: relative;
  z-index: 10;
}

/* ---------- Hero Section ---------- */
#hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 24px 120px;
  background: var(--bg-base);
  position: relative;
}

.hero-eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 28px;
  opacity: 0.9;
}

.hero-h1 {
  font-family: var(--font-serif);
  font-size: clamp(2.6rem, 6vw, 5rem);
  font-weight: 400;
  line-height: 1.12;
  color: var(--text-white);
  margin-bottom: 28px;
  max-width: 720px;
  letter-spacing: -0.01em;
}

.hero-sub {
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: var(--text-muted);
  max-width: 560px;
  margin: 0 auto 48px;
  font-weight: 300;
  line-height: 1.7;
}

.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--gold);
  color: var(--bg-deep);
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
  padding: 15px 36px;
  border-radius: 6px;
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
  box-shadow: 0 4px 24px rgba(212, 168, 83, 0.25);
}

.hero-cta:hover {
  background: var(--gold-light);
  transform: translateY(-1px);
  box-shadow: 0 8px 32px rgba(212, 168, 83, 0.35);
}

.hero-scroll-hint {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--text-dim);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  animation: bounce-hint 2.5s ease-in-out infinite;
}

.hero-scroll-hint svg {
  width: 16px;
  height: 16px;
  opacity: 0.5;
}

@keyframes bounce-hint {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.5; }
  50%       { transform: translateX(-50%) translateY(6px); opacity: 1; }
}

/* ---------- How It Works ---------- */
#how-it-works {
  background: var(--bg-mid);
  padding: 100px 24px;
  border-top: 1px solid var(--border-mid);
  border-bottom: 1px solid var(--border-mid);
}

#how-it-works h2 {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 400;
  text-align: center;
  margin-bottom: 16px;
  letter-spacing: -0.01em;
}

.section-sub {
  text-align: center;
  color: var(--text-muted);
  font-size: 1.05rem;
  margin-bottom: 72px;
  font-weight: 300;
}

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

.step {
  flex: 1;
  position: relative;
}

.step-connector {
  flex: 0 0 60px;
  display: flex;
  align-items: flex-start;
  padding-top: 14px;
  color: var(--border);
  font-size: 1.5rem;
  justify-content: center;
  opacity: 0.6;
}

.step-number {
  font-family: var(--font-serif);
  font-size: 3.5rem;
  font-weight: 400;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 20px;
  opacity: 0.9;
}

.step h3 {
  font-family: var(--font-sans);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--text-white);
  margin-bottom: 12px;
  letter-spacing: 0.01em;
}

.step p {
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.7;
  font-weight: 300;
}

.event-list {
  list-style: none;
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.event-list li {
  font-size: 0.88rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.4;
}

.event-list li .check {
  color: var(--gold);
  flex-shrink: 0;
  font-size: 0.8rem;
}

/* ---------- Sign-Up Form ---------- */
#signup {
  background: var(--bg-base);
  padding: 100px 24px;
}

#signup h2 {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 400;
  text-align: center;
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}

.form-wrapper {
  max-width: 680px;
  margin: 0 auto;
  margin-top: 56px;
}

/* Location Row */
.location-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.btn-detect {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--gold-light);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 400;
  padding: 11px 20px;
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
}

.btn-detect:hover {
  border-color: var(--gold);
  background: rgba(212, 168, 83, 0.06);
}

.or-divider {
  color: var(--text-dim);
  font-size: 0.85rem;
  flex-shrink: 0;
}

.city-input {
  flex: 1;
  min-width: 180px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-mid);
  color: var(--text-white);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  padding: 11px 16px;
  border-radius: 6px;
  outline: none;
  transition: border-color 0.2s;
}

.city-input::placeholder { color: var(--text-dim); }
.city-input:focus { border-color: rgba(212, 168, 83, 0.4); }

.location-status {
  font-size: 0.85rem;
  color: var(--gold-light);
  min-height: 20px;
  margin-bottom: 28px;
  font-weight: 400;
}

/* Checkbox Grid */
.form-label-heading {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 16px;
  display: block;
}

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

.checkbox-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--border-mid);
  border-radius: 8px;
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  position: relative;
}

.checkbox-item:hover {
  border-color: rgba(212, 168, 83, 0.25);
  background: rgba(212, 168, 83, 0.04);
}

.checkbox-item input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 17px;
  height: 17px;
  border: 1.5px solid var(--text-dim);
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 1px;
  transition: border-color 0.2s, background 0.2s;
  position: relative;
}

.checkbox-item input[type="checkbox"]:checked {
  background: var(--gold);
  border-color: var(--gold);
}

.checkbox-item input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 5px;
  width: 4px;
  height: 8px;
  border: 2px solid var(--bg-deep);
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}

.checkbox-label {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.checkbox-label strong {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-white);
  line-height: 1.3;
}

.checkbox-label span {
  font-size: 0.78rem;
  color: var(--text-dim);
  font-weight: 300;
  line-height: 1.4;
}

/* Email Row */
.email-row {
  display: flex;
  gap: 12px;
  align-items: stretch;
  flex-wrap: wrap;
}

.email-input {
  flex: 1;
  min-width: 200px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-mid);
  color: var(--text-white);
  font-family: var(--font-sans);
  font-size: 1rem;
  padding: 14px 18px;
  border-radius: 6px;
  outline: none;
  transition: border-color 0.2s;
}

.email-input::placeholder { color: var(--text-dim); }
.email-input:focus { border-color: rgba(212, 168, 83, 0.4); }

.btn-submit {
  background: var(--gold);
  color: var(--bg-deep);
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
  padding: 14px 32px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
  box-shadow: 0 4px 20px rgba(212, 168, 83, 0.2);
  flex-shrink: 0;
}

.btn-submit:hover:not(:disabled) {
  background: var(--gold-light);
  transform: translateY(-1px);
  box-shadow: 0 6px 28px rgba(212, 168, 83, 0.35);
}

.btn-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Form Status */
.form-status {
  display: none;
  margin-top: 20px;
  padding: 14px 20px;
  border-radius: 6px;
  font-size: 0.95rem;
  line-height: 1.5;
}

.form-status.success {
  background: rgba(100, 200, 120, 0.1);
  border: 1px solid rgba(100, 200, 120, 0.3);
  color: #7ed9a0;
}

.form-status.error {
  background: rgba(220, 80, 80, 0.1);
  border: 1px solid rgba(220, 80, 80, 0.3);
  color: #f08080;
}

.privacy-note {
  text-align: center;
  font-size: 0.78rem;
  color: var(--text-dim);
  margin-top: 24px;
  line-height: 1.6;
}

/* ---------- Email Mockup ---------- */
#example {
  background: var(--bg-mid);
  padding: 100px 24px;
  border-top: 1px solid var(--border-mid);
  border-bottom: 1px solid var(--border-mid);
}

#example h2 {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 400;
  text-align: center;
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}

.email-mockup-wrapper {
  max-width: 580px;
  margin: 56px auto 0;
  position: relative;
}

/* Glow behind the card */
.email-mockup-wrapper::before {
  content: '';
  position: absolute;
  inset: -20px;
  background: radial-gradient(ellipse at center, rgba(212, 168, 83, 0.08) 0%, transparent 70%);
  border-radius: 20px;
  pointer-events: none;
}

.email-card {
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,0.6), 0 4px 20px rgba(0,0,0,0.4);
  position: relative;
}

/* Email top bar */
.email-topbar {
  background: #0B0F1A;
  padding: 20px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.email-brand {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #E8E6E1;
}

.email-badge {
  font-family: var(--font-sans);
  font-size: 0.68rem;
  color: var(--gold-light);
  letter-spacing: 0.06em;
  opacity: 0.7;
}

/* Email body — light mode (real email) */
.email-body {
  padding: 36px 40px 28px;
  color: #1a1a2e;
}

.email-event-label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #D4A853;
  margin-bottom: 10px;
}

.email-h1 {
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.15;
  color: #0B0F1A;
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}

.email-subtitle {
  font-size: 0.95rem;
  color: #6b6b8a;
  margin-bottom: 28px;
  font-weight: 400;
}

.email-divider {
  height: 1px;
  background: #e8e6f0;
  margin: 24px 0;
}

.email-section {
  margin-bottom: 20px;
}

.email-section-label {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #9a9ab8;
  margin-bottom: 6px;
}

.email-section p {
  font-size: 0.92rem;
  color: #2a2a3e;
  line-height: 1.65;
  font-weight: 400;
}

.email-section .highlight {
  color: #0B0F1A;
  font-weight: 500;
}

.email-stat-row {
  display: flex;
  gap: 0;
  margin: 24px 0;
  border: 1px solid #e8e6f0;
  border-radius: 8px;
  overflow: hidden;
}

.email-stat {
  flex: 1;
  padding: 16px;
  text-align: center;
  border-right: 1px solid #e8e6f0;
}

.email-stat:last-child { border-right: none; }

.email-stat .stat-val {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  color: #0B0F1A;
  line-height: 1;
  margin-bottom: 4px;
}

.email-stat .stat-key {
  font-size: 0.68rem;
  color: #9a9ab8;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.email-footer {
  background: #f4f3f8;
  padding: 16px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.email-footer-text {
  font-size: 0.72rem;
  color: #9a9ab8;
  line-height: 1.5;
}

.email-footer-links {
  display: flex;
  gap: 16px;
}

.email-footer-links a {
  font-size: 0.72rem;
  color: #9a9ab8;
  text-decoration: none;
  pointer-events: none;
}

/* ---------- Footer ---------- */
#footer {
  background: var(--bg-deep);
  border-top: 1px solid var(--border-mid);
  padding: 48px 24px;
}

.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}

.footer-brand {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  color: var(--text-white);
  font-style: italic;
}

.footer-tagline {
  color: var(--text-dim);
  font-size: 0.88rem;
  font-weight: 300;
}

.footer-bottom {
  text-align: center;
  margin-top: 24px;
  color: var(--text-dim);
  font-size: 0.78rem;
  line-height: 1.7;
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
  .steps {
    flex-direction: column;
    gap: 48px;
  }

  .step-connector {
    display: none;
  }

  .checkbox-grid {
    grid-template-columns: 1fr;
  }

  .location-row {
    flex-direction: column;
    align-items: stretch;
  }

  .btn-detect {
    width: 100%;
    justify-content: center;
  }

  .or-divider {
    text-align: center;
  }

  .email-row {
    flex-direction: column;
  }

  .btn-submit {
    width: 100%;
    text-align: center;
  }

  .email-body {
    padding: 28px 24px 20px;
  }

  .email-footer {
    padding: 14px 24px;
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }

  .footer-inner {
    flex-direction: column;
    text-align: center;
  }

  .email-stat-row {
    flex-direction: column;
  }

  .email-stat {
    border-right: none;
    border-bottom: 1px solid #e8e6f0;
  }

  .email-stat:last-child {
    border-bottom: none;
  }

  .email-topbar {
    padding: 16px 24px;
  }

  .hero-cta {
    width: 100%;
    justify-content: center;
    max-width: 320px;
  }
}

@media (max-width: 480px) {
  #hero { padding: 60px 20px 100px; }
  #how-it-works, #signup, #example { padding: 72px 20px; }
}

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

/* Reduce motion for those who prefer it */
@media (prefers-reduced-motion: reduce) {
  .stars-layer::before,
  .stars-layer::after,
  .stars-large,
  .hero-scroll-hint {
    animation: none;
  }
  html { scroll-behavior: auto; }
}