@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}

@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; } }

[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); }   
[data-reveal].in      { opacity: 1; transform: none; }

.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%); }

.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; }

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

.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); } }

/* Neutral, not a gradient (design direction R3): reading progress is FUNCTION on long pages, so
   the bar stays everywhere it earns itself -- but a blue-to-purple rainbow at viewport top was
   atmosphere on every price table. One quiet color; still hidden under reduced motion below. */
.lux-progress { position: fixed; top: 0; left: 0; height: 2px; width: 100%; transform: scaleX(0); transform-origin: 0 50%;
  background: var(--border-2); z-index: 200; will-change: transform; }

.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%); }

/* The ambient canvas, back by owner decision (2026-08-27): the 2026-08 adversarial pass deleted
   it estate-wide, which reversed the explicit 2026-08-22 "background everywhere" call — reported
   back as a regression, not an improvement. Restored as it shipped then: motion.js draws it only
   while backgroundOn() holds (Settings > Background/Performance park the rAF loop, the
   data-bg/data-perf/data-motion rules in styles.css remove the pixels), and the DOM-mote layer
   that was already dead code then stays deleted. */
.lux-field { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; display: block; }

@keyframes lux-tgflow { to { background-position: 220% center; } }

.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; } }

[data-magnetic] { transition: transform 0.25s var(--ease-spring); }

.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; }

body.lux-paused .live-dot::after { animation-play-state: paused; }

.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; }

.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; }

.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); }

@media (prefers-reduced-motion: reduce) {
  body { animation: none; }
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none; }
  .lux-tilt { transform: none !important; }
  .lux-spark, .lux-progress { display: none !important; }
  .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; }
}