/* AB English motion layer — calm, precise, confirming (see .impeccable.md).
   Transform and opacity only; everything switches off under prefers-reduced-motion. */
:root {
  --ease-out: cubic-bezier(0.25, 1, 0.5, 1);        /* quart: refined deceleration */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);   /* expo: confident entrances */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-press: 110ms;
  --dur-fast: 180ms;
  --dur-base: 260ms;
  --dur-enter: 560ms;
  --shadow-lift: 0 1px 2px rgba(16, 29, 53, .05), 0 10px 28px -12px rgba(16, 29, 53, .22);
  --shadow-cobalt: 0 1px 2px rgba(36, 73, 214, .25), 0 8px 22px -10px rgba(49, 91, 250, .55);
}

/* ---------- Page-to-page: a soft cross-fade, the sidebar stays put ---------- */
@view-transition { navigation: auto; }
.sidebar { view-transition-name: sidebar; }
.mobile-bar { view-transition-name: mobile-bar; }
::view-transition-old(root) { animation: vt-out 160ms var(--ease-in-out) both; }
::view-transition-new(root) { animation: vt-in 260ms var(--ease-out) both; }
::view-transition-group(sidebar), ::view-transition-group(mobile-bar) { animation: none; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(6px); } }

/* ---------- Signature: page content settles in ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes fade { from { opacity: 0; } }
@keyframes reveal-line { from { opacity: 0; transform: translateY(0.45em); } }

.main > *, .auth-card > *, .legal > * {
  animation: rise var(--dur-enter) var(--ease-out-expo) both;
}
.main > :nth-child(2), .auth-card > :nth-child(2) { animation-delay: 50ms; }
.main > :nth-child(3), .auth-card > :nth-child(3) { animation-delay: 100ms; }
.main > :nth-child(4), .auth-card > :nth-child(4) { animation-delay: 150ms; }
.main > :nth-child(5), .auth-card > :nth-child(5) { animation-delay: 200ms; }
.main > :nth-child(n+6), .auth-card > :nth-child(n+6) { animation-delay: 240ms; }
/* stat tiles and cards in a grid arrive one after another */
.stats > *, .exam-cards > *, .child-cards > *, .sub-cards > *, .module-cards > *, .features > * {
  animation: rise var(--dur-enter) var(--ease-out-expo) both;
}
.stats > :nth-child(2), .exam-cards > :nth-child(2), .child-cards > :nth-child(2), .sub-cards > :nth-child(2), .module-cards > :nth-child(2), .features > :nth-child(2) { animation-delay: 70ms; }
.stats > :nth-child(3), .exam-cards > :nth-child(3), .child-cards > :nth-child(3), .sub-cards > :nth-child(3), .module-cards > :nth-child(3), .features > :nth-child(3) { animation-delay: 140ms; }
.stats > :nth-child(4), .exam-cards > :nth-child(4), .child-cards > :nth-child(4), .sub-cards > :nth-child(4), .module-cards > :nth-child(4) { animation-delay: 210ms; }
.stats > :nth-child(n+5), .exam-cards > :nth-child(n+5), .child-cards > :nth-child(n+5), .sub-cards > :nth-child(n+5), .module-cards > :nth-child(n+5) { animation-delay: 260ms; }

/* Hero and sign-in headline: line by line, the lime promise last */
.hero .eyebrow { animation: fade 700ms var(--ease-out) 80ms both; }
.hero h1 .line, .auth-brand h2, .auth-brand h2 .lime { animation: reveal-line 820ms var(--ease-out-expo) both; }
.hero h1 .line:nth-child(1) { animation-delay: 140ms; }
.hero h1 .line:nth-child(2) { animation-delay: 300ms; }
.auth-brand h2 { animation-delay: 120ms; }
.auth-brand h2 .lime { animation-delay: 300ms; }
.hero p.lead { animation: rise 760ms var(--ease-out-expo) 440ms both; }
.hero-actions { animation: rise 760ms var(--ease-out-expo) 540ms both; }
/* the brand pattern drifts very slowly, like light moving across paper */
.hero-pattern { animation: fade 1400ms var(--ease-out) 200ms both, drift 26s var(--ease-in-out) 1.6s infinite alternate; }
@keyframes drift { to { translate: -18px 10px; } }
html[dir="rtl"] .hero-pattern { animation-name: fade, drift-rtl; }
@keyframes drift-rtl { to { translate: 18px 10px; } }

/* ---------- Feedback: buttons ---------- */
.btn {
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.btn:active { transform: translateY(0) scale(.98); transition-duration: var(--dur-press); }
.btn-primary { box-shadow: 0 1px 2px rgba(36, 73, 214, .2); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-cobalt); }
.btn-dark:hover { transform: translateY(-1px); box-shadow: var(--shadow-lift); }
.btn-outline:hover { background: rgba(16, 29, 53, .03); }
.btn .icon { transition: transform var(--dur-base) var(--ease-out); }
/* a trailing arrow leans the way it points */
.btn:hover > .icon:last-child:not(:first-child) { transform: translateX(3px); }
html[dir="rtl"] .btn:hover > .icon-flip:last-child:not(:first-child) { transform: scaleX(-1) translateX(3px); }
.btn[disabled], .btn.is-busy { cursor: progress; }
.btn.is-busy { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-busy::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid currentColor; border-color: rgba(255, 255, 255, .9) rgba(255, 255, 255, .9) rgba(255, 255, 255, .25) rgba(255, 255, 255, .25);
  animation: spin 700ms linear infinite;
}
.btn-outline.is-busy::after, .btn-ghost.is-busy::after, .btn-danger.is-busy::after {
  border-color: var(--navy) var(--navy) rgba(16, 29, 53, .2) rgba(16, 29, 53, .2);
}
@keyframes spin { to { transform: rotate(1turn); } }

