/* ── Home page interactions (mobile-first) ──────────────────────────
 *
 * Three coordinated bits of polish:
 *   1. Scroll-reveal initial + revealed states (JS toggles class)
 *   2. Card hover lift — pointer-only, gracefully degrades on touch
 *   3. Hero parallax — desktop only, via background-attachment: fixed
 *      (iOS Safari doesn't honor fixed bg properly, so it's also
 *      gated behind hover capability)
 *
 * Every rule respects prefers-reduced-motion: animations collapse to
 * the final state with no transition.
 * ──────────────────────────────────────────────────────────────────── */

/* ── 1. Scroll reveal ──────────────────────────────────────────── */

.bdc-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
    /* Keep the section eligible for tabbing/focus while invisible —
       a screen reader on the page will still announce upcoming
       sections; we're only hiding visually. */
    will-change: opacity, transform;
}

.bdc-reveal.bdc-revealed {
    opacity: 1;
    transform: none;
    will-change: auto;
}

/* Respect reduced-motion: never animate, never delay. */
@media (prefers-reduced-motion: reduce) {
    .bdc-reveal,
    .bdc-reveal.bdc-revealed {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ── 2. Concept card hover polish (pointer devices) ─────────────── */
/* `(hover: hover)` excludes touch devices — they don't have a hover
   state, and the lift would persist after a tap, looking stuck. */

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .bdc-cc-card {
        transition:
            transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
            box-shadow 280ms cubic-bezier(0.22, 1, 0.36, 1),
            border-color 280ms ease;
    }
    .bdc-cc-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 18px 42px -16px rgba(31, 63, 51, 0.22);
        border-color: rgba(31, 63, 51, 0.45);
    }
}

/* On touch devices, brief feedback on tap so the card feels responsive
   even without hover. `:active` fires on every tap; no JS needed. */
.bdc-cc-card {
    transition: transform 160ms ease;
}
.bdc-cc-card:active {
    transform: scale(0.985);
}

/* ── 3. Hero parallax (desktop only) ───────────────────────────── */
/* On mobile we INTENTIONALLY skip parallax — iOS scroll momentum
   makes parallax feel laggy, and `background-attachment: fixed`
   creates "jelly scroll" artifacts on iOS Safari + Android Chrome
   on cheaper devices. Mobile users get a static, snappy hero, which
   is the right call. */

@media (min-width: 1025px) and (hover: hover) and (prefers-reduced-motion: no-preference) {
    /* Target the first .e-con (hero) under the home page's Elementor
       wrapper. Specificity high enough to beat Elementor's per-post
       CSS file. */
    .elementor[data-elementor-id="15"] > .e-con:first-child {
        background-attachment: fixed !important;
    }
}