/* Beweging: levendig (stijl Rob, 16 okt 2026). Waarden en gedrag uit de
   mockup (beweging.css, effecten.css), selectors van de echte app.

   Alles staat binnen `prefers-reduced-motion: no-preference`: wie minder
   beweging vraagt, krijgt geen enkele van deze regels en dus direct de
   eindstand (ook js/beweging.js doet dan niets). De bestaande laadclips
   (css/laadclips.css) blijven zoals ze zijn.
   Niets hieronder is alleen via hover te zien: hover voegt alleen een tilt
   toe, en alleen waar hover bestaat (geen telefoon/tablet). Vlak: de tilt
   heeft geen schaduw. */

@media (prefers-reduced-motion: no-preference) {
  /* kaarten komen in 0,3 s op (6 px omhoog), elke volgende 45 ms later
     (--i zet js/beweging.js). `backwards`: de eindstand is gewoon de normale
     stijl, zodat de hover-tilt hieronder niet door de animatie wordt
     overschreven. */
  @keyframes opkomen {
    from {
      opacity: 0;
      transform: translateY(6px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }

  .iv2-kaart,
  .iv2-kamerkaart,
  .iv2-actieblok,
  .iv2-basis,
  .iv2-bord {
    animation: opkomen 0.3s ease backwards;
    animation-delay: calc(var(--i, 0) * 45ms);
  }

  /* licht en donker vloeien in 0,25 s */
  body,
  .grid-header,
  .iv2-filterbalk,
  .iv2-kaart,
  .iv2-kamerkaart,
  .iv2-actieblok,
  .iv2-basis,
  .iv2-bord,
  .iv2-tab,
  .iv2-filter,
  .iv2-schakel,
  .iv2-schakel button,
  .iv2-icoonknop,
  .btn,
  .tegel,
  .impact-band,
  .menu-drawer-body {
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
  }

  .iv2-kaart {
    transition: transform 0.18s ease, background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
  }

  .btn-primary {
    transition: transform 0.18s ease, filter 0.15s ease;
  }

  /* hover: kaart en hoofdknop tillen 2 px en 1 px, zonder schaduw (vlak) */
  @media (hover: hover) {
    .iv2-kaart:hover {
      transform: translateY(-2px);
    }

    .btn-primary:hover:not(:disabled):not([aria-disabled="true"]) {
      transform: translateY(-1px);
    }
  }

  /* de scorebalk-vulling schuift in 0,7 s van de normlijn (1/3 van de balk)
     naar zijn waarde; de eindwaarde is de inline breedte */
  @keyframes balk-schuif {
    from {
      width: 33.333%;
    }
  }

  .iv2-balk-vulling {
    animation: balk-schuif 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
  }

  /* "Nieuw" pulseert één keer (1,1 s). Een tijdelijke ring, geen schaduw-effect
     op de kaart zelf. */
  @keyframes puls {
    0% {
      box-shadow: 0 0 0 0 color-mix(in srgb, var(--keuze-bg) 55%, transparent);
    }
    100% {
      box-shadow: 0 0 0 12px transparent;
    }
  }

  .iv2-status.nieuw {
    animation: puls 1.1s ease-out 0.6s 1 backwards;
  }

  /* "Status en opmerking" en "Waarop is dit gebaseerd?" klappen in 0,35 s uit.
     Browsers zonder ::details-content klappen direct uit (de eindstand). */
  .iv2-kk-acties,
  .iv2-basis {
    interpolate-size: allow-keywords;
  }

  .iv2-kk-acties::details-content,
  .iv2-basis::details-content {
    block-size: 0;
    overflow: hidden;
    opacity: 0;
    transition: block-size 0.35s ease, opacity 0.25s ease, content-visibility 0.35s allow-discrete;
  }

  .iv2-kk-acties[open]::details-content,
  .iv2-basis[open]::details-content {
    block-size: auto;
    opacity: 1;
  }
}