/* Pakstoor :: dossier-motion.css :: v1.0-000001 :: 2026-05-24 */ /* ============================================================ PAKSTOOR DOSSIER MOTION LAYER ------------------------------------------------------------ Opt-in motion for dossier-system pages. Activated by adding class="pks-motion-dossier" on . Pages without the class are unaffected. Three movements, in order of when they happen: 1. Hero stagger — CSS-only. Five hero pieces fade-up in sequence on page load. Fires once. 2. Scroll reveal — JS-driven. dossier-motion.js adds the .pks-reveal helper class to .dossier-section / .dossier-closing-seal and observes them. Sections above the fold are snap-shown without animation; sections that scroll into view fade up. 3. Closing-seal corner draw + rule scale — small fades that the same observer activates as it crosses each element. prefers-reduced-motion collapses everything to noop. ============================================================ */ /* ---- 1. Hero stagger ------------------------------------- */ .pks-motion-dossier .dossier-hero-classification, .pks-motion-dossier .dossier-hero-version, .pks-motion-dossier .dossier-hero-title, .pks-motion-dossier .dossier-hero-deck, .pks-motion-dossier .dossier-ledger { opacity: 0; transform: translateY(10px); animation: pks-hero-enter 600ms cubic-bezier(0.22, 1, 0.36, 1) forwards; will-change: opacity, transform; } .pks-motion-dossier .dossier-hero-classification { animation-delay: 60ms; } .pks-motion-dossier .dossier-hero-version { animation-delay: 140ms; } .pks-motion-dossier .dossier-hero-title { animation-delay: 220ms; } .pks-motion-dossier .dossier-hero-deck { animation-delay: 300ms; } .pks-motion-dossier .dossier-ledger { animation-delay: 380ms; } @keyframes pks-hero-enter { to { opacity: 1; transform: translateY(0); } } /* ---- 2. Scroll reveal (sections + closing seal) ----------- */ /* JS adds .pks-reveal to .dossier-section and .dossier-closing-seal. Below-fold elements: stay at opacity 0 / translateY(20px) until the observer adds .is-revealed. Above-fold elements: JS adds .is-revealed in the same tick, so no transition runs and they show instantly. */ .pks-motion-dossier .pks-reveal { opacity: 0; transform: translateY(20px); transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1), transform 600ms cubic-bezier(0.22, 1, 0.36, 1); } .pks-motion-dossier .pks-reveal.is-revealed { opacity: 1; transform: translateY(0); } /* The big article numeral (01, 02, ...) lands slightly after the title — it confirms the article rather than competing for first read. */ .pks-motion-dossier .pks-reveal .dossier-section-numeral { opacity: 0; transform: translateY(8px); transition: opacity 500ms cubic-bezier(0.22, 1, 0.36, 1) 120ms, transform 500ms cubic-bezier(0.22, 1, 0.36, 1) 120ms; } .pks-motion-dossier .pks-reveal.is-revealed .dossier-section-numeral { opacity: 1; transform: translateY(0); } /* ---- 3. Closing-seal corner draw -------------------------- */ /* .dossier-seal-corner.tr / .bl are the two L-bracket decorations on the closing seal. Default state: scaled out from their respective corners. Revealed state: scale 1. */ .pks-motion-dossier .pks-reveal .dossier-seal-corner { transform: scale(0); transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1) 200ms; } .pks-motion-dossier .pks-reveal .dossier-seal-corner.tr { transform-origin: 100% 0%; } .pks-motion-dossier .pks-reveal .dossier-seal-corner.bl { transform-origin: 0% 100%; } .pks-motion-dossier .pks-reveal.is-revealed .dossier-seal-corner { transform: scale(1); } /* ---- 4. Section rules center-out -------------------------- */ /* The dossier-rule hairline divider between sections gets a subtle center-out scaleX when it scrolls in. JS adds a .pks-reveal-rule helper. */ .pks-motion-dossier .pks-reveal-rule { transform: scaleX(0); transform-origin: 50% 50%; transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1); } .pks-motion-dossier .pks-reveal-rule.is-revealed { transform: scaleX(1); } /* ---- Reduced-motion override ----------------------------- */ @media (prefers-reduced-motion: reduce) { .pks-motion-dossier .dossier-hero-classification, .pks-motion-dossier .dossier-hero-version, .pks-motion-dossier .dossier-hero-title, .pks-motion-dossier .dossier-hero-deck, .pks-motion-dossier .dossier-ledger, .pks-motion-dossier .pks-reveal, .pks-motion-dossier .pks-reveal.is-revealed, .pks-motion-dossier .pks-reveal .dossier-section-numeral, .pks-motion-dossier .pks-reveal.is-revealed .dossier-section-numeral, .pks-motion-dossier .pks-reveal .dossier-seal-corner, .pks-motion-dossier .pks-reveal-rule, .pks-motion-dossier .pks-reveal-rule.is-revealed { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; will-change: auto !important; } }