/* ==========================================================================
   Motion system — shared by the site and the admin panel.
   Rule: the page is complete without motion. Every animation below starts from
   or ends at the resting layout, and all of it is off under prefers-reduced-motion.
   ========================================================================== */
:root {
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);       /* fast start, long settle */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* slight overshoot */
  --dur-1: 160ms;
  --dur-2: 320ms;
  --dur-3: 600ms;
}

/* ---------- always-on, tiny, state transitions ---------- */
.site-header { transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) ease, background-color var(--dur-2) ease; }
.site-header.scrolled { box-shadow: 0 10px 30px -18px rgba(8, 15, 28, 0.35); }
.site-header.tucked { transform: translateY(calc(-100% - env(safe-area-inset-top, 0px))); }
.scroll-progress {
  position: absolute; inset-inline: 0; bottom: -1px; height: 2px; background: var(--brass);
  transform: scaleX(0); transform-origin: left center; pointer-events: none;
}
html[dir="rtl"] .scroll-progress { transform-origin: right center; }

.btn, .chip { position: relative; overflow: hidden; isolation: isolate; }
.ink {
  position: absolute; border-radius: 50%; pointer-events: none; z-index: -1;
  background: currentColor; opacity: 0.18; transform: scale(0);
  animation: ink 600ms var(--ease-out) forwards;
}
@keyframes ink { to { transform: scale(1); opacity: 0; } }

.chip { transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), transform var(--dur-1) ease; }
.chip:active { transform: scale(0.96); }
.tool-btn { transition: border-color var(--dur-1) ease, color var(--dur-1) ease, transform var(--dur-1) ease; }
.tool-btn:active { transform: scale(0.94); }
#theme-toggle .icon { transition: transform var(--dur-3) var(--ease-spring); }
#theme-toggle:hover .icon { transform: rotate(-20deg); }

.input, .select, .textarea { transition: border-color var(--dur-1) ease, box-shadow var(--dur-2) var(--ease-out), background-color var(--dur-2) ease; }
.field-error { animation: none; }

/* arrow inside primary buttons */
.btn .arrow { transition: transform var(--dur-2) var(--ease-out); }
.btn:hover .arrow { transform: translateX(4px); }
html[dir="rtl"] .btn .arrow { transform: scaleX(-1); }
html[dir="rtl"] .btn:hover .arrow { transform: scaleX(-1) translateX(4px); }

/* animated children create stacking contexts; keep controls on top */
.sheet-close { z-index: 3; }

