/* =========================================================
   Polaris Pediatric Speech Therapy: Coming Soon
   Night-sky celestial · Fraunces + Mulish
   ========================================================= */

:root {
  --night-1: #16263f;
  --night-2: #0e1c30;
  --night-3: #0a1422;
  --paper:   #f7efe0;
  --gold:    #c99f4f;
  --gold-soft: #f0dca8;
  --muted:   rgba(247, 239, 224, .68);
  --line:    rgba(240, 220, 168, .22);

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans:  "Mulish", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(130% 90% at 82% -12%, #243c61 0%, transparent 48%),
    radial-gradient(100% 75% at 50% 120%, rgba(201, 159, 79, .12), transparent 55%),
    linear-gradient(180deg, var(--night-1) 0%, var(--night-2) 55%, var(--night-3) 100%);
  background-attachment: fixed;
  color: var(--paper);
  font-family: var(--sans);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--gold); color: #1a1407; }

/* ---------- Starfield ---------- */
.sky { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.sky::before, .sky::after {
  content: ""; position: absolute; inset: -20%;
  background-repeat: no-repeat;
  animation: twinkle 7s ease-in-out infinite;
}
.sky::before {
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%, #fff, transparent),
    radial-gradient(1.1px 1.1px at 26% 64%, #fff, transparent),
    radial-gradient(1.6px 1.6px at 38% 32%, #fdf3d8, transparent),
    radial-gradient(1px 1px at 49% 78%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 61% 12%, #fff, transparent),
    radial-gradient(1px 1px at 72% 52%, #fdf3d8, transparent),
    radial-gradient(1.5px 1.5px at 84% 28%, #fff, transparent),
    radial-gradient(1px 1px at 91% 70%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 7% 84%, #fff, transparent),
    radial-gradient(1px 1px at 55% 40%, #fff, transparent);
}
.sky::after {
  animation-duration: 5.5s; animation-delay: -2.5s;
  background-image:
    radial-gradient(1px 1px at 18% 40%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 33% 14%, #fff, transparent),
    radial-gradient(1px 1px at 44% 58%, #fdf3d8, transparent),
    radial-gradient(1.5px 1.5px at 67% 74%, #fff, transparent),
    radial-gradient(1px 1px at 76% 20%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 88% 48%, #fdf3d8, transparent),
    radial-gradient(1px 1px at 95% 84%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 5% 56%, #fff, transparent),
    radial-gradient(1px 1px at 29% 90%, #fff, transparent);
}

/* Shooting star: trajectory + timing randomized per launch from main.js */
.shooting {
  position: absolute;
  top: var(--sy, 12%); left: var(--sx, 6%);
  width: var(--len, 120px); height: 1.6px;
  background: linear-gradient(90deg, transparent, rgba(246, 234, 208, .92));
  border-radius: 2px; opacity: 0;
  filter: drop-shadow(0 0 6px rgba(246, 234, 208, .6));
  transform: rotate(var(--angle, 16deg)); transform-origin: left center;
  will-change: transform, opacity;
}
.shooting.is-shooting { animation: shoot var(--dur, 1.1s) ease-in forwards; }

/* ---------- Grain ---------- */
.grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- North Star ---------- */
.polaris {
  position: fixed; z-index: 1; top: 15%; right: 13%;
  width: 9px; height: 9px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, #f6ead0 42%, rgba(246, 234, 208, 0) 72%);
  box-shadow: 0 0 16px 5px rgba(246, 234, 208, .8), 0 0 46px 14px rgba(201, 159, 79, .4);
  animation: pulse 4.5s ease-in-out infinite;
}
.polaris::before, .polaris::after {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
}
.polaris::before { width: 1.4px; height: 54px; background: linear-gradient(transparent, rgba(246, 234, 208, .9), transparent); }
.polaris::after  { width: 54px; height: 1.4px; background: linear-gradient(90deg, transparent, rgba(246, 234, 208, .9), transparent); }

/* ---------- Stage ---------- */
.stage {
  position: relative; z-index: 2; flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: clamp(2.5rem, 6vw, 4rem) clamp(1.3rem, 5vw, 2rem) clamp(1.5rem, 4vw, 3rem);
}

/* Logo: inverted to white line-art, screened onto its own framed night-sky panel.
   isolation:isolate contains the blend so the black ground merges into the panel,
   not a stray dark square on the page. */
.logo-wrap {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; place-items: center;
  padding: clamp(1rem, 3vw, 1.7rem);
  border-radius: 26px;
  background: radial-gradient(125% 115% at 72% 20%, #22344f 0%, #152439 52%, #0d1a2c 100%);
  border: 1px solid rgba(201, 159, 79, .3);
  box-shadow:
    0 44px 90px -42px rgba(0, 0, 0, .75),
    0 0 70px -12px rgba(201, 159, 79, .18),
    inset 0 1px 0 rgba(247, 239, 224, .06);
  margin-bottom: clamp(1.2rem, 3vw, 1.8rem);
}
.logo {
  display: block;
  width: clamp(206px, 27vw, 312px); height: auto;
  filter: invert(1);
  mix-blend-mode: screen;
}

/* Eyebrow */
.eyebrow {
  display: inline-flex; align-items: center; gap: .85em;
  margin: 0; font-weight: 700; font-size: .76rem;
  letter-spacing: .34em; text-transform: uppercase; color: var(--gold-soft);
}
.eyebrow span { color: var(--gold); font-size: .72em; }

/* Title */
.title {
  margin: .85rem 0 0;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.2rem, 1.2rem + 3.6vw, 3.9rem);
  line-height: 1.04; letter-spacing: -.02em;
  font-variation-settings: "SOFT" 50;
}
.title em { font-style: italic; color: var(--gold-soft); font-variation-settings: "SOFT" 72; }

/* Lede */
.lede {
  max-width: 42ch; margin: 1.25rem auto 0;
  color: var(--muted); font-size: clamp(1rem, .96rem + .25vw, 1.12rem);
}

/* Footer */
.footer { position: relative; z-index: 2; text-align: center; padding: 1.6rem; font-size: .78rem; color: rgba(247, 239, 224, .45); }
.footer p { margin: 0; }

/* ---------- Entrance ---------- */
.rise { opacity: 0; animation: rise 1s cubic-bezier(.2, .7, .2, 1) both; animation-delay: var(--d, 0s); }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes twinkle { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
@keyframes pulse { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.28); opacity: 1; } }
@keyframes shoot {
  0%   { opacity: 0; transform: translate(0, 0) rotate(var(--angle, 16deg)); }
  12%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--tx, 70vw), var(--ty, 22vh)) rotate(var(--angle, 16deg)); }
}

/* ---------- Responsive ---------- */
@media (max-width: 480px) {
  .polaris { top: 9%; right: 10%; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .rise { opacity: 1; transform: none; }
  .shooting { display: none; }
}