/* ---------- Feedback: forms ---------- */
.field label { transition: color var(--dur-fast) var(--ease-out); }
.field:focus-within label { color: var(--cobalt-600); }
.input, .field input, .field select, .field textarea {
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background-color var(--dur-fast);
}
.input:hover, .field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink-3); }
.input:focus, .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--cobalt); }
.field.has-error input, .field.has-error select { animation: nudge 360ms var(--ease-out); }
@keyframes nudge { 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-2px); } 80% { transform: translateX(1px); } }
.field-error { animation: rise 300ms var(--ease-out) both; }
:focus-visible { transition: box-shadow var(--dur-fast) var(--ease-out); }

/* ---------- Surfaces respond ---------- */
.card, .stat, .feature, .exam-card, .child-card, .sub-card {
  transition: box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
a.card:hover, .stat-link:hover .stat, a.stat:hover, .stat-link:hover, .feature:hover, .exam-card:hover, .child-card:hover {
  box-shadow: var(--shadow-lift); transform: translateY(-2px);
}
.table tbody tr { transition: background-color var(--dur-fast) var(--ease-out); }
a { transition: color var(--dur-fast) var(--ease-out); }
.flash { animation: flash-in 420ms var(--ease-out-expo) both; }
@keyframes flash-in { from { opacity: 0; transform: translateY(-8px) scale(.99); } }
.badge, .nav-badge { transition: background-color var(--dur-base), color var(--dur-base); }
.nav-badge { animation: pop 420ms var(--ease-out-expo) 300ms both; }
@keyframes pop { from { opacity: 0; transform: scale(.6); } }
.code-chip { animation: fade 600ms var(--ease-out) 200ms both; }

/* ---------- Sidebar ---------- */
.side-nav a { transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.side-nav a .icon { transition: transform var(--dur-base) var(--ease-out); }
.side-nav a:hover .icon { transform: translateX(2px); }
html[dir="rtl"] .side-nav a:hover .icon { transform: translateX(-2px); }
.side-nav a[aria-current="page"]::before { animation: marker 520ms var(--ease-out-expo) both; transform-origin: center; }
@keyframes marker { from { transform: scaleY(0); opacity: 0; } }
.bell .icon { transform-origin: 50% 10%; }
.bell:hover .icon { animation: ring 700ms var(--ease-out); }
@keyframes ring { 15% { transform: rotate(12deg); } 35% { transform: rotate(-10deg); } 55% { transform: rotate(6deg); } 75% { transform: rotate(-3deg); } }
.bell, .lang-switch a { transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }

/* Mobile drawer: a smooth slide, the backdrop fades */
@media (max-width: 860px) {
  .sidebar { transition: transform 340ms var(--ease-out-expo); }
  .shell::after { content: ""; position: fixed; inset: 0; background: rgba(16, 29, 53, .45); z-index: 20;
                  opacity: 0; pointer-events: none; transition: opacity 300ms var(--ease-out); }
  .shell.nav-open::after { opacity: 1; pointer-events: auto; }
}

/* ---------- Data comes alive ---------- */
.bar span { transform-origin: left center; animation: grow 900ms var(--ease-out-expo) 250ms both; }
html[dir="rtl"] .bar span { transform-origin: right center; }
@keyframes grow { from { transform: scaleX(0); } }
.stat .value, [data-count-up] { font-variant-numeric: tabular-nums; }

/* Disclosures open smoothly where the browser supports it */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  details::details-content {
    block-size: 0; overflow: clip; opacity: 0;
    transition: block-size 340ms var(--ease-out), opacity 260ms var(--ease-out), content-visibility 340ms allow-discrete;
  }
  details[open]::details-content { block-size: auto; opacity: 1; }
}
summary { cursor: pointer; transition: color var(--dur-fast) var(--ease-out); }

/* ---------- The exam stays calm: feedback only, no entrances ---------- */
.ex-body .main > *, .ex-body .card { animation: none; }
.bb-choice { transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out),
                          background-color var(--dur-fast) var(--ease-out), opacity var(--dur-base) var(--ease-out); }
.bb-letter { transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast); }
.bb-choice:active { transform: scale(.995); }
[data-nav-panel]:not([hidden]) { animation: panel-in 220ms var(--ease-out) both; }
@keyframes panel-in { from { opacity: 0; transform: translateY(8px); } }
.timer { transition: color var(--dur-base) var(--ease-out); }

/* ---------- Respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after, ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) {
    animation-duration: 0.01ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; transition-delay: 0ms !important;
  }
  .btn:hover, a.card:hover, .stat-link:hover, .feature:hover, .exam-card:hover, .child-card:hover { transform: none; }
}