/* dial needle (static fallback is the resting position) */
.dial .needle { transform-box: view-box; transform-origin: 220px 220px; transform: rotate(-90deg); transition: transform 700ms var(--ease-spring); pointer-events: none; }
.dial .needle-track { fill: none; stroke: rgba(238, 242, 248, 0.12); stroke-width: 1; stroke-dasharray: 2 6; }
.dial .needle-head { fill: var(--brass); filter: drop-shadow(0 0 6px rgba(226, 172, 83, 0.6)); transition: opacity var(--dur-2) ease; }
.dial .needle.idle .needle-head { opacity: 0.55; }

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

  /* ---------- hero intro: one orchestrated sequence on load ---------- */
  .hero .eyebrow,
  .hero h1,
  .hero-lead,
  .hero-actions,
  .hero-stats { animation: rise 900ms var(--ease-out) both; }
  .hero h1 { animation-delay: 80ms; }
  .hero-lead { animation-delay: 180ms; }
  .hero-actions { animation-delay: 280ms; }
  .hero-stats { animation-delay: 380ms; }
  .hero h1 em { display: inline-block; animation: brass-in 1200ms var(--ease-out) 450ms both; }
  .hero::after { animation: ruler-in 1400ms var(--ease-out) 200ms both; }

  /* ambient glow that drifts toward the pointer */
  .hero::before {
    content: ''; position: absolute; inset: -20%; pointer-events: none;
    background: radial-gradient(520px 320px at var(--gx, 70%) var(--gy, 20%), rgba(226, 172, 83, 0.12), transparent 70%);
    transition: background 1.2s var(--ease-out);
  }
  .hero > .wrap { position: relative; }

  /* dial */
  .dial-card { transform: translate(var(--tx, 0), var(--ty, 0)); transition: transform 600ms var(--ease-out); animation: dial-in 1100ms var(--ease-out) 120ms both; }
  .dial .seg { transform-box: view-box; transform-origin: 220px 220px; animation: seg-in 700ms var(--ease-out) both; animation-delay: calc(350ms + var(--i, 0) * 70ms); }
  .dial .seg path { transition: fill var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); transform-box: view-box; transform-origin: 220px 220px; }
  .dial .seg:hover path, .dial .seg:focus-visible path { transform: scale(1.025); }
  .dial .ticks { transform-box: view-box; transform-origin: 220px 220px; animation: spin 180s linear infinite; }
  .dial .needle { animation: needle-in 900ms var(--ease-out) 900ms both; }
  .dial-center { animation: fade 700ms ease 600ms both; }

  /* ---------- scroll reveal (only armed when motion.js runs) ---------- */
  html.motion-ready [data-reveal] {
    transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out), filter 800ms var(--ease-out);
    transition-delay: var(--d, 0ms);
  }
  html.motion-ready [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(28px); filter: blur(4px); }

  /* process line draws across as the steps arrive */
  .step::after { transform-origin: left center; transition: transform 900ms var(--ease-out) calc(var(--d, 0ms) + 250ms); }
  html[dir="rtl"] .step::after { transform-origin: right center; }
  html.motion-ready .step[data-reveal]:not(.is-in)::after { transform: scaleX(0); }
  .step::before { transition: color var(--dur-3) ease; }

  /* features: icon lifts on hover */
  .feature .icon { transition: transform var(--dur-3) var(--ease-spring); }
  .feature:hover .icon { transform: translateY(-3px) rotate(-6deg); }
  .check-list .icon { transition: transform var(--dur-2) var(--ease-spring); }
  .check-list li:hover .icon { transform: scale(1.25); }

  /* ---------- program cards ---------- */
  .program-card {
    animation: card-in 560ms var(--ease-out) both;
    animation-delay: calc(var(--n, 0) * 40ms);
    transition: border-color var(--dur-2) ease, transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
  }
  .program-card:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(14, 27, 45, 0.05), 0 24px 40px -22px rgba(14, 27, 45, 0.35); }
  .program-card::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
    background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--brass) 14%, transparent), transparent 65%);
    transition: opacity var(--dur-2) ease;
  }
  .program-card:hover::before { opacity: 1; }
  .program-card .meta-row .icon { transition: transform var(--dur-2) var(--ease-out); }
  .program-card:hover .meta-row .icon { transform: translateY(-1px); }
  .empty-state { animation: rise 500ms var(--ease-out) both; }
  .skeleton::after { animation-duration: 1.4s; }

  /* ---------- program sheet ---------- */
  .sheet[open] { animation: sheet-in 520ms var(--ease-out); }
  html[dir="rtl"] .sheet[open] { animation-name: sheet-in-rtl; }
  .sheet[open]::backdrop { animation: fade 400ms ease; }
  .sheet.closing { animation: sheet-out 300ms var(--ease-in-out) forwards; }
  html[dir="rtl"] .sheet.closing { animation-name: sheet-out-rtl; }
  .sheet.closing::backdrop { animation: fade-out 300ms ease forwards; }
  .sheet[open] .sheet-head > :not(.sheet-close),
  .sheet[open] .sheet-body > * { animation: rise 600ms var(--ease-out) both; }
  .sheet[open] .sheet-head h2 { animation-delay: 80ms; }
  .sheet[open] .sheet-facts { animation-delay: 140ms; }
  .sheet[open] .sheet-body > :nth-child(1) { animation-delay: 180ms; }
  .sheet[open] .sheet-body > :nth-child(2) { animation-delay: 230ms; }
  .sheet[open] .sheet-body > :nth-child(3) { animation-delay: 280ms; }
  .sheet[open] .sheet-body > :nth-child(4) { animation-delay: 330ms; }
  .outcomes li { animation: rise 500ms var(--ease-out) both; }
  .outcomes li:nth-child(2) { animation-delay: 60ms; }
  .outcomes li:nth-child(3) { animation-delay: 120ms; }
  .outcomes li:nth-child(n+4) { animation-delay: 180ms; }
  .mode-options label { transition: border-color var(--dur-2) ease, background-color var(--dur-2) ease, transform var(--dur-1) ease; }
  .mode-options label:active { transform: scale(0.96); }

  /* success: ring pops, check draws itself */
  .success-box:not([hidden]) .ring { animation: pop 600ms var(--ease-spring) both; }
  .success-box:not([hidden]) .ring .icon { stroke-dasharray: 26; stroke-dashoffset: 26; animation: draw 500ms var(--ease-out) 250ms forwards; }
  .success-box:not([hidden]) > :not(.ring) { animation: rise 600ms var(--ease-out) both; animation-delay: 350ms; }

  /* ---------- verify ---------- */
  .verify-result:not([hidden]) { animation: drop-in 500ms var(--ease-out) both; }
  .verify-result.bad:not([hidden]) .status { animation: shake 420ms var(--ease-in-out) 120ms; }
  .verify-result.ok:not([hidden]) .status .icon { animation: pop 600ms var(--ease-spring) 150ms both; }

  /* ---------- forms ---------- */
  .field-error { animation: drop-in 300ms var(--ease-out) both; }
  .input[aria-invalid="true"], .textarea[aria-invalid="true"] { animation: shake 360ms var(--ease-in-out); }

  /* ---------- toasts ---------- */
  .toast { animation: toast-in 480ms var(--ease-spring) both; }
  .toast.out { animation: toast-out 280ms var(--ease-in-out) forwards; }

  /* ---------- mobile menu ---------- */
  @media (max-width: 1060px) {
    .main-nav.open { animation: menu-in 380ms var(--ease-out) both; }
    .main-nav.open li { animation: rise 420ms var(--ease-out) both; }
    .main-nav.open li:nth-child(2) { animation-delay: 30ms; }
    .main-nav.open li:nth-child(3) { animation-delay: 60ms; }
    .main-nav.open li:nth-child(4) { animation-delay: 90ms; }
    .main-nav.open li:nth-child(5) { animation-delay: 120ms; }
    .main-nav.open li:nth-child(6) { animation-delay: 150ms; }
  }

  /* ---------- view transitions: theme (circular reveal) & language (cross-slide) ---------- */
  html.vt-theme::view-transition-old(root),
  html.vt-theme::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
  html.vt-lang::view-transition-old(root) { animation: 260ms var(--ease-in-out) both vt-out; }
  html.vt-lang::view-transition-new(root) { animation: 420ms var(--ease-out) 80ms both vt-in; }
}

