/* ========================================================================== Visionary Education — Reveal animations. Every section gets its OWN motion signature (data-reveal="…") so the page feels choreographed rather than templated. All are opt-in via JS (`.ve-js` on ) so content is fully visible without JavaScript, and everything collapses to instant under prefers-reduced-motion. ========================================================================== */ .ve-js [data-reveal] { opacity: 0; will-change: opacity, transform; } .ve-js [data-reveal].is-in { opacity: 1; } /* Shared timing */ .ve-js [data-reveal] { transition-duration: var(--ve-dur-reveal); transition-timing-function: var(--ve-ease-out-expo); transition-property: opacity, transform, clip-path, filter; transition-delay: var(--d, 0ms); } /* fade-up — default: soft rise (about text, generic) */ .ve-js [data-reveal="fade-up"] { transform: translateY(28px); } .ve-js [data-reveal="fade-up"].is-in { transform: none; } /* hero-text — words rise with a slight blur clearing */ .ve-js [data-reveal="hero-text"] { transform: translateY(24px); filter: blur(6px); } .ve-js [data-reveal="hero-text"].is-in { transform: none; filter: blur(0); } /* hero-image — clip reveal from the right, like a curtain */ .ve-js [data-reveal="hero-image"] { clip-path: inset(0 0 0 100%); transform: scale(1.04); transition-duration: 1100ms; } .ve-js [data-reveal="hero-image"].is-in { clip-path: inset(0 0 0 0); transform: none; } /* stats-band — slides up under the hero and pops the counters */ .ve-js [data-reveal="stats-band"] { transform: translateY(40px) scale(.98); } .ve-js [data-reveal="stats-band"].is-in { transform: none; } .ve-js [data-reveal="stat"] { transform: translateY(14px); } .ve-js [data-reveal="stat"].is-in { transform: none; } /* collage — each photo scales in from 0.9 with a stagger */ .ve-js [data-reveal="collage"] { transform: scale(.9) translateY(12px); transform-origin: bottom left; } .ve-js [data-reveal="collage"].is-in { transform: none; } /* card-rise — audience cards rise + slight rotate settle */ .ve-js [data-reveal="card-rise"] { transform: translateY(36px) rotate(1.2deg); } .ve-js [data-reveal="card-rise"].is-in { transform: none; } /* slide-right — carousel slides sweep in from the right */ .ve-js [data-reveal="slide-right"] { transform: translateX(48px); } .ve-js [data-reveal="slide-right"].is-in { transform: none; } /* pop — flags/badges spring in from small */ .ve-js [data-reveal="pop"] { transform: scale(.4); transition-timing-function: var(--ve-ease-spring); } .ve-js [data-reveal="pop"].is-in { transform: none; } /* map — the map fades in with a subtle zoom out */ .ve-js [data-reveal="map"] { transform: scale(1.06); transition-duration: 1200ms; } .ve-js [data-reveal="map"].is-in { transform: none; } /* tile — partner logos flip up on the X axis */ .ve-js [data-reveal="tile"] { transform: perspective(800px) rotateX(-18deg) translateY(16px); transform-origin: top; } .ve-js [data-reveal="tile"].is-in { transform: none; } /* icon-draw — why-us items: icon rises, text fades after */ .ve-js [data-reveal="icon-draw"] { transform: translateY(18px); } .ve-js [data-reveal="icon-draw"].is-in { transform: none; } .ve-js [data-reveal="icon-draw"] .ve-why__icon { transform: scale(.6) rotate(-20deg); transition: transform 700ms var(--ve-ease-spring) calc(var(--d, 0ms) + 120ms), background var(--ve-dur-base), color var(--ve-dur-base), border-color var(--ve-dur-base); } .ve-js [data-reveal="icon-draw"].is-in .ve-why__icon { transform: none; } /* panel-left / panel-right — the split section slides in from each side */ .ve-js [data-reveal="panel-left"] { transform: translateX(-40px); } .ve-js [data-reveal="panel-right"] { transform: translateX(40px); } .ve-js [data-reveal="panel-left"].is-in, .ve-js [data-reveal="panel-right"].is-in { transform: none; } /* story — tilt in */ .ve-js [data-reveal="story"] { transform: translateY(20px) rotate(-2deg); transform-origin: bottom left; } .ve-js [data-reveal="story"].is-in { transform: none; } /* row — events slide in from the right one after another */ .ve-js [data-reveal="row"] { transform: translateX(28px); } .ve-js [data-reveal="row"].is-in { transform: none; } /* cta — the band expands from 96% width and lifts */ .ve-js [data-reveal="cta"] { transform: scale(.96) translateY(24px); transition-duration: 1000ms; } .ve-js [data-reveal="cta"].is-in { transform: none; } /* wipe — section heading underline wipe */ .ve-js [data-reveal="wipe"] { clip-path: inset(0 100% 0 0); } .ve-js [data-reveal="wipe"].is-in { clip-path: inset(0 0 0 0); } /* blur-in — footer columns */ .ve-js [data-reveal="blur-in"] { filter: blur(8px); transform: translateY(10px); } .ve-js [data-reveal="blur-in"].is-in { filter: blur(0); transform: none; } /* Stagger helper: children get incremental --d via JS (data-stagger) */ /* Counter numbers: tabular so digits don't jitter while counting */ [data-counter] { font-variant-numeric: tabular-nums; display: inline-block; transition: transform 250ms var(--ve-ease-spring), text-shadow 250ms; } [data-counter].is-ticking { transform: translateY(-3px) scale(1.04); text-shadow: 0 0 18px rgb(242 201 76 / .55); } /* Header nav underline entrance on load */ .ve-js .ve-nav__item { animation: ve-nav-in 600ms var(--ve-ease-out-expo) both; animation-delay: calc(var(--i, 0) * 45ms + 120ms); } @keyframes ve-nav-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .ve-js [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; filter: none !important; transition: none !important; } .ve-js [data-reveal="icon-draw"] .ve-why__icon { transform: none !important; } .ve-js .ve-nav__item { animation: none; } }