/* =========================================================
   Animations (all disabled under prefers-reduced-motion)
   ========================================================= */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes pulse-ring { 0% { transform: scale(.7); opacity: .7; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes sweep { to { transform: rotate(360deg); } }
@keyframes dash { to { stroke-dashoffset: -200; } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes gradient-pan { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
@keyframes drift { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(30px, -20px) scale(1.12); } }
@keyframes shine { to { transform: translateX(250%) skewX(-20deg); } }

/* Scroll reveal */
.reveal { transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1); will-change: opacity, transform; }
.js .reveal:not(.in) { opacity: 0; transform: translateY(32px); }
.reveal.in { opacity: 1; transform: none; }
.js .reveal.from-left:not(.in) { transform: translateX(-40px); }
.js .reveal.from-right:not(.in) { transform: translateX(40px); }

/* Tilt (JS sets --rx / --ry) */
.tilt { transform-style: preserve-3d; transition: transform .25s ease, box-shadow .3s, border-color .3s; }
.tilt.tilting { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-4px); }
.reveal.tilt.in { transition: transform .25s ease, opacity .8s; }

/* Hero shield visual */
.shield-wrap .halo { position: absolute; inset: 10%; border-radius: 50%; border: 2px solid rgba(245, 160, 58, .6); animation: pulse-ring 3.2s ease-out infinite; }
.shield-wrap .halo.h2 { animation-delay: 1.1s; }
.shield-wrap .halo.h3 { animation-delay: 2.2s; }
.shield-wrap .radar { position: absolute; inset: 4%; border-radius: 50%; background: conic-gradient(from 0deg, rgba(245, 160, 58, .0) 0deg, rgba(245, 160, 58, .35) 60deg, transparent 61deg); animation: sweep 4.5s linear infinite; mask-image: radial-gradient(circle, transparent 28%, #000 29%); -webkit-mask-image: radial-gradient(circle, transparent 28%, #000 29%); }
.shield-wrap .flow { stroke-dasharray: 8 12; animation: dash 6s linear infinite; }
.shield-main { animation: float 6s ease-in-out infinite; }
.float-chip { animation: float 5s ease-in-out infinite; }
.float-chip.c2 { animation-delay: -1.6s; }
.float-chip.c3 { animation-delay: -3.2s; }

/* Hero background orbs */
.orb { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .45; animation: drift 14s ease-in-out infinite; pointer-events: none; }
.orb.o1 { width: 340px; height: 340px; background: #7a46bf; top: -80px; left: -80px; }
.orb.o2 { width: 280px; height: 280px; background: #f5a03a; bottom: 40px; right: 10%; animation-delay: -6s; opacity: .25; }

/* Gradient text shimmer */
.shimmer { background-size: 200% auto; animation: gradient-pan 6s linear infinite; }

/* Button shine */
.btn-accent, .btn-primary { position: relative; overflow: hidden; }
.btn-accent::after, .btn-primary::after { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: rgba(255, 255, 255, .35); transform: skewX(-20deg); }
.btn-accent:hover::after, .btn-primary:hover::after { animation: shine .8s; }

/* Sticky bell / pulse dot */
.pulse-dot { position: relative; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #3ddc84; }
.pulse-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: pulse-ring 1.8s ease-out infinite; }

/* Detect→Monitor→Protect→Respond strip */
.flow-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-radius: 99px; overflow: hidden; box-shadow: var(--shadow-md); }
.flow-strip div { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 18px 10px; color: #fff; font-family: var(--font-head); font-weight: 700; background: var(--purple-700); position: relative; }
.flow-strip div:nth-child(2) { background: var(--purple-600); }
.flow-strip div:nth-child(3) { background: var(--purple-500); }
.flow-strip div:nth-child(4) { background: var(--orange-500); color: #2a1157; }
.flow-strip div.lit { animation: lit 4s infinite; }
@keyframes lit { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.25); } }
@media (max-width: 640px) { .flow-strip { grid-template-columns: 1fr 1fr; border-radius: 20px; } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
    .reveal { opacity: 1; transform: none; }
    .marquee-track { animation: none; flex-wrap: wrap; width: auto; }
}