/* ================================================================
   THE BOY WHO ATE THE STAR — immersive page
   Dark YA fantasy identity: cosmic, ancient, mysterious — distinct
   from the gothic-romance treatment used on Love Is a Blessing.
   Structure + typography only. Atmosphere/particles/animation
   layers come in a later pass.
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@700;900&family=Cinzel:wght@400;500;600&family=Spectral:ital,wght@0,300;0,400;0,500;1,400&display=swap');

body.star-page{
  --void: #060810;         /* deep cosmic indigo-black, not pure black */
  --void-2: #0a0e1c;
  --nebula: rgba(90,80,180,0.10);   /* faint violet nebula glow */
  --starlight: #efe9da;    /* warm soft starlight — not bright white */
  --starlight-dim: #c7c2b6; /* warm soft grey-ivory for body copy */
  --constellation: #9c8f6e; /* muted old-gold/bronze for marks + accents */
  background: var(--void);
  color: var(--starlight-dim);
}

body.star-page{
  background:
    radial-gradient(ellipse 70% 45% at 50% 0%, var(--nebula), transparent 65%),
    radial-gradient(ellipse 60% 40% at 15% 30%, rgba(60,70,140,0.06), transparent 70%),
    radial-gradient(ellipse 55% 40% at 85% 65%, rgba(120,60,140,0.05), transparent 70%),
    linear-gradient(180deg, var(--void-2), var(--void) 60%);
}
/* a still, quiet scatter of stars — static texture, not animated */
body.star-page::after{
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 18%, rgba(239,233,218,0.55), transparent 60%),
    radial-gradient(1.2px 1.2px at 78% 8%, rgba(239,233,218,0.4), transparent 60%),
    radial-gradient(1.4px 1.4px at 34% 62%, rgba(239,233,218,0.5), transparent 60%),
    radial-gradient(1.1px 1.1px at 92% 44%, rgba(239,233,218,0.35), transparent 60%),
    radial-gradient(1.5px 1.5px at 63% 82%, rgba(239,233,218,0.45), transparent 60%),
    radial-gradient(1px 1px at 8% 76%, rgba(239,233,218,0.3), transparent 60%),
    radial-gradient(1.3px 1.3px at 50% 30%, rgba(239,233,218,0.4), transparent 60%),
    radial-gradient(1px 1px at 25% 92%, rgba(239,233,218,0.3), transparent 60%),
    radial-gradient(1.4px 1.4px at 88% 88%, rgba(239,233,218,0.4), transparent 60%),
    radial-gradient(1px 1px at 45% 12%, rgba(239,233,218,0.3), transparent 60%);
  background-repeat: no-repeat;
  opacity: .8;
}
body.star-page > *{ position: relative; z-index: 1; }

/* ---------------- cosmic FX canvases (constellations + meteors) ----------------
   .star-fx-back sits behind all content (above the static star texture).
   .star-fx-front sits above all content, so meteors can cross in front of
   images and text as well as behind them. Both are inert to pointer events
   and purely decorative. */
body.star-page > canvas.star-fx-back,
body.star-page > canvas.star-fx-front{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
}
body.star-page > canvas.star-fx-back{ z-index: 0; }
body.star-page > canvas.star-fx-front{ z-index: 6; }

.star-page .site-nav{ position: relative; z-index: 5; }
body.star-page header.site-nav.hero-mode{ background: transparent; border-bottom-color: transparent; }
body.star-page header.site-nav.nav-enter{ opacity: 0; }
body.star-page header.site-nav.nav-enter.nav-in{ opacity: 1; transition: opacity .8s ease; }

/* ---------------- HERO — the opening shot ---------------- */
.star-hero{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  text-align: center;
}
.star-hero h1{
  font-family: 'Cinzel Decorative', 'Cinzel', serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(40px, 8.6vw, 104px);
  line-height: 1.22;
  letter-spacing: .025em;
  color: var(--starlight);
  max-width: 15ch;
  margin: 0 auto;
  text-shadow:
    0 0 60px rgba(239,233,218,0.18),
    0 0 120px rgba(120,110,220,0.14);
  opacity: 0;
  animation: starFade 2.6s ease forwards;
  animation-delay: .2s;
}
.star-hero h1 .line2{
  display: block;
  margin-top: .18em;
  font-size: .82em;
  color: var(--starlight);
}
@keyframes starFade{
  from{ opacity: 0; transform: translateY(14px); }
  to{ opacity: 1; transform: none; }
}

/* ---------------- STORY SECTIONS — chapter openings ---------------- */
.star-story{
  padding: 150px 0;
  position: relative;
}
.star-story .wrap{
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
}

