/** * Deepjyoti motion system. * * Two layers, both opt-in behind the `dj-anim` class that the head snippet in * inc/enqueue.php puts on : * * 1. Page load — a short, ordered entrance for the furniture that is on * screen before any scrolling: top bar, header, hero, stat strip. Pure * CSS keyframes, so it starts at first paint with no JS round-trip. * 2. Reveal on scroll — assets/js/animations.js tags recurring components * with [data-reveal] and flips them to .is-revealed as they enter the * viewport. Anything already in view on load reveals immediately, so the * two layers read as one sequence. * * The class is withheld when the visitor asks for reduced motion, and when * JavaScript is off nothing here can hide content: the initial "hidden" state * only ever applies to elements JS itself marked up. Motion is limited to * opacity and transform (compositor-only) so it costs no layout work. */ :root { /* Durations: fast enough to feel responsive, never a wait. */ --dj-dur-sm: 320ms; --dj-dur-md: 480ms; --dj-dur-lg: 680ms; /* Decelerating curves — motion arrives quickly, then settles. */ --dj-ease: cubic-bezier(0.22, 0.61, 0.36, 1); --dj-ease-soft: cubic-bezier(0.16, 1, 0.3, 1); /* Travel distance. Deliberately small: this is a document, not a slideshow. */ --dj-shift: 16px; --dj-shift-sm: 10px; } @keyframes dj-fade-up { from { opacity: 0; transform: translate3d(0, var(--dj-shift), 0); } to { opacity: 1; transform: none; } } @keyframes dj-fade-down { from { opacity: 0; transform: translate3d(0, calc(var(--dj-shift-sm) * -1), 0); } to { opacity: 1; transform: none; } } @keyframes dj-fade-scale { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } } @keyframes dj-image-in { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } } /* ---------- 1. Page load ---------- */ .dj-anim .topbar { animation: dj-fade-down var(--dj-dur-sm) var(--dj-ease) both; } .dj-anim .site-header { animation: dj-fade-down var(--dj-dur-md) var(--dj-ease) 60ms both; } /* Home hero: background settles first, then the copy arrives in reading order. */ .dj-anim .home-hero__bg img { animation: dj-image-in var(--dj-dur-lg) var(--dj-ease-soft) both; } .dj-anim .home-hero__eyebrow { animation: dj-fade-up var(--dj-dur-md) var(--dj-ease) 120ms both; } .dj-anim .home-hero h1 { animation: dj-fade-up var(--dj-dur-md) var(--dj-ease) 200ms both; } .dj-anim .home-hero p { animation: dj-fade-up var(--dj-dur-md) var(--dj-ease) 300ms both; } .dj-anim .home-hero .page-hero__actions .btn { animation: dj-fade-scale var(--dj-dur-md) var(--dj-ease) 400ms both; } .dj-anim .home-hero .page-hero__actions .btn:nth-child(2) { animation-delay: 470ms; } /* Inner-page hero: same idea, one beat shorter. */ .dj-anim .page-hero__eyebrow { animation: dj-fade-up var(--dj-dur-sm) var(--dj-ease) 80ms both; } .dj-anim .page-hero h1 { animation: dj-fade-up var(--dj-dur-md) var(--dj-ease) 140ms both; } .dj-anim .page-hero > .container > p { animation: dj-fade-up var(--dj-dur-md) var(--dj-ease) 230ms both; } .dj-anim .page-hero__actions { animation: dj-fade-up var(--dj-dur-md) var(--dj-ease) 320ms both; } /* Stat strip — the first thing under the hero, so it stays on the load sequence rather than waiting for a scroll it never needs. */ .dj-anim .stats-strip .stat-card { animation: dj-fade-up var(--dj-dur-md) var(--dj-ease) both; } .dj-anim .stats-strip .stat-card:nth-child(1) { animation-delay: 420ms; } .dj-anim .stats-strip .stat-card:nth-child(2) { animation-delay: 490ms; } .dj-anim .stats-strip .stat-card:nth-child(3) { animation-delay: 560ms; } .dj-anim .stats-strip .stat-card:nth-child(4) { animation-delay: 630ms; } /* ---------- 2. Reveal on scroll ---------- */ /* Only ever applies to elements assets/js/animations.js has tagged, so this can never leave content hidden on a JS-less or failed load. */ .dj-anim [data-reveal] { opacity: 0; transform: translate3d(0, var(--dj-shift), 0); transition: opacity var(--dj-dur-md) var(--dj-ease), transform var(--dj-dur-md) var(--dj-ease); transition-delay: var(--dj-reveal-delay, 0ms); } .dj-anim [data-reveal="scale"] { transform: scale(0.97); } .dj-anim [data-reveal="left"] { transform: translate3d(calc(var(--dj-shift) * -1), 0, 0); } .dj-anim [data-reveal="right"] { transform: translate3d(var(--dj-shift), 0, 0); } .dj-anim [data-reveal].is-revealed { opacity: 1; transform: none; } /* ---------- 3. Interaction polish ---------- */ /* The header gains a hairline shadow once the page is scrolled, so it reads as a layer above the content instead of a band stuck to the top. */ .site-header { transition: box-shadow 0.25s var(--dj-ease), background-color 0.25s var(--dj-ease); } .site-header.is-scrolled { box-shadow: 0 1px 0 color-mix(in oklab, var(--border) 90%, transparent), 0 10px 30px -24px oklch(0.22 0.03 40 / 0.5); background: color-mix(in oklab, var(--background) 96%, transparent); } /* Media that arrives with its card: a slow, barely-there zoom on hover. Kept to pointer devices — on touch there is no hover state to reward. */ @media (hover: hover) and (pointer: fine) { .card__media img { transition: transform 0.45s var(--dj-ease-soft); } .card:hover .card__media img { transform: scale(1.04); } } /* ---------- 4. Guards ---------- */ /* Smaller screens: shorter travel, quicker settle — the same motion at phone size otherwise reads as sluggish. */ @media (max-width: 640px) { :root { --dj-shift: 12px; --dj-dur-md: 400ms; --dj-dur-lg: 520ms; } .dj-anim .site-header.is-scrolled { box-shadow: 0 1px 0 var(--border); } } /* Reduced motion: app.css already collapses animation/transition durations globally, but that alone would leave a from-opacity-0 element mid-flight in some engines. Neutralise the states outright. */ @media (prefers-reduced-motion: reduce) { .dj-anim .topbar, .dj-anim .site-header, .dj-anim .home-hero__bg img, .dj-anim .home-hero__eyebrow, .dj-anim .home-hero h1, .dj-anim .home-hero p, .dj-anim .home-hero .page-hero__actions .btn, .dj-anim .page-hero__eyebrow, .dj-anim .page-hero h1, .dj-anim .page-hero > .container > p, .dj-anim .page-hero__actions, .dj-anim .stats-strip .stat-card, .dj-anim [data-reveal] { animation: none !important; opacity: 1 !important; transform: none !important; } } /* Nothing animates onto paper. */ @media print { .dj-anim [data-reveal], .dj-anim .stats-strip .stat-card, .dj-anim .home-hero h1, .dj-anim .home-hero p { animation: none !important; opacity: 1 !important; transform: none !important; } }