/* ───────── Shared motion styles (used with public/js/motion.js) ─────────
   Elements are only hidden before their entrance when the motion engine is active (.motion on <html>). */

@property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

:root {
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
}

.motion [data-reveal] {
  transition:
    opacity .8s var(--ease-out),
    transform 1.1s var(--ease-out),
    filter .9s var(--ease-out),
    clip-path 1.1s var(--ease-out);
  transition-delay: calc(var(--d, 0) * 75ms + var(--delay, 0ms));
}
.motion [data-reveal="up"]:not(.in) { opacity: 0; transform: translate3d(0, 38px, 0); }
.motion [data-reveal="deal"]:not(.in) { opacity: 0; transform: perspective(900px) translate3d(0, 46px, -70px) rotateX(-52deg); }
.motion [data-reveal="pop"] { transition-timing-function: var(--ease-out), var(--ease-spring), var(--ease-out), var(--ease-out); }
.motion [data-reveal="pop"]:not(.in) { opacity: 0; transform: scale(.55) translate3d(0, 24px, 0); }
.motion [data-reveal="blur"]:not(.in) { opacity: 0; filter: blur(14px); transform: scale(1.06); }
.motion [data-reveal="rise"]:not(.in) { opacity: 0; clip-path: inset(100% 0 0 0); transform: translate3d(0, 30px, 0); }
.motion [data-reveal="side"]:not(.in) { opacity: 0; transform: perspective(900px) translate3d(-60px, 0, -40px) rotateY(-28deg); }
.motion [data-reveal="words"] .w {
  display: inline-block;
  transition: opacity .7s var(--ease-out), transform 1s var(--ease-out), filter .7s var(--ease-out);
  transition-delay: calc(var(--wi, 0) * 28ms + var(--delay, 0ms));
  transform-origin: 50% 100%;
}
.motion [data-reveal="words"]:not(.in) .w { opacity: 0; filter: blur(6px); transform: translate3d(0, .75em, 0) rotateX(-55deg); }

