/* =========================================================================
   Basic-alive-UI-Toon - motion
   Only transform and opacity move (small, listed exceptions).
   Reveals apply only when alive.js has set .au-js on <html>, so content is
   never hidden if JavaScript fails. Reduced motion turns everything off.
   ========================================================================= */

:root {
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-reveal: 700ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Reveal on scroll */
.au-js .au-reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); transition-delay: var(--au-delay, 0ms); }
.au-js .au-reveal.is-in { opacity: 1; transform: none; }
.au-js .au-stagger > * { opacity: 0; transform: translateY(16px); transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); transition-delay: var(--au-delay, 0ms); }
.au-js .au-stagger.is-in > * { opacity: 1; transform: none; }

/* Lift on hover */
.au-lift { transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.au-lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-3); }

/* Float (3D images, decorations) */
.au-float { animation: au-float 6s ease-in-out infinite; animation-delay: var(--au-float-delay, 0s); }
@keyframes au-float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-8px) rotate(-1deg); } }

/* Shine across the main CTA */
.au-shine::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.6), transparent);
  transform: skewX(-20deg); animation: au-shine 3.6s ease-in-out infinite; pointer-events: none;
}
@keyframes au-shine { 0%, 55% { left: -60%; } 100% { left: 130%; } }

/* Pulse, wiggle, bob */
.au-pulse { animation: au-pulse 2.4s ease-in-out infinite; }
@keyframes au-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
.au-wiggle:hover, .au-wiggle.is-in { animation: au-wiggle .8s var(--ease-out) 1; }
@keyframes au-wiggle { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-8deg); } 40% { transform: rotate(6deg); } 60% { transform: rotate(-4deg); } 80% { transform: rotate(2deg); } }
.au-bob { animation: au-bob 2.2s ease-in-out infinite; }
@keyframes au-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* Live dot */
.au-live { position: relative; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--success); }
.au-live::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--success); animation: au-ring 1.8s ease-out infinite; }
@keyframes au-ring { from { transform: scale(1); opacity: .6; } to { transform: scale(2.8); opacity: 0; } }

/* Marquee */
.au-marquee__track { animation: au-marquee 28s linear infinite; }
.au-marquee:hover .au-marquee__track { animation-play-state: paused; }
@keyframes au-marquee { to { transform: translateX(-50%); } }

/* Bar that grows: <div class="au-grow" style="--value:72%"><span></span></div> */
.au-grow { height: 10px; border-radius: 999px; background: var(--surface-alt); overflow: hidden; }
.au-grow > span { display: block; height: 100%; width: var(--value, 50%); background: var(--cta-gradient); border-radius: inherit; transform-origin: left; transform: scaleX(1); transition: transform 1.1s var(--ease-out); }
.au-js .au-grow:not(.is-in) > span { transform: scaleX(0); }

/* Check mark that draws itself: svg.au-check > circle + path */
.au-check { width: 56px; height: 56px; color: var(--success); }
.au-check circle { stroke: currentColor; stroke-width: 3; fill: none; opacity: .25; }
.au-check path { stroke: currentColor; stroke-width: 4; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 0; }
.au-js .au-check:not(.is-in) path { stroke-dashoffset: 40; }
.au-check path { transition: stroke-dashoffset .6s var(--ease-out) .15s; }
.au-check.is-in { animation: au-pop .5s var(--ease-spring); }
@keyframes au-pop { 0% { transform: scale(.6); } 100% { transform: scale(1); } }

/* Skeleton */
.au-skeleton { position: relative; overflow: hidden; background: var(--surface-alt); border-radius: var(--r-sm); min-height: 1em; }
.au-skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); animation: au-sk 1.4s infinite; }
@keyframes au-sk { to { transform: translateX(100%); } }

/* Drifting backdrop (dark hero, sign-in) */
.au-drift { background-size: 160% 160% !important; animation: au-drift 14s ease-in-out infinite alternate; }
@keyframes au-drift { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }

/* Tilt toward the pointer (alive.js sets --rx/--ry) */
.au-tilt { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .3s var(--ease-out); }

/* Toast slide-in */
.au-toast { animation: au-slide .5s var(--ease-out); }
@keyframes au-slide { from { transform: translateX(-24px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Respect reduced motion: instant changes, nothing hidden */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .au-js .au-reveal, .au-js .au-stagger > * { opacity: 1 !important; transform: none !important; }
  .au-js .au-grow > span { transform: none !important; }
  .au-js .au-check path { stroke-dashoffset: 0 !important; }
  .au-tilt { transform: none !important; }
}