/* Sea of Stars — main.css
   Design system per sos-style-guide-v2.md §1. Gold tokens are immutable:
   no filter/tint may shift --gold-glow / --gold-star / --gold-sun (§0.1). */

:root {
  /* THE GOLD FAMILY — fixed */
  --gold-glow: #FFE9B8;
  --gold-star: #FFD37A;
  --gold-sun:  #FFB338;
  /* TWILIGHT RAMP */
  --night-zenith: #0B1026;
  --night-mid: #1B2347;
  --twilight-violet: #3B2F63;
  --sea-teal: #1E4A57;
  --starlight: #C7D3E8;
  --moon-silver: #E8ECF4;
  /* DAWN RAMP */
  --dawn-rose: #E9A6B3;
  --dawn-coral: #F08C6A;
  --dawn-peach: #F9C784;
  --dawn-cream: #FFF4E0;
  --shore-sand: #D8B47B;
  --mountain-plum: #4A3550;
  --ink: #2A2140;

  --ease-drift: cubic-bezier(0.22, 1, 0.36, 1);
  --font-display: "Playfair Display", "Didot", serif;
  --font-verse: "Cormorant", serif;
  --font-body: "Nunito", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--night-zenith);
  color: var(--moon-silver);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  overflow-x: hidden;
}

/* ---------- AN2 colorway layers ---------- */
.colorway { position: fixed; inset: 0; z-index: 0; }
.colorway-layer { position: absolute; inset: 0; transition: none; }

/* ---------- AN3 stardust ---------- */
#stardust { position: fixed; inset: 0; z-index: 3; pointer-events: none; }

/* ---------- header ---------- */
.site-header {
  position: absolute; top: 0; left: 0; right: 0; z-index: 10;
  display: flex; justify-content: center; padding: 20px;
}
.brand img { display: block; height: 54px; width: auto; }

/* ---------- panels & frames (§0.3: exactly two crop geometries) ---------- */
main { position: relative; z-index: 1; }
.panel { position: relative; }
.scene { display: grid; place-items: center; min-height: 72vh; padding: 4vh 0; }
.frame {
  position: relative;
  width: 100vw;
  aspect-ratio: 2 / 1;          /* desktop crop */
  overflow: hidden;
}
@media (max-width: 768px) {
  .frame { aspect-ratio: 4 / 5; } /* mobile crop */
}
.scenic, .scenic img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;             /* never crops: container is ratio-locked */
  display: block;
}

