/* Bashra Aesthetics — scroll-reveal animations. * * Lightweight (~1 KB gzipped). GPU-friendly transforms / opacity / filter. * Hidden state applied ONLY when JS sets `data-anim-ready` on , * so content stays visible if JS fails or reduced-motion is on. * * Tuning notes (premium feel): * - Easing `cubic-bezier(.16, 1, .3, 1)` — long ease-out, cinematic. * - Duration 1300ms — slow enough to feel deliberate, not sluggish. * - Base delay 240ms before every reveal (load + scroll), stacked with * per-child stagger via CSS variable. * - Selectors kept simple: `.is-visible` (specificity 0-3-0) always * beats the variant rules (0-2-0) so transform/filter cleanly reset. */ /* ---------- Base hidden state ---------- */ [data-anim-ready] [data-reveal] { opacity: 0; transition-property: opacity, transform, filter; transition-duration: 1300ms; transition-timing-function: cubic-bezier(.16, 1, .3, 1); transition-delay: calc(var(--ba-anim-base, 240ms) + var(--ba-anim-delay, 0ms)); } /* ---------- Variants (specificity 0-2-0) ---------- */ [data-anim-ready] [data-reveal="fade-up"] { transform: translate3d(0, 26px, 0); } [data-anim-ready] [data-reveal="blur-up"] { transform: translate3d(0, 18px, 0); filter: blur(12px); } [data-anim-ready] [data-reveal="scale-in"] { transform: scale(.97); } /* `[data-reveal="fade"]` = opacity only — no extra rule needed. */ /* ---------- Revealed state (specificity 0-3-0 → wins over variants) ---------- */ [data-anim-ready] [data-reveal].is-visible { opacity: 1; transform: none; filter: none; } /* ---------- Stagger: children of [data-reveal-stagger] ---------- */ [data-anim-ready] [data-reveal-stagger] > [data-reveal]:nth-child(1) { --ba-anim-delay: 0ms; } [data-anim-ready] [data-reveal-stagger] > [data-reveal]:nth-child(2) { --ba-anim-delay: 110ms; } [data-anim-ready] [data-reveal-stagger] > [data-reveal]:nth-child(3) { --ba-anim-delay: 220ms; } [data-anim-ready] [data-reveal-stagger] > [data-reveal]:nth-child(4) { --ba-anim-delay: 330ms; } [data-anim-ready] [data-reveal-stagger] > [data-reveal]:nth-child(5) { --ba-anim-delay: 430ms; } [data-anim-ready] [data-reveal-stagger] > [data-reveal]:nth-child(6) { --ba-anim-delay: 520ms; } [data-anim-ready] [data-reveal-stagger] > [data-reveal]:nth-child(7) { --ba-anim-delay: 600ms; } [data-anim-ready] [data-reveal-stagger] > [data-reveal]:nth-child(8) { --ba-anim-delay: 670ms; } [data-anim-ready] [data-reveal-stagger] > [data-reveal]:nth-child(n+9) { --ba-anim-delay: 730ms; } /* ---------- Init guard ---------- * `` is set briefly by reveal.js while it auto-tags the * DOM, so newly-tagged elements snap into the hidden state without a * visible fade-out. The class is removed before .is-visible is applied, * so the entrance transition runs normally. */ .ba-no-anim [data-reveal] { transition: none !important; } /* ---------- Honor user preference ---------- */ @media (prefers-reduced-motion: reduce) { [data-anim-ready] [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; } }