/**
 * Roddier App — Motion & state kit (batch C, purely additive)
 * ──────────────────────────────────────────────────────────────────────
 * Loaded AFTER app.css, ui-kit.css, brand-signature.css and components-kit.css:
 * consumes their tokens (--dur-*, --ease, --ease-spring, --bg-*, --label-*,
 * fill-*, --separator, --system-*, --radius-*, --shadow-*, --tint, --r-pill…)
 * and REDEFINES none of the existing ones.
 *
 * Everything here is OPT-IN: no global transition or animation on `*` or
 * `body`. We ONLY add selectors under new prefixes, and we
 *   REUSE the primitives already present:
 *   - .skeleton / .skeleton-text / .skeleton-circle ALREADY exist in
 *     ui-kit.css (shimmer + reduced-motion cutoff). We DO NOT redefine them.
 *     We only ADD the composites .skeleton-line and .skeleton-card,
 *     built on top of the .skeleton primitive.
 *   - the flash/toast system (.app-flash, #app-toast-stack, .app-island,
 *     window.appToast) ALREADY exists in app.css + public/toast.js. The SERVER CONTRACT
 *     remains intact: neither the .app-flash markup nor the JS API is changed.
 *     We ADD an OPT-IN refinement behind [data-toast-autodismiss]:
 *     slide in from the top + auto-dismiss progress bar, controlled
 *     by public/js/toast-autodismiss.js (idempotent, opt-in selector).
 *
 * Charter: navy #0f2544 + DESATURATED blue halos. Transitions 150–200 ms,
 * never flashy. Saturated blue avoided. No emoji (SVG in the view).
 * reduced-motion neutralizes the shimmer / slide / transitions introduced here.
 *
 * Contents:
 *   1. Utility soft transitions — .u-transition (+ --fast / --slow)
 *   2. Composite skeletons — .skeleton-line / .skeleton-card
 *   3. Flash auto-dismiss — [data-toast-autodismiss] (slide-in + progress)
 *   4. reduced-motion — neutralizes the additions above
 *   5. Dark mode — color variants (skeleton reinforcement / flash bar)
 */

/* ════════════════════════════════════════════════════════════════════
   1. Smooth utility transitions — .u-transition
   Opt-in: add to an element to give it subtle transitions
   on common visual properties (color, background, border,
   box-shadow, transform). NEVER `transition: all` (expensive + breaks
   things). Default duration 180 ms; variants --fast (150) / --slow (200).
   Consumes --ease from app.css.
   ════════════════════════════════════════════════════════════════════ */
.u-transition {
  transition-property: color, background-color, border-color, box-shadow, transform, opacity;
  transition-duration: 0.18s;
  transition-timing-function: var(--ease, cubic-bezier(0.22, 0.61, 0.36, 1));
}
.u-transition--fast { transition-duration: var(--dur-fast, 0.15s); }
.u-transition--slow { transition-duration: 0.2s; }

/* ════════════════════════════════════════════════════════════════════
   2. Skeletons composites — .skeleton-line / .skeleton-card
   Rely on the .skeleton primitive (ui-kit.css): add .skeleton
   AND a composite class. The shimmer + its reduced-motion cutoff are already
   handled by .skeleton in ui-kit.css → only SHAPES are added here.
   Opt-in (Julien / JS add the classes during loading).
   Example: <div class="skeleton skeleton-card">…lines…</div>
   ════════════════════════════════════════════════════════════════════ */

/* Text line (default thickness), with width utilities. */
.skeleton-line {
  height: 0.85em;
  margin: 0.45em 0;
  border-radius: var(--radius-sm, 6px);
}
.skeleton-line--sm { height: 0.7em; }
.skeleton-line--lg { height: 1.1em; }
.skeleton-line--w90 { width: 90%; }
.skeleton-line--w75 { width: 75%; }
.skeleton-line--w60 { width: 60%; }
.skeleton-line--w40 { width: 40%; }

/* Loading “card” block: neutral surface + padding, to be filled with
   .skeleton-line. Inherits the shimmer if .skeleton is also added to it. */
.skeleton-card {
  display: block;
  padding: 1rem 1.1rem;
  border: 1px solid var(--separator);
  border-radius: var(--radius-lg, 14px);
  background: var(--bg-secondary);
}
.skeleton-card > .skeleton-line:last-child { margin-bottom: 0; }

/* ════════════════════════════════════════════════════════════════════
   3. Flash auto-dismiss — [data-toast-autodismiss]
   OPT-IN refinement of an existing .app-flash banner (server markup
   UNCHANGED: we only add the data-* attribute in the view if we
   want). Adds a slide in from the top + a bar that materialises the
   auto-dismiss progress. The bar is animated in CSS;
   node removal is controlled by public/js/toast-autodismiss.js, which
   adds .toast-dismissing for the exit.
   ════════════════════════════════════════════════════════════════════ */
.app-flash[data-toast-autodismiss] {
  position: relative;
  overflow: hidden;
  animation: motionFlashSlideIn 0.28s var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)) both;
}

/* Progress bar: duration controlled by --toast-duration (set by the JS,
   fallback 4 s). Color tinted by type, via the --toast-bar variable. */
.app-flash[data-toast-autodismiss]::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  transform-origin: left center;
  background: var(--toast-bar, var(--label-tertiary));
  animation: motionFlashProgress var(--toast-duration, 4000ms) linear both;
}
.app-flash-success[data-toast-autodismiss] { --toast-bar: var(--system-green); }
.app-flash-error[data-toast-autodismiss]   { --toast-bar: var(--system-red); }
.app-flash-warning[data-toast-autodismiss] { --toast-bar: var(--system-orange); }
.app-flash-info[data-toast-autodismiss]    { --toast-bar: var(--system-blue); }

/* Hover: JS adds .toast-paused → pause the progress bar
   (the ::after cannot be targeted by JS, hence this CSS bridge). */
.app-flash[data-toast-autodismiss].toast-paused::after {
  animation-play-state: paused;
}

/* Exit: retract upward + fade (set by the JS before removal). */
.app-flash[data-toast-autodismiss].toast-dismissing {
  animation: motionFlashSlideOut 0.24s var(--ease, ease) both;
}

@keyframes motionFlashSlideIn {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: none; }
}
@keyframes motionFlashSlideOut {
  from { opacity: 1; transform: none; max-height: 12rem; }
  to   { opacity: 0; transform: translateY(-12px); max-height: 0; }
}
@keyframes motionFlashProgress {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

/* ════════════════════════════════════════════════════════════════════
   4. reduced-motion — neutralizes everything introduced here
   (The .skeleton shimmer and existing toasts are already disabled elsewhere;
   here we cut OUR additions: utility transitions, slide + bar.)
   ════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .u-transition,
  .u-transition--fast,
  .u-transition--slow { transition: none; }

  .app-flash[data-toast-autodismiss] { animation: none; }
  .app-flash[data-toast-autodismiss]::after { animation: none; display: none; }
  .app-flash[data-toast-autodismiss].toast-dismissing {
    animation: none;
    opacity: 0;
  }
}

/* ════════════════════════════════════════════════════════════════════
   5. Dark mode - color variants
   Surfaces (`.skeleton-card`) and the progress bar already follow the
   tokens (and therefore the theme). We only increase the contrast of the dark
   progress track so it remains visible on an elevated background.
   ════════════════════════════════════════════════════════════════════ */
:root[data-theme="dark"] .skeleton-card {
  background: var(--bg-elevated, #1c1c1e);
}
:root[data-theme="dark"] .app-flash[data-toast-autodismiss]::after {
  opacity: 0.9;
}