/* Composer Agents — motion enhancement layer (additive). High-end scroll reveals, hero entrance, staggered grids, card lift, button sheen, magnetic CTAs, subtle parallax. Inspired by the restrained, buttery motion of ACE Studio / Luma / OpenAI marketing sites. SAFE BY DESIGN: - Everything here activates only when js/enhance.js adds `.cwx` to . If JS fails or is disabled, the site renders exactly as before. - Fully gated behind `prefers-reduced-motion: no-preference`. - Reuses the design tokens (--cw-ease, --cw-dur) so it feels native. Load AFTER site.css. */ @media (prefers-reduced-motion: no-preference) { /* When our engine is live, take over the Chromium-only scroll-timeline reveals so every browser gets the same (staggered) behavior and nothing double-animates. */ html.cwx .cw-reveal, html.cwx .cw-reveal-scale { animation: none !important; opacity: 1; transform: none; } /* ---- Base reveal state (JS adds .cwx-reveal, then .is-in) ---- */ html.cwx .cwx-reveal { opacity: 0; transform: translateY(26px); will-change: opacity, transform; transition: opacity 0.85s var(--cw-ease), transform 0.85s var(--cw-ease), filter 0.85s var(--cw-ease); filter: blur(6px); } html.cwx .cwx-reveal.cwx-reveal-scale { transform: translateY(20px) scale(0.965); } html.cwx .cwx-reveal.is-in { opacity: 1; transform: none; filter: blur(0); } /* ---- Hero entrance on load (line cascade) ---- Transition-based (NOT keyframes) so the end state is static: if animation ticking is ever throttled/paused, the hero text still ends fully visible. JS adds .is-in on the next frame after load. */ html.cwx .cwx-hero-line { opacity: 0; transform: translateY(30px); filter: blur(10px); transition: opacity 1s var(--cw-ease), transform 1s var(--cw-ease), filter 1s var(--cw-ease); transition-delay: var(--cwx-delay, 0ms); } html.cwx .cwx-hero-line.is-in { opacity: 1; transform: none; filter: blur(0); } /* ---- Cards: refined lift + subtle tilt on hover ---- */ html.cwx .cw-glass-card, html.cwx .cwx-card { transition: border-color var(--cw-dur) var(--cw-ease), box-shadow var(--cw-dur) var(--cw-ease), transform 360ms var(--cw-ease); } html.cwx .cw-glass-card:hover, html.cwx .cwx-card:hover { transform: translateY(-6px); box-shadow: var(--cw-card-shadow-hover, 0 30px 60px -28px rgba(0,0,0,0.95)); } /* Tilt driven by JS via CSS vars (adds on top of the lift). Kept subtle. */ html.cwx .cw-glass-card.cwx-tilt, html.cwx .cwx-card.cwx-tilt { transform: perspective(1000px) rotateX(var(--cwx-rx, 0deg)) rotateY(var(--cwx-ry, 0deg)) translateY(var(--cwx-lift, 0px)); transition: transform 140ms var(--cw-ease), border-color var(--cw-dur) var(--cw-ease), box-shadow var(--cw-dur) var(--cw-ease); } /* ---- Primary buttons: light sheen sweep on hover ---- */ html.cwx .btn-primary, html.cwx .btn-solid, html.cwx .btn-gold-solid, html.cwx .cw-signin-btn { position: relative; overflow: hidden; } html.cwx .btn-primary::after, html.cwx .btn-solid::after, html.cwx .btn-gold-solid::after, html.cwx .cw-signin-btn::after { content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,0.45), transparent); transform: skewX(-18deg); pointer-events: none; transition: left 0.6s var(--cw-ease); } html.cwx .btn-primary:hover::after, html.cwx .btn-solid:hover::after, html.cwx .btn-gold-solid:hover::after, html.cwx .cw-signin-btn:hover::after { left: 130%; } /* ---- Magnetic CTA (JS sets --cwx-mx / --cwx-my) ---- */ html.cwx .cwx-magnetic { transition: transform 200ms var(--cw-ease); transform: translate(var(--cwx-mx, 0px), var(--cwx-my, 0px)); } /* ---- Parallax layers (JS sets --cwx-py) ---- */ html.cwx .cwx-parallax { will-change: transform; transform: translate3d(0, var(--cwx-py, 0px), 0); } /* ---- Nav links: animated underline ---- */ html.cwx .cw-nav-link { position: relative; } html.cwx .cw-nav-desktop .cw-nav-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1.5px; background: var(--cw-c2); transform: scaleX(0); transform-origin: left; transition: transform 300ms var(--cw-ease); } html.cwx .cw-nav-desktop .cw-nav-link:hover::after, html.cwx .cw-nav-desktop .cw-nav-link.active::after { transform: scaleX(1); } /* Safety: never let the reveal system trap content invisible if something goes wrong — after the load window, force-show. */ html.cwx.cwx-failsafe .cwx-reveal, html.cwx.cwx-failsafe .cwx-hero-line { opacity: 1; transform: none; filter: none; } /* Safe motion enhancements for buttons, cards, links, and forms */ .btn, button, .cw-signin-btn { transition: background 0.22s var(--cw-ease), color 0.22s var(--cw-ease), border-color 0.22s var(--cw-ease), transform 0.16s var(--cw-ease), box-shadow 0.22s var(--cw-ease) !important; } .btn:hover, .cw-signin-btn:hover { transform: translateY(-2px); } .btn-solid:hover, .btn-gold-solid:hover, .btn-navy-solid:hover { box-shadow: 0 8px 22px -4px rgba(176,131,0,0.38) !important; } .btn:active, .cw-signin-btn:active { transform: translateY(1px) scale(0.98) !important; box-shadow: none !important; } .cw-glass-card, .cwx-card, .ma-feat, .ma-slide { transition: border-color 0.25s var(--cw-ease), transform 0.25s var(--cw-ease), box-shadow 0.25s var(--cw-ease) !important; } .cw-glass-card:hover, .cwx-card:hover, .ma-feat:hover { transform: translateY(-3px); border-color: rgba(255,255,255,0.25) !important; } input[type="text"]:focus, input[type="email"]:focus, textarea:focus, select:focus { border-color: var(--cw-c2, #b08300) !important; box-shadow: 0 0 16px -4px rgba(176,131,0,0.35) !important; outline: none !important; } } /* Smooth scroll entrance animations for sections and cards */ html.cwx .cwx-reveal { opacity: 0 !important; transform: translateY(28px) scale(0.98) !important; transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1) !important; will-change: opacity, transform; } html.cwx .cwx-reveal.is-in { opacity: 1 !important; transform: translateY(0) scale(1) !important; }