/* =============================================================
   TL TRACKER — Motion Layer  v2  ("Lux Motion")
   Premium motion, engineered for SOFTWARE RENDERING.
   Only transform + opacity are ever animated continuously.
   No animated filter / box-shadow / conic-gradient, no large
   blur layers, no mix-blend. Pairs with motion.js. Fully
   reduced-motion aware.
============================================================= */

/* Cross-page view transitions (Chromium) — graceful no-op elsewhere */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}

/* Gentle page enter (opacity only) */
@media (prefers-reduced-motion: no-preference) {
  body { animation: lux-page-in 0.45s var(--ease-out) both; }
}
@keyframes lux-page-in { from { opacity: 0; } to { opacity: 1; } }

/* ── Scroll reveal (data-reveal + variants) — transform/opacity only ── */
[data-reveal] {
  opacity: 0; will-change: opacity, transform;
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
[data-reveal="up"]    { transform: translateY(28px); }
[data-reveal="down"]  { transform: translateY(-28px); }
[data-reveal="left"]  { transform: translateX(32px); }
[data-reveal="right"] { transform: translateX(-32px); }
[data-reveal="zoom"]  { transform: scale(0.94); }
[data-reveal="blur"]  { transform: translateY(22px); }   /* no filter blur (repaint-heavy) */
[data-reveal].in      { opacity: 1; transform: none; }

/* ── Shine / sheen text (small element only — hero titles) ── */
.shine-text {
  background: linear-gradient(110deg, var(--text) 35%, #ffffff 50%, var(--text) 65%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: lux-shine 7s linear infinite;
}
@keyframes lux-shine { to { background-position: -220% 0; } }

/* ── Gradient text (static — premium without per-frame repaint) ── */
.text-gradient-flow {
  background: linear-gradient(90deg, var(--blue-bright), var(--purple));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.text-gradient-flow.gold { background-image: linear-gradient(90deg, #ffd98a, var(--gold)); }

/* ── Static premium gradient border (no animation) ── */
.border-glow { position: relative; isolation: isolate; }
.border-glow::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; z-index: -1;
  background: linear-gradient(135deg, var(--blue-bright), transparent 45%, var(--purple) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.border-glow.gold::before { background: linear-gradient(135deg, var(--gold), transparent 45%, #ffd98a 100%); }

/* ── Cursor spotlight (opt-in; only on a few large surfaces) ── */
.lux-spotlight {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
  opacity: 0; transition: opacity var(--t-med) var(--ease);
  background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), rgba(138,162,255,0.10), transparent 60%);
}
.lux-tilt:hover .lux-spotlight, .card-spotlight:hover .lux-spotlight { opacity: 1; }
.lux-tilt > *:not(.lux-spotlight) { position: relative; z-index: 1; }

/* ── Tilt (transform only) ── */
.lux-tilt { transition: transform var(--t-med) var(--ease-out); }
.lux-tilt.lux-tilting { transition: transform 0.06s linear; }

/* ── Marquee (opt-in, transform only) ── */
.marquee { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; gap: 28px; width: max-content; animation: lux-marquee 30s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes lux-marquee { to { transform: translateX(-50%); } }

/* ── Click spark (transform + opacity) ── */
.lux-spark { position: fixed; top: 0; left: 0; width: 5px; height: 5px; border-radius: 50%;
  background: var(--blue-bright); pointer-events: none; z-index: 9999;
  transform: translate(-50%, -50%); animation: lux-spark 0.5s var(--ease-out) forwards; }
@keyframes lux-spark { to { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.2); } }

/* ── Scroll progress bar (transform scaleX — never animate width) ── */
.lux-progress { position: fixed; top: 0; left: 0; height: 2px; width: 100%; transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--blue), var(--purple)); z-index: 200; will-change: transform; }

/* ── Aurora ambient (opt-in body[data-aurora]) — static soft radial gradients, NO filter/animation ── */
.lux-aurora { position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(42vw 42vw at 14% 2%,  rgba(108,140,255,0.10), transparent 60%),
    radial-gradient(40vw 40vw at 88% 14%, rgba(229,115,154,0.09), transparent 62%),
    radial-gradient(34vw 34vw at 72% 102%, rgba(232,163,61,0.05), transparent 66%); }

/* ── Ambient motes (subtle drifting particles; transform + opacity ONLY, software-render safe) ── */
.lux-particles { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.lux-particles i {
  position: absolute; display: block; border-radius: 50%;
  background: rgba(138,162,255,0.55); box-shadow: 0 0 4px rgba(138,162,255,0.5);
  opacity: 0; will-change: transform, opacity;
  animation-name: lux-mote; animation-timing-function: ease-in-out; animation-iteration-count: infinite;
}
@keyframes lux-mote {
  0%   { transform: translate(0, 0); opacity: 0; }
  15%  { opacity: var(--o, 0.35); }
  50%  { transform: translate(var(--dx, 18px), var(--dy, -34px)); opacity: var(--o, 0.35); }
  85%  { opacity: var(--o, 0.35); }
  100% { transform: translate(0, 0); opacity: 0; }
}
/* Large, soft drifting orbs for depth (radial-gradient = soft, no filter) */
.lux-particles b {
  position: absolute; display: block; border-radius: 50%;
  opacity: 0; will-change: transform, opacity;
  animation-name: lux-orb; animation-timing-function: ease-in-out; animation-iteration-count: infinite;
}
@keyframes lux-orb {
  0%   { transform: translate(0, 0) scale(1); opacity: 0; }
  20%  { opacity: var(--o, 0.7); }
  50%  { transform: translate(var(--dx, 40px), var(--dy, -30px)) scale(1.15); opacity: var(--o, 0.7); }
  80%  { opacity: var(--o, 0.7); }
  100% { transform: translate(0, 0) scale(1); opacity: 0; }
}
body.lux-paused .lux-particles i, body.lux-paused .lux-particles b { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .lux-particles { display: none !important; } }

/* Cinematic interactive particle field (canvas, cursor-reactive + depth parallax) */
.lux-field { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; display: block; }
/* lux-field renders under reduced-motion: autoplay drift/twinkle are suppressed in JS; only cursor push moves particles */

/* Flowing gradient text (opt-in; pairs with .tg-blue/.tg-gold) — text-only, cheap */
.tg-flow { background-size: 220% auto; animation: lux-tgflow 6s linear infinite; }
@keyframes lux-tgflow { to { background-position: 220% center; } }
body.lux-paused .tg-flow { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .tg-flow { animation: none; } }

/* ── Click light (soft expanding glow on click; transform + opacity only) ── */
.lux-clicklight {
  position: fixed; width: 260px; height: 260px; border-radius: 50%;
  pointer-events: none; z-index: 9998; will-change: transform, opacity;
  transform: translate(-50%, -50%) scale(0.12); opacity: 0.9;
  background: radial-gradient(circle, rgba(138,162,255,0.45), rgba(229,115,154,0.18) 38%, transparent 70%);
  animation: lux-clicklight 0.62s var(--ease-out) forwards;
}
@keyframes lux-clicklight {
  to { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .lux-clicklight { display: none !important; } }

/* ── Magnetic helper ── */
[data-magnetic] { transition: transform 0.25s var(--ease-spring); }

/* ── Animated underline links (opt-in) ── */
.link-underline { position: relative; }
.link-underline::after { content: ''; position: absolute; left: 0; bottom: -2px; height: 1px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform var(--t-med) var(--ease-out); }
.link-underline:hover::after { transform: scaleX(1); transform-origin: left; }

/* ── Pause loopable motion when tab hidden ── */
body.lux-paused .marquee__track, body.lux-paused .shine-text,
body.lux-paused .tl-brand-dot::after, body.lux-paused .live-dot::after { animation-play-state: paused; }

/* ============================================================
   EXTRA MOTION LAYER ("overtuned") — transform / opacity /
   background-position ONLY. Software-render safe. Reduced-motion
   aware. Opt-in via classes so nothing animates unexpectedly.
============================================================ */

/* Flowing gradient sweep on big headings (.heading-flow) */
.heading-flow {
  background: linear-gradient(100deg, var(--text) 30%, var(--gold) 50%, var(--text) 70%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: lux-headingflow 9s linear infinite;
}
.heading-flow.gold { background-image: linear-gradient(100deg, var(--text) 30%, var(--gold) 50%, var(--text) 70%); }
@keyframes lux-headingflow { to { background-position: -220% 0; } }
body.lux-paused .heading-flow { animation-play-state: paused; }

/* Gentle continuous float (.lux-float) */
.lux-float { animation: lux-float 7s var(--ease) infinite; will-change: transform; }
.lux-float.slow { animation-duration: 10s; }
@keyframes lux-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
body.lux-paused .lux-float { animation-play-state: paused; }

/* Soft breathing pulse (.lux-pulse) */
.lux-pulse { animation: lux-pulse 3.4s var(--ease) infinite; will-change: transform; }
@keyframes lux-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
body.lux-paused .lux-pulse { animation-play-state: paused; }

/* Non-tilt cards: lift + subtle scale, with an icon pop on hover */
.feat-card, .how-card, .find-card {
  transition: transform var(--t-med) var(--ease-out), border-color var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.feat-card:hover, .how-card:hover, .find-card:hover { transform: translateY(-5px) scale(1.02); }
.feat-ic, .how-n, .find-icon { transition: transform var(--t-med) var(--ease-spring); }
.feat-card:hover .feat-ic, .how-card:hover .how-n, .find-card:hover .find-icon { transform: scale(1.14) rotate(-4deg); }

/* ── Reduced motion: disable everything non-essential ── */
@media (prefers-reduced-motion: reduce) {
  body { animation: none; }
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none; }
  .shine-text { animation: none; -webkit-text-fill-color: var(--text); color: var(--text); background: none; }
  .marquee__track { animation: none !important; }
  .lux-tilt { transform: none !important; }
  .lux-spark, .lux-progress { display: none !important; }
  .heading-flow { animation: none; -webkit-text-fill-color: var(--text); color: var(--text); background: none; }
  .lux-float, .lux-pulse { animation: none; }
  .feat-card:hover, .how-card:hover, .find-card:hover,
  .feat-card:hover .feat-ic, .how-card:hover .how-n, .find-card:hover .find-icon { transform: none; }
}