/* ========== KEYFRAMES ========== */

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

@keyframes bobble {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 var(--accent-glow); }
  50% { box-shadow: 0 0 20px 4px var(--accent-glow); }
}

/* ========== SCROLL REVEAL ========== */

.reveal {
  opacity: 0;
  transform: translateY(30px);
  visibility: hidden;
  transition: opacity 0.6s ease, transform 0.6s ease, visibility 0s linear 0.6s;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  transition: opacity 0.6s ease, transform 0.6s ease, visibility 0s;
}

/* Stagger children */
.reveal:nth-child(2) { transition-delay: 0.1s; }
.reveal:nth-child(3) { transition-delay: 0.2s; }
.reveal:nth-child(4) { transition-delay: 0.3s; }
.reveal:nth-child(5) { transition-delay: 0.4s; }
.reveal:nth-child(6) { transition-delay: 0.5s; }

/* ========== SCENE ANIMATIONS ========== */

/* --- Scene 1: Hailstorm --- */
.scene.active .hail {
  animation: hailFall 0.8s ease-in forwards;
}
.hail-1 { animation-delay: 0.1s !important; }
.hail-2 { animation-delay: 0.3s !important; }
.hail-3 { animation-delay: 0.2s !important; }
.hail-4 { animation-delay: 0.5s !important; }
.hail-5 { animation-delay: 0.4s !important; }
.hail-6 { animation-delay: 0.6s !important; }

@keyframes hailFall {
  0% { transform: translateY(0); opacity: 0.8; }
  70% { opacity: 1; }
  100% { transform: translateY(190px); opacity: 0; }
}

.scene.active .dents {
  animation: dentAppear 0.4s ease-out forwards;
  animation-delay: 1s;
}

@keyframes dentAppear {
  from { opacity: 0; transform: scale(0.5); }
  to { opacity: 1; transform: scale(1); }
}

.scene.active .phone-buzz {
  animation: phoneBuzz 0.3s ease-in-out 6 alternate;
  animation-delay: 1.2s;
}

@keyframes phoneBuzz {
  from { opacity: 0.8; transform: translate(350px, 40px) rotate(-3deg); }
  to { opacity: 1; transform: translate(350px, 40px) rotate(3deg); }
}

/* --- Scene 2: Estimator quits --- */
.scene.active .person-leaving {
  animation: walkAway 2s ease-in forwards;
  animation-delay: 0.3s;
}

@keyframes walkAway {
  0% { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(120px); opacity: 0; }
}

.scene.active .question {
  animation: questionPop 0.5s ease-out forwards;
  animation-delay: 1.5s;
}

