/* #dawn — the closing callback (SECTIONS.md §9): the hero constellation again, in the dawn sky — your star is the last to leave.
   Base = final state (no JS / reduced motion): poster, dawn colours, ONLY your star + its label. */
.sec--dawn {
  display: grid; justify-items: center; align-content: start; padding-block: clamp(150px, 33svh, 320px) var(--sec-pad); isolation: isolate; overflow: clip;
  min-block-size: max(100svh, 54vw); background: var(--sky);   /* the strip above the frame is dawn sky, not a black bar */
}

/* the frame starts below the fixed header, so the morning star is never under it at rest; the top edge melts into the night */
.dawn-media {
  position: absolute; inset: var(--header-h) 0 0 0; z-index: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 56px); mask-image: linear-gradient(to bottom, transparent 0, #000 56px);
}
.dawn-video, .dawn-poster, .dawn-svg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
.dawn-video, .dawn-poster { object-fit: cover; object-position: 50% 0%; max-inline-size: none; }
.dawn-poster { transition: opacity .9s var(--ease-soft); }
.sec--dawn.is-playing .dawn-poster { opacity: 0; }

/* ground shift night → dawn: overlay opacity .9 → .25 */
.dawn-ground { position: absolute; inset: 0; background: var(--night); opacity: .25; }
.sec--dawn.dawn--armed .dawn-ground { opacity: .9; transition: opacity 1.2s var(--ease-io); }
.sec--dawn.dawn--armed.is-dawn .dawn-ground { opacity: .25; }
@keyframes dawn-ground { from { opacity: .9; } to { opacity: .25; } }
@supports (animation-timeline: view()) {
  .sec--dawn.dawn--armed .dawn-ground { opacity: .9; transition: none; animation: dawn-ground linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
}

/* constellation: 8 four-point stars + 7 hairlines (same glyph, halo and line style as the hero), svg geometry matches the cover crop */
.dawn-svg { overflow: hidden; }
.dawn-svg--tall { display: none; }
.dawn-cs, .dawn-you { transform-box: fill-box; transform-origin: center; }
.dawn-core { fill: var(--star); }
.dawn-you .dawn-core { fill: var(--gold); filter: drop-shadow(0 0 6px rgba(242, 199, 126, .9)); }
.dawn-seg { fill: none; stroke: var(--star); stroke-opacity: .7; stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.dawn-label { fill: var(--gold); font-family: var(--font-text); font-weight: 500; paint-order: stroke; stroke: rgba(10, 11, 20, .55); stroke-width: 3px; stroke-linejoin: round; }
/* final state: only your star + label */
.dawn-cs, .dawn-seg { opacity: 0; }

/* the story (JS only): everything visible at .85 → the 7 others + hairlines leave (0.12 s stagger, 0.6 s each, from 0.4 s) → your star blooms */
.sec--dawn.dawn--armed .dawn-cs, .sec--dawn.dawn--armed .dawn-seg { opacity: .85; }
.sec--dawn.dawn--armed .dawn-you { opacity: .85; transform: scale(.8); }
.sec--dawn.dawn--armed .dawn-label { opacity: 0; }
.sec--dawn.dawn--armed.is-bloom .dawn-cs, .sec--dawn.dawn--armed.is-bloom .dawn-seg { opacity: 0; transition: opacity .6s ease calc(.4s + var(--i) * .12s); }
.sec--dawn.dawn--armed.is-bloom .dawn-you { animation: dawn-bloom .5s var(--ease-spring) 1.4s both; }
.sec--dawn.dawn--armed.is-bloom .dawn-label { opacity: 1; transition: opacity .4s ease 1.75s; }
@keyframes dawn-bloom {
  0% { opacity: .85; transform: scale(.8); animation-timing-function: var(--ease-spring); }
  55% { transform: scale(1.25); animation-timing-function: var(--ease-out); }
  100% { opacity: 1; transform: scale(1); }
}

/* copy: calm area, radial scrim behind it */
.dawn-copy {
  position: relative; z-index: 2; display: grid; justify-items: center; gap: 22px; text-align: center;
  inline-size: min(100% - 2 * var(--gutter), 40rem);
}
.dawn-copy::before {
  content: ""; position: absolute; inset: -34% -42% -52%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(10, 11, 20, .6) 0, rgba(10, 11, 20, .58) 52%, rgba(10, 11, 20, .3) 78%, rgba(10, 11, 20, 0) 100%);
}
.dawn-copy .lead { margin-inline: auto; color: var(--star); }
.dawn-copy .price-line { color: var(--star); }

/* pause control for the looping footage (WCAG 2.2.2) — same look as .hero-pause; shown only once the video runs */
.dawn-pause {
  position: absolute; inset-block-end: 20px; inset-inline-end: var(--gutter); z-index: 3; inline-size: 44px; block-size: 44px;
  display: grid; place-items: center; padding: 0; border-radius: var(--r-pill); border: 1px solid var(--glass-edge); color: var(--star); cursor: pointer;
  background: var(--glass-bg); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.dawn-pause[hidden] { display: none; }
.dawn-pause svg { inline-size: 18px; block-size: 18px; fill: currentColor; }
.dawn-pause .i-play, .dawn-pause[aria-pressed="true"] .i-pause { display: none; }
.dawn-pause[aria-pressed="true"] .i-play { display: block; }

@media (max-width: 760px) {
  .sec--dawn { min-block-size: 92svh; padding-block-start: clamp(170px, 26svh, 230px); }
  .dawn-video, .dawn-poster { object-position: 0% 50%; }
  .dawn-svg--wide { display: none; }
  .dawn-svg--tall { display: block; }
  .dawn-copy { gap: 18px; }
  .dawn-copy::before { inset: -42% -40% -56%; }
  .dawn-pause { inset-block-end: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .sec--dawn .dawn-ground { animation: none; opacity: .25; transition: none; }
  .sec--dawn .dawn-cs, .sec--dawn .dawn-seg { opacity: 0; transition: none; }
  .sec--dawn .dawn-you { animation: none; opacity: 1; transform: none; }
  .sec--dawn .dawn-label { opacity: 1; transition: none; }
}