/* ============================================================
   PREMIUM MOTION LAYER (PILOT) — added 2026-06-25
   Tasteful, GPU-friendly (opacity + transform only).
   Additive: defines new keyframes/classes + scroll-reveal.
   Fully disabled under prefers-reduced-motion (block at end).
   Reusable across the hair-site clones (shared style.css).
   ============================================================ */

/* --- Keyframes (transform/opacity only, no layout thrash) --- */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.96); }
    to   { opacity: 1; transform: scale(1); }
}

/* --- Entrance utility classes (run immediately on load) --- */
.animate-fade-in-up { animation: fadeInUp 0.7s cubic-bezier(.22,.61,.36,1) both; }
.animate-scale-in   { animation: scaleIn 0.6s cubic-bezier(.22,.61,.36,1) both; }

/* --- Scroll-reveal: hidden until IntersectionObserver adds .in-view --- */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s cubic-bezier(.22,.61,.36,1),
                transform 0.7s cubic-bezier(.22,.61,.36,1);
    will-change: opacity, transform;
}
.reveal.in-view {
    opacity: 1;
    transform: none;
}
/* Directional variants */
.reveal-left  { transform: translateX(-32px); }
.reveal-right { transform: translateX(32px); }
.reveal-scale { transform: scale(0.96); }
.reveal-left.in-view,
.reveal-right.in-view,
.reveal-scale.in-view { transform: none; }

/* Optional stagger: small per-child delays inside a revealed group */
.reveal-stagger > *      { transition-delay: 0s; }
.reveal-stagger > *:nth-child(2) { transition-delay: .08s; }
.reveal-stagger > *:nth-child(3) { transition-delay: .16s; }
.reveal-stagger > *:nth-child(4) { transition-delay: .24s; }

/* --- Subtle hover lift on cards & CTAs (premium clinic feel) --- */
.btn,
a.button,
.feature-card,
.lift-on-hover {
    transition: transform 0.3s cubic-bezier(.22,.61,.36,1),
                box-shadow 0.3s cubic-bezier(.22,.61,.36,1);
}
.btn:hover,
a.button:hover,
.feature-card:hover,
.lift-on-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(15, 31, 61, 0.12);
}

/* --- Reduced motion: hard off-switch for the whole motion layer --- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }
    .reveal,
    .reveal-left,
    .reveal-right,
    .reveal-scale {
        opacity: 1 !important;
        transform: none !important;
    }
}