/* ===================================================================== Teckid motion layer — brings the frontend to life without touching markup. It reuses the existing `.wow` hooks the templates already place (80 of them across 20 views) as scroll-reveal triggers, and animates the decorative shapes that were previously sitting still. Loaded once in frontend/master.blade.php, after tokens.css. Paired with motion.js (handles the IntersectionObserver + stagger). GUARANTEES - No-FOUC: an inline script adds `.has-motion` to before first paint (only when the user has NOT requested reduced motion), so the hidden-then-reveal states never flash. - Reduced motion: if the OS/browser requests it, `.has-motion` is never added, so every animation below is inert and content shows normally. - GPU-friendly: only opacity + transform are animated. ===================================================================== */ /* --------------------------------------------------------------------- 1. SCROLL REVEALS Base hidden state applies only under .has-motion (set pre-paint). The reveal direction is refined by motion.js via .from-left/.from-right/ .pop; all share the same "settle" on .is-visible. Stagger comes from the --reveal-d custom property set per element by motion.js. --------------------------------------------------------------------- */ .has-motion .wow { opacity: 0; transform: translateY(30px); transition: opacity 0.7s cubic-bezier(0.16, 0.84, 0.44, 1), transform 0.7s cubic-bezier(0.16, 0.84, 0.44, 1); transition-delay: var(--reveal-d, 0ms); will-change: opacity, transform; } .has-motion .wow.from-left { transform: translateX(-40px); } .has-motion .wow.from-right { transform: translateX(40px); } .has-motion .wow.pop { transform: scale(0.9); } .has-motion .wow.is-visible { opacity: 1; transform: none; } /* --------------------------------------------------------------------- 2. AMBIENT FLOAT Gentle, continuous motion on the decorative shapes so the page feels alive at rest. Small amplitude (6-12px) so it reads as breathing, not distraction. Multiple nth rules desync the shapes from each other. --------------------------------------------------------------------- */ @keyframes tk-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @keyframes tk-float-rotate { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-8px) rotate(4deg); } } @keyframes tk-drift { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(8px, -8px); } } .has-motion .deco, .has-motion [class*="deco-"], .has-motion .shape, .has-motion .cta-shape, .has-motion .circle-shape, .has-motion .frame-shape, .has-motion .sun-shape, .has-motion .top-shape, .has-motion .right-shape, .has-motion .love-shape, .has-motion .zebra-shape { animation: tk-float 6s ease-in-out infinite; } /* Desync: alternate timing/path so shapes don't bob in lockstep. */ .has-motion .deco-2, .has-motion .cta-shape, .has-motion .sun-shape { animation: tk-float-rotate 7.5s ease-in-out infinite; } .has-motion .deco-3, .has-motion .frame-shape, .has-motion .love-shape { animation: tk-drift 9s ease-in-out infinite; } .has-motion .deco-4, .has-motion .circle-shape { animation: tk-float 8s ease-in-out infinite 0.6s; } .has-motion .deco-1 { animation-delay: 0.3s; } .has-motion .right-shape { animation-delay: 1.2s; } /* --------------------------------------------------------------------- 3. HOVER MICRO-INTERACTIONS The card icon blobs get a playful tilt-and-grow when their card is hovered. Cards themselves already lift via their own styles. --------------------------------------------------------------------- */ .icon-blob { transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); } .has-motion .path-card:hover .icon-blob, .has-motion .level-card:hover .icon-blob, .has-motion .why-card:hover .icon-blob, .has-motion .value-card:hover .icon-blob { transform: rotate(-6deg) scale(1.1); } /* --------------------------------------------------------------------- 4. HEADER POLISH ON SCROLL The sticky handler in main.js already toggles #header-sticky.sticky. This just makes the transition smooth and adds a soft lift shadow. --------------------------------------------------------------------- */ #header-sticky { transition: box-shadow 0.3s ease, padding 0.3s ease, background-color 0.3s ease; } #header-sticky.sticky { box-shadow: 0 6px 24px rgba(42, 24, 80, 0.08); } /* --------------------------------------------------------------------- 5. SCROLL PROGRESS BAR A thin brand-purple bar at the very top that fills as the page is read. motion.js sets its scaleX. Remove this block + the JS bit if you don't want it. --------------------------------------------------------------------- */ .tk-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--tk-primary), var(--tk-primary-light)); transform: scaleX(0); transform-origin: 0 50%; z-index: 9999; pointer-events: none; } /* --------------------------------------------------------------------- 6. REDUCED MOTION — belt & braces. .has-motion is already withheld when reduced motion is requested, but this hard-stops anything that might slip through (e.g. third-party additions). --------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .has-motion .wow { opacity: 1 !important; transform: none !important; transition: none !important; } .has-motion .deco, .has-motion [class*="deco-"], .has-motion .shape, .has-motion .cta-shape, .has-motion .circle-shape, .has-motion .frame-shape, .has-motion .sun-shape, .has-motion .top-shape, .has-motion .right-shape, .has-motion .love-shape, .has-motion .zebra-shape { animation: none !important; } .tk-progress { display: none !important; } }