/* LuxeFlow motion layer — shared by the landing + auth pages.
   Animations are driven by Motion (motion.dev, the Framer Motion engine) in motion-fx.js;
   this file holds the static pieces: background, glow borders, shine, pre-hide, view transitions. */

/* ─── Cross-page transitions (Chrome/Edge 126+, Safari 18.2+; no-op elsewhere) ── */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: m-vt-out .38s cubic-bezier(.22,1,.36,1) both; }
::view-transition-new(root) { animation: m-vt-in  .5s  cubic-bezier(.22,1,.36,1) both; }
@keyframes m-vt-out { to   { opacity: 0; transform: scale(.985); filter: blur(6px); } }
@keyframes m-vt-in  { from { opacity: 0; transform: scale(1.015); filter: blur(6px); } }
/* The logo morphs between landing ⇄ login ⇄ register ⇄ reset */
.logo > img, .nav-logo > img { view-transition-name: m-brand; }
::view-transition-group(m-brand) { animation-duration: .55s; animation-timing-function: cubic-bezier(.22,1,.36,1); }

/* ─── Pre-hide: only while motion-fx.js is about to animate things in ──────── */
html.m-pre .auth-wrap > *,
html.m-pre .hero > *,
html.m-pre body > nav { opacity: 0; }

/* ─── Ambient background ────────────────────────────────────────────────────── */
.m-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.m-blobs { position: absolute; inset: 0; }
.m-blob {
  position: absolute; border-radius: 50%;
  width: 46vmax; height: 46vmax;
  filter: blur(70px); will-change: transform;
}
.m-blob.b1 { top: -14vmax; left: -12vmax;  background: radial-gradient(circle, rgba(240,192,64,.55), transparent 65%); }
.m-blob.b2 { bottom: -18vmax; right: -14vmax; background: radial-gradient(circle, rgba(201,164,50,.5), transparent 65%); }
.m-blob.b3 { top: 28%; left: 52%; width: 34vmax; height: 34vmax; background: radial-gradient(circle, rgba(124,58,237,.28), transparent 65%); }
[data-theme="light"] .m-blob.b1 { background: radial-gradient(circle, rgba(240,192,64,.34), transparent 65%); }
[data-theme="light"] .m-blob.b2 { background: radial-gradient(circle, rgba(201,164,50,.26), transparent 65%); }
[data-theme="light"] .m-blob.b3 { background: radial-gradient(circle, rgba(124,58,237,.12), transparent 65%); }
.m-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.m-grain {
  position: absolute; inset: 0; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-theme="dark"] .m-grain { opacity: .08; }

/* ─── Scroll progress (landing) ─────────────────────────────────────────────── */
.m-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 200;
  transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, #c9a432, #f0c040, #7c3aed);
}
html.m-on body > nav { transition: background .3s, box-shadow .3s, height .3s; }
html.m-on body > nav.m-scrolled {
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  box-shadow: 0 8px 30px rgba(0,0,0,.08);
  backdrop-filter: blur(14px) saturate(1.4);
}

/* ─── Rotating gold border (auth card) ──────────────────────────────────────── */
@property --m-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.m-glow { position: relative; isolation: isolate; }
.m-glow::after {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px;
  background: conic-gradient(from var(--m-angle), transparent 0 62%, rgba(240,192,64,.9) 76%, rgba(124,58,237,.6) 84%, transparent 94%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: m-spin 7s linear infinite; pointer-events: none;
}
@keyframes m-spin { to { --m-angle: 360deg; } }

/* ─── Cursor spotlight (cards) ──────────────────────────────────────────────── */
.m-spot { position: relative; isolation: isolate; }
.m-spot::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(240,192,64,.16), transparent 45%);
  opacity: var(--m-spot-o, 0); transition: opacity .35s;
}

/* ─── Button shine + magnetic ───────────────────────────────────────────────── */
.m-shine { position: relative; overflow: hidden; isolation: isolate; }
.m-shine::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.42), transparent);
  transform: skewX(-20deg); animation: m-shine 4.2s ease-in-out infinite;
}
@keyframes m-shine { 0%, 62% { left: -60%; } 100% { left: 130%; } }
/* Motion drives transform on these — keep CSS transitions off transform so they don't fight */
.m-magnetic { transition-property: background, background-color, border-color, box-shadow, color !important; }
.m-magnetic:hover, .m-magnetic:active { transform: none; }

/* ─── Form polish ───────────────────────────────────────────────────────────── */
html.m-on .form-group > label { transition: color .2s; }
html.m-on .form-group:focus-within > label { color: #c9a432; }
.m-word { display: inline-block; will-change: transform; }
.hero h1 > .m-word { color: inherit; }   /* landing styles every h1 span gold — only the typed line should be */

/* ─── Landing CTA band: slow-moving gradient ────────────────────────────────── */
html.m-on .cta-band {
  background: linear-gradient(120deg, #b8920e, #7c3aed, #c9a432, #7c3aed, #b8920e);
  background-size: 300% 300%; animation: m-gradient 14s ease infinite;
}
@keyframes m-gradient { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .m-glow::after, .m-shine::after, html.m-on .cta-band { animation: none; }
}