/* anim.css — light, shared motion layer for all SOS Imprévus pages.
   Everything is gated behind prefers-reduced-motion and has a JS safety net,
   so content is never permanently hidden. */

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: no-preference) {
  /* Scroll reveal: blocks fade + rise into place as they enter the viewport. */
  .sos-reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .65s cubic-bezier(.2,.7,.2,1), transform .65s cubic-bezier(.2,.7,.2,1);
    will-change: opacity, transform;
  }
  .sos-reveal.sos-in {
    opacity: 1;
    transform: none;
  }

  /* Gentle continuous float for decorative accents tagged by JS. */
  @keyframes sosFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
  }
  .sos-float { animation: sosFloat 7s ease-in-out infinite; }
  .sos-float-slow { animation: sosFloat 11s ease-in-out infinite; }
}

/* ─── Hover layer ─────────────────────────────────────────────────────────
   Adds life on pointer devices only. Card components keep their own hover
   (higher specificity wins); we polish everything else: CTAs, pills, nav,
   logo, form inputs, icon nudges. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {

  /* Base transitions so any hover change eases instead of snapping. */
  a[href], button, [role="button"], select, summary,
  [class$="-pill"], [class$="-toctab"], [class$="-chip"], [class$="-sort"] {
    transition: transform .18s cubic-bezier(.2,.7,.2,1),
                box-shadow .18s ease, filter .18s ease,
                background-color .18s ease, color .18s ease, border-color .18s ease;
  }

  /* Inline-styled CTAs (links & buttons with no class) lift + brighten. */
  a[href]:not([class]):hover {
    transform: translateY(-2px);
    filter: brightness(1.05) saturate(1.03);
  }
  a[href]:not([class]):active { transform: translateY(0); }

  /* Standalone buttons (skip card-buttons, sidebar rows, TOC links — they
     already animate). */
  button:not([class*="card"]):not([class*="srow"]):not([class*="toclink"]):not([class*="toctab"]):hover,
  [role="button"]:not([class*="card"]):not([class*="fav"]):hover {
    transform: translateY(-2px);
    filter: brightness(1.04);
  }
  button:not([class*="card"]):not([class*="srow"]):not([class*="toclink"]):active {
    transform: translateY(0) scale(.99);
  }

  /* Pills float a touch and gain a soft shadow. */
  [class$="-pill"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(20, 30, 50, 0.14);
  }

  /* Small chips / tabs / sort selects lift slightly. */
  [class$="-toctab"]:hover, [class$="-chip"]:hover, [class$="-sort"]:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(20, 30, 50, 0.12);
  }

  /* Survol du menu : simple changement de couleur (géré par chaque page),
     comme sur notices.html. Le soulignement animé [class$="-nav"]::after a
     été retiré : il visait aussi les conteneurs .bp-nav/.cu-nav/.hdr-nav/.ft-nav
     (classe finissant par "-nav"), créant une ligne pleine largeur sous tout le
     menu au survol — un "surlignement" incohérent d'une page à l'autre. */

  /* Breadcrumb links: slight slide. */
  [class$="-crumb"]:hover { transform: translateX(2px); }

  /* Icons inside hovered CTAs nudge in the reading direction. */
  a[href]:not([class]):hover svg:last-child,
  button:not([class*="card"]):not([class*="srow"]):hover svg:last-child {
    transform: translateX(2px);
  }
  a svg, button svg { transition: transform .18s cubic-bezier(.2,.7,.2,1); }

  /* Logo (class-less anchor) gets a gentle pop via the rule above; nudge wordmark. */
  header a[href]:not([class]):hover { filter: none; transform: translateY(-1px); }
}