/* ---------- live layers (§1.4 / §6 stack) ---------- */
.twinkles { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.twinkle {
  position: absolute; width: 6px; height: 6px; margin: -3px 0 0 -3px;
  background: radial-gradient(circle, var(--starlight) 0%, transparent 70%);
  border-radius: 50%;
  opacity: .6;
  animation: twinkle var(--tw-dur, 5s) ease-in-out infinite;
  animation-delay: var(--tw-delay, 0s);
}
@keyframes twinkle { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }

.cloud {
  position: absolute; z-index: 4; pointer-events: none;
  mix-blend-mode: screen; opacity: .32;
  width: 85%; height: auto; left: 0; top: 8%;
  will-change: transform;
}
.cloud-2 { left: auto; right: -10%; top: 22%; opacity: .25; }

.moon {
  position: absolute; z-index: 5; pointer-events: none;
  mix-blend-mode: screen;
  width: 22%; height: auto; left: 6%; top: 4%;
  /* AN5-T1 halo breathing intentionally omitted: continuous animation of a
     screen-blended layer forces full-surface repaints on non-GPU devices.
     The descope ladder (§5 AN1) sanctions static baked/blended positions. */
}

.shimmer {                        /* AN8: anchored at horizonY by JS */
  position: absolute; z-index: 6; left: 0; right: 0; height: 9%;
  background: linear-gradient(90deg, transparent, rgba(255, 233, 184, .10), transparent);
  opacity: .18;
  animation: shimmer 8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes shimmer { 0%, 100% { opacity: .10; } 50% { opacity: .25; } }

.guiding-light {                  /* AN1: positioned from anchors.json by JS */
  position: absolute; z-index: 9; width: 14px; height: 14px;
  margin: -7px 0 0 -7px; border-radius: 50%;
  background: radial-gradient(circle, var(--gold-glow) 0%, var(--gold-star) 35%, transparent 70%);
  box-shadow: 0 0 24px 6px rgba(255, 211, 122, .55);
  opacity: 0;
  transition: opacity 1.2s var(--ease-drift);
  animation: breathe 6s ease-in-out infinite;
  pointer-events: none;
  will-change: transform, opacity;
}
.scene.lit .guiding-light { opacity: .9; }
.guiding-light-sun {
  width: 46px; height: 46px; margin: -23px 0 0 -23px;
  background: radial-gradient(circle, var(--gold-glow) 0%, var(--gold-sun) 40%, transparent 72%);
  box-shadow: 0 0 90px 30px rgba(255, 179, 56, .35);
}
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }

/* ---------- AN6 phoenix layer (§3-D dual layer handled in export) ---------- */
.phoenix-layer {
  position: absolute; z-index: 8; pointer-events: none;
  width: 26%; opacity: 0;
  transform: translateY(12vh) scale(.92);
  /* blend on the LAYER, not the img: the layer's opacity/transform create a
     stacking context, so an inner blend would isolate against transparency
     and show D1's black plate instead of screening onto the scenic. */
  mix-blend-mode: screen;
}
.phoenix-layer img { width: 100%; height: auto; display: block; }
.phoenix-layer.revealed {
  animation: phoenix-rise 2.4s var(--ease-drift) forwards,
             phoenix-float 7s ease-in-out 2.4s infinite;
}
@keyframes phoenix-rise {
  from { opacity: 0; transform: translateY(12vh) scale(.92); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes phoenix-float {
  0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); }
}

/* ---------- content & type (§1.2) ---------- */
.scene-content {
  position: absolute; z-index: 12;
  left: 8%; right: 45%;           /* §1.3 verse column 8–45% */
  top: 12%;
}
.hero-content { top: 18%; right: 30%; }
@media (max-width: 768px) {
  .scene-content { left: 8%; right: 10%; top: 8%; }
  .hero-content { top: 10%; }
}

.display {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(3rem, 8vw, 6rem);
  letter-spacing: .01em; line-height: 1.05;
  color: var(--moon-silver);
  text-shadow: 0 0 24px rgba(255, 233, 184, .3);
  margin: 0 0 .35em;
}
.hero-sub {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.15rem, 2.6vw, 1.7rem);
  color: var(--moon-silver); margin: 0 0 .5em;
}
.hero-tag { color: var(--starlight); max-width: 40ch; margin: 0; }

.verse .verse-line {
  font-family: var(--font-verse); font-style: italic; font-weight: 300;
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  line-height: 1.65; letter-spacing: .02em;
  color: var(--moon-silver);
  margin: 0;
  opacity: 0; transform: translateY(16px);
  transition: opacity 1s var(--ease-drift), transform 1s var(--ease-drift);
}
.verse.in .verse-line { opacity: 1; transform: none; }
.verse.in .verse-line:nth-child(2) { transition-delay: .4s; }
.verse.in .verse-line:nth-child(3) { transition-delay: .8s; }
#t3 .verse-line { color: var(--ink); text-shadow: 0 0 14px rgba(255, 244, 224, .55); }

.section-head {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.75rem, 4vw, 2.5rem); margin: 0 0 .5em;
}
.sub-head { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.3rem, 3vw, 1.8rem); margin: 1.2em 0 .4em; }
.ink { color: var(--ink); }
.silver { color: var(--moon-silver); }

/* ---------- dividers (E3) ---------- */
.divider { display: flex; justify-content: center; padding: 30px 0; position: relative; z-index: 2; }
.divider img { width: 200px; height: 24px; }

/* ---------- invitation panel (E1 CSS-first §3-E1) ---------- */
.invitation {
  position: relative; z-index: 2;
  background:
    radial-gradient(ellipse 60% 45% at 62% 78%, rgba(255, 233, 184, .55), transparent 70%),
    linear-gradient(to bottom, var(--dawn-rose), var(--dawn-peach) 55%, var(--dawn-cream));
  padding: 9vh 8vw;
}
.invitation-inner { max-width: 720px; margin: 0 auto; text-align: center; }
.invitation p, .invitation li { color: var(--ink); }