@keyframes questionPop {
  0% { opacity: 0; transform: scale(0) translateY(10px); }
  60% { transform: scale(1.3) translateY(-5px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* --- Scene 3: Supplement denied --- */
.scene.active .stamp {
  animation: stampSlam 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  animation-delay: 0.8s;
}

@keyframes stampSlam {
  0% { opacity: 0; transform: translate(175px, 70px) scale(3) rotate(-20deg); }
  70% { transform: translate(175px, 70px) scale(0.9) rotate(2deg); }
  100% { opacity: 1; transform: translate(175px, 70px) scale(1) rotate(0deg); }
}

.scene.active .clock-min {
  animation: clockSpin 2s linear infinite;
  transform-origin: 0 0;
  animation-delay: 0.5s;
}

@keyframes clockSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* --- Scene 4: Subrogation packet --- */
.scene.active .paper-stack {
  animation: paperDrop 1s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

@keyframes paperDrop {
  0% { transform: translateY(0); }
  60% { transform: translateY(120px); }
  70% { transform: translateY(110px); }
  100% { transform: translateY(120px); }
}

.scene.active .scattered {
  animation: scatterReveal 0.6s ease-out forwards;
  animation-delay: 1s;
}

@keyframes scatterReveal {
  0% { opacity: 0; transform: scale(0.8); }
  100% { opacity: 0.8; transform: scale(1); }
}

.scene.active .spin-hand {
  animation: clockSpin 0.5s linear infinite;
  transform-origin: 0 0;
}

/* --- Scene 5: Fraud --- */
.scene.active .camera-flash {
  animation: cameraFlash 0.15s ease-out 3 alternate;
  animation-delay: 0.3s;
}

@keyframes cameraFlash {
  from { opacity: 0; }
  to { opacity: 1; }
}

.scene.active .photo-fake {
  animation: photoGlitch 0.15s ease-in-out 4 alternate;
  animation-delay: 1s;
}

@keyframes photoGlitch {
  0% { transform: translate(0, 0); }
  25% { transform: translate(3px, -2px); }
  50% { transform: translate(-2px, 1px); }
  75% { transform: translate(1px, 3px); }
  100% { transform: translate(-3px, -1px); }
}

.scene.active .glitch-lines {
  animation: glitchReveal 0.3s steps(3) forwards;
  animation-delay: 1.6s;
}

@keyframes glitchReveal {
  from { opacity: 0; }
  to { opacity: 0.6; }
}

.scene.active .dollars {
  animation: dollarsShow 0.4s ease-out forwards;
  animation-delay: 1.8s;
}

@keyframes dollarsShow {
  from { opacity: 0; }
  to { opacity: 1; }
}

.scene.active .dollar-1 {
  animation: dollarFloat 1.5s ease-out forwards;
  animation-delay: 1.9s;
}
.scene.active .dollar-2 {
  animation: dollarFloat 1.5s ease-out forwards;
  animation-delay: 2.1s;
}
.scene.active .dollar-3 {
  animation: dollarFloat 1.5s ease-out forwards;
  animation-delay: 2s;
}

@keyframes dollarFloat {
  0% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(-60px); opacity: 0; }
}

/* --- Scene 6: Tesla ADAS --- */
.scene.active .sensors {
  animation: sensorsReveal 0.6s ease-out forwards;
  animation-delay: 0.5s;
}

@keyframes sensorsReveal {
  from { opacity: 0; }
  to { opacity: 0.7; }
}

.scene.active .sensor-1 { animation: sensorPulse 1.2s ease-in-out infinite; animation-delay: 0.6s; }
.scene.active .sensor-2 { animation: sensorPulse 1.2s ease-in-out infinite; animation-delay: 0.8s; }
.scene.active .sensor-3 { animation: sensorPulse 1.2s ease-in-out infinite; animation-delay: 0.7s; }
.scene.active .sensor-4 { animation: sensorPulse 1.2s ease-in-out infinite; animation-delay: 0.9s; }
.scene.active .sensor-5 { animation: sensorPulse 1.2s ease-in-out infinite; animation-delay: 1s; }

@keyframes sensorPulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

.scene.active .adas-questions {
  animation: sensorsReveal 0.4s ease-out forwards;
  animation-delay: 1.2s;
}

.scene.active .q-1 { animation: questionBounce 0.5s ease-out forwards; animation-delay: 1.3s; }
.scene.active .q-2 { animation: questionBounce 0.5s ease-out forwards; animation-delay: 1.5s; }
.scene.active .q-3 { animation: questionBounce 0.5s ease-out forwards; animation-delay: 1.7s; }
.scene.active .q-4 { animation: questionBounce 0.5s ease-out forwards; animation-delay: 1.9s; }

@keyframes questionBounce {
  0% { opacity: 0; transform: scale(0); }
  60% { transform: scale(1.4); }
  100% { opacity: 1; transform: scale(1); }
}

/* --- Scene 7: Missed calls --- */
.scene.active .phone-ring {
  animation: phoneShake 0.1s ease-in-out 12 alternate;
  animation-delay: 0.3s;
}

@keyframes phoneShake {
  from { transform: translate(160px, 20px) rotate(-2deg); }
  to { transform: translate(160px, 20px) rotate(2deg); }
}

.scene.active .ring-1,
.scene.active .ring-3 {
  animation: ringWave 0.6s ease-out 3;
  animation-delay: 0.3s;
}
.scene.active .ring-2,
.scene.active .ring-4 {
  animation: ringWave 0.6s ease-out 3;
  animation-delay: 0.5s;
}

@keyframes ringWave {
  0% { opacity: 0; transform: scaleX(0.8); }
  50% { opacity: 0.8; }
  100% { opacity: 0; transform: scaleX(1.2); }
}

.scene.active .badge-pulse {
  animation: badgePop 0.4s ease-out forwards, badgePulse 1s ease-in-out infinite 0.8s;
  animation-delay: 0.8s;
}

@keyframes badgePop {
  0% { opacity: 0; transform: translate(200px, 18px) scale(0); }
  70% { transform: translate(200px, 18px) scale(1.3); }
  100% { opacity: 1; transform: translate(200px, 18px) scale(1); }
}

@keyframes badgePulse {
  0%, 100% { transform: translate(200px, 18px) scale(1); }
  50% { transform: translate(200px, 18px) scale(1.15); }
}

.scene.active .call-1 { animation: callDisconnect 0.4s ease-out forwards; animation-delay: 1.5s; }
.scene.active .call-2 { animation: callDisconnect 0.4s ease-out forwards; animation-delay: 1.8s; }
.scene.active .call-3 { animation: callDisconnect 0.4s ease-out forwards; animation-delay: 2.1s; }
.scene.active .call-4 { animation: callDisconnect 0.4s ease-out forwards; animation-delay: 2.4s; }

@keyframes callDisconnect {
  0% { opacity: 0; stroke-dasharray: 0 100; }
  50% { opacity: 1; stroke-dasharray: 100 0; }
  100% { opacity: 0.5; stroke-dasharray: 100 0; }
}

.scene.active .call-x {
  animation: fadeIn 0.3s ease-out forwards;
  animation-delay: 2.6s;
}

/* --- Scene 8: DRP Scorecard --- */
.scene.active .bar-1 {
  animation: barGrow1 0.8s ease-out forwards;
  animation-delay: 0.3s;
}
.scene.active .bar-2 {
  animation: barGrow2 0.8s ease-out forwards;
  animation-delay: 0.5s;
}
.scene.active .bar-3 {
  animation: barGrow3 0.8s ease-out forwards;
  animation-delay: 0.7s;
}
.scene.active .bar-4 {
  animation: barGrow4 0.8s ease-out forwards;
  animation-delay: 0.9s;
}

@keyframes barGrow1 {
  to { y: 60; height: 90px; }
}
@keyframes barGrow2 {
  to { y: 75; height: 75px; }
}
@keyframes barGrow3 {
  to { y: 90; height: 60px; }
}
@keyframes barGrow4 {
  to { y: 110; height: 40px; }
}

.scene.active .trend-line {
  animation: trendDraw 1.5s ease-out forwards;
  animation-delay: 1.2s;
}

@keyframes trendDraw {
  to {
    stroke-dashoffset: 0;
    points: 115,65 165,80 215,100 265,120;
  }
}

/* The trend line points can't animate via CSS keyframes directly,
   so we'll use stroke-dashoffset reveal only. Update the polyline
   points in HTML to final positions. */

.scene.active .clipboard {
  animation: clipboardSlide 0.5s ease-out forwards;
  animation-delay: 1.5s;
}

@keyframes clipboardSlide {
  0% { opacity: 0; transform: translate(330px, 40px) translateX(30px); }
  100% { opacity: 1; transform: translate(330px, 40px) translateX(0); }
}


/* ========== HOW IT WORKS — STEP ANIMATIONS ========== */
/* Triggered when .how-it-works__step gets .hiw-active via IntersectionObserver */

/* --- Step 1: Capture (Phone + Photos) --- */
.hiw-active .hiw-phone {
  animation: hiwFadeIn 0.6s ease-out forwards;
}

.hiw-active .hiw-lens {
  animation: hiwFadeIn 0.5s ease-out forwards;
  animation-delay: 0.4s;
}

.hiw-active .hiw-viewfinder {
  animation: hiwFadeIn 0.4s ease-out forwards;
  animation-delay: 0.6s;
}

.hiw-active .hiw-flash {
  animation: hiwFlash 0.2s ease-out 2 alternate;
  animation-delay: 1s;
}

.hiw-active .hiw-thumb-1 {
  animation: hiwThumbPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 1.3s;
}
.hiw-active .hiw-thumb-2 {
  animation: hiwThumbPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 1.5s;
}
.hiw-active .hiw-thumb-3 {
  animation: hiwThumbPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 1.7s;
}
.hiw-active .hiw-thumb-4 {
  animation: hiwThumbPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 1.9s;
}

.hiw-active .hiw-badge {
  animation: hiwBadgePop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 2.1s;
}

@keyframes hiwFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes hiwFlash {
  from { opacity: 0; }
  to { opacity: 0.25; }
}

@keyframes hiwThumbPop {
  0% { opacity: 0; transform: scale(0); }
  70% { transform: scale(1.15); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes hiwBadgePop {
  0% { opacity: 0; transform: scale(0); }
  60% { transform: scale(1.3); }
  100% { opacity: 1; transform: scale(1); }
}


/* --- Step 2: Decode (Car + VIN Scan) --- */
.hiw-active .hiw-car {
  animation: hiwCarDraw 0.8s ease-out forwards;
}

.hiw-active .hiw-scanline {
  animation: hiwScanSweep 1.2s ease-in-out forwards;
  animation-delay: 0.5s;
}

.hiw-active .hiw-vin-group {
  animation: hiwSlideDown 0.5s ease-out forwards;
  animation-delay: 1.2s;
}

.hiw-active .hiw-dp-1 {
  animation: hiwDotPulse 0.4s ease-out forwards;
  animation-delay: 1.5s;
}
.hiw-active .hiw-dp-2 {
  animation: hiwDotPulse 0.4s ease-out forwards;
  animation-delay: 1.7s;
}
.hiw-active .hiw-dp-3 {
  animation: hiwDotPulse 0.4s ease-out forwards;
  animation-delay: 1.9s;
}
.hiw-active .hiw-dp-4 {
  animation: hiwDotPulse 0.4s ease-out forwards;
  animation-delay: 2.1s;
}

.hiw-active .hiw-dataline {
  animation: hiwFadeIn 0.6s ease-out forwards;
  animation-delay: 2.2s;
}

@keyframes hiwCarDraw {
  0% { opacity: 0; stroke-dasharray: 500; stroke-dashoffset: 500; }
  100% { opacity: 1; stroke-dashoffset: 0; }
}

@keyframes hiwScanSweep {
  0% { opacity: 0; transform: translateX(0); }
  10% { opacity: 0.8; }
  90% { opacity: 0.8; }
  100% { opacity: 0; transform: translateX(130px); }
}

@keyframes hiwSlideDown {
  0% { opacity: 0; transform: translateY(-10px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes hiwDotPulse {
  0% { opacity: 0; r: 0; }
  60% { r: 5; }
  100% { opacity: 1; r: 3; }
}


/* --- Step 3: Estimate (Document fills in) --- */
.hiw-active .hiw-doc {
  animation: hiwFadeIn 0.5s ease-out forwards;
}

.hiw-active .hiw-doc-header {
  animation: hiwLineSlide 0.4s ease-out forwards;
  animation-delay: 0.3s;
}

.hiw-active .hiw-li-1 {
  animation: hiwLineSlide 0.3s ease-out forwards;
  animation-delay: 0.6s;
}
.hiw-active .hiw-li-2 {
  animation: hiwLineSlide 0.3s ease-out forwards;
  animation-delay: 0.8s;
}
.hiw-active .hiw-li-3 {
  animation: hiwLineSlide 0.3s ease-out forwards;
  animation-delay: 1.0s;
}
.hiw-active .hiw-li-4 {
  animation: hiwLineSlide 0.3s ease-out forwards;
  animation-delay: 1.2s;
}
.hiw-active .hiw-li-5 {
  animation: hiwLineSlide 0.3s ease-out forwards;
  animation-delay: 1.4s;
}

.hiw-active .hiw-divider {
  animation: hiwFadeIn 0.3s ease-out forwards;
  animation-delay: 1.6s;
}

.hiw-active .hiw-total {
  animation: hiwLineSlide 0.4s ease-out forwards;
  animation-delay: 1.8s;
}

.hiw-active .hiw-check-circle {
  animation: hiwCheckPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 2.1s;
}

@keyframes hiwLineSlide {
  0% { opacity: 0; transform: translateX(-10px); }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes hiwCheckPop {
  0% { opacity: 0; r: 0; }
  60% { opacity: 1; r: 13; }
  100% { opacity: 1; r: 10; }
}


/* --- Step 4: Route (Document flies A → B) --- */
.hiw-active .hiw-node-src {
  animation: hiwFadeIn 0.5s ease-out forwards;
}

.hiw-active .hiw-node-dst {
  animation: hiwFadeIn 0.5s ease-out forwards;
  animation-delay: 0.2s;
}

.hiw-active .hiw-route-path {
  animation: hiwRouteDraw 1s ease-in-out forwards;
  animation-delay: 0.6s;
}

.hiw-active .hiw-envelope {
  animation: hiwEnvelopeFly 1s ease-in-out forwards;
  animation-delay: 0.6s;
}

.hiw-active .hiw-arrive-pulse {
  animation: hiwPulseRing 0.6s ease-out forwards;
  animation-delay: 1.6s;
}

.hiw-active .hiw-branch-1 {
  animation: hiwFadeIn 0.4s ease-out forwards;
  animation-delay: 1.8s;
}
.hiw-active .hiw-branch-2 {
  animation: hiwFadeIn 0.4s ease-out forwards;
  animation-delay: 2s;
}

@keyframes hiwRouteDraw {
  0% { opacity: 1; stroke-dashoffset: 200; }
  100% { opacity: 1; stroke-dashoffset: 0; }
}

@keyframes hiwEnvelopeFly {
  0% { opacity: 1; transform: translate(48px, 65px); }
  50% { transform: translate(80px, 40px); }
  100% { opacity: 0; transform: translate(112px, 65px); }
}

@keyframes hiwPulseRing {
  0% { opacity: 0.8; r: 14; }
  100% { opacity: 0; r: 28; }
}


/* --- Step 5: Refine (Timer countdown) --- */
.hiw-active .hiw-timer-bg {
  animation: hiwFadeIn 0.5s ease-out forwards;
}

.hiw-active .hiw-timer-fill {
  animation: hiwTimerFill 2s ease-in-out forwards;
  animation-delay: 0.3s;
}

.hiw-active .hiw-timer-hand {
  animation: hiwHandSpin 2s ease-in-out forwards;
  animation-delay: 0.3s;
}

.hiw-active .hiw-timer-center {
  animation: hiwFadeIn 0.3s ease-out forwards;
  animation-delay: 0.2s;
}

.hiw-active .hiw-time-old {
  animation: hiwTimeOld 2s ease-out forwards;
  animation-delay: 0.3s;
}

.hiw-active .hiw-time-new {
  animation: hiwTimeNew 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 2.3s;
}

.hiw-active .hiw-time-unit {
  animation: hiwFadeIn 0.4s ease-out forwards;
  animation-delay: 0.5s;
}

.hiw-active .hiw-final-check {
  animation: hiwCheckReveal 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 2.6s;
}

.hiw-active .hiw-booking {
  animation: hiwSlideIn 0.4s ease-out forwards;
  animation-delay: 2.9s;
}

@keyframes hiwTimerFill {
  0% { opacity: 1; stroke-dashoffset: 201; }
  100% { opacity: 1; stroke-dashoffset: 0; }
}

@keyframes hiwHandSpin {
  0% { opacity: 1; transform: rotate(0deg); transform-origin: 80px 55px; }
  100% { opacity: 1; transform: rotate(720deg); transform-origin: 80px 55px; }
}

@keyframes hiwTimeOld {
  0% { opacity: 0.8; }
  80% { opacity: 0.8; }
  100% { opacity: 0; }
}

@keyframes hiwTimeNew {
  0% { opacity: 0; transform: scale(0.3); }
  60% { transform: scale(1.2); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes hiwCheckReveal {
  0% { opacity: 0; transform: scale(0); }
  60% { transform: scale(1.2); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes hiwSlideIn {
  0% { opacity: 0; transform: translateX(15px); }
  100% { opacity: 1; transform: translateX(0); }
}


/* ========== FEATURE CARD FLIP — SVG ANIMATIONS ========== */
/* Triggered on hover or .flipped (touch) */

/* --- Shared keyframes --- */
@keyframes fcFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fcSlideUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fcSlideRight {
  from { opacity: 0; transform: translateX(-10px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes fcScalePop {
  0% { opacity: 0; transform: scale(0); }
  60% { transform: scale(1.2); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes fcStampSlam {
  0% { opacity: 0; transform: scale(3) rotate(-15deg); }
  70% { transform: scale(0.9) rotate(2deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

@keyframes fcScanDown {
  0% { opacity: 0; transform: translateY(0); }
  10% { opacity: 0.8; }
  90% { opacity: 0.8; }
  100% { opacity: 0; transform: translateY(110px); }
}

@keyframes fcBarGrow {
  from { height: 0; }
  to { height: var(--bar-h); }
}

@keyframes fcFillBar {
  from { width: 0; opacity: 1; }
  to { width: 180px; opacity: 1; }
}

@keyframes fcDashDraw {
  to { stroke-dashoffset: 0; }
}

@keyframes fcPulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}


/* --- Card 1: See the Damage --- */
.features__card:hover .fc-phone,
.features__card.flipped .fc-phone {
  animation: fcFadeIn 0.5s ease-out forwards;
}

.features__card:hover .fc-car-draw,
.features__card.flipped .fc-car-draw {
  animation: fcFadeIn 0.6s ease-out forwards;
  animation-delay: 0.2s;
}

.features__card:hover .fc-scanline,
.features__card.flipped .fc-scanline {
  animation: fcScanDown 1.2s ease-in-out forwards;
  animation-delay: 0.4s;
}

.features__card:hover .fc-bbox-1,
.features__card.flipped .fc-bbox-1 {
  animation: fcFadeIn 0.3s ease-out forwards;
  animation-delay: 0.6s;
}
.features__card:hover .fc-bbox-2,
.features__card.flipped .fc-bbox-2 {
  animation: fcFadeIn 0.3s ease-out forwards;
  animation-delay: 0.8s;
}
.features__card:hover .fc-bbox-3,
.features__card.flipped .fc-bbox-3 {
  animation: fcFadeIn 0.3s ease-out forwards;
  animation-delay: 1.0s;
}

.features__card:hover .fc-conf-1,
.features__card.flipped .fc-conf-1 {
  animation: fcScalePop 0.3s ease-out forwards;
  animation-delay: 0.7s;
}
.features__card:hover .fc-conf-2,
.features__card.flipped .fc-conf-2 {
  animation: fcScalePop 0.3s ease-out forwards;
  animation-delay: 0.9s;
}
.features__card:hover .fc-conf-3,
.features__card.flipped .fc-conf-3 {
  animation: fcScalePop 0.3s ease-out forwards;
  animation-delay: 1.1s;
}

.features__card:hover .fc-tag-1,
.features__card.flipped .fc-tag-1 {
  animation: fcSlideRight 0.4s ease-out forwards;
  animation-delay: 1.2s;
}
.features__card:hover .fc-tag-2,
.features__card.flipped .fc-tag-2 {
  animation: fcSlideRight 0.4s ease-out forwards;
  animation-delay: 1.4s;
}
.features__card:hover .fc-tag-3,
.features__card.flipped .fc-tag-3 {
  animation: fcSlideRight 0.4s ease-out forwards;
  animation-delay: 1.6s;
}

.features__card:hover .fc-status,
.features__card.flipped .fc-status {
  animation: fcSlideUp 0.4s ease-out forwards;
  animation-delay: 1.8s;
}


/* --- Card 2: Build the Estimate --- */
.features__card:hover .fc-doc,
.features__card.flipped .fc-doc {
  animation: fcFadeIn 0.4s ease-out forwards;
}

.features__card:hover .fc-headers,
.features__card.flipped .fc-headers {
  animation: fcSlideRight 0.4s ease-out forwards;
  animation-delay: 0.2s;
}

.features__card:hover .fc-li-1,
.features__card.flipped .fc-li-1 {
  animation: fcSlideRight 0.3s ease-out forwards;
  animation-delay: 0.4s;
}
.features__card:hover .fc-li-2,
.features__card.flipped .fc-li-2 {
  animation: fcSlideRight 0.3s ease-out forwards;
  animation-delay: 0.55s;
}
.features__card:hover .fc-li-3,
.features__card.flipped .fc-li-3 {
  animation: fcSlideRight 0.3s ease-out forwards;
  animation-delay: 0.7s;
}
.features__card:hover .fc-li-4,
.features__card.flipped .fc-li-4 {
  animation: fcSlideRight 0.3s ease-out forwards;
  animation-delay: 0.85s;
}
.features__card:hover .fc-li-5,
.features__card.flipped .fc-li-5 {
  animation: fcSlideRight 0.3s ease-out forwards;
  animation-delay: 1.0s;
}
.features__card:hover .fc-li-6,
.features__card.flipped .fc-li-6 {
  animation: fcSlideRight 0.3s ease-out forwards;
  animation-delay: 1.15s;
}
.features__card:hover .fc-li-7,
.features__card.flipped .fc-li-7 {
  animation: fcSlideRight 0.3s ease-out forwards;
  animation-delay: 1.3s;
}

.features__card:hover .fc-divider,
.features__card.flipped .fc-divider {
  animation: fcFadeIn 0.3s ease-out forwards;
  animation-delay: 1.4s;
}

.features__card:hover .fc-total,
.features__card.flipped .fc-total {
  animation: fcScalePop 0.4s ease-out forwards;
  animation-delay: 1.5s;
}

.features__card:hover .fc-bar-bg,
.features__card.flipped .fc-bar-bg {
  animation: fcFadeIn 0.3s ease-out forwards;
  animation-delay: 1.6s;
}

.features__card:hover .fc-bar-fill,
.features__card.flipped .fc-bar-fill {
  animation: fcFillBar 0.8s ease-out forwards;
  animation-delay: 1.7s;
}

.features__card:hover .fc-bar-label,
.features__card.flipped .fc-bar-label {
  animation: fcFadeIn 0.3s ease-out forwards;
  animation-delay: 2.2s;
}


/* --- Card 3: Catch the Fraud --- */
.features__card:hover .fc-split,
.features__card.flipped .fc-split {
  animation: fcFadeIn 0.4s ease-out forwards;
}

.features__card:hover .fc-panel-l,
.features__card.flipped .fc-panel-l {
  animation: fcFadeIn 0.5s ease-out forwards;
  animation-delay: 0.15s;
}

.features__card:hover .fc-panel-r,
.features__card.flipped .fc-panel-r {
  animation: fcFadeIn 0.5s ease-out forwards;
  animation-delay: 0.3s;
}

.features__card:hover .fc-analysis,
.features__card.flipped .fc-analysis {
  animation: fcFadeIn 0.5s ease-out forwards;
  animation-delay: 0.5s;
}

.features__card:hover .fc-heat-1,
.features__card.flipped .fc-heat-1 {
  animation: fcFadeIn 0.3s ease-out forwards, fcPulse 1.5s ease-in-out infinite 1s;
  animation-delay: 0.7s;
}
.features__card:hover .fc-heat-2,
.features__card.flipped .fc-heat-2 {
  animation: fcFadeIn 0.3s ease-out forwards, fcPulse 1.5s ease-in-out infinite 1.2s;
  animation-delay: 0.9s;
}

.features__card:hover .fc-timestamp,
.features__card.flipped .fc-timestamp {
  animation: fcSlideRight 0.4s ease-out forwards;
  animation-delay: 1.0s;
}

.features__card:hover .fc-flag-1,
.features__card.flipped .fc-flag-1 {
  animation: fcSlideRight 0.3s ease-out forwards;
  animation-delay: 1.2s;
}
.features__card:hover .fc-flag-2,
.features__card.flipped .fc-flag-2 {
  animation: fcSlideRight 0.3s ease-out forwards;
  animation-delay: 1.4s;
}
.features__card:hover .fc-flag-3,
.features__card.flipped .fc-flag-3 {
  animation: fcSlideRight 0.3s ease-out forwards;
  animation-delay: 1.6s;
}

.features__card:hover .fc-flagged,
.features__card.flipped .fc-flagged {
  animation: fcStampSlam 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  animation-delay: 1.8s;
}


/* --- Card 4: Never Miss a Lead --- */
.features__card:hover .fc-chat-frame,
.features__card.flipped .fc-chat-frame {
  animation: fcFadeIn 0.4s ease-out forwards;
}

.features__card:hover .fc-chat-header,
.features__card.flipped .fc-chat-header {
  animation: fcFadeIn 0.4s ease-out forwards;
  animation-delay: 0.2s;
}

.features__card:hover .fc-msg-in-1,
.features__card.flipped .fc-msg-in-1 {
  animation: fcSlideRight 0.3s ease-out forwards;
  animation-delay: 0.5s;
}
.features__card:hover .fc-msg-out-1,
.features__card.flipped .fc-msg-out-1 {
  animation: fcSlideUp 0.3s ease-out forwards;
  animation-delay: 0.8s;
}
.features__card:hover .fc-msg-in-2,
.features__card.flipped .fc-msg-in-2 {
  animation: fcSlideRight 0.3s ease-out forwards;
  animation-delay: 1.1s;
}
.features__card:hover .fc-msg-out-2,
.features__card.flipped .fc-msg-out-2 {
  animation: fcSlideUp 0.3s ease-out forwards;
  animation-delay: 1.4s;
}

.features__card:hover .fc-notif,
.features__card.flipped .fc-notif {
  animation: fcScalePop 0.4s ease-out forwards;
  animation-delay: 1.6s;
}

.features__card:hover .fc-clock247,
.features__card.flipped .fc-clock247 {
  animation: fcFadeIn 0.5s ease-out forwards;
  animation-delay: 1.8s;
}


/* --- Card 5: Cut the Paperwork --- */
.features__card:hover .fc-stack-1,
.features__card.flipped .fc-stack-1 {
  animation: fcFadeIn 0.3s ease-out forwards;
}
.features__card:hover .fc-stack-2,
.features__card.flipped .fc-stack-2 {
  animation: fcFadeIn 0.3s ease-out forwards;
  animation-delay: 0.1s;
}
.features__card:hover .fc-stack-3,
.features__card.flipped .fc-stack-3 {
  animation: fcFadeIn 0.3s ease-out forwards;
  animation-delay: 0.2s;
}

.features__card:hover .fc-stack-label,
.features__card.flipped .fc-stack-label {
  animation: fcFadeIn 0.3s ease-out forwards;
  animation-delay: 0.3s;
}

.features__card:hover .fc-funnel,
.features__card.flipped .fc-funnel {
  animation: fcFadeIn 0.5s ease-out forwards;
  animation-delay: 0.5s;
}

.features__card:hover .fc-processing,
.features__card.flipped .fc-processing {
  animation: fcFadeIn 0.3s ease-out forwards, fcPulse 1s ease-in-out infinite 1s;
  animation-delay: 0.7s;
}

.features__card:hover .fc-arrow-out,
.features__card.flipped .fc-arrow-out {
  animation: fcFadeIn 0.3s ease-out forwards;
  animation-delay: 0.9s;
}

.features__card:hover .fc-out-1,
.features__card.flipped .fc-out-1 {
  animation: fcSlideRight 0.4s ease-out forwards;
  animation-delay: 1.1s;
}
.features__card:hover .fc-out-2,
.features__card.flipped .fc-out-2 {
  animation: fcSlideRight 0.4s ease-out forwards;
  animation-delay: 1.3s;
}
.features__card:hover .fc-out-3,
.features__card.flipped .fc-out-3 {
  animation: fcSlideRight 0.4s ease-out forwards;
  animation-delay: 1.5s;
}

.features__card:hover .fc-time-saved,
.features__card.flipped .fc-time-saved {
  animation: fcFadeIn 0.4s ease-out forwards;
  animation-delay: 1.8s;
}


/* --- Card 6: Know Your Numbers --- */
.features__card:hover .fc-dash,
.features__card.flipped .fc-dash {
  animation: fcFadeIn 0.4s ease-out forwards;
}

.features__card:hover .fc-axis,
.features__card.flipped .fc-axis {
  animation: fcFadeIn 0.3s ease-out forwards;
  animation-delay: 0.1s;
}

.features__card:hover .fc-bar-labels,
.features__card.flipped .fc-bar-labels {
  animation: fcFadeIn 0.3s ease-out forwards;
  animation-delay: 0.2s;
}

.features__card:hover .fc-bar-1,
.features__card.flipped .fc-bar-1 {
  animation: fcFadeIn 0.4s ease-out forwards;
  animation-delay: 0.3s;
  --bar-h: 55px;
  height: 55px;
  y: 65;
}
.features__card:hover .fc-bar-2,
.features__card.flipped .fc-bar-2 {
  animation: fcFadeIn 0.4s ease-out forwards;
  animation-delay: 0.45s;
  height: 42px;
  y: 78;
}
.features__card:hover .fc-bar-3,
.features__card.flipped .fc-bar-3 {
  animation: fcFadeIn 0.4s ease-out forwards;
  animation-delay: 0.6s;
  height: 60px;
  y: 60;
}
.features__card:hover .fc-bar-4,
.features__card.flipped .fc-bar-4 {
  animation: fcFadeIn 0.4s ease-out forwards;
  animation-delay: 0.75s;
  height: 80px;
  y: 40;
}

.features__card:hover .fc-trend,
.features__card.flipped .fc-trend {
  animation: fcDashDraw 1s ease-out forwards;
  animation-delay: 1.0s;
  opacity: 1;
}

.features__card:hover .fc-td-1,
.features__card.flipped .fc-td-1 {
  animation: fcScalePop 0.3s ease-out forwards;
  animation-delay: 1.0s;
}
.features__card:hover .fc-td-2,
.features__card.flipped .fc-td-2 {
  animation: fcScalePop 0.3s ease-out forwards;
  animation-delay: 1.15s;
}
.features__card:hover .fc-td-3,
.features__card.flipped .fc-td-3 {
  animation: fcScalePop 0.3s ease-out forwards;
  animation-delay: 1.3s;
}
.features__card:hover .fc-td-4,
.features__card.flipped .fc-td-4 {
  animation: fcScalePop 0.3s ease-out forwards;
  animation-delay: 1.45s;
}

.features__card:hover .fc-pie-bg,
.features__card.flipped .fc-pie-bg {
  animation: fcFadeIn 0.4s ease-out forwards;
  animation-delay: 0.5s;
}
.features__card:hover .fc-pie-seg1,
.features__card.flipped .fc-pie-seg1 {
  animation: fcFadeIn 0.5s ease-out forwards;
  animation-delay: 0.7s;
}
.features__card:hover .fc-pie-seg2,
.features__card.flipped .fc-pie-seg2 {
  animation: fcFadeIn 0.5s ease-out forwards;
  animation-delay: 0.9s;
}

.features__card:hover .fc-chart-title,
.features__card.flipped .fc-chart-title {
  animation: fcFadeIn 0.3s ease-out forwards;
  animation-delay: 0.15s;
}

.features__card:hover .fc-kpi-1,
.features__card.flipped .fc-kpi-1 {
  animation: fcSlideUp 0.3s ease-out forwards;
  animation-delay: 1.3s;
}
.features__card:hover .fc-kpi-2,
.features__card.flipped .fc-kpi-2 {
  animation: fcSlideUp 0.3s ease-out forwards;
  animation-delay: 1.5s;
}
.features__card:hover .fc-kpi-3,
.features__card.flipped .fc-kpi-3 {
  animation: fcSlideUp 0.3s ease-out forwards;
  animation-delay: 1.7s;
}

/* ========== PREFERS REDUCED MOTION ========== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal,
  .reveal.visible {
    opacity: 1;
    transform: none;
    visibility: visible;
    transition: none;
  }
}