/* ===== LeadRing site enhancements: scroll animations + hover ===== */ /* Scroll-reveal — only when the user hasn't asked for reduced motion. Elements are hidden only once is set by the before-paint script, so no-JS visitors always see full content. */ @media (prefers-reduced-motion: no-preference){ /* Fade + subtle rise. NOTE: only solid/text elements are animated. Elements that carry background images (.svc, .card3d, .cta3d, .band, .final, and the image panels in feat2/fit2/leak2/intro2) are deliberately left out — a CSS transform/opacity toggle can stop mobile browsers (esp. iOS Safari) from painting background images, so those always render. */ html.reveal-ready :where( .section h2, .section .lead, .card, .stat, .chip, .pstep3, .fchip, .fcore, .quote3d, .g3s > *, .g3w > * ){ opacity:0; transform:translateY(20px); } html.reveal-ready .is-visible{ opacity:1 !important; transform:none !important; transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); } } /* ===== hover effects (work without JS) ===== */ .card, .stat{transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease} .card:hover, .stat:hover{transform:translateY(-5px); border-color:rgba(34,211,238,.42); box-shadow:0 22px 44px -22px rgba(0,0,0,.8), 0 10px 26px -16px rgba(34,211,238,.35)} .svc{transition:transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease, border-color .28s ease} .svc:hover{transform:translateY(-6px); box-shadow:0 30px 56px -26px rgba(0,0,0,.85), 0 16px 40px -20px rgba(34,211,238,.32)} .fchip, .chip{transition:transform .2s ease, border-color .2s ease} .fchip:hover, .chip:hover{transform:translateY(-3px); border-color:rgba(34,211,238,.4)} .blog-card, .post-card, .article-card{transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease} .blog-card:hover, .post-card:hover, .article-card:hover{transform:translateY(-5px); border-color:rgba(34,211,238,.42); box-shadow:0 24px 46px -22px rgba(0,0,0,.8)} .fitimg, .introimg{transition:transform .4s ease, box-shadow .4s ease} .feat2:hover .introimg, .intro2:hover .introimg, .fit2:hover .fitimg, .leak2:hover .fitimg{transform:translateY(-4px)} .logo img{transition:transform .2s ease} .logo:hover img{transform:scale(1.04)} /* ===== loading / mobile safety ===== */ img{max-width:100%} @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }