/* =============================================================================
   CTFY · Mendi (/programs/mendi/, PRD pages/30) · page-only layout
   Builds on css/site.css and css/modules.css. Page variants here: the white product plate
   (hero) and the prefrontal-glow card (hero moment). The glow builds once, in about 4.5 s, when the
   card scrolls into view: the bloom (opacity only) rises monotonically while a small ball travels
   (transform only) to the forehead, then everything holds. No loop, no pulse, no flicker.
   Default CSS = the finished state (bloom at .85, ball at the forehead), which is also what
   prefers-reduced-motion, the G4 toggle and no-JS show.
   ============================================================================= */

/* ---------- 1 · Hero (H5): product plate ---------- */
.mn-hero .hero__chips{margin-top:clamp(20px,2.4vw,32px)}
.mn-hero .hero__chips .chip{text-decoration:none}
/* The A17 cut-out (tech-mendi) keeps soft white halos under the headband that read as a paper edge on dark, so the
   hero uses PRD 30's fallback: the square product shot (pure white ground) as a bright plate in the rounded frame. */
.mn-plate{background:#fff;box-shadow:0 0 0 1px var(--line-2),0 40px 120px -40px var(--theta-glow)}
.mn-plate picture{display:block;width:100%;height:100%}
.mn-plate img{object-fit:contain}
@media (max-width:599px){
  .mn-hero .hero__chips{flex-wrap:nowrap;overflow-x:auto;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);scrollbar-width:none}
  .mn-hero .hero__chips::-webkit-scrollbar{display:none}
  .mn-hero .hero__chips .chip{white-space:nowrap}
}

/* ---------- 2 · Why: split with the glow card ---------- */
.mn-split .m-split__media{aspect-ratio:var(--ratio,4/5)}
@media (max-width:1023px){
  .mn-split .m-split__media{order:0;aspect-ratio:var(--ratio-m,4/3)}
}
.mn-card{position:relative;isolation:isolate;overflow:hidden;width:100%;height:100%;border-radius:var(--r-xl);display:grid;place-items:center}
.mn-stage{position:relative;height:100%;aspect-ratio:4/5;max-width:100%}
.mn-svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.mn-head{fill:none;stroke:var(--line-2);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.mn-bloom{opacity:.85}
.mn-ball{fill:var(--text-1)}
.mn-ball-halo{fill:rgba(163,174,255,.28)}
.mn-ball-x{transform:translateX(262px)}
.mn-ball-y{transform:translateY(-258px)}
.mn-leader{position:absolute;left:74.5%;top:11%;height:14%;width:1px;background:var(--line-2)}
.mn-label{position:absolute;left:61%;top:4.5%;color:var(--text-2);letter-spacing:.04em;white-space:nowrap}

/* pre-entry (JS + motion on): bloom dark, ball at its start */
html.js:not([data-motion="off"]) .mn-card:not(.is-entered) .mn-bloom{opacity:0}
html.js:not([data-motion="off"]) .mn-card:not(.is-entered) .mn-ball-x,
html.js:not([data-motion="off"]) .mn-card:not(.is-entered) .mn-ball-y{transform:none}

@keyframes mn-bloom{0%{opacity:0}89%{opacity:.8}100%{opacity:.85}}
@keyframes mn-x{0%{transform:translateX(0);animation-timing-function:cubic-bezier(.77,0,.175,1)}89%{transform:translateX(258px);animation-timing-function:cubic-bezier(.23,1,.32,1)}100%{transform:translateX(262px)}}
@keyframes mn-y{0%{transform:translateY(0);animation-timing-function:cubic-bezier(.3,.1,.3,1)}89%{transform:translateY(-252px);animation-timing-function:cubic-bezier(.23,1,.32,1)}100%{transform:translateY(-258px)}}
@media (prefers-reduced-motion:no-preference){
  html:not([data-motion="off"]) .mn-card.is-entered .mn-bloom{animation:mn-bloom 4.5s cubic-bezier(.45,0,.3,1) both}
  html:not([data-motion="off"]) .mn-card.is-entered .mn-ball-x{animation:mn-x 4.5s both}
  html:not([data-motion="off"]) .mn-card.is-entered .mn-ball-y{animation:mn-y 4.5s both}
}

/* ---------- 3 · Note ---------- */
.mn-note{padding-block:clamp(40px,5vw,72px)}