/* ════════════════════════════════════════════════════════════════════════ iMathMate — one-pager animation layer (index.html only) Fully additive: everything here is namespaced `al-` / `#al…` and only activates on elements tagged by animations.js. Deleting this file + animations.js + the two include lines in restores the old page. See ANIMATIONS-README.md for the one-command revert. ════════════════════════════════════════════════════════════════════════ */ /* ── Scroll progress bar (top edge, brand gradient) ── */ #alProgress{ position:fixed;top:0;left:0;height:2.5px;width:100%;z-index:500; transform-origin:0 50%;transform:scaleX(0); background:linear-gradient(90deg,#EF5533,#F5A623 34%,#2EC4C4 66%,#2D90E8); box-shadow:0 0 12px rgba(245,166,35,.55); pointer-events:none; } [dir="rtl"] #alProgress{transform-origin:100% 50%;} /* ── Cursor spotlight (desktop / fine pointers only, injected by JS) ── */ #alGlow{ position:fixed;left:0;top:0;width:560px;height:560px; margin:-280px 0 0 -280px;border-radius:50%; background:radial-gradient(circle,rgba(245,166,35,.055) 0%,rgba(239,85,51,.038) 30%,rgba(46,196,196,.02) 48%,transparent 64%); pointer-events:none;z-index:2;opacity:0; transition:opacity .6s ease;will-change:transform; } /* ── Scroll-reveal primitive ── Uses the `translate` property (not `transform`) so it can never clash with the template's inline transforms. Stagger via --al-d per element. */ .al-r{ opacity:0;translate:0 26px;filter:blur(7px); transition: opacity .8s cubic-bezier(.22,1,.36,1) var(--al-d,0s), translate .8s cubic-bezier(.22,1,.36,1) var(--al-d,0s), filter .8s ease var(--al-d,0s); will-change:opacity,translate,filter; } .al-r.al-in{opacity:1;translate:0 0;filter:none;will-change:auto;} /* ── Header: deepen glass + shadow once the page is scrolled ── */ [data-bar]{transition:background .45s ease,box-shadow .45s ease,border-color .45s ease;} [data-bar].al-hdr{ background:rgba(5,9,22,.88)!important; border-bottom-color:rgba(255,255,255,.11)!important; box-shadow:0 12px 38px rgba(0,0,0,.45); } /* ── Periodic sheen sweep on primary CTA buttons ── */ .al-shine{position:relative;overflow:hidden;} .al-shine::after{ content:'';position:absolute;top:-4px;bottom:-4px;left:-70%;width:42%; transform:skewX(-22deg); background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent); animation:alSheen 4.8s ease-in-out 1.8s infinite; pointer-events:none; } @keyframes alSheen{0%{left:-70%}13%{left:135%}100%{left:135%}} /* ── Gentle bob for the hero operator tiles ── */ .al-bob{animation:alBob var(--al-bob-dur,6.5s) ease-in-out var(--al-bob-del,0s) infinite;} @keyframes alBob{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-10px) rotate(2deg)}} /* ── Scroll-driven parallax (progressive enhancement; `translate` only, so it stacks safely with existing inline rotate/float transforms) ── */ @supports (animation-timeline: view()){ @media (prefers-reduced-motion: no-preference){ .al-px{ animation:alPx linear both; animation-timeline:view(); animation-range:cover 0% cover 100%; } @keyframes alPx{ from{translate:0 var(--al-px,36px);} to{translate:0 calc(-1 * var(--al-px,36px));} } } } /* ── Accessibility: honour reduced motion everywhere ── */ @media (prefers-reduced-motion: reduce){ .al-r{opacity:1;translate:0 0;filter:none;transition:none;} .al-shine::after{animation:none;display:none;} .al-bob{animation:none;} #alGlow{display:none;} #alProgress{transition:none;} }