/* motion.css - LenoreTech motion layer v1 (2026-09-23)
   Extends the existing [data-anim] reveal in style.css with premium easing, new variants,
   automatic stagger, word/line headline reveal, parallax and a logo marquee.
   Rules: content is visible without JS, nothing here hides text from crawlers, and every
   effect switches off under prefers-reduced-motion. Class prefix m- to avoid the widget
   class collisions (.lt-cta etc) we hit earlier. */

:root {
  --m-ease: cubic-bezier(.16, 1, .3, 1);
  --m-ease-out: cubic-bezier(.22, .61, .36, 1);
  --m-dur: .85s;
}

/* ---------- refined reveal ---------- */
[data-anim] {
  transition: opacity var(--m-dur) var(--m-ease), transform var(--m-dur) var(--m-ease), filter var(--m-dur) var(--m-ease);
  will-change: opacity, transform;
}
[data-anim].in { will-change: auto; }
[data-anim="up"] { transform: translateY(34px); }
[data-anim="up"].in { transform: none; }
[data-anim="scale"] { transform: scale(.94); }
[data-anim="scale"].in { transform: none; }
[data-anim="blur"] { filter: blur(12px); transform: translateY(18px); }
[data-anim="blur"].in { filter: none; transform: none; }
[data-anim="clip"] { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); }
[data-anim="clip"].in { clip-path: inset(0 0 0 0); }

/* ---------- headline word / line reveal ---------- */
.m-split .m-line {
  display: block;
  overflow: hidden;
  padding-bottom: .08em;
  margin-bottom: -.08em;
}
.m-split .m-w {
  display: inline-block;
  transform: translateY(105%);
  opacity: 0;
  transition: transform .95s var(--m-ease), opacity .7s var(--m-ease);
}
.m-split.in .m-w { transform: none; opacity: 1; }

/* ---------- hover micro-interactions ---------- */
.m-lift { transition: transform .35s var(--m-ease-out), box-shadow .35s var(--m-ease-out); }
.m-lift:hover { transform: translateY(-5px); box-shadow: 0 18px 40px -18px rgba(16, 24, 40, .28); }
.m-glow { position: relative; overflow: hidden; }
.m-glow::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(239, 62, 54, .10), transparent 65%);
  transition: opacity .4s var(--m-ease-out);
}
.m-glow:hover::after { opacity: 1; }

/* ---------- logo / badge marquee ---------- */
.m-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.m-marquee-track { display: flex; width: max-content; animation: m-scroll var(--m-speed, 38s) linear infinite; }
.m-marquee:hover .m-marquee-track { animation-play-state: paused; }
@keyframes m-scroll { to { transform: translateX(-50%); } }

/* ---------- parallax ---------- */
[data-parallax] { will-change: transform; }

/* ---------- accessibility and safety net ---------- */
@media (prefers-reduced-motion: reduce) {
  [data-anim], [data-anim].in { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; transition: none !important; }
  .m-split .m-w { transform: none !important; opacity: 1 !important; transition: none !important; }
  .m-marquee-track { animation: none !important; }
  .m-lift:hover { transform: none; }
  [data-parallax] { transform: none !important; }
}
.m-no-js [data-anim] { opacity: 1; transform: none; filter: none; clip-path: none; }

/* ---------- Lenis smooth scroll (required by the library) ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }