/* ============================================================
   GLOBAL RESET (lightweight) & ROOT
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: "Quicksand", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  background-color: #191103; /* outer background around artboard */
  color: #382505;
  overflow: hidden; /* STRICT: non-scrolling page */
}

/* ============================================================
   STAGE: centers the artboard
   ============================================================ */

.stage {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ============================================================
   CONTAINER QUERY SETUP FOR STARFIELD
   - Makes .stage a query container
   - Allows starfield to activate only when gutters appear
   ============================================================ */

.stage {
  container-type: inline-size; /* enables container queries */
}

/* Wide container → artboard no longer fills full width → side gutters appear */
@container (min-width: 450px) {
  body::before,
  body::after {
    opacity: 0.65; /* or whatever level you prefer */
    animation-play-state: running;
  }
}


/* ============================================================
   ARTBOARD: 393×852 design space
   - height locked to viewport height
   - aspect-ratio keeps correct width
   - horizontally centered via .stage flex
   ============================================================ */

.artboard {
  position: relative;
  height: 100vh;          /* tie design height to viewport height */
  aspect-ratio: 393 / 852;
  max-width: 100vw;       /* safety on very narrow viewports */
  overflow: hidden;
}

/* Artboard background SVG (full bleed) */
.artboard__background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* ============================================================
   SHARED ICON BASE
   ============================================================ */

.icon {
  position: absolute;
  display: inline-block;
}

.icon img {
  display: block;
  width: auto;
  height: 100%;
}

/* Smooth visual transition for all icons */
.icon img {
  transition: filter 160ms ease, transform 160ms ease;
  cursor: pointer;
}

/* ------------------------------------------
   1.  HEADER + BODY ICONS: LIGHTEN PERCENTAGE
   ------------------------------------------ */
.icon--header-palette img,
.icon--header-rocket img,
.icon--header-inkwell img,
.icon--body-rocket img,
.icon--body-palette img,
.icon--body-inkwell img {
  filter: brightness(100%);
}

.icon--header-palette:hover img,
.icon--header-palette:focus-visible img,
.icon--header-palette:active img,
.icon--header-rocket:hover img,
.icon--header-rocket:focus-visible img,
.icon--header-rocket:active img,
.icon--header-inkwell:hover img,
.icon--header-inkwell:focus-visible img,
.icon--header-inkwell:active img {
  filter: brightness(125%);
}


.icon--body-rocket:hover img,
.icon--body-rocket:focus-visible img,
.icon--body-rocket:active img,
.icon--body-palette:hover img,
.icon--body-palette:focus-visible img,
.icon--body-palette:active img,
.icon--body-inkwell:hover img,
.icon--body-inkwell:focus-visible img,
.icon--body-inkwell:active img {
  filter: brightness(160%);
}

/* CV icon hover/tap: same brightness behavior as body icons */

/* base state */
.cv-icon {
  filter: brightness(100%);
  transition: filter 160ms ease, transform 160ms ease;
}

/* hover / focus / active states */
.about-cv-link:hover .cv-icon,
.about-cv-link:focus-visible .cv-icon,
.about-cv-link:active .cv-icon {
  filter: brightness(160%); /* match body icon boost */
}

/* ------------------------------------------
   2. HERO ICON: DARKEN PERCENTAGE
   ------------------------------------------ */
.icon--hero img {
  filter: brightness(100%);
}

.icon--hero:hover img,
.icon--hero:focus-visible img,
.icon--hero:active img {
  filter: brightness(90%);
}

/* ============================================================
   HERO ICON (top-left)
   Original artboard: x=15, y=15, h=120
   ============================================================ */

.icon--hero {
  top: calc(15 / 852 * 100%);
  left: calc(15 / 393 * 100%);
  height: calc(120 / 852 * 100%);
}

/* ============================================================
   TITLE & SUBTITLE
   - Title box: x=158, y=47, h≈58
   - Subtitle box: x=203, y=101, h≈25
   ============================================================ */

.title {
  position: absolute;
  top: calc(70 / 852 * 100%);
  left: calc(130 / 393 * 100%);
  margin: 0;
  /* Use height-relative font scaling; the box constrains it */
  font-family: "Playwrite US Trad", "Quicksand", system-ui, sans-serif;
  font-size: calc(31 / 852 * 100vh);
  line-height: 1;
  color: #432c07;
}

.title__main {
  white-space: nowrap;
}

/* Subtitle directly under title */
.subtitle {
  position: absolute;
  top: calc(120 / 852 * 100%);
  left: calc(190 / 393 * 100%);
  margin: 0;
  font-size: calc(20 / 852 * 100vh);
  line-height: 1;
  color: #f5dc8c;
}

/* ============================================================
   HEADER ICONS ROW
   Individual icons placed by original artboard coordinates
   ------------------------------------------------------------
   palette:  x=158, y=15,   h=35
   rocket:   x=246, y=15,   h=35
   inkwell:  x=340, y=15,   h=35
   ============================================================ */

.header-icons {
  /* purely semantic wrapper; children are absolutely positioned */
}

  /* HEADER ICONS
     All share the same top + height to stay on one baseline
     Original artboard: h = 35, y = 15
  */
  .icon--header-palette,
  .icon--header-rocket,
  .icon--header-inkwell {
    position: absolute;
    height: calc(32 / 852 * 100%);  /* 35px at 852px artboard height */
    top: calc(18 / 852 * 100%);     /* common baseline */
    pointer-events: auto;
    z-index: 20;
  }

  /* individual x positions (158, 246, 340) */
  .icon--header-palette {
    left: calc(243 / 393 * 100%);
  }

  .icon--header-rocket {
    left: calc(158 / 393 * 100%);
  }

  .icon--header-inkwell {
    left: calc(340 / 393 * 100%);
  }

/* ============================================================
   BODY ICONS (large)
   ------------------------------------------------------------
   rocket:  x=111.5, y=217, h=115
   palette: x=229,   y=442, h=103
   inkwell: x=60,    y=608, h=94
   ============================================================ */

/* Rocket (upper large) */
.icon--body-rocket {
  top: calc(240 / 852 * 100%);
  left: calc(130 / 393 * 100%);
  height: calc(115 / 852 * 100%);
}

/* Palette (middle large) */
.icon--body-palette {
  top: calc(453 / 852 * 100%);
  left: calc(243 / 393 * 100%);
  height: calc(103 / 852 * 100%);
}

/* Inkwell (bottom large) */
.icon--body-inkwell {
  top: calc(624 / 852 * 100%);
  left: calc(72 / 393 * 100%);
  height: calc(78 / 852 * 100%);
}

/* ============================================================
   ABOUT PAGE CONTENT (on artboard)
   ------------------------------------------------------------
   Uses artboard-relative coordinates:
   - Portrait: y = 125, h = 250, centered
   - Heading:  y = 377
   - Copy:     y = 409, width = 320 (relative), centered block
   - CV icon:  y = 636, h = 60, centered
   ============================================================ */

/* Portrait image */
.about-portrait {
  position: absolute;
  top: calc(135 / 852 * 100%);
  left: 50%;
  transform: translateX(-50%);
  height: calc(220 / 852 * 100%);
  width: auto;
}

/* Heading: "artist's statement" */
.about-heading {
  position: absolute;
  top: calc(345 / 852 * 100%);
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Quicksand', sans-serif;
  font-weight: 600;
  font-size: calc(20 / 852 * 100vh);
  color: #f5dc8c;
  text-align: center;
  white-space: nowrap;
}

/* Body text block */
.about-copy {
  position: absolute;
  top: calc(375 / 852 * 100%);
  left: 50%;
  transform: translateX(-50%);

  /* 370px on a 393px artboard → fixed proportion of the artboard width */
  width: calc(370 / 393 * 100%);
  /* no hard pixel max-width; it will always be 320px at the design size
     and scale perfectly with the artboard */
  max-width: none;

  font-family: 'Quicksand', sans-serif;
  font-weight: 600;
  font-size: calc(16 / 852 * 100vh);
  line-height: 1.45;

  text-align: left;
  color: #f5dc8c;
}

/* CV icon (download link) */
.cv-icon {
  position: absolute;
  top: calc(636 / 852 * 100%);
  left: 50%;
  transform: translateX(-50%);
  height: calc(60 / 852 * 100%);
  width: auto;
  cursor: pointer;
}

/* ============================================================
   GALLERY PAGE: FILM POSTER
   ------------------------------------------------------------
   film.svg: 393×539, centered horizontally at y = 160
   ============================================================ */

.gallery-film {
  position: absolute;
  top: calc(160 / 852 * 100%);
  left: 50%;
  transform: translateX(-50%);
  height: calc(539 / 852 * 100%);
  width: auto;
  z-index: 5; /* behind heading & links, in front of background */
}

/* Gallery heading ("gallery") – same styling as about-heading */
.gallery-heading {
  position: absolute;
  top: calc(145 / 852 * 100%); /* same vertical as about-heading */
  left: 50%;
  transform: translateX(-50%);

  font-family: "Quicksand", sans-serif;
  font-weight: 600;
  font-size: calc(20 / 852 * 100vh);
  color: #f5dc8c;
  text-align: center;
  white-space: nowrap;
  z-index: 10;
}

/* ============================================================
   GALLERY PAGE: TEXT LINK LIST
   ------------------------------------------------------------
   - First link starts under heading
   - Spacing controlled by --gallery-link-gap
   ============================================================ */

.gallery-links {
  position: absolute;
  top: calc(255 / 852 * 100%); /* below the "gallery" heading */
  left: 50%;
  transform: translateX(-50%);

  display: flex;
  flex-direction: column;
  align-items: center;

  /* vertical gap between links – tweak this to taste */
  --gallery-link-gap: calc(88 / 852 * 100vh);
  gap: var(--gallery-link-gap);

  z-index: 10;
}

/* Individual text links */
.gallery-link {
  background: none;
  border: none;
  padding: 0;

  font-family: "Quicksand", sans-serif;
  font-weight: 600;
  font-size: calc(16 / 852 * 100vh);
  color: #f5dc8c;
  text-align: center;

  cursor: pointer;

  transition:
    filter 160ms ease,
    transform 160ms ease,
    color 160ms ease;
}

/* Same darken-on-hover feeling as hero icon */
.gallery-link:hover,
.gallery-link:focus-visible,
.gallery-link:active {
  filter: brightness(90%); /* darken a bit */
  outline: none;
}

/* ============================================================
   GALLERY MODAL (POPUP)
   ------------------------------------------------------------
   - Fills artboard
   - Centers inner box
   - Scrollable inside if content exceeds height
   ============================================================ */

.gallery-modal {
  position: absolute;
  inset: 0;
  display: none; /* hidden by default */
  align-items: center;
  justify-content: center;

  background: rgba(0, 0, 0, 0.6);
  z-index: 30;
}

.gallery-modal.is-open {
  display: flex;
}

.gallery-modal__inner {
  position: relative;
  width: 100%; /* artboard width */
  max-height: 80%;
  margin: 0 auto;

  background: #191103;
  border-radius: 8px;
  padding: calc(12 / 852 * 100vh) calc(16 / 393 * 100%);

  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(10 / 852 * 100vh);

  overflow-y: auto;
}

/* Close button (16pt-ish) */
.gallery-modal__close {
  position: absolute;
  top: calc(6 / 852 * 100vh);
  right: calc(10 / 393 * 100%);
  background: none;
  border: none;
  padding: 0;

  font-size: calc(16 / 852 * 100vh);
  line-height: 1;
  color: #f5dc8c;
  cursor: pointer;

  transition: filter 160ms ease;
}

.gallery-modal__close:hover,
.gallery-modal__close:focus-visible {
  filter: brightness(90%);
}

/* Thumbnail – artboard width, 16:9 ratio */
.gallery-modal__thumb {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 4px;
}

/* "launch" link */
.gallery-modal__launch {
  font-family: "Quicksand", sans-serif;
  font-weight: 600;
  font-size: calc(16 / 852 * 100vh);
  color: #f5dc8c;
  text-decoration: underline;
  cursor: pointer;

  transition: filter 160ms ease;
}

.gallery-modal__launch:hover,
.gallery-modal__launch:focus-visible {
  filter: brightness(90%);
}

/* Description */
.gallery-modal__desc {
  font-family: "Quicksand", sans-serif;
  font-weight: 400;
  font-size: calc(16 / 852 * 100vh);
  line-height: 1.45;
  color: #f5dc8c;
  text-align: left;
}

/* ============================================================
   CONTACT PAGE: SCROLL IMAGE (300px tall at default)
   ============================================================ */
.contact-scroll {
  position: absolute;
  top: calc(276 / 852 * 100%); /* centers visually for y = 160 + adjustments */
  left: 50%;
  transform: translateX(-50%);
  height: calc(300 / 852 * 100%); /* scales proportionally with viewport */
  width: auto;
  z-index: 5; /* behind text but above background */
}

/* ============================================================
   CONTACT PAGE HEADING (“contact”)
   Matches About heading style and placement rules
   ============================================================ */
.contact-heading {
  position: absolute;
  top: calc(180 / 852 * 100%); /* same vertical ratio as about-heading */
  left: 50%;
  transform: translateX(-50%);

  font-family: 'Quicksand', sans-serif;
  font-weight: 600;
  font-size: calc(20 / 852 * 100vh);
  color: #f5dc8c;
  text-align: center;
  white-space: nowrap;
  z-index: 10;
}

/* ============================================================
   COMING SOON TEXT (overlay)
   Centered on artboard, above scroll.svg
   ============================================================ */
.contact-comingsoon {
  position: absolute;
  top: calc(380 / 852 * 100%); /* vertically centered relative to scroll */
  left: 50%;
  transform: translateX(-50%);

  font-family: 'Quicksand', sans-serif;
  font-weight: 600;
  font-size: calc(24 / 852 * 100vh); /* 24pt at default scale */
  line-height: 1.15;
  color: #f5dc8c;
  text-align: center;

  z-index: 12; /* above scroll graphic */
}

/* ============================================================
   FOOTER TEXT & SOCIAL ICONS
   ------------------------------------------------------------
   text:       x=34,  y=809.5, h≈25
   instagram:  x=263, y=807,   h=30
   linkedin:   x=329, y=807,   h=30
   ============================================================ */

.footer {
  position: static;            /* let the artboard be the containing block */
  pointer-events: none;        /* keep clicks going to the icons/text only */
}

/* Footer copy */
.footer__copy {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: .25em; /* roughly its own height above the bottom of the artboard */

  font-family: "Quicksand", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  font-weight: 300;
  font-size: calc(16 / 852 * 100vh); /* 20px when the artboard is 852px tall */
  line-height: 1;
  color: #facb81;
  white-space: nowrap;
  pointer-events: auto;
}

/* ============================================================
   STARFIELD SIDE BACKGROUND (CONTAINER-DRIVEN, BEHIND ARTBOARD)
   - Attached to .stage so @container works correctly
   - Guaranteed behind .artboard / background.svg layers
   ============================================================ */

/* Ensure stage can host the starfield and keep stacking predictable */
.stage {
  position: relative;
  isolation: isolate;            /* prevents pseudo-elements escaping above children */
}

/* Make sure the artboard always sits above the star layers */
.artboard {
  position: relative;
  z-index: 2;
}

/* Star layers live on .stage so container queries can toggle them */
.stage::before,
.stage::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;                    /* behind artboard (z=2) */
  opacity: 0;                    /* OFF by default (no gutters) */
  animation-play-state: paused;  /* paused until container says “wide enough” */
}

