/* ── Shared motion ─────────────────────────────────────────────────────────
   The site-wide pieces of the animation language that live in CSS. Entrances
   are GSAP (js/animations/); this file covers what CSS does better: modal
   entrances, hover lift on the few cards and buttons that had none, and the
   reduced-motion switch for everything CSS animates. */

:root {
    /* The video modal's curve (index.html), reused for every dialog */
    --motion-pop: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --motion-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Modals ────────────────────────────────────────────────────────────────
   These dialogs open by switching `display`, which restarts a CSS animation
   every time — so they all get the video modal's entrance (backdrop fades,
   dialog scales up from 0.95) without touching the scripts that open them. */
@keyframes motion-fade-in {
    from { opacity: 0; }
}

@keyframes motion-modal-in {
    from { opacity: 0; transform: scale(0.95); }
}

#qv-backdrop,
.op-cart-modal__backdrop,
#pw-modal > :first-child,
#poster-popup > :first-child,
.dd-video-modal,
#demoHeroVideoModal {
    animation: motion-fade-in 0.3s ease-out both;
}

#qv-modal-content,
.op-cart-modal__dialog,
#pw-modal > :nth-child(2),
#poster-popup > :nth-child(2),
.dd-video-modal-inner,
#demoHeroVideoModal > div {
    animation: motion-modal-in 0.3s var(--motion-pop) both;
}

/* ── Badge shimmer ─────────────────────────────────────────────────────────
   The light sweep the home page's badges carry (.op-badge-shimmer) and
   .page-hero-badge already has, on the About page eyebrows too. */
.eyebrow {
    position: relative;
    overflow: hidden;
}

.eyebrow::before {
    content: '';
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.9), transparent);
    animation: motion-shimmer 3.2s ease-in-out infinite;
}

@keyframes motion-shimmer {
    0% { left: -60%; }
    60%, 100% { left: 130%; }
}

/* ── Hover lift ────────────────────────────────────────────────────────────
   Cards rise 4px and buttons 2px across the site (.poster-card, .loc-card,
   .service-block, .btn-primary, .ws-cta …). These were the ones that only
   changed shadow or colour. Pointer devices only, so a tap never leaves a
   card stuck in its raised state. */
.op-card,
.info-card {
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.btn-submit {
    transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.op-card img {
    transition: transform 0.5s var(--motion-out);
}

@media (hover: hover) {
    .op-card:hover,
    .info-card:hover {
        transform: translateY(-4px);
    }

    .op-card:hover img {
        transform: scale(1.04);
    }

    .btn-submit:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 18px -8px rgba(11, 33, 69, 0.55);
    }
}

/* ── Reduced motion ────────────────────────────────────────────────────────
   GSAP stands down entirely (js/env.js); this does the same for every CSS
   animation and transition: loops stop, entrances land instantly, and
   nothing is ever left mid-fade or hidden. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-delay: 0s !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0s !important;
        scroll-behavior: auto !important;
    }
}