/* ======================================================================
   SEERAH — سماء السيرة: the sky is the clock, and it only ever gains stars.
   Builds on site.css (life grammar: .scene, .panel, .more, .isnad, .rail…).
   New pigment for the fourth era only: dawn-rose — the Fath is neither قبل
   nor مع nor بعد, it is the light itself arriving.
   ====================================================================== */
:root { --dawn: #cf7a52; --abyss: #060913; }
:root[data-theme="light"] { --dawn: #a34e28; --abyss: #f1e8d3; }

/* the panels below mount lazily; anchoring would yank the reader as they inflate */
html { overflow-anchor: none; }
body.seerah { background: var(--abyss); }
/* reserve the plate's height before its art arrives, so the page never reflows under the reader */
.seerah .panel { aspect-ratio: 480 / 331; min-height: 0; }
.seerah .panel svg { height: 100%; }
.seerah .veil { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.seerah .scroll { position: relative; z-index: 2; }

/* ---------- the peopled sky: خاتم stars that ignite and stay ---------- */
.cstars { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; overflow: visible; }
.cstar { pointer-events: auto; cursor: pointer; outline: none; }
.cstar .body { fill: var(--gold); stroke: var(--night-2); stroke-width: 1; transform-box: fill-box; transform-origin: center;
  opacity: 0; transform: scale(.15) rotate(-40deg); transition: opacity .7s var(--ease), transform .9s var(--ease); }
.cstar .halo { fill: url(#csHalo); opacity: 0; transform-box: fill-box; transform-origin: center; transition: opacity .9s var(--ease); }
.cstar text { font-family: var(--display); font-size: 13px; fill: var(--ivory-2); text-anchor: middle;
  paint-order: stroke; stroke: var(--abyss); stroke-width: 4px; stroke-linejoin: round;
  opacity: 0; transition: opacity .7s var(--ease), fill .3s; }
.cstar.lit .body { opacity: 1; transform: none; }
.cstar.lit .halo { opacity: .8; animation: breathe 6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -.8s); }
.cstar.lit text { opacity: .75; }
.cstar.lit:hover .body, .cstar.lit:focus-visible .body, .cstar.flare .body { transform: scale(1.45); filter: drop-shadow(0 0 10px var(--gold)); }
.cstar.lit:hover text, .cstar.lit:focus-visible text, .cstar.flare text { opacity: 1; fill: var(--gold); }
.cstar.lit:focus-visible .body { stroke: var(--ivory); stroke-width: 2; }
.cstar:not(.lit) { pointer-events: none; }
:root[data-theme="light"] .cstar .halo { display: none; }
:root[data-theme="light"] .cstar.lit:hover .body, :root[data-theme="light"] .cstar.flare .body { filter: none; }

/* the ignition comet: a spark that flies from the line you are reading up into the sky */
.comet { position: fixed; z-index: 40; width: 9px; height: 9px; margin: -4.5px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 6px 2px color-mix(in srgb, var(--gold) 70%, transparent); pointer-events: none; }

/* ---------- the thread of light down the reading lane ---------- */
.seerah .thread { position: absolute; inset-block: 0; inset-inline-start: clamp(1.6rem, 4vw, 3.2rem); width: 2px; z-index: 0;
  background-image: repeating-linear-gradient(to bottom, color-mix(in srgb, var(--ivory-3) 50%, transparent) 0 3px, transparent 3px 12px); }
.seerah .thread::before { content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--gold) 40%, transparent), var(--gold));
  transform-origin: top; transform: scaleY(var(--drawn, 0)); }
.seerah .thread::after { content: ''; position: absolute; top: calc(var(--drawn, 0) * 100%); inset-inline-start: 50%;
  width: 9px; height: 9px; margin: -4.5px; border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 8px 2px color-mix(in srgb, var(--gold) 55%, transparent); }
:root[data-theme="light"] .seerah .thread::after { box-shadow: none; }

/* ---------- the clock: light position = date, always legible ---------- */
.clock { position: fixed; z-index: 12; inset-inline-start: .8rem; bottom: .9rem; display: grid; gap: .1rem;
  font-family: var(--display); pointer-events: none; padding: .45rem .8rem .5rem; border-radius: .5rem;
  background: color-mix(in srgb, var(--night-2) 78%, transparent); border: 1px solid color-mix(in srgb, var(--ivory-3) 35%, transparent); }
.clock b { font-weight: 600; font-size: 1.35rem; line-height: 1.1; color: var(--gold); }
.clock span { font-size: .78rem; color: var(--ivory-2); }

/* ---------- hero, era heads, the close ---------- */
.s-hero { min-height: 100svh; display: grid; align-content: end; gap: .9rem;
  padding: 7rem clamp(1.25rem, 6vw, 5rem) 16svh; padding-inline-start: clamp(3.2rem, 8vw, 6.5rem); }
.s-hero h1 { font-size: clamp(2.1rem, 5.5vw, 4rem); line-height: 1.25; color: var(--ivory); max-width: 24ch; text-wrap: balance; margin: 0; }
.s-hero .tagline { font-family: var(--display); font-size: clamp(1rem, 2vw, 1.2rem); color: var(--gold); margin: 0; max-width: 34rem; }
.s-hero .lead { color: var(--ivory-2); font-size: clamp(1.15rem, 2vw, 1.3rem); line-height: 1.8; max-width: 34rem; margin: 0; }
.s-hero .hint { margin-top: .8rem; display: flex; align-items: center; gap: .6rem; font-family: var(--display); font-size: .95rem; color: var(--ivory-2); }
.s-hero .hint svg { width: 1.1rem; height: 1.1rem; animation: nudge 1.8s var(--ease) infinite; }
.s-hero .draft { font-family: var(--display); font-size: .85rem; color: var(--ivory-3); margin: 0; }

.era { --accent: var(--gold); }
.era[data-id="before"]  { --accent: var(--ivory-2); }   /* pre-light: silver, not a pigment yet */
.era[data-id="makkah"]  { --accent: var(--gold); }
.era[data-id="madinah"] { --accent: var(--mal); }
.era[data-id="fath"]    { --accent: var(--dawn); }
.era-head .span { font-family: var(--display); color: var(--accent); font-size: .95rem; margin: .5rem 0 0; }
/* the clock already names the era; rail labels would cross the reading column in LTR */
.seerah .rail a span { display: none; }

.seerah .scene { padding-inline-start: clamp(3.2rem, 8vw, 6.5rem); }
/* the night travels with the words: a scrim keeps the column legible when the sky floods with
   dawn, and solid enough that no star name ghosts through it in either theme or direction */
.seerah .scene .text { background: color-mix(in srgb, var(--abyss) 62%, transparent); border-radius: 1rem; padding: 1.1rem 1.2rem 1.2rem; }
:root[data-theme="light"] .seerah .scene .text { background: color-mix(in srgb, var(--abyss) 82%, transparent); }
/* over the closing, the sky speaks for itself: names retire, the stars stay */
body.at-close .cstar text { opacity: 0; }
.seerah .chapter-head, .seerah .s-close { position: relative; z-index: 1; }
.seerah .acts { margin: .4rem 0 0; }
.seerah .with-chips a { position: relative; }
.seerah .with-chips a::before { content: ''; display: inline-block; width: .55em; height: .55em; margin-inline-end: .4em;
  background: currentColor; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }

.s-close { min-height: 92svh; display: grid; align-content: center; justify-items: center; text-align: center; gap: 1rem;
  padding: 7rem clamp(1.25rem, 6vw, 5rem) 20svh; }
.s-close h2 { font-size: clamp(2rem, 5.5vw, 3.2rem); color: var(--ivory); text-wrap: balance; margin: 0; }
.s-close .text { max-width: 36rem; color: var(--ivory-2); font-size: clamp(1.15rem, 2vw, 1.35rem); line-height: 1.85; margin: 0; }
.s-close .chips { justify-content: center; }
.s-close .row { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: center; justify-content: center; margin-top: .8rem; }

/* ---------- responsive ---------- */
@media (max-width: 800px) {
  .seerah .thread { inset-inline-start: .55rem; }
  .seerah .scene { padding-inline-start: 1.55rem; padding-inline-end: 1.05rem; }
  .seerah .scene .text { padding: .9rem .95rem 1rem; }
  .s-hero { padding-inline: 1.7rem 1.2rem; padding-bottom: 22svh; }
  /* a phone's sky is mostly behind the reading column: the stars go ambient — the
     chips are the named, tappable layer there */
  .cstar { pointer-events: none; }
  .cstar text { display: none; }
  .cstar.lit .body { opacity: .55; }
  .cstar.lit .halo { opacity: .45; }
  /* the clock joins the top chrome instead of floating over the reading line */
  .clock { inset-inline-start: .8rem; bottom: auto; top: 4.2rem; padding: .3rem .6rem .35rem; }
  .clock b { font-size: 1rem; }
  .clock span { font-size: .7rem; }
}

@media (prefers-reduced-motion: reduce) {
  .cstar .body, .cstar .halo, .cstar text { transition: none; }
  .cstar.lit .halo { animation: none; }
  .s-hero .hint svg { animation: none; }
  .comet { display: none; }
}