/*
Motion System (token-driven)

Includes:
- Hover/tap/modal/dropdown transitions (ultra-safe)
- Scroll reveals with stagger (IntersectionObserver)
- Very limited hero-only parallax for decorative elements

Rules:
- Animate only: transform / opacity / filter.
- Reduced motion: disable reveals/parallax/ambient motion.
- No CLS: never animate layout properties.

This file is intended to be loaded after `frontend/css/base.css` so it can
override modal visibility behavior (base uses display:none).
*/

@media (prefers-reduced-motion: no-preference) {
    /* -----------------------------
     * Scroll Reveal (SEO-safe)
     * -----------------------------
     * Default: visible.
     * JS marks in-view as .is-visible then sets html.motion-ready.
     * Only after that, elements with [data-reveal] get initial hidden state.
     */
    html.motion-ready :where([data-reveal]) {
        opacity: 0;
        transform: translateY(var(--motion-distance-2));
        filter: none;
        will-change: transform, opacity;
        transition:
            opacity var(--motion-duration-3) var(--motion-ease-decelerate),
            transform var(--motion-duration-4) var(--motion-ease-decelerate),
            filter var(--motion-duration-4) var(--motion-ease-decelerate);
        transition-delay: min(
            calc(var(--stagger-index, 0) * var(--motion-stagger-step)),
            var(--motion-stagger-max)
        );
    }
    html.motion-ready :where([data-reveal]).is-visible {
        opacity: 1;
        transform: none;
        filter: none;
    }
    html.motion-ready :where([data-reveal="fade"]) {
        transform: none;
    }
    html.motion-ready :where([data-reveal="up"]) {
        transform: translateY(var(--motion-distance-2));
    }
    html.motion-ready :where([data-reveal="scale"]) {
        transform: scale(var(--motion-scale-1));
    }

    /* Images: optional fade-in on load (no CLS; dimensions must be reserved in layout). */
    html.motion-ready img[data-img-fade] {
        opacity: 0;
        transition: opacity var(--motion-duration-3) var(--motion-ease-decelerate);
        will-change: opacity;
    }
    html.motion-ready img[data-img-fade].is-loaded {
        opacity: 1;
    }

    /*
     * Buttons / tap press
     * Keep existing hover styles; only normalize motion to allowed properties.
     */
    :where(
        .btn,
        button,
        a.btn,
        input[type="submit"],
        input[type="button"],
        .cta,
        .drop-btn,
        .btn-icon
    ) {
        transition-property: transform, opacity, filter;
        transition-duration: var(--motion-duration-2);
        transition-timing-function: var(--motion-ease-standard);
    }

    @media (hover: none), (pointer: coarse) {
        :where(.btn, button, a.btn, input[type="submit"], input[type="button"], .cta):active {
            transform: scale(var(--motion-scale-press));
        }
    }

    /*
     * Cards
     * Do not introduce new hover effects. Only animate existing transform/opacity/filter changes.
     */
    :where(.card, .listing-card, .project-card, .blog-card) {
        transition-property: transform, opacity, filter;
        transition-duration: var(--motion-duration-3);
        transition-timing-function: var(--motion-ease-standard);
    }

    /*
     * Dropdown/menu open
     * Base CSS already uses opacity/transform/visibility. Retokenize timings only.
     */
    .dropdown-menu {
        transition:
            opacity var(--motion-duration-2) var(--motion-ease-standard),
            transform var(--motion-duration-2) var(--motion-ease-standard),
            visibility 0s linear var(--motion-duration-2);
    }
    .dropdown.open .dropdown-menu {
        transition:
            opacity var(--motion-duration-2) var(--motion-ease-standard),
            transform var(--motion-duration-2) var(--motion-ease-standard),
            visibility 0s;
    }
    @media (hover: hover) {
        .navbar .dropdown:hover .dropdown-menu {
            transition:
                opacity var(--motion-duration-2) var(--motion-ease-standard),
                transform var(--motion-duration-2) var(--motion-ease-standard),
                visibility 0s;
        }
    }

    /*
     * Inquiry modal (open/close)
     * Convert base display:none to opacity/visibility gating to allow animation without CLS.
     */
    .inquiry-modal {
        display: flex; /* overrides base display:none */
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity var(--motion-duration-3) var(--motion-ease-standard);
    }
    .inquiry-modal.active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
    .inquiry-panel {
        transform: scale(var(--motion-scale-press));
        transition: transform var(--motion-duration-3) var(--motion-ease-emphasized);
    }
    .inquiry-modal.active .inquiry-panel {
        transform: scale(1);
    }

    /* -----------------------------
     * Parallax (decorative only)
     * ----------------------------- */
    :where([data-parallax]) {
        transform: translate3d(0, var(--parallax-ty, 0px), 0);
        will-change: transform;
    }

    /* Homepage-only optional accent (acts as Lottie-safe fallback). */
    .motion-hero-accent {
        position: absolute;
        right: clamp(12px, 3vw, 32px);
        bottom: clamp(12px, 4vw, 40px);
        width: clamp(120px, 14vw, 180px);
        height: clamp(120px, 14vw, 180px);
        pointer-events: none;
        z-index: 1;
        opacity: 0.9;
        filter: none;
    }
    .motion-hero-accent__inner {
        width: 100%;
        height: 100%;
        transform-origin: 50% 60%;
        animation: motion-hero-float 6s var(--motion-ease-decelerate) infinite alternate;
    }
    @keyframes motion-hero-float {
        from { transform: translate3d(0, 0, 0) scale(1); }
        to { transform: translate3d(0, -8px, 0) scale(1.01); }
    }
}

@media (prefers-reduced-motion: reduce) {
    :where(
        .btn,
        button,
        a.btn,
        input[type="submit"],
        input[type="button"],
        .cta,
        .drop-btn,
        .btn-icon,
        .card,
        .listing-card,
        .project-card,
        .blog-card,
        .dropdown-menu,
        [data-reveal],
        [data-parallax],
        .inquiry-modal,
        .inquiry-panel
    ) {
        transition: none !important;
        animation: none !important;
    }

    :where(.btn, button, a.btn, input[type="submit"], input[type="button"], .cta):active {
        transform: none;
    }
    .inquiry-panel {
        transform: none;
    }

    img[data-img-fade] {
        opacity: 1 !important;
    }
}