/* ═══ THE SKY REVEAL · fifteen seconds, once per chart ═══
   One stylesheet for every page that mounts the Reveal: the Astro pages link
   it from SkyReveal.astro, and Worker-rendered pages (/sky-for/:slug) get it
   from sky-reveal.js itself, which appends this link when it is missing. */
.reveal-stage {
  position: fixed; inset: 0; z-index: 120; overflow: hidden;
  background: #04060e; color: #eef2f8;
  display: flex; align-items: center; justify-content: center;
}
.reveal-stars {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  opacity: 0; transition: opacity 2s ease;
}
.reveal-stars.is-in { opacity: 1; }
.reveal-stars.is-turning { opacity: 0.08; transition: opacity .7s ease; }
.reveal-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 50% at 50% 42%, transparent, rgba(4,6,14,0.72) 78%, #04060e);
}

.reveal-moonwrap {
  position: absolute; top: 34%; left: 50%; width: 168px; height: 168px;
  transform: translate(-50%, -50%) translateY(40px);
  opacity: 0; transition: opacity 1.2s ease, transform 1.2s cubic-bezier(.22,.61,.36,1);
}
.reveal-moonwrap.is-in { opacity: 1; transform: translate(-50%, -50%) translateY(0); }
.reveal-moonwrap.is-tucked { top: 20%; width: 96px; height: 96px; opacity: 0.5; }
.reveal-moonwrap canvas { width: 100%; height: 100%; border-radius: 999px; }

.reveal-ring {
  position: absolute; left: 50%; top: 56%; transform: translateX(-50%);
  width: min(88vw, 460px); text-align: center;
}
.reveal-ring-lines { display: flex; flex-direction: column; gap: 14px; }
.reveal-b3 { opacity: 0; transform: translateY(6px); transition: opacity .6s ease, transform .6s ease; }
.reveal-b3.is-in { opacity: 1; transform: none; }
.reveal-b3-sign {
  display: block; font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase;
  color: rgba(190,202,224,0.55);
}
.reveal-b3-plain {
  display: block; margin-top: 4px;
  font-family: "Cormorant", "Cormorant Garamond", Georgia, serif;
  font-weight: 300; font-size: 27px; line-height: 1.15; color: #eef2f8;
}
.reveal-b3.is-note { font-size: 13.5px; line-height: 1.5; color: rgba(190,202,224,0.62); }

.reveal-count {
  position: absolute; left: 50%; top: 54%; transform: translateX(-50%); text-align: center;
}
.reveal-count span:first-child {
  display: block; font-family: "Cormorant", "Cormorant Garamond", Georgia, serif;
  font-weight: 300; font-size: clamp(3.4rem, 17vw, 6rem); line-height: 1; color: #eef2f8;
  text-shadow: 0 0 60px rgba(180,205,250,0.28);
}
.reveal-count-word { display: block; margin-top: 6px; font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(190,202,224,0.55); }

.reveal-copy {
  position: absolute; left: 20px; right: 20px; bottom: 14%; text-align: center;
}
.reveal-caps { min-height: 14px; font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; color: rgba(190,202,224,0.55); }
.reveal-line {
  margin-top: 12px; font-family: "Cormorant", "Cormorant Garamond", Georgia, serif;
  font-weight: 300; font-size: 26px; line-height: 1.2; color: #eef2f8;
}
.reveal-sub { margin-top: 10px; font-size: 14.5px; line-height: 1.5; color: rgba(226,232,244,0.76); }