/* Page-to-page transitions (where supported) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .32s var(--ease-in-out, ease) both; }
::view-transition-new(root) { animation: vt-in .5s var(--ease-out, ease) both; }
@keyframes vt-out { to { opacity: 0; transform: scale(.985); filter: blur(4px); } }
@keyframes vt-in { from { opacity: 0; transform: scale(1.015); filter: blur(6px); } }
::view-transition-group(tab-ink) { animation-duration: .45s; animation-timing-function: var(--ease-out); }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }


/* ── Sky (shared background) ── */
.app-sky { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: radial-gradient(130% 70% at 50% -10%, #1A1650 0%, #0B0A28 45%, #07061A 75%); }
.app-sky .aur { position: absolute; width: 90vmax; height: 90vmax; border-radius: 50%; will-change: transform; }
.app-sky .aur-1 { top: -55vmax; right: -35vmax; background: radial-gradient(circle, rgba(47, 43, 234, .5), transparent 60%); animation: app-drift-a 21s var(--ease-in-out) infinite alternate; }
.app-sky .aur-2 { top: -20vmax; left: -55vmax; background: radial-gradient(circle, rgba(106, 47, 224, .4), transparent 60%); animation: app-drift-b 26s var(--ease-in-out) infinite alternate; }
.app-sky .aur-3 { bottom: -65vmax; right: -25vmax; background: radial-gradient(circle, rgba(18, 214, 195, .16), transparent 60%); animation: app-drift-a 31s var(--ease-in-out) infinite alternate-reverse; }
@media (hover: none) { .app-sky .aur { animation: none; will-change: auto; } }
/* ── Floating dust: specks of light drifting up. One tiled layer that the compositor slides (no script, no repaint
   per frame, and only one screen-sized layer to draw). Tint with --dust-rgb; .dust-pixel draws square specks
   (the top-left quarter of a conic gradient centred at 2px 2px: a 2px square in the corner of each tile). ── */
.dust { position: absolute; inset: 0; overflow: hidden; pointer-events: none; --dust-rgb: 220, 218, 255; contain: strict; }
.app-sky .dust { --dust-rgb: 200, 198, 255; }
.dust::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: calc(100% + 560px); will-change: transform;
  background:
    radial-gradient(circle, rgba(var(--dust-rgb), .8) 0 1.4px, transparent 2.4px) 47px 101px / 229px 560px,
    radial-gradient(circle, rgba(var(--dust-rgb), .6) 0 1.6px, transparent 2.6px) 160px 377px / 283px 560px,
    radial-gradient(circle, rgba(var(--dust-rgb), .7) 0 1.3px, transparent 2.2px) 12px 250px / 359px 560px,
    radial-gradient(circle, rgba(var(--dust-rgb), .5) 0 .9px, transparent 1.5px) 23px 81px / 137px 560px,
    radial-gradient(circle, rgba(var(--dust-rgb), .35) 0 .9px, transparent 1.5px) 91px 311px / 211px 560px,
    radial-gradient(circle, rgba(var(--dust-rgb), .45) 0 1.1px, transparent 1.7px) 5px 449px / 173px 560px,
    radial-gradient(circle, rgba(var(--dust-rgb), .3) 0 .9px, transparent 1.5px) 140px 200px / 251px 560px,
    radial-gradient(circle, rgba(var(--dust-rgb), .4) 0 1px, transparent 1.6px) 61px 16px / 307px 560px;
  animation: dust-rise 42s linear infinite, dust-twinkle 5.5s ease-in-out infinite alternate;
}
.dust-pixel::before {
  background:
    conic-gradient(from 270deg at 3px 3px, rgba(var(--dust-rgb), .75) 25%, transparent 0) 47px 101px / 229px 560px,
    conic-gradient(from 270deg at 3px 3px, rgba(var(--dust-rgb), .6) 25%, transparent 0) 160px 377px / 283px 560px,
    conic-gradient(from 270deg at 3px 3px, rgba(var(--dust-rgb), .7) 25%, transparent 0) 12px 250px / 359px 560px,
    conic-gradient(from 270deg at 2px 2px, rgba(var(--dust-rgb), .5) 25%, transparent 0) 23px 81px / 137px 560px,
    conic-gradient(from 270deg at 2px 2px, rgba(var(--dust-rgb), .35) 25%, transparent 0) 91px 311px / 211px 560px,
    conic-gradient(from 270deg at 2px 2px, rgba(var(--dust-rgb), .45) 25%, transparent 0) 5px 449px / 173px 560px,
    conic-gradient(from 270deg at 2px 2px, rgba(var(--dust-rgb), .3) 25%, transparent 0) 140px 200px / 251px 560px;
}
@keyframes dust-rise { to { transform: translate3d(0, -560px, 0); } }
@keyframes dust-twinkle { from { opacity: .7; } to { opacity: 1; } }
html:not(.motion) .dust::before { animation: none; }

/* A part of the page that is off screen (motion.js): its endless animations wait. */
.at-rest, .at-rest *, .at-rest *::before, .at-rest *::after { animation-play-state: paused !important; }
@keyframes app-drift-a { to { transform: translate3d(-16vmax, 12vmax, 0) scale(1.12); } }
@keyframes app-drift-b { to { transform: translate3d(20vmax, 8vmax, 0) scale(.9); } }

/* Ripple from the touch point (any .btn) */
.ripple-dot {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, .45) 0%, rgba(255, 255, 255, 0) 60%);
  transform: scale(0); animation: ripple-out .7s var(--ease-out) forwards;
}
@keyframes ripple-out { to { transform: scale(1); opacity: 0; } }

/* Light burst particles */
.burst-dot {
  position: fixed; z-index: 100; width: 8px; height: 8px; border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 12px currentColor;
}

/* Magnetic elements */
[data-magnetic] { transform: translate3d(var(--mx, 0px), var(--my, 0px), 0); transition: transform .35s var(--ease-out); }

/* Pointer tilt */
[data-tilt] { transform: perspective(900px) rotateX(var(--trx, 0deg)) rotateY(var(--try, 0deg)); transition: transform .5s var(--ease-out); transform-style: preserve-3d; }

@media (prefers-reduced-motion: reduce) {
  [data-magnetic], [data-tilt] { transform: none !important; }
}