/* PUBLICA4 — Experience Modes (data-motion on ). Every element behaves like a little creature; its character changes per mode. Higher-specificity :root[data-motion="…"] rules override the base reveal/hover styles defined in reveal.js and the pages' inline CSS — no per-page edits needed. */ /* ---------- Scroll-reveal entrance character ---------- */ /* Reduced: no travel, just a quiet fade */ :root[data-motion="reduced"] .p4-anim [data-reveal]{ transition: opacity .4s ease !important; translate: none !important; scale: none !important; rotate: none !important; } /* Normal: the calm baseline (defined in reveal.js) — nothing to override */ /* Playful: gentle overshoot, a touch more travel */ :root[data-motion="playful"] .p4-anim [data-reveal]{ transition-property: opacity, translate, scale, rotate; transition-timing-function: cubic-bezier(.34,1.56,.64,1); transition-duration: .8s; } :root[data-motion="playful"] .p4-anim [data-reveal]:not(.p4-in){ translate: 0 56px; scale: .9; } /* Wild: bold, tilts in from further away then straightens */ :root[data-motion="wild"] .p4-anim [data-reveal]{ transition-property: opacity, translate, scale, rotate; transition-timing-function: cubic-bezier(.5,-0.75,.2,1.85); transition-duration: 1.05s; } :root[data-motion="wild"] .p4-anim [data-reveal]:not(.p4-in){ translate: 0 120px; scale: .68; rotate: -12deg; } /* Shy: keeps things close and quick, doesn't show off */ :root[data-motion="shy"] .p4-anim [data-reveal]{ transition-duration: .7s; } :root[data-motion="shy"] .p4-anim [data-reveal]:not(.p4-in){ translate: 0 34px; scale: .97; } /* ---------- Card hover character ---------- */ :root[data-motion="reduced"] .p4-card:hover{ transform: none !important; } :root[data-motion="playful"] .p4-card:hover{ transform: translateY(-9px) rotate(-1.5deg) !important; } :root[data-motion="wild"] .p4-card:hover{ transform: translateY(-12px) scale(1.045) rotate(-3deg) !important; } /* shy card hover handled by motion.js (it ducks away from the cursor instead) */ /* ---------- Floating badges / bob (hero cards) ---------- */ :root[data-motion="reduced"] .p4-badge, :root[data-motion="reduced"] .p4-eyedot{ animation: none !important; } :root[data-motion="wild"] .p4-badge{ animation-duration: 2.1s !important; } :root[data-motion="playful"] .p4-badge{ animation-duration: 2.8s !important; } /* ---------- Marquee / brand slider speed ---------- */ :root[data-motion="reduced"] .p4-marquee-track{ animation: none !important; } :root[data-motion="wild"] .p4-marquee-track{ animation-duration: 16s !important; }