/* ================================================================ STORY Magazine G2 — Motion System Phase 9 — Motion & Interaction Source: MOTION-SYSTEM.md, 09-MOTION.md, DESIGN-TOKENS.md Implements the measured EE72 motion language: - Token-driven durations/easings (tokens.css §MOTION) - JS-gated scroll reveals (opacity/transform only, zero CLS) - Capability-gated hover/focus micro-interactions - Carousel drag/settle refinements - Extended reduced-motion collapse BUG-007 LOCK: image scale affects internal media layers only; external card geometry, aspect-ratio and object-fit untouched. ================================================================= */ /* ---------------------------------------------------------------- Global link/button transitions SOURCE: MOTION-SYSTEM.md — Links 0.2s ease opacity; Buttons 0.3s cubic-bezier(0.4,0,0.2,1) hover states. ---------------------------------------------------------------- */ a { transition: opacity var(--duration-link-opacity) ease; } button { transition: color var(--duration-button) var(--ease-in-out), background-color var(--duration-button) var(--ease-in-out), border-color var(--duration-button) var(--ease-in-out); } /* ---------------------------------------------------------------- Scroll Reveal System (JS-gated) reveal.js adds .story-motion-enabled to . NO class = NO hidden states (JS failure → everything visible). Hidden state = opacity + optional translateY only — zero CLS. ---------------------------------------------------------------- */ .story-motion-enabled [data-story-reveal]:not([data-story-reveal="group"]) { opacity: 0; transition: none; } .story-motion-enabled [data-story-reveal="fade-up"], .story-motion-enabled [data-story-reveal="fade-block"] { transform: translate3d(0, var(--reveal-distance), 0); } .story-motion-enabled [data-story-reveal].is-revealed { opacity: 1; transform: translate3d(0, 0, 0); transition: opacity var(--duration-reveal) var(--ease-in-out), transform var(--duration-reveal) var(--ease-in-out); transition-delay: var(--story-reveal-delay, 0s); } /* Composer block reveals run at the documented block-group duration */ .story-motion-enabled [data-story-reveal="fade-block"].is-revealed { transition-duration: var(--duration-block-group); } /* ---------------------------------------------------------------- Hero Content Parallax SOURCE: MOTION-SYSTEM.md §Hero component — "Content parallax (subtle)", continuous, linear; §Scroll Behaviour. reveal.js drives --story-parallax-amount on [data-story-parallax]. Transform-only; disabled under reduced motion and coarse pointers. ---------------------------------------------------------------- */ [data-story-parallax] { transform: translate3d(0, var(--story-parallax-amount, 0), 0); will-change: transform; } /* ---------------------------------------------------------------- Capability-gated hover/focus micro-interactions SOURCE: MOTION-SYSTEM.md §Article Cards (title highlight 0.5s, image scale 0.5s); §Hero component (content opacity 0.15s). Gated to precise pointers; never fires on touch. ---------------------------------------------------------------- */ .story-home-lead-deck, .story-home-lead-copy .story-meta { transition: opacity var(--duration-hero-content) var(--ease-in-out); } @media (hover: hover) and (pointer: fine) { /* Article card: inner-media-layer scale (BUG-007 safe) */ .story-card .story-card-media img { transition: transform var(--duration-card-hover) var(--ease-out); } .story-card:hover .story-card-media img, .story-card-media img:focus-visible { transform: scale(1.03); } /* Article card: title underline draw-in (highlight) */ .story-card-title a { background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-size: 0 1px; background-position: 0 100%; transition: background-size var(--duration-card-hover) var(--ease-out); } .story-card:hover .story-card-title a, .story-card-title a:focus-visible { background-size: 100% 1px; } /* Homepage lead: content opacity shift */ .story-home-lead:hover .story-home-lead-deck, .story-home-lead:hover .story-home-lead-copy .story-meta { opacity: 1; } } /* ---------------------------------------------------------------- Carousel drag / settle refinement SOURCE: 09-MOTION.md — 0.5s active, 0.3s settled ease. carousel.js adds .is-dragging during pointer drag (transition off, no lag) and .is-settling for snap-back (0.3s ease). ---------------------------------------------------------------- */ .story-carousel-track.is-dragging { transition: none; will-change: transform; } .story-carousel-track.is-settling { transition: transform var(--duration-carousel-settled) ease; } /* ---------------------------------------------------------------- Homepage Selective Stacking EE72-ACCURATE-HOMEPAGE-STACKING — implementation pass. Attribute contract: stacking.js resolves data-story-stack-trigger (covering element) against data-story-stack-target (covered element) explicitly — never by DOM adjacency. The controller writes the pin offset to --story-stack-top and adds .story-stack--pinned. The class only exists after JS validates the relationship: JS failure / invalid pair → never applied → static composition identical to v1.0.1-6. Sticky pinning is native scrolling (no scroll hijacking). Tall mode: negative top keeps the target's bottom edge on the cover line above the fixed chrome. Short mode: top 0, content-driven height preserved. Reduced motion / print: targets forced back to static flow. ---------------------------------------------------------------- */ .story-stack--pinned { position: sticky; top: var(--story-stack-top, 0px); } @media (prefers-reduced-motion: reduce) { .story-stack--pinned { position: static !important; } } @media print { .story-stack--pinned { position: static !important; } } /* ---------------------------------------------------------------- Reduced Motion SOURCE: MOTION-SYSTEM.md §Reduced Motion; Phase 9 approval. All hides/transforms collapsed; content fully visible; nonessential transitions removed; controls remain usable. ---------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; } .story-motion-enabled [data-story-reveal]:not([data-story-reveal="group"]) { opacity: 1 !important; transform: none !important; transition: none !important; } [data-story-parallax] { transform: none !important; } .story-card-media img, .story-card-title a { transform: none !important; transition: none !important; } .story-motion-optional { transform: none !important; } } /* ---------------------------------------------------------------- Print — never print hidden reveal states ---------------------------------------------------------------- */ @media print { .story-motion-enabled [data-story-reveal]:not([data-story-reveal="group"]) { opacity: 1 !important; transform: none !important; transition: none !important; } [data-story-parallax] { transform: none !important; } }