/*
 * Homepage motion layer — subtle scroll and pointer effects on top of the
 * AiTemplate theme, shared by every homepage variant
 * (resources/views/LTR/AiTemplate/partials/landing-motion.blade.php).
 *
 *   - Progressive enhancement: nothing is hidden until landing-motion.js has
 *     put `lm-ready` on <html>, so a blocked script leaves the page as it was.
 *   - Never runs under prefers-reduced-motion (the script bails, and the
 *     rules below repeat the guard).
 *   - Movement uses the independent `translate`/`scale` properties, never
 *     `transform`, so it composes with sal.js and the theme's own transforms
 *     instead of overriding them.
 *   - Colour follows the vertical palette (--brand-rgb from vertical-theme).
 */

/* ── Scroll progress ─────────────────────────────────────────────────── */
.lm-progress {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 99999;
    height: 3px;
    pointer-events: none;
    transform: scaleX(var(--lm-progress, 0));
    transform-origin: left center;
    background: linear-gradient(90deg, var(--brand-1, #F9A03F), var(--brand-2, #F07821) 55%, var(--brand-3, #C2540E));
    box-shadow: 0 0 12px rgba(var(--brand-rgb, 240, 120, 33), 0.55);
}

html[dir="rtl"] .lm-progress {
    transform-origin: right center;
}

/* ── Reveal on scroll ────────────────────────────────────────────────── */
html.lm-ready [data-lm-reveal] {
    opacity: 0;
    translate: 0 26px;
    transition:
        opacity 0.9s cubic-bezier(0.2, 0.7, 0.2, 1),
        translate 0.9s cubic-bezier(0.2, 0.7, 0.2, 1),
        scale 0.9s cubic-bezier(0.2, 0.7, 0.2, 1),
        filter 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
    transition-delay: var(--lm-delay, 0ms);
}

/* Short text sharpens out of a soft blur; blur on a big block is too costly
   to paint, so it is reserved for headings. */
html.lm-ready [data-lm-reveal="focus"] {
    filter: blur(8px);
}

html.lm-ready [data-lm-reveal="scale"] {
    translate: 0 18px;
    scale: 0.97;
}

html.lm-ready [data-lm-reveal].is-in {
    opacity: 1;
    translate: 0 0;
    scale: 1;
    filter: none;
}

/* ── Hero depth: the video settles back as the page scrolls past it ─── */
html.lm-ready [data-lm-hero-stage] {
    transform:
        perspective(1400px)
        rotateX(calc(var(--lm-hero, 0) * 6deg))
        scale(calc(1 - var(--lm-hero, 0) * 0.06));
    transform-origin: 50% 0;
    opacity: calc(1 - var(--lm-hero, 0) * 0.3);
}

/* On a phone the video sits below the fold: shrinking and dimming it as
   the visitor scrolls *to* it would make it look worst exactly when seen. */
@media (max-width: 767px) {
    html.lm-ready [data-lm-hero-stage] {
        transform: none;
        opacity: 1;
    }
}

html.lm-ready [data-lm-hero-copy] {
    translate: 0 calc(var(--lm-hero, 0) * -40px);
    opacity: calc(1 - var(--lm-hero, 0) * 0.6);
}

/* ── Parallax ────────────────────────────────────────────────────────── */
html.lm-ready [data-lm-parallax] {
    translate: 0 var(--lm-shift, 0px);
}

/* ── Card glow + lift ────────────────────────────────────────────────── */
html.lm-ready [data-lm-card] {
    isolation: isolate;
    translate: 0 0;
    transition: translate 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}

html.lm-ready [data-lm-card]:hover {
    translate: 0 -4px;
}

.lm-glow {
    position: absolute;
    inset: 0;
    z-index: -1; /* above the card's own background, under its content */
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(
        340px circle at var(--lm-x, 50%) var(--lm-y, 50%),
        rgba(var(--brand-rgb, 240, 120, 33), 0.16),
        rgba(var(--brand-rgb, 240, 120, 33), 0.05) 45%,
        transparent 70%
    );
    transition: opacity 0.35s ease;
}

[data-lm-card]:hover > .lm-glow {
    opacity: 1;
}

/* ── Magnetic buttons ────────────────────────────────────────────────── */
html.lm-ready [data-lm-magnetic] {
    translate: var(--lm-mx, 0px) var(--lm-my, 0px);
    transition: translate 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ── Section seams: a thin brand line draws in at the top of a section ─ */
.lm-seam {
    display: block;
    width: min(220px, 40%);
    height: 2px;
    margin: 0 auto 28px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, rgba(var(--brand-rgb, 240, 120, 33), 0.85), transparent);
    transform: scaleX(0);
    transition: transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s;
}

.lm-seam.is-in {
    transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
    .lm-progress {
        display: none;
    }

    .lm-seam {
        transform: none;
        transition: none;
    }

    html.lm-ready [data-lm-reveal],
    html.lm-ready [data-lm-parallax],
    html.lm-ready [data-lm-card],
    html.lm-ready [data-lm-hero-stage],
    html.lm-ready [data-lm-hero-copy],
    html.lm-ready [data-lm-magnetic] {
        opacity: 1 !important;
        translate: none !important;
        scale: none !important;
        filter: none !important;
        transform: none !important;
        transition: none !important;
    }
}