/* =====================================================================
   DakPariksha motion + interaction layer (Plan §1.1–1.3)
   Pairs with /js/motion.js and /js/ui.js. Uses :where() so specificity is ZERO —
   any existing page CSS still wins; this only fills gaps.
   ===================================================================== */

/* ---- page load / leave ---- */
/* Native cross-document transitions where supported (the headers' old
   <meta name="view-transition"> tag is obsolete; this is the current syntax). */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 180ms; }
/* Opacity only, fill-mode `backwards`: a transform (or a retained fill) on <body> would turn it into the
   containing block for every position:fixed element (sticky headers, modals, toasts) and break them. */
@supports not (view-transition-name: none) {
  html.dp-js body { animation: dp-page-in var(--dp-dur-slow, 420ms) var(--dp-ease, ease) backwards; }
}
html.dp-js.dp-leaving body { opacity: 0; transition: opacity 140ms ease-in; }
@keyframes dp-page-in { from { opacity: 0; } to { opacity: 1; } }

/* ---- scroll reveal ---- */
html.dp-js .dp-reveal-pending {
  opacity: 0; transform: translateY(18px);
  transition: opacity 520ms var(--dp-ease, ease), transform 520ms var(--dp-ease, ease);
  transition-delay: var(--dp-reveal-delay, 0ms);
}
html.dp-js .dp-reveal-pending.dp-revealed { opacity: 1; transform: none; }

/* ---- standard hover / press for buttons & cards (site-wide) ---- */
:where(button, .btn, a.btn, input[type=submit], input[type=button], .dp-btn, [role=button]) {
  transition: transform var(--dp-dur-fast, 120ms) var(--dp-ease, ease),
              box-shadow var(--dp-dur, 220ms) var(--dp-ease, ease),
              background-color var(--dp-dur, 220ms) ease, filter var(--dp-dur, 220ms) ease;
  -webkit-tap-highlight-color: transparent;
}
:where(button, .btn, a.btn, input[type=submit], .dp-btn, [role=button]):not(:disabled):hover { filter: brightness(1.04); }
:where(button, .btn, a.btn, input[type=submit], .dp-btn, [role=button]):not(:disabled):active { transform: scale(.97); }
:where(button, .btn, a, input, select, textarea, .dp-btn, [role=button], [tabindex]):focus-visible {
  outline: 3px solid var(--dp-focus, rgba(11,61,145,.45)); outline-offset: 2px;
}

:where(.card, .dp-card, [class*="-card"]:not([class*="card-"]), .test-card, .course-card) {
  transition: transform var(--dp-dur, 220ms) var(--dp-ease, ease), box-shadow var(--dp-dur, 220ms) var(--dp-ease, ease);
}
:where(a.card, a.dp-card, a[class*="-card"], .card[data-href], .dp-card--link):hover {
  transform: translateY(-3px); box-shadow: var(--dp-shadow-lg, 0 12px 32px rgba(16,24,40,.12));
}
:where(a.card, a.dp-card, a[class*="-card"], .card[data-href], .dp-card--link):active { transform: translateY(-1px) scale(.99); }

/* ---- loading state (ui.js withLoadingState) ---- */
.dp-loading { position: relative; pointer-events: none; cursor: progress; }
.dp-loading > * { visibility: hidden; }
.dp-loading::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 1.1em; height: 1.1em;
  border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent;
  animation: dp-spin .7s linear infinite;
}
.dp-loading[data-loading-text]::after { display: none; }
.dp-loading[data-loading-text] > * { visibility: visible; }
.dp-spinner {
  display: inline-block; width: 1em; height: 1em; vertical-align: -0.15em; margin-right: .4em;
  border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: dp-spin .7s linear infinite;
}
@keyframes dp-spin { to { transform: rotate(360deg); } }

/* ---- toasts (ui.js DP.toast) ---- */
.dp-toasts {
  position: fixed; z-index: 10000; right: 16px; bottom: 16px; left: auto;
  display: flex; flex-direction: column; gap: 10px; max-width: min(380px, calc(100vw - 32px));
  pointer-events: none;
}
@media (max-width: 560px) { .dp-toasts { left: 16px; right: 16px; bottom: 12px; max-width: none; } }
.dp-toast {
  pointer-events: auto; display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; border-radius: var(--dp-radius, 10px);
  background: var(--dp-surface, #fff); color: var(--dp-text, #1b1f24);
  border: 1px solid var(--dp-border, #e4e1da); border-left: 4px solid var(--dp-info, #0b5cad);
  box-shadow: var(--dp-shadow-lg, 0 12px 32px rgba(16,24,40,.12));
  font: 500 14px/1.45 var(--dp-font-body, system-ui, sans-serif);
  animation: dp-toast-in 260ms var(--dp-ease, ease) both;
}
.dp-toast.dp-toast--out { animation: dp-toast-out 200ms ease-in both; }
.dp-toast--success { border-left-color: var(--dp-success, #147a3d); }
.dp-toast--error   { border-left-color: var(--dp-danger, #b42318); }
.dp-toast--warning { border-left-color: var(--dp-warning, #9a6200); }
.dp-toast__msg { flex: 1; }
.dp-toast__close {
  background: none; border: 0; color: inherit; opacity: .6; cursor: pointer; font-size: 18px; line-height: 1; padding: 0 2px;
}
.dp-toast__close:hover { opacity: 1; }
@keyframes dp-toast-in  { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes dp-toast-out { to { opacity: 0; transform: translateY(8px); } }

/* ---- respect users who turn animations off ---- */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
  html.dp-js body, .dp-toast, .dp-toast.dp-toast--out { animation: none !important; }
  html.dp-js .dp-reveal-pending { opacity: 1 !important; transform: none !important; transition: none !important; }
  :where(button, .btn, .card, .dp-card, [class*="-card"]) { transition: none !important; }
}