/* =====================================================================
   CTFY · Midnight Theta · Impact (/about/impact/) — page layer
   Spec: docs/redesign/pages/36-impact.md. Builds on css/site.css and css/modules.css.
   Chapters: I dark media hero (H7) → word stats (M03 "Word Stats", the hero moment) · II porcelain "who we reach"
   (M12), testimonials teaser, bridge M30 · III finale M17.
   Word stats: four Cormorant words light .18 → 1 in turn (modules.css drives the states; here: size, a theta bloom
   behind each word, labels that fade up after their word). Default and reduced/off state: all lit.
   ===================================================================== */

#difference,#reach,#book{scroll-margin-top:96px}

/* ---------- I · Word stats ---------- */
.im-words{padding-block:clamp(72px,9vw,128px);overflow:hidden;overflow:clip}
.im-words>.blueprint{opacity:.3}
.im-words .m-spec{gap:clamp(20px,3vw,40px)}
.im-words .m-spec__item{position:relative;isolation:isolate}
.im-words .m-spec--words .m-spec__num{font-size:calc(var(--t-display-l) * var(--k-display) * .8);overflow-wrap:normal;hyphens:manual}
.im-words .m-spec__label{font:400 calc(var(--t-lead) * var(--k-text) * .86)/1.45 var(--font-sans);color:var(--text-2);max-width:24ch}
.m-spec__bloom{position:absolute;z-index:-1;left:-14%;right:-14%;top:12%;height:130px;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(62,85,245,.34),transparent 72%);opacity:.32}

/* motion on: bloom rises with its word and settles low; labels follow the word */
.js .m-spec--words .m-spec__item.is-pending .m-spec__bloom{opacity:0;transform:translateY(14px) scale(.85)}
.js .m-spec--words .m-spec__item.is-pending .m-spec__label{opacity:0;transform:translateY(10px)}
.m-spec--words .m-spec__item.is-in .m-spec__bloom{transition:opacity 1200ms var(--ease-out) calc(var(--delay,0ms) + 300ms),transform 1200ms var(--ease-out) calc(var(--delay,0ms) + 300ms)}
.m-spec--words .m-spec__item.is-in .m-spec__label{transition:opacity 700ms var(--ease-out) calc(var(--delay,0ms) + 900ms),transform 700ms var(--ease-out) calc(var(--delay,0ms) + 900ms)}
.m-spec--words .m-spec__item.is-in .m-spec__bloom{animation:im-bloom 1800ms var(--ease-out) calc(var(--delay,0ms) + 300ms) 1 both}
@keyframes im-bloom{0%{opacity:0}45%{opacity:.62}100%{opacity:.32}}
@media (max-width:1023px){
  .im-words .m-spec--words .m-spec__num{font-size:calc(var(--t-display-l) * var(--k-display) * .78)}
}
@media (max-width:599px){
  .im-words .m-spec--words .m-spec__num{font-size:calc(2.5rem * var(--k-display))}
  .im-words .m-spec__label{font-size:1rem}
}
[data-motion="off"] .m-spec__bloom{animation:none!important;transform:none!important;opacity:.32!important;transition:none!important}
[data-motion="off"] .m-spec--words .m-spec__label{opacity:1!important;transform:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){.m-spec__bloom{animation:none!important;transform:none!important;opacity:.32!important}.m-spec--words .m-spec__label{opacity:1!important;transform:none!important}}
@media print{.m-spec__bloom{display:none}}

/* ---------- II · Who we reach ---------- */
.im-reach .sec__head{margin-bottom:clamp(32px,4vw,56px)}
.im-reach .card__media{overflow:hidden}
.im-reach .card__media img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 40%)}

/* ---------- Testimonials teaser ---------- */
.im-teaser{background:var(--paper-1)}
.im-teaser .sec__head{margin-bottom:clamp(28px,3vw,44px)}
.im-teaser .btn-row{justify-content:center;margin-top:24px}
.im-quote{margin:0 auto;max-width:640px;text-align:center}
.im-quote blockquote{margin:0}
.im-quote blockquote p{color:var(--fg-1);font:italic 400 calc(var(--t-title) * 1.25 * var(--k-display))/1.35 var(--font-display)}
.im-quote figcaption{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:22px;color:var(--fg-3);font:400 calc(var(--t-small) * var(--k-text))/1.4 var(--font-sans);text-align:left}
.im-quote figcaption img{width:56px;height:56px;border-radius:50%;object-fit:cover;object-position:50% 30%}
.im-quote figcaption b{display:block;color:var(--fg-1);font-weight:600}

/* ---------- Bridge on paper ---------- */
.im-bridge{padding-top:clamp(24px,3vw,48px)}
.im-bridge .m-bridge__line{max-width:24ch}

/* ---------- Hero media fills its frame (H7 with a plain <picture>, no film wrapper) ---------- */
.hero--media .hero__media picture{display:contents}
.hero--media .hero__media img{display:block;width:100%;height:100%;object-fit:cover}

/* ---------- Bulgarian: longer words in the word-stat columns ---------- */
html[lang="bg"] .im-words .m-spec--words .m-spec__num{font-size:calc(var(--t-display-l) * var(--k-display) * .56)}
@media (max-width:1023px){
  html[lang="bg"] .im-words .m-spec--words .m-spec__num{font-size:calc(var(--t-display-l) * var(--k-display) * .56)}
}
@media (max-width:599px){
  html[lang="bg"] .im-words .m-spec--words .m-spec__num{font-size:calc(2.1rem * var(--k-display))}
}