/* ---------- keyframes ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes fade { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes brass-in { from { opacity: 0; transform: translateY(10px); filter: blur(6px); letter-spacing: 0.04em; } }
@keyframes ruler-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes dial-in { from { opacity: 0; transform: scale(0.9) rotate(-12deg); } }
@keyframes seg-in { from { opacity: 0; transform: scale(0.82); } }
@keyframes needle-in { from { opacity: 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes card-in { from { opacity: 0; transform: translateY(16px) scale(0.98); } }
@keyframes sheet-in { from { transform: translateX(60px); opacity: 0; } }
@keyframes sheet-in-rtl { from { transform: translateX(-60px); opacity: 0; } }
@keyframes sheet-out { to { transform: translateX(60px); opacity: 0; } }
@keyframes sheet-out-rtl { to { transform: translateX(-60px); opacity: 0; } }
@keyframes pop { 0% { transform: scale(0.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes drop-in { from { opacity: 0; transform: translateY(-8px); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
@keyframes toast-in { from { opacity: 0; transform: translateY(16px) scale(0.96); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(10px) scale(0.98); } }
@keyframes menu-in { from { opacity: 0; transform: translateY(-8px); } }
@keyframes vt-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }

/* ==========================================================================
   Admin panel motion
   ========================================================================== */
.rail-link { transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) ease, transform var(--dur-1) ease; }
.rail-link:active { transform: scale(0.98); }
.kpi { transition: border-color var(--dur-2) ease, transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
.kpi:hover { transform: translateY(-2px); box-shadow: 0 18px 30px -22px rgba(14, 27, 45, 0.4); }
.icon-btn { transition: color var(--dur-1) ease, border-color var(--dur-1) ease, transform var(--dur-1) ease; }
.icon-btn:active { transform: scale(0.92); }
.switch span, .switch span::after { transition: background-color var(--dur-2) ease, transform var(--dur-2) var(--ease-spring); }
table.data tr td { transition: background-color var(--dur-1) ease; }

@media (prefers-reduced-motion: no-preference) {
  .login-card { animation: rise 700ms var(--ease-out) both; }
  .view > * { animation: rise 520ms var(--ease-out) both; }
  .view > :nth-child(2) { animation-delay: 60ms; }
  .view > :nth-child(3) { animation-delay: 120ms; }
  .view > :nth-child(n+4) { animation-delay: 160ms; }
  .kpi { animation: rise 520ms var(--ease-out) both; animation-delay: calc(var(--n, 0) * 50ms); }
  table.data tbody tr { animation: row-in 420ms var(--ease-out) both; }
  table.data tbody tr:nth-child(2) { animation-delay: 25ms; }
  table.data tbody tr:nth-child(3) { animation-delay: 50ms; }
  table.data tbody tr:nth-child(4) { animation-delay: 75ms; }
  table.data tbody tr:nth-child(5) { animation-delay: 100ms; }
  table.data tbody tr:nth-child(6) { animation-delay: 125ms; }
  table.data tbody tr:nth-child(7) { animation-delay: 150ms; }
  table.data tbody tr:nth-child(n+8) { animation-delay: 175ms; }
  .message { animation: rise 480ms var(--ease-out) both; }
  .chart .bar { transform-box: fill-box; transform-origin: center bottom; animation: grow-y 800ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 18ms + 150ms); transition: fill var(--dur-1) ease; }
  .stack span, .rank .bar-fill { transform-origin: left center; animation: grow-x 1000ms var(--ease-out) 200ms both; }
  html[dir="rtl"] .stack span, html[dir="rtl"] .rank .bar-fill { transform-origin: right center; }
  .rail .pill { animation: pop 500ms var(--ease-spring) both; }
  .modal[open] { animation: modal-in 380ms var(--ease-spring); }
  .modal[open]::backdrop { animation: fade 300ms ease; }
  @media (max-width: 960px) { .rail { transition: transform 420ms var(--ease-out), box-shadow 420ms ease; } }
}
@keyframes row-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes grow-y { from { transform: scaleY(0); } }
@keyframes grow-x { from { transform: scaleX(0); } }
@keyframes modal-in { from { opacity: 0; transform: translateY(14px) scale(0.97); } }