/* ========================================================== VEZORA — SHARED ANIMATIONS Gated under .js-anim (added to by animations.js) so layout never breaks if JS fails. ========================================================== */ /* ── 1. PROCESS FLOW LINE DRAW ───────────────────────────── Overrides the existing ::before gradient line in all .pf-steps sections; grows from left on scroll. */ .js-anim .pf-steps::before { transform: scaleX(0) !important; transform-origin: left !important; transition: transform 1.1s cubic-bezier(.4,0,.2,1) !important; } .js-anim .pf-steps.pf-line-in::before { transform: scaleX(1) !important; } /* ── 2. SECTION HEADING ORANGE UNDERLINE ────────────────── A 52 px orange bar slides out from center under every .section-header h2 when the section scrolls into view. */ .js-anim .section-header h2 { display: inline-block; position: relative; } .js-anim .section-header h2::after { content: ''; position: absolute; bottom: -8px; left: 50%; width: 56px; height: 3px; background: var(--orange, #F37021); border-radius: 2px; transform: translateX(-50%) scaleX(0); transform-origin: center; transition: transform .65s cubic-bezier(.4,0,.2,1) .25s; } .js-anim .section-header.sh-in h2::after { transform: translateX(-50%) scaleX(1); } /* ── 3. STAGGERED CARD ENTRANCE ──────────────────────────── Children of .stagger-grid start invisible (translateY 30px) and enter one-by-one. Delay is set inline by JS. */ .js-anim .stagger-grid > * { opacity: 0 !important; transform: translateY(30px) !important; transition: opacity .55s cubic-bezier(.4,0,.2,1), transform .55s cubic-bezier(.4,0,.2,1) !important; } .js-anim .stagger-grid > *.card-in { opacity: 1 !important; transform: translateY(0) !important; } /* ── 4. CARD HOVER GLOW ──────────────────────────────────── Orange shadow + stronger lift on all image cards. No JS required — pure CSS. */ .feat-card:hover, .why-cm-card:hover, .why-rm-card:hover, .why-drill-card:hover, .why-drilling-card:hover, .why-rig-card:hover { transform: translateY(-7px) !important; box-shadow: 0 24px 52px rgba(243,112,33,.22), 0 0 0 2px rgba(243,112,33,.20) !important; transition: transform .3s, box-shadow .3s !important; } .output-card:hover { transform: translateY(-5px) !important; box-shadow: 0 16px 36px rgba(243,112,33,.18), 0 0 0 2px rgba(243,112,33,.15) !important; } /* ── 5. KPI / STAT COUNTER ───────────────────────────────── JS updates the text node; we just ensure no layout shift. */ .mm-kpi-num, .stat-num, .kpi-num { transition: none !important; display: inline-block; min-width: 2ch; } /* ── 6. CENTER HEADINGS IN ALL IMAGE CARDS ───────────────── Applies to every full-card image style across all pages. heading at top, paragraph at bottom, both centred. */ .feat-card h3, .feat-card p, .why-cm-card h3, .why-cm-card p, .why-rm-card h3, .why-rm-card p, .why-dr-card h3, .why-dr-card p, .why-fp-card h3, .why-fp-card p, .why-aut-card h3, .why-aut-card p, .why-drill-card h3, .why-drill-card p, .why-drilling-card h3, .why-drilling-card p, .why-rig-card h3, .why-rig-card p { text-align: center !important; } /* output cards with images (drilling-rigs, crushers-mills) */ .output-card .output-name, .output-card .output-desc { text-align: center !important; } /* process flow step labels */ .pf-step h4, .pf-step p { text-align: center; } /* hover glow for remaining why-card variants */ .why-dr-card:hover, .why-fp-card:hover, .why-aut-card:hover { transform: translateY(-7px) !important; box-shadow: 0 24px 52px rgba(243,112,33,.22), 0 0 0 2px rgba(243,112,33,.20) !important; }