/* ============================================================ Card FX — site-wide card glow + scroll fly-in. A lightweight, dependency-free version of the homepage's GSAP card treatment, for every page that does NOT run the full "wow" layer (card-fx.js bails when has .wow-mode). Cards are detected at runtime and given these classes. ============================================================ */ /* ---- Cursor-tracked blue glow (matches the homepage .wow-tilt glow) */ .cfx-card { position: relative; } .cfx-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(59, 130, 246, 0.10), transparent 65%); opacity: 0; transition: opacity .35s ease; pointer-events: none; } .cfx-card:hover::after { opacity: 1; } /* ---- Scroll fly-in: hidden state is added by JS only when the card is still below the fold, so above-the-fold cards never flash. */ .cfx-reveal { opacity: 0; transform: translateY(26px); transition: opacity .65s ease, transform .65s cubic-bezier(.2, .7, .2, 1); will-change: opacity, transform; } .cfx-reveal.cfx-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .cfx-reveal { opacity: 1 !important; transform: none !important; transition: none !important; } .cfx-card::after { display: none; } } /* ---- Header phone icon: a quick "ring" shake every 3 seconds ---- */ .phone-ring { transform-origin: 50% 65%; animation: phone-ring 3s ease-in-out infinite; } @keyframes phone-ring { 0% { transform: rotate(0); } 2% { transform: rotate(-15deg); } 4% { transform: rotate(13deg); } 6% { transform: rotate(-11deg); } 8% { transform: rotate(9deg); } 10% { transform: rotate(-6deg); } 12% { transform: rotate(4deg); } 14% { transform: rotate(0); } 100% { transform: rotate(0); } } @media (prefers-reduced-motion: reduce) { .phone-ring { animation: none; } }