/* chapter title — large, present, unmistakably fantasy-novel */
.star-eyebrow{
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: clamp(32px, 5.4vw, 54px);
  letter-spacing: .04em;
  color: var(--starlight);
  margin-bottom: 22px;
  text-shadow: 0 0 40px rgba(239,233,218,0.1);
}
.star-mark{
  color: var(--constellation);
  font-size: 15px;
  letter-spacing: .3em;
  margin-bottom: 56px;
}

/* images sit directly on the page — no card, no box, no visible block */
.star-media{
  margin: 0 auto 64px;
  max-width: 1080px;
  background: none;
}
.star-media img{
  display: block;
  width: 100%;
  height: auto;
  max-height: 88vh;
  object-fit: contain;
  margin: 0 auto;
}

.star-text{
  font-family: 'Spectral', serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 2.15;
  letter-spacing: .003em;
  color: var(--starlight-dim);
  text-align: left;
  max-width: 640px;
  margin: 40px auto 0;
}

/* poetic / short-line sections (The Awakening, The God of Hunger) —
   centered, larger, stacked lines rather than a reading paragraph */
.star-poetic .star-lines{
  text-align: center;
  font-family: 'Spectral', serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 2.05;
  max-width: 640px;
  color: var(--starlight-dim);
  margin-top: 40px;
}
.star-poetic .star-lines em{
  font-style: italic;
  color: var(--starlight);
}

/* ---------------- FINAL SECTION ---------------- */
.star-final{
  padding: 140px 24px 160px;
  text-align: center;
}
.star-media-final{
  max-width: 1160px;
  margin: 0 auto 70px;
  background: none;
}
.star-media-final img{
  display: block;
  width: 100%;
  height: auto;
  max-height: 84vh;
  object-fit: contain;
  margin: 0 auto;
}
.star-line{
  font-family: 'Spectral', serif;
  font-weight: 400;
  font-size: 21px;
  line-height: 1.95;
  color: var(--starlight-dim);
  max-width: 560px;
  margin: 0 auto 46px;
}
.star-title{
  font-family: 'Cinzel Decorative', 'Cinzel', serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(30px, 5vw, 58px);
  color: var(--starlight);
  letter-spacing: .03em;
  line-height: 1.3;
  margin: 0 auto 46px;
  text-shadow: 0 0 50px rgba(239,233,218,0.15), 0 0 100px rgba(120,110,220,0.12);
}
.star-line.coming-soon{
  font-family: 'Cinzel', serif;
  font-size: 14px;
  letter-spacing: .45em;
  text-transform: uppercase;
  color: var(--constellation);
  margin-bottom: 0;
}

/* ---------------- scroll reveal — one-time fade/slide, no looping motion ---------------- */
.star-eyebrow, .star-mark, .star-media, .star-text, .star-lines,
.star-media-final, .star-line, .star-title{
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 1.1s ease, transform 1.1s ease;
}
.star-story.in-view .star-eyebrow{ opacity: 1; transform: none; transition-delay: .05s; }
.star-story.in-view .star-mark{ opacity: 1; transform: none; transition-delay: .15s; }
.star-story.in-view .star-media{ opacity: 1; transform: none; transition-delay: .28s; }
.star-story.in-view .star-text, .star-story.in-view .star-lines{ opacity: 1; transform: none; transition-delay: .48s; }
.star-final.in-view .star-media-final{ opacity: 1; transform: none; }
.star-final.in-view .s1{ opacity: 1; transform: none; transition-delay: .3s; }
.star-final.in-view .star-title{ opacity: 1; transform: none; transition-delay: .55s; }
.star-final.in-view .coming-soon{ opacity: 1; transform: none; transition-delay: .8s; }

/* ---------------- responsive ---------------- */
@media (max-width: 640px){
  .star-story{ padding: 96px 0; }
  .star-story .wrap{ padding: 0 18px; }
  .star-eyebrow{ font-size: 30px; margin-bottom: 16px; }
  .star-mark{ margin-bottom: 34px; font-size: 12px; }
  .star-media{ margin-bottom: 40px; }
  .star-media img, .star-media-final img{ max-height: 64vh; }
  .star-text{ font-size: 17.5px; line-height: 1.95; margin-top: 28px; }
  .star-poetic .star-lines{ font-size: 19px; line-height: 1.9; margin-top: 28px; }
  .star-final{ padding: 90px 18px 110px; }
}

@media (prefers-reduced-motion: reduce){
  .star-hero h1, .star-hero .hero-mark,
  .star-eyebrow, .star-mark, .star-media, .star-text, .star-lines,
  .star-media-final, .star-line, .star-title{
    opacity: 1 !important; transform: none !important; transition-delay: 0s !important;
  }
}