/* ============================================================
   Scroll-reveal motion layer. Progressive enhancement: motion.js adds
   `html.motion` ONLY when JS runs and the user hasn't asked for reduced
   motion. Every "hidden" start state is scoped under `.motion`, so without
   JS (or with prefers-reduced-motion) all content is fully visible.
   GPU-friendly (transform/opacity only).
   ============================================================ */

.motion .reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .8s cubic-bezier(.22,.8,.3,1), transform .8s cubic-bezier(.22,.8,.3,1);
    will-change: opacity, transform;
}
.motion .reveal.in { opacity: 1; transform: none; }

.motion .reveal-stagger > * {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s cubic-bezier(.22,.8,.3,1), transform .7s cubic-bezier(.22,.8,.3,1);
    will-change: opacity, transform;
}
.motion .reveal-stagger.in > * { opacity: 1; transform: none; }
.motion .reveal-stagger.in > *:nth-child(1) { transition-delay: .00s; }
.motion .reveal-stagger.in > *:nth-child(2) { transition-delay: .07s; }
.motion .reveal-stagger.in > *:nth-child(3) { transition-delay: .14s; }
.motion .reveal-stagger.in > *:nth-child(4) { transition-delay: .21s; }
.motion .reveal-stagger.in > *:nth-child(5) { transition-delay: .28s; }
.motion .reveal-stagger.in > *:nth-child(6) { transition-delay: .35s; }
.motion .reveal-stagger.in > *:nth-child(7) { transition-delay: .42s; }
.motion .reveal-stagger.in > *:nth-child(8) { transition-delay: .49s; }

.motion .draw-rule {
    transform: scaleX(0); transform-origin: left;
    transition: transform .8s cubic-bezier(.76,0,.24,1) .1s;
}
.motion .draw-rule.in { transform: scaleX(1); }

/* Hover lift on cards, regardless of JS. */
.blood-group-card, .donor-card, .emergency-card, .service-card, .testi-card {
    transition: transform .35s cubic-bezier(.22,.8,.3,1), box-shadow .35s ease;
}
.blood-group-card:hover, .donor-card:hover, .emergency-card:hover, .service-card:hover {
    transform: translateY(-5px);
}

/* Header shrink-on-scroll. */
.site-header { transition: box-shadow .3s ease, padding .3s ease; }
.site-header.shrink { box-shadow: 0 4px 18px rgba(0,0,0,.08); }

/* Urgent pulse for the floating emergency button — subtle, respects reduced motion below. */
.emergency-float-btn { animation: bb-pulse 2.4s ease-in-out infinite; }
@keyframes bb-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(194,24,7,.45); }
    50% { box-shadow: 0 0 0 10px rgba(194,24,7,0); }
}

@media (prefers-reduced-motion: reduce) {
    .blood-group-card, .donor-card, .emergency-card, .service-card, .testi-card { transition: none; }
    .emergency-float-btn { animation: none; }
}