/* Mama Bloom — HOME v2 signature moments. Loads after css/mb-core.css + css/home.css.
   1. The dawn, as a landscape the scroll carries from night into morning.
   2. The thread ties the bloom: at the close, the thread draws the mark, which breathes once.
   Plus: the CTA's gold thread, and the 600 ms intro that stitches the ribbon.
   Only transform, opacity and filter animate (and one stroke-dashoffset per drawn line). */

/* ------------------------------------------------------------------ 1 · the dawnscape */
.dawnscape { position: relative; height: calc(var(--vh) * 118); view-timeline: --dawn block; } /* founder 28 Sep: less empty sky */
@media (max-width: 719.98px) { .dawnscape { height: calc(var(--vh) * 112); } }
.dawnscape__stage {
  position: sticky; top: 0; z-index: 3; height: calc(var(--vh) * 100); min-height: 520px; overflow: hidden;
  background: #1d1323; color: var(--ink);
}
.ds { position: absolute; inset: 0; pointer-events: none; }
.ds-sky--night { background: linear-gradient(#1d1323 0%, #221626 40%, #37202f 72%, #5b3346 100%); }
.ds-sky--dawn { background: linear-gradient(#2b1b2f 0%, #5e344c 30%, #b8697f 56%, #e89c86 76%, #f5c79d 100%); }
.ds-sky--day { background: linear-gradient(#f3e2df 0%, #f7eae4 42%, #fbe9d8 74%, #fde3c6 100%); }
.ds-stars { bottom: 38%; }
.ds-stars svg { width: 100%; height: 100%; }
.ds-sun {
  inset: auto auto 26% 60%; width: 52vmin; height: 52vmin; margin-left: -26vmin; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 240, 210, .96) 0 13%, rgba(253, 214, 160, .62) 26%, rgba(242, 168, 132, .24) 46%, transparent 68%);
}
.ds-dune { position: absolute; left: 0; right: 0; bottom: 0; top: auto; width: 100%; }
.ds-far { height: 56%; }
.ds-mid { height: 42%; }
.ds-near { height: 29%; }
.ds-crest { height: 29%; }
.ds-crest { filter: drop-shadow(0 0 5px rgba(236, 200, 128, .55)); }
.ds-crest path { fill: none; stroke: url(#ds-gold); stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; }
/* Dawn light: a warm rose-gold wash that catches the dunes as the sun rises (peaks mid-scroll). */
.ds-glow { background: radial-gradient(70% 55% at 60% 72%, rgba(255, 186, 140, .5), rgba(232, 140, 140, .22) 45%, transparent 75%); }
.ds-grain { z-index: 5; background: url("../assets/img/grain-ink.webp") repeat 0 0 / 256px 256px; opacity: .9; }
.ds-rim path { fill: none; stroke: rgba(255, 244, 236, .55); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ds-grass path { fill: none; stroke-width: 1.1; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ds-petal {
  position: absolute; top: 0; left: 0; width: 14px; height: 9px; border-radius: 0 70% 0 70%;
  background: linear-gradient(135deg, #e6a9bb, #b86185); opacity: .85;
}
.ds-petal:nth-child(2) { width: 10px; height: 7px; }
.ds-petal:nth-child(3) { width: 16px; height: 10px; opacity: .7; }
.ds-petal:nth-child(4) { width: 9px; height: 6px; }
.ds-petal:nth-child(5) { width: 12px; height: 8px; opacity: .75; }
.ds-copy { position: absolute; inset: 0; z-index: 6; padding-top: calc(var(--nav-h) + clamp(28px, 8vh, 96px)); }
/* The heading is present from the first frame (founder: the empty night screen was too much gap): cream on the night
   sky, ink once it is morning. The founder's choice (5 Oct 2026, "2"): the switch is a class at 54 % of the dawn
   (.ds-copy.is-day, set by js/home-v2.js from the dawn's own timeline) with a 250 ms colour transition, so a reader
   who stops scrolling never sees the heading half-way. Eyebrow and folio switch with it, cream -> ink. */
.ds-copy .ch__head { color: #f5ede6; transition: color .25s ease; }
.ds-copy .ch__head .title, .ds-copy .lede { color: inherit; }
.ds-copy .eyebrow, .ds-copy .folio { color: #f5ede6; transition: color .25s ease; }
.ds-copy.is-day .ch__head, .ds-copy.is-day .eyebrow, .ds-copy.is-day .folio { color: #1e0d17; }
/* The scrim behind the eyebrow + title and behind the lede: night tone before the switch, morning tone after it
   (alpha .55), full over 32-59 % of the dawn, fading in from 26 % and out by 65 %. Two decorative elements
   (.ds-scrim.ds-anim, aria-hidden, no words) on the dawn's own timeline, compositor or fallback scrub alike. */
.ds-copy .ch__head > div, .ds-copy__lede { position: relative; isolation: isolate; }
.ds-copy__lede { width: fit-content; } /* the lede's own box (its 46ch cap included): the scrim is as wide as the words */
.ds-scrim {
  position: absolute; inset: -30px -40px; z-index: -1; border-radius: 56px; pointer-events: none;
  background-color: rgba(29, 19, 35, .55); filter: blur(16px); opacity: 0; transition: background-color .25s ease;
  animation-name: ds-scrim-on;
}
@keyframes ds-scrim-on { 0%, 26% { opacity: 0; } 32%, 59% { opacity: 1; } 65%, 100% { opacity: 0; } }
.ds-copy.is-day .ds-scrim { background-color: rgba(247, 235, 228, .55); }
.reduce .ds-copy .eyebrow, .reduce .ds-copy .folio { color: var(--rose) !important; }
.reduce .ds-scrim, .no-js .ds-scrim { display: none; }
.reduce .ds-copy .ch__head, .reduce .ds-copy .eyebrow, .reduce .ds-copy .folio { transition: none !important; }
@media (max-width: 719.98px) { .ds-copy { padding-top: calc(var(--nav-h) + 24px); } .ds-sun { inset: auto auto 22% 64%; } }

/* The scroll carries the scene (compositor-driven where supported). */
.ds-anim { animation-duration: 1000ms; animation-timing-function: linear; animation-fill-mode: both; animation-play-state: paused; }
@supports (animation-timeline: view()) {
  .motion .ds-anim { animation-duration: auto; animation-play-state: running; animation-timeline: --dawn; animation-range: entry 55% contain 100%; }
}
.ds-sky--dawn { animation-name: ds-dawn-sky; }
.ds-sky--day { animation-name: ds-day-sky; }
.ds-stars { animation-name: ds-stars; }
.ds-sun { animation-name: ds-sun; }
.ds-far.ds-day { animation-name: ds-day-far; }
.ds-mid.ds-day { animation-name: ds-day-mid; }
.ds-near.ds-day { animation-name: ds-day-near; }
.ds-far { animation-name: ds-far; }
.ds-mid { animation-name: ds-mid; }
.ds-near, .ds-crest { animation-name: ds-near; }
.ds-crest path { animation: ds-crest 1000ms linear both paused; }
@supports (animation-timeline: view()) {
  .motion .ds-crest path { animation-duration: auto; animation-play-state: running; animation-timeline: --dawn; animation-range: entry 55% contain 100%; }
}
.ds-glow { animation-name: ds-glow; }
.ds-petal { animation-name: ds-petal-a; }
.ds-petal:nth-child(2) { animation-name: ds-petal-b; }
.ds-petal:nth-child(3) { animation-name: ds-petal-c; }
.ds-petal:nth-child(4) { animation-name: ds-petal-d; }
.ds-petal:nth-child(5) { animation-name: ds-petal-e; }

@keyframes ds-stars { 0% { opacity: 1; } 42% { opacity: 0; } 100% { opacity: 0; } }
@keyframes ds-dawn-sky { 0%, 6% { opacity: 0; } 42% { opacity: 1; } 100% { opacity: 1; } }
@keyframes ds-day-sky { 0%, 40% { opacity: 0; } 78% { opacity: 1; } 100% { opacity: 1; } }
@keyframes ds-glow { 0%, 12% { opacity: 0; } 48% { opacity: 1; } 100% { opacity: .35; } }
@keyframes ds-sun { 0%, 8% { opacity: 0; transform: translateY(46%) scale(.86); } 70% { opacity: 1; transform: translateY(-2%) scale(1); } 100% { opacity: .9; transform: translateY(-14%) scale(1.04); } }
@keyframes ds-far { from { transform: translateY(5%); } to { transform: translateY(0); } }
@keyframes ds-mid { from { transform: translateY(9%); } to { transform: translateY(0); } }
@keyframes ds-near { from { transform: translateY(14%); } to { transform: translateY(0); } }
@keyframes ds-day-far { 0% { opacity: 0; transform: translateY(5%); } 34% { opacity: 0; } 80% { opacity: 1; } 100% { opacity: 1; transform: translateY(0); } }
@keyframes ds-day-mid { 0% { opacity: 0; transform: translateY(9%); } 38% { opacity: 0; } 84% { opacity: 1; } 100% { opacity: 1; transform: translateY(0); } }
@keyframes ds-day-near { 0% { opacity: 0; transform: translateY(14%); } 42% { opacity: 0; } 88% { opacity: 1; } 100% { opacity: 1; transform: translateY(0); } }
@keyframes ds-crest { 0%, 10% { stroke-dashoffset: 1; } 74% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; } }
@keyframes ds-petal-a { from { transform: translate(-6vw, 30vh) rotate(0deg); } to { transform: translate(58vw, 62vh) rotate(220deg); } }
@keyframes ds-petal-b { from { transform: translate(22vw, 16vh) rotate(40deg); } to { transform: translate(84vw, 48vh) rotate(260deg); } }
@keyframes ds-petal-c { from { transform: translate(-10vw, 52vh) rotate(-20deg); } to { transform: translate(36vw, 70vh) rotate(160deg); } }
@keyframes ds-petal-d { from { transform: translate(48vw, 8vh) rotate(10deg); } to { transform: translate(104vw, 40vh) rotate(200deg); } }
@keyframes ds-petal-e { from { transform: translate(8vw, 40vh) rotate(60deg); } to { transform: translate(70vw, 56vh) rotate(300deg); } }

/* Grasses sway only while the scene is on screen (ambient; never with reduced motion). */
.ds-grass g { transform-box: fill-box; transform-origin: 50% 100%; }
.motion .dawnscape.is-live .ds-grass g { animation: ds-sway 5.5s ease-in-out infinite alternate; }
.motion .dawnscape.is-live .ds-grass g:nth-child(2n) { animation-duration: 7s; animation-delay: -2s; }
@keyframes ds-sway { from { transform: skewX(-2.5deg); } to { transform: skewX(2.5deg); } }

/* Reduced motion: the same scene, still, in its morning state. */
.reduce .dawnscape { height: auto; }
.reduce .dawnscape__stage { position: relative; height: min(calc(var(--vh) * 100), 900px); }
.reduce .ds-sky--dawn, .reduce .ds-sky--day, .reduce .ds-day, .reduce .ds-copy .ch__head { opacity: 1 !important; filter: none !important; transform: none !important; }
.reduce .ds-copy .ch__head { color: #1e0d17 !important; }
.reduce .ds-stars, .reduce .ds-petal { opacity: 0 !important; }
.reduce .ds-glow { opacity: .35 !important; }
.reduce .ds-sun { opacity: .9 !important; transform: translateY(-10%) !important; }
.reduce .ds-far, .reduce .ds-mid, .reduce .ds-near, .reduce .ds-crest { transform: none !important; }
.reduce .ds-crest path { stroke-dashoffset: 0 !important; }

/* In v2 the static dawn painting is replaced by the scene. */
.seasons > .wrap { margin-top: clamp(40px, 6vw, 88px); }

/* The bloom close and the CTA thread now live in css/mb-core.css (every page ends the same way). */

/* ------------------------------------------------------------------ the 600 ms intro: one stitch of the ribbon */
html.intro .intro svg { width: 132px; height: auto; }
html.intro .intro path { stroke-width: 1.2; vector-effect: non-scaling-stroke; }