/* ========================================================= GLOBAL REVEAL SYSTEM The Fruit Society ========================================================= */ /* --------------------------------------------------------- 1. Motion tokens --------------------------------------------------------- */ :root { --motion-duration-fast: 420ms; --motion-duration-base: 700ms; --motion-duration-slow: 900ms; --motion-distance-sm: 12px; --motion-distance-md: 24px; --motion-distance-lg: 40px; --motion-scale-start: 0.97; --motion-ease-standard: cubic-bezier(0.22, 1, 0.36, 1); --motion-ease-soft: cubic-bezier(0.16, 1, 0.3, 1); } /* --------------------------------------------------------- 2. Initial reveal state --------------------------------------------------------- Content is hidden only after JavaScript adds .motion-ready to the element. This system does not declare transition properties, so existing component transitions remain untouched. --------------------------------------------------------- */ .motion-ready [data-reveal] { opacity: 0; will-change: opacity, translate, scale, filter; } /* --------------------------------------------------------- 3. Reveal animation configuration --------------------------------------------------------- */ .motion-ready [data-reveal].is-revealed { animation-duration: var(--reveal-duration, var(--motion-duration-base)); animation-timing-function: var(--reveal-ease, var(--motion-ease-standard)); animation-delay: var(--reveal-delay, 0ms); animation-fill-mode: both; } /* --------------------------------------------------------- 4. Reveal variants --------------------------------------------------------- */ /* Up */ .motion-ready [data-reveal="up"].is-revealed, .motion-ready [data-reveal=""].is-revealed { animation-name: revealUp; } /* Down */ .motion-ready [data-reveal="down"].is-revealed { animation-name: revealDown; } /* Left */ .motion-ready [data-reveal="left"].is-revealed { animation-name: revealLeft; } /* Right */ .motion-ready [data-reveal="right"].is-revealed { animation-name: revealRight; } /* Fade */ .motion-ready [data-reveal="fade"].is-revealed { animation-name: revealFade; } /* Scale */ .motion-ready [data-reveal="scale"].is-revealed { animation-name: revealScale; } /* Scale plus upward movement */ .motion-ready [data-reveal="scale-up"].is-revealed { animation-name: revealScaleUp; } /* Blur plus upward movement */ .motion-ready [data-reveal="blur"].is-revealed { animation-name: revealBlur; } /* --------------------------------------------------------- 5. Duration options --------------------------------------------------------- */ [data-reveal-duration="fast"] { --reveal-duration: var(--motion-duration-fast); } [data-reveal-duration="base"] { --reveal-duration: var(--motion-duration-base); } [data-reveal-duration="slow"] { --reveal-duration: var(--motion-duration-slow); } /* --------------------------------------------------------- 6. Distance options --------------------------------------------------------- */ [data-reveal-distance="sm"] { --reveal-distance: var(--motion-distance-sm); } [data-reveal-distance="md"] { --reveal-distance: var(--motion-distance-md); } [data-reveal-distance="lg"] { --reveal-distance: var(--motion-distance-lg); } /* --------------------------------------------------------- 7. Scale options --------------------------------------------------------- */ [data-reveal-scale="soft"] { --reveal-scale: 0.985; } [data-reveal-scale="base"] { --reveal-scale: var(--motion-scale-start); } /* --------------------------------------------------------- 8. Manual delay options --------------------------------------------------------- For repeated elements, prefer: data-reveal-group data-reveal-stagger Use these values for isolated elements. --------------------------------------------------------- */ [data-reveal-delay="1"] { --reveal-delay: 80ms; } [data-reveal-delay="2"] { --reveal-delay: 160ms; } [data-reveal-delay="3"] { --reveal-delay: 240ms; } [data-reveal-delay="4"] { --reveal-delay: 320ms; } [data-reveal-delay="5"] { --reveal-delay: 400ms; } /* --------------------------------------------------------- 9. Reveal keyframes --------------------------------------------------------- */ @keyframes revealUp { from { opacity: 0; translate: 0 var(--reveal-distance, var(--motion-distance-md)); } to { opacity: 1; translate: none; } } @keyframes revealDown { from { opacity: 0; translate: 0 calc( var(--reveal-distance, var(--motion-distance-md)) * -1 ); } to { opacity: 1; translate: none; } } @keyframes revealLeft { from { opacity: 0; translate: calc( var(--reveal-distance, var(--motion-distance-md)) * -1 ) 0; } to { opacity: 1; translate: none; } } @keyframes revealRight { from { opacity: 0; translate: var(--reveal-distance, var(--motion-distance-md)) 0; } to { opacity: 1; translate: none; } } @keyframes revealFade { from { opacity: 0; } to { opacity: 1; } } @keyframes revealScale { from { opacity: 0; scale: var(--reveal-scale, var(--motion-scale-start)); } to { opacity: 1; scale: 1; } } @keyframes revealScaleUp { from { opacity: 0; translate: 0 var(--reveal-distance, var(--motion-distance-sm)); scale: var(--reveal-scale, var(--motion-scale-start)); } to { opacity: 1; translate: none; scale: 1; } } @keyframes revealBlur { from { opacity: 0; translate: 0 var(--reveal-distance, var(--motion-distance-sm)); filter: blur(8px); } to { opacity: 1; translate: none; filter: none; } } /* --------------------------------------------------------- 10. Final cleanup after reveal --------------------------------------------------------- The animation already leaves elements in their final state. This rule removes will-change after completion through the class added by JavaScript. It does not modify transform or transition. --------------------------------------------------------- */ .motion-ready [data-reveal].is-revealed { opacity: 1; } /* --------------------------------------------------------- 11. Reduced motion accessibility --------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto !important; } .motion-ready [data-reveal], .motion-ready [data-reveal].is-revealed { opacity: 1 !important; translate: none !important; scale: 1 !important; filter: none !important; animation: none !important; will-change: auto !important; } }