.reveal-end {
  position: relative; z-index: 2; width: min(92vw, 420px); text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  max-height: 100%; overflow-y: auto; padding: 18px 0;
}
/* the card and everything that answers it; a laptop sets them side by side */
.reveal-body, .reveal-side { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; }
.reveal-end.hidden, .reveal-ring.hidden, .reveal-count.hidden, .reveal-copy.hidden,
.reveal-skip.hidden, .reveal-next.hidden { display: none; }
.reveal-card {
  width: 180px; height: 320px; border-radius: 16px;
  border: 1px solid rgba(160,190,240,0.14); box-shadow: 0 30px 70px rgba(0,0,0,0.55);
}
/* FP-1 · two rare facts about that night, under the card */
.reveal-facts { display: flex; flex-direction: column; gap: 8px; width: 100%; text-align: left; }
.reveal-facts.hidden { display: none; }
.reveal-fact {
  display: block; padding: 10px 14px; border-radius: 14px;
  border: 1px solid rgba(170,190,226,0.14); background: rgba(150,180,240,0.05);
}
.reveal-fact-caps { display: block; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(190,202,224,0.6); }
.reveal-fact-line {
  display: block; margin-top: 4px; font-family: "Cormorant", "Cormorant Garamond", Georgia, serif;
  font-weight: 300; font-size: 17px; line-height: 1.28; color: #eef2f8;
}
.reveal-actions { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.reveal-video-note { margin-top: -7px; color: rgba(190,202,224,0.52); font: 11px/1.45 Inter, sans-serif; text-align: center; }
.reveal-ghost {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px;
  border: 1px solid rgba(214,228,252,0.26); border-radius: 999px;
  background: rgba(190,210,246,0.03); color: rgba(226,232,244,0.82);
  font-family: Inter, sans-serif; font-size: 14px; cursor: pointer; text-decoration: none;
}
.reveal-ghost:hover { border-color: rgba(214,228,252,0.45); color: #fff; }
.reveal-go {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; border: 0; border-radius: 999px; cursor: pointer; text-decoration: none;
  background: linear-gradient(160deg, #f6f8fc, #eef2f8 55%, #c9d6ec); color: #0a1020;
  font-family: Inter, sans-serif; font-size: 15px; font-weight: 600;
  box-shadow: 0 10px 34px rgba(214,228,252,0.18);
}
/* FP-2 · the quiet fourth way forward: send this to someone else */
.reveal-send {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; width: 100%;
  color: rgba(190,202,224,0.62); font-family: Inter, sans-serif; font-size: 13.5px; text-decoration: none;
}
.reveal-send:hover { color: #eef2f8; }
/* FP-2 · a sent sky names who it is for and who sent it, under the caps */
.reveal-for { font-size: 13.5px; line-height: 1.5; color: rgba(226,232,244,0.72); }
.reveal-for:empty { display: none; }
.reveal-skip {
  position: absolute; top: 14px; right: 14px; z-index: 3;
  min-width: 60px; min-height: 44px; border: 0; background: none; cursor: pointer;
  color: rgba(190,202,224,0.55); font-family: Inter, sans-serif; font-size: 13px;
}
.reveal-skip:hover { color: #eef2f8; }
.reveal-next {
  position: absolute; bottom: 5%; left: 50%; transform: translateX(-50%); z-index: 3;
  min-height: 48px; padding: 0 28px; border-radius: 999px; border: 1px solid rgba(214,228,252,0.3);
  background: rgba(190,210,246,0.06); color: #eef2f8; font-size: 14px; cursor: pointer;
}

@media (min-width: 640px) {
  .reveal-moonwrap { width: 232px; height: 232px; }
  .reveal-b3-plain { font-size: 32px; }
  .reveal-line { font-size: 32px; }
  .reveal-card { width: 220px; height: 391px; }
  .reveal-actions { flex-direction: row; justify-content: center; flex-wrap: wrap; }
  .reveal-ghost, .reveal-go { padding: 0 22px; }
  .reveal-send { width: auto; }
}
/* A laptop has the width for the card and its words side by side, so the
   three ways forward never sit below the fold. */
@media (min-width: 900px) and (min-height: 560px) {
  .reveal-end { width: min(92vw, 780px); }
  .reveal-body { flex-direction: row; align-items: center; gap: 36px; }
  .reveal-card { flex: none; }
  .reveal-side { flex: 1; min-width: 0; align-items: stretch; text-align: left; }
  .reveal-actions { flex-direction: column; }
  .reveal-send { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal-stars, .reveal-moonwrap, .reveal-b3 { transition: none; }
}