/* =============================================================
   luxury-motion  —  site-wide motion design layer (additive)
   -------------------------------------------------------------
   Extends the existing motion system (app bundle: data-reveal,
   data-reveal-image, data-stagger, page transitions, intro loader)
   with an opt-in layer for every section that the legacy
   selectors do not cover. Transform/opacity only; fully disabled
   under prefers-reduced-motion; content stays visible without JS.
   Loaded after app.css on every page via layouts/site.blade.php.
   ============================================================= */

:root {
    --lm-ease: cubic-bezier(.22, 1, .36, 1);
    --lm-reveal: 950ms;
    --lm-section: 1050ms;
    --lm-shift: 30px;
}

/* ------------------------------------------------------------
   Reveal — opt-in via [data-lm]; variants:
   up (default) · fade · left · right · scale
   Stagger via --lm-delay set by the engine or inline.
   ------------------------------------------------------------ */
.js [data-lm] {
    opacity: 0;
    transform: translate3d(0, var(--lm-shift), 0);
    transition: opacity var(--lm-reveal) ease, transform var(--lm-section) var(--lm-ease);
    transition-delay: var(--lm-delay, 0ms);
}
.js [data-lm="fade"] { transform: none; }
.js [data-lm="left"] { transform: translate3d(calc(-1 * var(--lm-shift)), 0, 0); }
.js [data-lm="right"] { transform: translate3d(var(--lm-shift), 0, 0); }
.js [data-lm="scale"] { transform: scale(1.04); }
.js [data-lm].lm-in { opacity: 1; transform: none; }

/* ------------------------------------------------------------
   Media reveal — soft cinematic settle for imagery inside
   [data-lm-media] containers (figure/figure-like wrappers).
   ------------------------------------------------------------ */
.js [data-lm-media] img {
    opacity: 0;
    transform: scale(1.075);
    transition: opacity 1100ms ease, transform 1350ms var(--lm-ease);
    transition-delay: var(--lm-delay, 0ms);
}
.js [data-lm-media].lm-in img { opacity: 1; transform: scale(1); }

/* ------------------------------------------------------------
   Parallax — gentle drift for hero and feature media. The engine
   writes --lm-py; the scale bleed avoids exposing container edges.
   ------------------------------------------------------------ */
.js [data-lm-parallax] img {
    transform: translate3d(0, var(--lm-py, 0px), 0) scale(1.07);
    transition: none;
    will-change: transform;
}

/* ------------------------------------------------------------
   Hover refinement — quiet directional responses.
   ------------------------------------------------------------ */
@media (hover: hover) and (pointer: fine) {
    .home-editorial__card-cta, .moments-banner__button, .rimal-closing-cta__button,
    .guest-reviews__controls > button, .rimal-dining__controls > button { will-change: transform; }
    .home-editorial__card:hover .home-editorial__card-cta span[aria-hidden],
    .home-editorial__card:focus-visible .home-editorial__card-cta span[aria-hidden] { transform: translate(2px, -2px); }
    .home-editorial__card-cta span[aria-hidden] { display: inline-block; transition: transform 420ms var(--lm-ease); }
}

/* ------------------------------------------------------------
   Reduced motion — everything appears instantly, parallax off.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .js [data-lm],
    .js [data-lm-media] img { opacity: 1 !important; transform: none !important; transition: none !important; }
    .js [data-lm-parallax] img { transform: none !important; will-change: auto; }
}

/* ------------------------------------------------------------
   Brand-weave hosts (motif watermark on inner pages) — the weave
   sits behind content; the pattern drifts via --lm-pat-y.
   ------------------------------------------------------------ */
.lm-weave-host { position: relative; overflow: hidden; }
.brand-weave--whisper .loader-motif { background: rgba(140, 52, 30, .055); }
.js .brand-weave .brand-weave__pattern {
    transform: translate(-50%, calc(-50% + var(--lm-pat-y, 0px)));
    transition: none;
    will-change: transform;
}
@media (max-width: 899px) {
    .brand-weave--whisper .loader-motif { background: rgba(140, 52, 30, .045); }
}
@media (prefers-reduced-motion: reduce) {
    .js .brand-weave .brand-weave__pattern { transform: translate(-50%, -50%); will-change: auto; }
}

/* ------------------------------------------------------------
   Generic image motion — every remaining content image settles
   softly as it enters the viewport.
   ------------------------------------------------------------ */
.js img[data-lm-img] {
    opacity: 0;
    transform: scale(1.045);
    transition: opacity 1000ms ease, transform 1250ms var(--lm-ease);
}
.js img[data-lm-img].lm-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .js img[data-lm-img] { opacity: 1 !important; transform: none !important; transition: none !important; }
}