/* CEMI infographics — enhancement layer (2026-09-01)
   Opt-in per page with `.ig-plate.ig-enhance` + `/infographics/_enhance.js`.
   Gives a page: a photographic hero (`[data-hero]`), higher-contrast tokens, scroll reveals,
   count-up numbers, bar fills that grow into view, clickable steppers and card hover lift.
   Exporting (`.is-exporting`) neutralises every transition so PNG/PDF capture the final state. */

.ig-enhance {
    --text: #f7f1ea;
    --text-muted: #cdbfb5;
    --bg-card: #241619;
    --card-line: rgba(217, 164, 65, .30);
    --card-line-hover: #D9A441;
}

/* ---- hero ------------------------------------------------------------- */
.ig-enhance [data-hero] {
    position: relative; overflow: hidden;
    min-height: clamp(340px, 42vw, 520px);
    display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
    text-align: left; padding: clamp(28px, 5vw, 56px);
    background-color: #0b0608; background-size: cover; background-position: right center; background-repeat: no-repeat;
    border: 1px solid var(--card-line);
}
.ig-enhance [data-hero]::before {
    content: ''; position: absolute; inset: 0; z-index: 0;
    background:
        linear-gradient(90deg, rgba(11,6,8,.93) 0%, rgba(11,6,8,.72) 38%, rgba(11,6,8,.08) 68%, rgba(11,6,8,0) 100%),
        linear-gradient(0deg, rgba(11,6,8,.88) 0%, rgba(11,6,8,0) 48%);
}
.ig-enhance [data-hero]::after { content: none; }
.ig-enhance [data-hero] > * { position: relative; z-index: 1; max-width: 640px; margin-left: 0; margin-right: 0; }
.ig-enhance [data-hero] .logo-section { justify-content: flex-start; }
.ig-enhance [data-hero] h1 {
    font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: 1.04; margin-bottom: .6rem;
    color: #fff; text-shadow: 0 2px 26px rgba(0,0,0,.65), 0 0 40px rgba(167,0,0,.35);
    -webkit-text-fill-color: #fff; background: none;
}
.ig-enhance [data-hero] h1 span { color: #D9A441; -webkit-text-fill-color: #D9A441; }
.ig-enhance [data-hero] p { color: #eadfd6; text-shadow: 0 1px 12px rgba(0,0,0,.7); }
.ig-enhance [data-hero] .header-icon,
.ig-enhance [data-hero] .header-badge { margin-left: 0; margin-right: 0; }
@media (max-width: 720px) {
    .ig-enhance [data-hero] { min-height: 400px; background-position: 62% center; }
    .ig-enhance [data-hero]::before { background: linear-gradient(0deg, rgba(11,6,8,.96) 0%, rgba(11,6,8,.72) 48%, rgba(11,6,8,.05) 100%); }
}

/* ---- contrast --------------------------------------------------------- */
.ig-enhance .section-title { color: #f7f1ea; }
.ig-enhance [class*="card"]:not(.ig-plate),
.ig-enhance [class*="-item"],
.ig-enhance .big-stat, .ig-enhance .kpi-card, .ig-enhance .benefit-item { border-color: var(--card-line) !important; }
.ig-enhance .stat-number, .ig-enhance .big-stat-number, .ig-enhance .kpi-value { color: #D9A441; }

/* ---- reveal ----------------------------------------------------------- */
.ig-enhance .ig-reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .75s cubic-bezier(.2,.8,.2,1); }
.ig-enhance .ig-reveal.is-in { opacity: 1; transform: none; }

/* ---- bars ------------------------------------------------------------- */
.ig-enhance [data-w] { width: 0 !important; transition: width 1.1s cubic-bezier(.2,.8,.2,1); }
.ig-enhance .is-in [data-w], .ig-enhance [data-w].is-in { width: var(--w) !important; }

/* ---- steppers --------------------------------------------------------- */
.ig-enhance .process-step, .ig-enhance .timeline-point { cursor: pointer; transition: transform .3s; }
.ig-enhance .process-step .step-number, .ig-enhance .timeline-point .timeline-dot { transition: transform .3s, box-shadow .3s, background .3s; }
.ig-enhance .process-step.is-active .step-number { transform: scale(1.12); box-shadow: 0 0 0 6px rgba(217,164,65,.22), 0 0 32px rgba(217,164,65,.55); }
.ig-enhance .process-step.is-active h4 { color: #D9A441; }
.ig-enhance .timeline-point.is-active .timeline-dot { background: #D9A441; box-shadow: 0 0 0 6px rgba(217,164,65,.22), 0 0 24px rgba(217,164,65,.6); }
.ig-enhance .timeline-point.is-active .timeline-year { color: #D9A441; }

/* ---- cards ------------------------------------------------------------ */
.ig-enhance [class*="card"]:not(.ig-plate), .ig-enhance .big-stat, .ig-enhance .benefit-item {
    transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .35s, opacity .7s ease;
}
.ig-enhance [class*="card"]:not(.ig-plate):hover, .ig-enhance .big-stat:hover, .ig-enhance .benefit-item:hover {
    transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,0,0,.38); border-color: var(--card-line-hover) !important;
}
.ig-enhance .ig-reveal.is-in[class*="card"]:hover { transform: translateY(-4px); }

/* ---- export + reduced motion ----------------------------------------- */
.ig-plate.is-exporting .ig-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
.ig-plate.is-exporting [data-w] { width: var(--w) !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
    .ig-enhance .ig-reveal { opacity: 1; transform: none; transition: none; }
    .ig-enhance [data-w] { width: var(--w) !important; transition: none; }
    .ig-enhance [class*="card"], .ig-enhance .process-step, .ig-enhance .timeline-point { transition: none; }
}