.cta-row { margin: 1.4em 0 .6em; }
.btn {
  display: inline-block;
  font-family: var(--font-body); font-weight: 700; font-size: 1.05rem;
  border: 0; border-radius: 999px; cursor: pointer;
  padding: .95em 2.1em; text-decoration: none;
  transition: transform .2s var(--ease-drift), box-shadow .2s var(--ease-drift);
}
.btn-gold {
  background: linear-gradient(135deg, var(--gold-sun), var(--gold-star));
  color: var(--ink);
}
.btn-gold::before { content: "✦ "; }
.btn-gold:hover { box-shadow: 0 0 24px rgba(255, 179, 56, .45); transform: scale(1.02); }
.btn-gold:focus-visible { outline: 3px solid var(--gold-glow); outline-offset: 2px; }

.counter { font-weight: 600; margin: .3em 0 0; }
.counter strong { color: var(--ink); }
.pending-note, .full-note { font-weight: 600; margin: 1em 0; }

.waitlist-form { margin: 1.4em auto; max-width: 560px; }
.field-label { display: block; font-weight: 600; color: var(--ink); margin-bottom: .4em; text-align: left; }
.field-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.field-row input[type="email"] {
  flex: 1 1 260px; font: inherit; color: var(--ink);
  padding: .85em 1.1em; border-radius: 999px;
  border: 2px solid var(--shore-sand);
  background: rgba(255, 255, 255, .82);
}
.field-row input[type="email"]:focus-visible { outline: 3px solid var(--gold-sun); outline-offset: 1px; }
#waitlist-website { position: absolute; left: -6000px; width: 1px; height: 1px; opacity: 0; }
.form-msg { min-height: 1.4em; font-weight: 600; margin: .8em 0 0; }
.form-msg.ok { color: #2E5D3A; }
.form-msg.err { color: #8C2F39; }

.begin-shore { margin-top: 3em; text-align: left; background: rgba(255, 244, 224, .9); border-radius: 18px; padding: 1.6em 2em; }
.shore-list { padding-left: 1.2em; margin: .4em 0 1em; }
.shore-note { font-size: .97rem; }
.ink-link { color: var(--ink); text-decoration-color: var(--gold-sun); text-underline-offset: 3px; }
.ink-link:hover { color: var(--gold-sun); }

/* ---------- credibility ---------- */
.credibility { position: relative; z-index: 2; padding: 7vh 6vw; }
.cred-grid {
  display: grid; gap: 28px; max-width: 1100px; margin: 0 auto;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.cred-card { border-radius: 20px; padding: 1.8em; }
.card-dark { background: var(--night-zenith); color: var(--starlight); }
.card-dark p { color: var(--starlight); }
.card-light { background: rgba(255, 244, 224, .92); color: var(--ink); }
.card-light p { color: var(--ink); }
.cred-img { width: 100%; height: auto; border-radius: 12px; display: block; margin-bottom: 1em; }
.gold-link { color: var(--gold-star); font-weight: 700; text-decoration-color: var(--gold-star); text-underline-offset: 3px; }
.gold-link:hover { color: var(--gold-glow); }
.tradition-list { list-style: none; padding: 0; margin: .6em 0; }
.tradition-list li { display: flex; align-items: center; gap: 14px; margin: .7em 0; }
.tradition-list img { flex: 0 0 auto; }

/* ---------- footer (§2: CSS dawn-cream → shore-sand band) ---------- */
.site-footer {
  position: relative; z-index: 2;
  background: linear-gradient(to bottom, var(--dawn-cream), var(--shore-sand));
  color: var(--ink);
  padding: 7vh 8vw 9vh; text-align: center;
}
.footer-brand { height: 72px; width: auto; margin-bottom: .6em; }
.contact-list { list-style: none; padding: 0; margin: 0 auto 1.4em; max-width: 430px; text-align: left; }
.contact-list li { display: flex; align-items: center; gap: 12px; margin: .55em 0; }
.legal { font-size: .92rem; max-width: 60ch; margin: 0 auto; }

/* ---------- §6 degradation ladder ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .twinkle, .moon, .shimmer, .guiding-light, .phoenix-layer,
  .cloud { animation: none !important; }
  .phoenix-layer { display: none; }         /* finale = baked C3-alt */
  #stardust { display: none; }
  .verse .verse-line { transition: opacity .6s ease; transform: none; }
}