/**
 * Mada Motion — page transitions, entrance animation and micro-interactions.
 *
 * Everything below the reduced-motion guard is decorative and safe to drop.
 * Tokens (--mada-teal*, --gin-shadow*) come from mada-tokens.css / Gin.
 */

/* Native cross-document view transitions (progressive: no-op where unsupported). */
@view-transition {
  navigation: auto;
}

@media (prefers-reduced-motion: no-preference) {

  /* ---- Cross-page transition of the root snapshot ---- */
  ::view-transition-old(root) {
    animation: mada-vt-out 160ms ease both;
  }
  ::view-transition-new(root) {
    animation: mada-vt-in 300ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }
  @keyframes mada-vt-out {
    to { opacity: 0; transform: translateY(-6px); }
  }
  @keyframes mada-vt-in {
    from { opacity: 0; transform: translateY(10px); }
  }

  /* ---- First-paint entrance ---- */
  @keyframes mada-rise {
    from { opacity: 0; transform: translateY(8px); }
  }
  @keyframes mada-slide-in {
    from { opacity: 0; transform: translateY(-10px); }
  }

  :where(body:not(.mada-dashboard-shell):not(.mada-auth)) .region-content {
    animation: mada-rise 380ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }

  body.mada-dashboard-shell .mada-main > * {
    animation: mada-rise 420ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
    animation-delay: calc(var(--stagger, 0) * 55ms);
  }

  /* Staggered rows / cards / nav (JS sets --stagger). */
  .views-table tbody tr,
  .mada-kpi,
  .mada-card,
  .mada-rail__link {
    animation: mada-rise 340ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
    animation-delay: calc(var(--stagger, 0) * 30ms);
  }

  /* ---- Micro-interactions ---- */
  .button,
  .action-link,
  .gin-layer,
  .mada-card,
  .mada-kpi,
  .views-table tbody tr,
  .tabs__link {
    transition:
      transform 0.14s ease,
      box-shadow 0.18s ease,
      background-color 0.16s ease,
      border-color 0.16s ease;
  }

  .button:hover { transform: translateY(-1px); }
  .button:active { transform: translateY(1px) scale(0.99); }

  .views-table tbody tr:hover { transform: translateX(-2px); }

  .mada-card:hover,
  .mada-kpi:hover {
    transform: translateY(-3px);
    box-shadow: var(--gin-shadow-l2, 0 12px 28px -8px rgba(15, 42, 49, 0.16));
  }

  .mada-rail__link:hover { transform: translateX(-3px); }

  /* Messages slide in. */
  .messages {
    animation: mada-slide-in 320ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }

  /* ---- Top navigation progress bar (JS-driven) ---- */
  .mada-progress {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    height: 3px;
    background: linear-gradient(90deg,
      var(--mada-teal, #1C8577), var(--mada-teal-bright, #23A08D));
    transform: scaleX(0);
    transform-origin: 0 50%;
    z-index: 2000;
    pointer-events: none;
    transition: transform 0.25s ease, opacity 0.35s ease;
  }
  [dir="rtl"] .mada-progress { transform-origin: 100% 50%; }
  .mada-progress.is-active { transform: scaleX(0.75); }
  .mada-progress.is-done { transform: scaleX(1); opacity: 0; }

  /* ---- Dashboard hero sparkline draw-on ---- */
  .mada-hero__spark path:first-of-type {
    stroke-dasharray: 640;
    stroke-dashoffset: 640;
    animation: mada-draw 1.5s ease 0.35s forwards;
  }
  @keyframes mada-draw {
    to { stroke-dashoffset: 0; }
  }
  .mada-hero__spark circle {
    animation: mada-pop 0.4s ease 1.7s both;
  }
  @keyframes mada-pop {
    from { transform: scale(0); transform-box: fill-box; transform-origin: center; }
  }

  /* ---- Auth page entrance + floating decor ---- */
  body.mada-auth .mada-auth-brand__top { animation: mada-rise 500ms ease both; }
  body.mada-auth .mada-auth-brand__body { animation: mada-rise 600ms ease 0.08s both; }
  body.mada-auth .mada-auth-brand__foot { animation: mada-rise 600ms ease 0.16s both; }
  body.mada-auth .mada-auth-card { animation: mada-rise 520ms cubic-bezier(0.22, 0.61, 0.36, 1) 0.1s both; }
  body.mada-auth .mada-auth-brand__points li {
    animation: mada-rise 460ms ease both;
    animation-delay: calc(0.2s + var(--i, 0) * 90ms);
  }
  body.mada-auth .mada-auth-brand::after {
    animation: mada-float 10s ease-in-out infinite;
  }
  @keyframes mada-float {
    50% { transform: translate(16px, 20px) scale(1.05); }
  }
}