/* Layer A (denser) */
.stage::before {
  background-color: #191103;
  background-image:
    radial-gradient(4px 4px at 4% 10%,  rgba(255,244,220,.90), transparent 60%),
    radial-gradient(4px 4px at 7% 28%,  rgba(255,232,190,.80), transparent 60%),
    radial-gradient(5px 5px at 10% 18%, rgba(255,250,240,.85), transparent 60%),
    radial-gradient(4px 4px at 12% 44%, rgba(255,244,220,.75), transparent 60%),
    radial-gradient(4px 4px at 15% 66%, rgba(255,230,200,.75), transparent 60%),
    radial-gradient(4px 4px at 18% 84%, rgba(255,250,235,.80), transparent 60%),
    radial-gradient(4px 4px at 21% 12%, rgba(255,244,220,.70), transparent 60%),
    radial-gradient(4px 4px at 24% 32%, rgba(255,232,190,.78), transparent 60%),
    radial-gradient(5px 5px at 27% 52%, rgba(255,250,240,.82), transparent 60%),
    radial-gradient(4px 4px at 30% 74%, rgba(255,244,220,.70), transparent 60%),

/*    radial-gradient(4px 4px at 33% 16%, rgba(255,230,200,.72), transparent 60%),
    radial-gradient(4px 4px at 36% 40%, rgba(255,250,235,.80), transparent 60%),
    radial-gradient(4px 4px at 39% 60%, rgba(255,244,220,.78), transparent 60%),
    radial-gradient(5px 5px at 42% 82%, rgba(255,232,190,.85), transparent 60%),
    radial-gradient(4px 4px at 45% 10%, rgba(255,250,240,.78), transparent 60%),
    radial-gradient(4px 4px at 48% 28%, rgba(255,230,200,.70), transparent 60%),
    radial-gradient(4px 4px at 51% 48%, rgba(255,244,220,.82), transparent 60%),
    radial-gradient(5px 5px at 54% 66%, rgba(255,250,235,.85), transparent 60%),
    radial-gradient(4px 4px at 57% 88%, rgba(255,232,190,.75), transparent 60%),
    radial-gradient(4px 4px at 60% 16%, rgba(255,250,240,.78), transparent 60%),

    radial-gradient(4px 4px at 63% 36%, rgba(255,244,220,.80), transparent 60%),
    radial-gradient(4px 4px at 66% 56%, rgba(255,230,200,.70), transparent 60%),
    radial-gradient(5px 5px at 69% 76%, rgba(255,250,235,.85), transparent 60%),
    radial-gradient(4px 4px at 72% 92%, rgba(255,232,190,.72), transparent 60%),
    radial-gradient(4px 4px at 75% 18%, rgba(255,244,220,.78), transparent 60%),
    radial-gradient(4px 4px at 78% 40%, rgba(255,250,240,.78), transparent 60%),
    radial-gradient(5px 5px at 81% 60%, rgba(255,230,200,.85), transparent 60%),
    radial-gradient(4px 4px at 84% 82%, rgba(255,244,220,.70), transparent 60%),
    radial-gradient(4px 4px at 87% 12%, rgba(255,250,235,.78), transparent 60%),
    radial-gradient(4px 4px at 90% 34%, rgba(255,232,190,.75), transparent 60%),*/

    radial-gradient(4px 4px at 93% 54%, rgba(255,250,240,.78), transparent 60%),
    radial-gradient(4px 4px at 96% 78%, rgba(255,230,200,.70), transparent 60%),
    radial-gradient(4px 4px at 6%  54%, rgba(255,244,220,.78), transparent 60%),
    radial-gradient(5px 5px at 14% 8%,  rgba(255,250,235,.88), transparent 60%),
    radial-gradient(4px 4px at 22% 58%, rgba(255,232,190,.72), transparent 60%),
    radial-gradient(4px 4px at 28% 92%, rgba(255,250,240,.76), transparent 60%),
    radial-gradient(4px 4px at 35% 22%, rgba(255,230,200,.70), transparent 60%),
    radial-gradient(5px 5px at 41% 44%, rgba(255,244,220,.86), transparent 60%),
    radial-gradient(4px 4px at 47% 96%, rgba(255,250,235,.78), transparent 60%),
    radial-gradient(4px 4px at 53% 30%, rgba(255,232,190,.74), transparent 60%),

    radial-gradient(4px 4px at 59% 72%, rgba(255,250,240,.78), transparent 60%),
    radial-gradient(4px 4px at 65% 8%,  rgba(255,230,200,.72), transparent 60%),
    radial-gradient(5px 5px at 71% 28%, rgba(255,244,220,.86), transparent 60%),
    radial-gradient(4px 4px at 77% 46%, rgba(255,250,235,.78), transparent 60%),
    radial-gradient(4px 4px at 83% 70%, rgba(255,232,190,.72), transparent 60%),
    radial-gradient(4px 4px at 89% 90%, rgba(255,250,240,.76), transparent 60%),
    radial-gradient(3px 3px at 95% 18%, rgba(255,250,240,.95), transparent 60%),
    radial-gradient(3px 3px at 8%  88%, rgba(255,232,190,.92), transparent 60%),
    radial-gradient(3px 3px at 52% 12%, rgba(255,244,220,.92), transparent 60%);
}

