/* ============================================================ Miravo — motion.css · v0.1 Scroll-driven motion system (Hexagon-style), attribute-driven. Additive only: does not restyle existing components. Works with motion.js (adds .m-on to and .in to elements). No JS → .m-on never added → everything stays fully visible. Brand: flat #0A86E0 / #0FB5A8 — ZERO gradients. ============================================================ */ :root{ --m-ease: cubic-bezier(.22,1,.36,1); --m-dur: .85s; } /* ---------- reveal base states (gated on .m-on = JS active) ---------- */ .m-on [data-anim]{ opacity: 0; will-change: transform, opacity; transition: opacity var(--m-dur) var(--m-ease), transform var(--m-dur) var(--m-ease), clip-path 1s var(--m-ease), filter .8s var(--m-ease); } .m-on [data-anim="fade-up"] { transform: translateY(34px); } .m-on [data-anim="fade-down"] { transform: translateY(-34px); } /* AOS convention: fade-right = enters moving to the right (starts left) */ .m-on [data-anim="fade-right"] { transform: translateX(-44px); } .m-on [data-anim="fade-left"] { transform: translateX(44px); } .m-on [data-anim="scale"] { transform: scale(.94) translateY(14px); } .m-on [data-anim="blur-in"] { filter: blur(10px); transform: translateY(12px); } .m-on [data-anim="mask"]{ opacity: 1; /* wipe, not fade */ clip-path: inset(0 100% 0 0); transform: none; } /* ---------- end state ---------- */ .m-on [data-anim].in{ opacity: 1; transform: none; filter: none; } .m-on [data-anim="mask"].in{ clip-path: inset(0 0 0 0); } /* ---------- parallax / scrub ---------- */ .m-on [data-parallax], .m-on [data-parallax-x]{ will-change: transform; } /* data-scrub / data-pin children read var(--p) (0..1) set by motion.js */ [data-pin]{ position: relative; } /* ---------- scroll progress bar (flat brand blue, no gradient) ---------- */ #scrollProgress{ position: fixed; top: 0; left: 0; width: 100%; height: 3px; background: #0A86E0; /* flat — no gradient (brand rule) */ transform: scaleX(0); transform-origin: left; z-index: 55; /* below header (60) and modal (100) */ pointer-events: none; will-change: transform; } /* ============================================================ Slice 2 — hero handoff + pinned scrollytelling (#plataforma) ============================================================ */ /* ---------- hero → section handoff (var --hero set by motion.js) ------ */ .m-on .hero-in{ transform: translateY(calc(var(--hero, 0) * -70px)); opacity: calc(1 - var(--hero, 0) * 1.15); will-change: transform, opacity; } /* ---------- pinned scrollytelling: native sticky, no scroll-jack ------ */ /* Tall track + sticky only when JS is active (.m-on) — no-JS keeps flow */ .scrolly-track{ position: relative; } .m-on .scrolly-track{ height: 260vh; } .m-on .scrolly-stick{ position: sticky; top: 0; min-height: 100vh; display: flex; align-items: center; } .scrolly-stick > .wrap{ width: 100%; } .scrolly .chain-step{ transition: opacity .5s var(--m-ease, cubic-bezier(.22,1,.36,1)), transform .5s var(--m-ease, cubic-bezier(.22,1,.36,1)); } /* Dimming ONLY when JS confirmed it is driving (graceful no-JS fallback) */ .scrolly.scrolly-ready .chain-step{ opacity: .18; transform: translateY(10px); } .scrolly.scrolly-ready .chain-step.step-on{ opacity: 1; transform: none; } /* ---------- reduced motion: neutralize everything ---------- */ @media (prefers-reduced-motion: reduce){ .m-on [data-anim], .m-on [data-anim="mask"]{ opacity: 1 !important; transform: none !important; clip-path: none !important; filter: none !important; transition: none !important; } .m-on [data-parallax], .m-on [data-parallax-x]{ transform: none !important; will-change: auto; } #scrollProgress{ transition: none; } .m-on .hero-in{ transform: none !important; opacity: 1 !important; will-change: auto; } .scrolly-track, .m-on .scrolly-track{ height: auto; } .scrolly-stick, .m-on .scrolly-stick{ position: static; min-height: 0; display: block; } .scrolly .chain-step, .scrolly.scrolly-ready .chain-step{ opacity: 1 !important; transform: none !important; transition: none !important; } }