/* ============================================================
   WooAI Landing — Premium Motion Layer
   GPU-only (transform/opacity), no layout shift, no transition:all.
   All looping / reveal / entrance motion is gated behind
   prefers-reduced-motion: no-preference. Hover lifts are gated
   behind a real pointer so touch never gets stuck states.
   ============================================================ */

/* ---------- Micro-interactions: buttons ---------- */
.btn,
.mock-launcher {
  transition:
    transform var(--dur-2) var(--ease-out-expo),
    box-shadow var(--dur-2) var(--ease-out-expo),
    background-color var(--dur-2) var(--ease-out-expo),
    border-color var(--dur-2) var(--ease-out-expo);
  will-change: transform;
}
.btn svg,
.hero-ctas a svg {
  transition: transform var(--dur-2) var(--ease-out-expo);
}

@media (hover: hover) and (pointer: fine) {
  .btn:not(.btn-disabled):hover,
  .mock-launcher:hover {
    transform: translateY(-2px);
  }
  .btn-primary:not(.btn-disabled):hover,
  .btn-dark-primary:not(.btn-disabled):hover {
    box-shadow: var(--shadow-lg);
  }
  .btn:not(.btn-disabled):hover svg,
  .hero-ctas a:hover svg {
    transform: translateX(3px);
  }
}
.btn:not(.btn-disabled):active,
.mock-launcher:active {
  transform: translateY(0) scale(.985);
  transition-duration: var(--dur-1);
}

/* ---------- Micro-interactions: cards ---------- */
.diff-card,
.proof-store,
.price-card {
  transition:
    transform var(--dur-3) var(--ease-out-expo),
    box-shadow var(--dur-3) var(--ease-out-expo),
    border-color var(--dur-3) var(--ease-out-expo);
}
@media (hover: hover) and (pointer: fine) {
  .diff-card:hover,
  .proof-store:hover,
  .price-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
  }
  .price-card:hover {
    border-color: var(--gold);
  }
}

/* ---------- Micro-interactions: nav underline ---------- */
/* :not(.page-numbers) — WP the_posts_pagination() also wraps its links in
   <div class="nav-links">; the sweep-underline must not apply to the round
   pagination pills. */
.nav-links a:not(.lang-btn):not(.btn):not(.page-numbers) {
  position: relative;
}
.nav-links a:not(.lang-btn):not(.btn):not(.page-numbers)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--dur-2) var(--ease-out-expo);
}
@media (hover: hover) and (pointer: fine) {
  .nav-links a:not(.lang-btn):not(.btn):not(.page-numbers):hover::after {
    transform: scaleX(1);
    transform-origin: left center;
  }
}
.lang-btn { transition: color var(--dur-2) var(--ease-out-expo); }

/* ---------- Micro-interactions: chips / suggestions ---------- */
.demo-chip,
.ic-suggestion {
  transition:
    transform var(--dur-2) var(--ease-out-expo),
    background-color var(--dur-2) var(--ease-out-expo),
    border-color var(--dur-2) var(--ease-out-expo);
}
@media (hover: hover) and (pointer: fine) {
  .demo-chip:hover,
  .ic-suggestion:hover {
    transform: translateY(-2px);
  }
}

/* ---------- Scroll reveal (refined easing + stagger) ---------- */
/* No-JS failsafe: content is NEVER hidden when JS is unavailable
   (beats style.css `.reveal{opacity:0}`). */
html:not(.js) .reveal,
html:not(.js) .reveal-group > * { opacity: 1 !important; transform: none !important; }

@media (prefers-reduced-motion: no-preference) {
  html.js .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition:
      opacity var(--dur-4) var(--ease-out-expo),
      transform var(--dur-4) var(--ease-out-expo);
    will-change: opacity, transform;
  }
  html.js .reveal.in { opacity: 1; transform: none; }
  /* Group container holds its place; only the children stagger in */
  html.js .reveal-group { opacity: 1; transform: none; transition: none; }
  html.js .reveal-group > * { opacity: 0; transform: translateY(16px); }
  html.js .reveal-group.in > * {
    animation: motion-rise var(--dur-4) var(--ease-out-expo) forwards;
  }
  html.js .reveal-group.in > *:nth-child(1) { animation-delay: 60ms; }
  html.js .reveal-group.in > *:nth-child(2) { animation-delay: 130ms; }
  html.js .reveal-group.in > *:nth-child(3) { animation-delay: 200ms; }
  html.js .reveal-group.in > *:nth-child(4) { animation-delay: 270ms; }
  html.js .reveal-group.in > *:nth-child(5) { animation-delay: 340ms; }
  html.js .reveal-group.in > *:nth-child(6) { animation-delay: 410ms; }
  html.js .reveal-group.in > *:nth-child(7) { animation-delay: 480ms; }
  html.js .reveal-group.in > *:nth-child(8) { animation-delay: 550ms; }
  @keyframes motion-rise {
    to { opacity: 1; transform: none; }
  }

  /* ---------- Hero entrance (first impression) ---------- */
  .hero-copy > *,
  .hero-visual {
    animation: motion-hero-in var(--dur-4) var(--ease-out-expo) both;
  }
  .hero-copy > *:nth-child(1) { animation-delay: 80ms; }
  .hero-copy > *:nth-child(2) { animation-delay: 160ms; }
  .hero-copy > *:nth-child(3) { animation-delay: 240ms; }
  .hero-copy > *:nth-child(4) { animation-delay: 320ms; }
  .hero-copy > *:nth-child(5) { animation-delay: 400ms; }
  .hero-visual { animation-delay: 260ms; }
  @keyframes motion-hero-in {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: none; }
  }

  /* ---------- "Breathing" ambient motion ---------- */
  /* Section aurora glow slowly drifts */
  .sec-gradient::before,
  .sec-gradient-inv::before {
    animation: motion-aurora 16s var(--ease-in-out) infinite alternate;
    will-change: transform, opacity;
  }
  @keyframes motion-aurora {
    0%   { transform: translate3d(0, 0, 0) scale(1);      opacity: .9; }
    100% { transform: translate3d(2%, -2.5%, 0) scale(1.06); opacity: 1; }
  }

  /* Live "Online" status dot — a soft heartbeat */
  .ic-status-dot,
  .hco-status-dot {
    animation: motion-heartbeat 2.6s var(--ease-in-out) infinite;
  }
  @keyframes motion-heartbeat {
    0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,.45); }
    55%      { box-shadow: 0 0 0 6px rgba(16,185,129,0); }
  }

  /* The device mockup gently floats — it feels alive, not static */
  .laptop-wrap {
    animation: motion-float 7s var(--ease-in-out) infinite;
  }
  @keyframes motion-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
  }

  /* Demo widget panel takes a slow, almost-imperceptible breath */
  .ic-panel {
    animation: motion-breathe 8s var(--ease-in-out) infinite;
  }
  @keyframes motion-breathe {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.006); }
  }
}