/* ============================================================================= 07-motion.css ยท reveal states, tilt, magnetic, motion-safety JS adds `.js` to ; reveal elements only hide when JS is present, so the page is fully visible with JS disabled. ========================================================================== */ .js [data-reveal], .js [data-reveal-lines] > .reveal-line, .js [data-count-stagger]{ opacity:0; transform:translateY(26px); transition:opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); will-change:opacity, transform; } .js [data-reveal].is-in, .js [data-reveal-lines] > .reveal-line.is-in, .js [data-count-stagger].is-in{ opacity:1; transform:none; } /* staggered children */ .js [data-reveal] [data-stagger]{ opacity:0; transform:translateY(20px); transition:opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); } .js [data-reveal].is-in [data-stagger]{ opacity:1; transform:none; } /* Tilt cards */ [data-tilt],[data-tilt-soft]{ transition:transform var(--dur) var(--ease); transform-style:preserve-3d; will-change:transform; } [data-tilt] .pillar-body,[data-tilt] .g-media{ transform:translateZ(0); } .tilt-glow{ position:absolute; inset:0; z-index:2; pointer-events:none; border-radius:inherit; opacity:0; background:radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.35), transparent 45%); transition:opacity var(--dur) var(--ease); mix-blend-mode:soft-light; } [data-tilt]:hover .tilt-glow{ opacity:1; } /* Magnetic button */ [data-magnetic]{ transition:transform .25s var(--ease-out); } /* Cursor glow (desktop, fine pointer only) */ .cursor-glow{ position:fixed; top:0; left:0; width:36px; height:36px; border-radius:50%; z-index:var(--z-modal); pointer-events:none; mix-blend-mode:screen; opacity:0; transform:translate(-50%,-50%); background:radial-gradient(circle, rgba(201,162,78,.55), rgba(201,162,78,0) 70%); transition:opacity .3s var(--ease); } /* word-by-word reveal */ .reveal-line{ display:inline-block; } /* FAQ smooth open (JS-driven height) */ .js .faq-ans{ overflow:hidden; transition:height .4s var(--ease); } @media (prefers-reduced-motion:reduce){ .js [data-reveal], .js [data-reveal-lines] > .reveal-line, .js [data-count-stagger], .js [data-reveal] [data-stagger]{ opacity:1 !important; transform:none !important; } .scroll-cue__dot::after,.cd-colon,.pillar-media::before,.footer-deadline__pulse{ animation:none !important; } .cursor-glow{ display:none !important; } #scene-bg{ display:none !important; } /* static fallback shows instead */ #scene-fallback{ opacity:1 !important; } } @media (hover:none){ .cursor-glow{ display:none; } } @media (pointer:coarse){ [data-tilt]{ transform:none !important; } } /* ---------- Back to top ---------- Sits below the success modal, above content. Hidden until you're past the hero; `visibility:hidden` (not opacity alone) keeps it out of the tab order and the a11y tree while invisible. Safe-area aware for notched phones. */ .to-top{ position:fixed; z-index:var(--z-sticky); right:clamp(1rem,2.5vw,2rem); bottom:calc(clamp(1rem,2.5vw,2rem) + env(safe-area-inset-bottom,0px)); width:48px; height:48px; display:grid; place-items:center; border:1px solid var(--glass-brd); border-radius:var(--r-pill); background:rgba(14,37,64,.62); color:var(--gold-200); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:var(--shadow-soft); cursor:pointer; opacity:0; visibility:hidden; transform:translateY(12px) scale(.9); transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .to-top svg{ width:22px; height:22px; } .to-top[data-show]{ opacity:1; visibility:visible; transform:translateY(0) scale(1); } .to-top:hover{ background:var(--gold); color:var(--navy-900); border-color:var(--gold); } .to-top:focus-visible{ outline:2px solid var(--gold-200); outline-offset:3px; } .to-top:active{ transform:translateY(0) scale(.94); } @media (prefers-reduced-motion: reduce){ .to-top{ transition:opacity .001s linear, visibility .001s linear; transform:none; } .to-top[data-show]{ transform:none; } }