/* Layer B (lighter / offset timing) */
.stage::after {
  background-color: transparent;
  background-image:
    radial-gradient(4px 4px at 5%  18%, rgba(255,236,200,.65), transparent 60%),
    radial-gradient(4px 4px at 9%  36%, rgba(255,248,230,.55), transparent 60%),
    radial-gradient(5px 5px at 13% 26%, rgba(255,240,210,.70), transparent 60%),
    radial-gradient(4px 4px at 17% 10%, rgba(255,250,240,.60), transparent 60%),
    radial-gradient(4px 4px at 21% 48%, rgba(255,236,200,.55), transparent 60%),
    radial-gradient(4px 4px at 25% 70%, rgba(255,248,230,.60), transparent 60%),
    radial-gradient(5px 5px at 29% 84%, rgba(255,240,210,.70), transparent 60%),
    radial-gradient(4px 4px at 33% 14%, rgba(255,250,240,.60), transparent 60%),
    radial-gradient(4px 4px at 37% 40%, rgba(255,236,200,.55), transparent 60%),
    radial-gradient(4px 4px at 41% 62%, rgba(255,248,230,.55), transparent 60%),

    radial-gradient(5px 5px at 45% 28%, rgba(255,240,210,.70), transparent 60%),
    radial-gradient(4px 4px at 49% 12%, rgba(255,250,240,.60), transparent 60%),
    radial-gradient(4px 4px at 53% 52%, rgba(255,236,200,.55), transparent 60%),
    radial-gradient(5px 5px at 57% 22%, rgba(255,248,230,.70), transparent 60%),
    radial-gradient(4px 4px at 61% 38%, rgba(255,240,210,.55), transparent 60%),
    radial-gradient(4px 4px at 65% 74%, rgba(255,250,240,.55), transparent 60%),
    radial-gradient(5px 5px at 69% 90%, rgba(255,236,200,.70), transparent 60%),
    radial-gradient(4px 4px at 73% 64%, rgba(255,248,230,.55), transparent 60%),
    radial-gradient(4px 4px at 77% 84%, rgba(255,240,210,.55), transparent 60%),
    radial-gradient(5px 5px at 81% 16%, rgba(255,250,240,.70), transparent 60%),

    radial-gradient(4px 4px at 85% 46%, rgba(255,236,200,.55), transparent 60%),
    radial-gradient(4px 4px at 89% 68%, rgba(255,248,230,.55), transparent 60%),
    radial-gradient(5px 5px at 93% 30%, rgba(255,240,210,.70), transparent 60%),
    radial-gradient(4px 4px at 96% 88%, rgba(255,250,240,.60), transparent 60%),
    radial-gradient(4px 4px at 12% 8%,  rgba(255,250,240,.85), transparent 60%),
    radial-gradient(4px 4px at 36% 96%, rgba(255,248,230,.80), transparent 60%),
    radial-gradient(4px 4px at 84% 10%, rgba(255,240,210,.80), transparent 60%),
    radial-gradient(3px 3px at 72% 92%, rgba(255,236,200,.85), transparent 60%),
    radial-gradient(3px 3px at 48% 18%, rgba(255,248,230,.80), transparent 60%),
    radial-gradient(3px 3px at 90% 52%, rgba(255,240,210,.78), transparent 60%);
}

/* Activate ONLY when the stage is wide enough that side gutters exist */
@container (min-width: 450px) {
  .stage::before,
  .stage::after {
    opacity: 1;                 /* allow keyframes to control visibility */
    animation-play-state: running;
  }
  .stage::before { animation: starTwinkleA 13s ease-in-out infinite; }
  .stage::after  { animation: starTwinkleB 13s ease-in-out infinite; animation-delay: -3.6s; }
}

/* Twinkle animations (stars can go fully OFF for a while) */
@keyframes starTwinkleA {
  0%   { opacity: 0; }
  18%  { opacity: 0; }
  36%  { opacity: 0.85; }
  62%  { opacity: 0.55; }
  78%  { opacity: 0.95; }
  100% { opacity: 0; }
}

@keyframes starTwinkleB {
  0%   { opacity: 0; }
  12%  { opacity: 0; }
  34%  { opacity: 0.60; }
  58%  { opacity: 0.35; }
  76%  { opacity: 0.80; }
  100% { opacity: 0; }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  .stage::before,
  .stage::after {
    animation: none !important;
    opacity: 0 !important;
  }
}