/* Homepage capability illustrations. Motion runs only while a card is visible. */
#features { --feature-accent: #93c5fd; scroll-margin-top: 88px; }
#features .feature-heading { display: block; max-width: 720px; margin-bottom: 48px; }
#features .feature-intro { max-width: 560px; font-size: 16px; line-height: 1.7; }
#features .feature-card { border: 1px solid #ffffff14; border-radius: 24px; background: linear-gradient(145deg, #14171c, #090a0c 75%); transition: border-color .3s, box-shadow .3s; }
#features .feature-card:hover { border-color: #93c5fd55; box-shadow: 0 16px 48px #0005; }
#features .feature-card-large { justify-content: flex-start; }
#features .feature-visual { isolation: isolate; border-radius: 16px; }
#features .feature-image { animation: feature-camera-pan 12s ease-in-out infinite alternate; }
#features .feature-visual-icon { background: #0b1424bb; border-color: #93c5fd44; }
#features .feature-scan { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, transparent 42%, #93c5fd18 49%, #93c5fd80 50%, transparent 51%); animation: feature-scan 4.8s ease-in-out infinite; }
#features .feature-target { position: absolute; width: 23%; height: 55%; top: 22%; left: 16%; z-index: 3; animation: feature-track 4.8s ease-in-out infinite; }
#features .feature-target span { position: absolute; width: 14px; height: 14px; border: solid var(--feature-accent); border-width: 0; }
#features .feature-target span:nth-child(1) { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; }
#features .feature-target span:nth-child(2) { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; }
#features .feature-target span:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; }
#features .feature-target span:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; }
#features .feature-visual-monitoring .feature-target { left: 66%; top: 30%; width: 20%; height: 42%; animation-delay: -2.4s; }
#features .feature-visual-monitoring .feature-scan { animation-delay: -2.4s; }
#features .capability-motion-card > .flex { margin-bottom: 12px; }
#features .feature-signal { position: relative; height: 92px; margin: 0 0 24px; display: flex; align-items: center; justify-content: center; color: var(--feature-accent); background: radial-gradient(ellipse at center, #93c5fd0c, transparent 70%); }
#features .security-ring { position: absolute; width: 62px; height: 62px; border: 1px solid #93c5fd70; border-radius: 50%; animation: feature-secure 3.6s ease-out infinite; }
#features .security-ring:nth-child(2) { animation-delay: -1.8s; }
#features .feature-health { gap: 7px; }
#features .feature-health span { width: 6px; height: 44px; border-radius: 4px; background: linear-gradient(#bfdbfe, #3b82f650); transform: scaleY(.35); animation: feature-health 2.4s ease-in-out infinite; animation-delay: calc(var(--bar) * -0.16s); }
#features .feature-alert { gap: 20px; }
#features .alert-route { width: 100px; height: 1px; background: #93c5fd33; position: relative; }
#features .alert-route i { display: block; position: absolute; top: -2px; width: 28px; height: 5px; border-radius: 4px; background: linear-gradient(90deg, transparent, #bfdbfe); animation: feature-deliver 3s ease-in-out infinite; }
#features .feature-alert > iconify-icon:last-child { animation: feature-notify 3s ease-in-out infinite; }
#features .feature-card :is(.feature-image, .feature-scan, .feature-target, .security-ring, .feature-health span, .alert-route i, .feature-alert > iconify-icon:last-child) { animation-play-state: paused; }
#features .feature-card.is-running :is(.feature-image, .feature-scan, .feature-target, .security-ring, .feature-health span, .alert-route i, .feature-alert > iconify-icon:last-child) { animation-play-state: running; }
@keyframes feature-camera-pan { from { transform: scale(1.04) translateX(-1%); } to { transform: scale(1.12) translateX(1%); } }
@keyframes feature-scan { 0%, 100% { transform: translateY(-70%); opacity: 0; } 12%, 78% { opacity: 1; } 90% { transform: translateY(70%); opacity: 0; } }
@keyframes feature-track { 0%, 100% { opacity: .35; transform: translateX(0); } 30%, 70% { opacity: 1; transform: translateX(18px); } }
@keyframes feature-secure { 0% { transform: scale(.72); opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes feature-health { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
@keyframes feature-deliver { 0%, 15% { transform: translateX(0); opacity: 0; } 25% { opacity: 1; } 70% { transform: translateX(75px); opacity: 1; } 85%, 100% { transform: translateX(75px); opacity: 0; } }
@keyframes feature-notify { 0%, 65%, 100% { transform: rotate(0); } 72% { transform: rotate(12deg); } 80% { transform: rotate(-10deg); } 88% { transform: rotate(5deg); } }
@media (max-width: 767px) { #features { padding-top: 80px; padding-bottom: 80px; } #features .feature-heading h2 { font-size: clamp(30px, 7vw, 40px); } #features .feature-intro { font-size: 15px; } #features .feature-grid { gap: 18px; } #features .capability-motion-card { min-height: 290px; } }
@media (prefers-reduced-motion: reduce) { #features *, #features *::before, #features *::after { animation: none !important; transition: none !important; } #features .feature-scan { display: none; } #features .security-ring { opacity: .35; } }