/* ==========================================================================
   AfroSynthese — Hover & Interaction Polish
   --------------------------------------------------------------------------
   Subtle, premium hover states layered on top of style.css.
   Nothing here changes layout, colours or spacing of the approved design —
   only transitions that appear on pointer devices.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Global smoothing for interactive elements
   -------------------------------------------------------------------------- */
a,
button,
.card-luxe,
img {
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Hover effects are enabled only where a real pointer exists,
   so touch devices never get "sticky" hover states. */
@media (hover: hover) and (pointer: fine) {
    /* ----------------------------------------------------------------------
       2. Buttons
       ---------------------------------------------------------------------- */
    .btn-gold:hover {
        transform: translateY(-2px);
        box-shadow: 0 14px 34px -12px rgba(194, 150, 46, 0.55);
    }

    .btn-gold:active {
        transform: translateY(0);
    }

    .btn-outline-gold:hover {
        transform: translateY(-2px);
        border-color: rgba(221, 190, 110, 0.75);
        box-shadow: 0 12px 28px -14px rgba(194, 150, 46, 0.4);
    }

    /* ----------------------------------------------------------------------
       3. Cards (services, pricing, articles, portfolio)
       ---------------------------------------------------------------------- */
    .card-luxe:hover {
        transform: translateY(-4px);
        box-shadow: 0 24px 48px -28px rgba(0, 0, 0, 0.85);
    }

    /* ----------------------------------------------------------------------
       4. Images inside cards and galleries
       ---------------------------------------------------------------------- */
    .group:hover img {
        filter: saturate(1.06);
    }

    /* ----------------------------------------------------------------------
       5. Navigation links — animated underline
       ---------------------------------------------------------------------- */
    .link-underline {
        position: relative;
    }

    .link-underline::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -0.35rem;
        height: 1px;
        width: 0;
        background-image: linear-gradient(90deg, #ddbe6e, #c2962e);
        transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .link-underline:hover::after {
        width: 100%;
    }

    /* ----------------------------------------------------------------------
       6. Social icons & small icon buttons
       ---------------------------------------------------------------------- */
    footer a[aria-label]:hover,
    header a[aria-label]:hover {
        transform: translateY(-2px);
    }

    footer a[aria-label],
    header a[aria-label] {
        transition:
            transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
            color 0.3s ease,
            border-color 0.3s ease;
    }
}

/* --------------------------------------------------------------------------
   7. Accessibility — respect reduced motion preferences
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}