/* ============================================================================
   HeatPump Advisor — Bewegingstaal (Verkenning ronde 1-4)
   ============================================================================
   Eén set micro-animaties voor dashboard, rapport en succes-momenten. De
   web-tegenhanger van iOS' AnimationConfig: elke animatie hier heeft een
   Reduce-Motion-eindstand, zodat "uit" nooit "leeg" betekent.

   Namespace `hpa-` is verplicht: style.css heeft al eigen `shimmer`- en
   `float`-keyframes en die mogen we niet overschrijven.

   Laadvolgorde: ná tokens.css. Werkt zelfstandig (geen JS nodig) behalve de
   count-up, die js/hpa-motion.js aanstuurt.
   ========================================================================= */

/* ── Keyframes ───────────────────────────────────────────────────────── */

@keyframes hpa-shimmer      { 0%   { background-position: -200% 0 }
                              100% { background-position:  200% 0 } }

@keyframes hpa-pulse-dot    { 0%, 100% { opacity: 1;   transform: scale(1) }
                              50%      { opacity: .45; transform: scale(.8) } }

@keyframes hpa-ring-expand  { 0%   { transform: scale(.4); opacity: .6 }
                              100% { transform: scale(1.9); opacity: 0 } }

@keyframes hpa-draw-stroke  { to { stroke-dashoffset: 0 } }

@keyframes hpa-spin-fan     { to { transform: rotate(360deg) } }

@keyframes hpa-flow         { 0%   { offset-distance: 0%;   opacity: 0 }
                              8%   { opacity: 1 }
                              88%  { opacity: 1 }
                              100% { offset-distance: 100%; opacity: 0 } }

@keyframes hpa-float-y      { 0%, 100% { transform: translateY(0) }
                              50%      { transform: translateY(-10px) } }

@keyframes hpa-glow-pulse   { 0%, 100% { opacity: .5 }
                              50%      { opacity: 1 } }

@keyframes hpa-bar-grow     { from { transform: scaleX(0) }
                              to   { transform: scaleX(1) } }

@keyframes hpa-fade-up      { from { opacity: 0; transform: translateY(14px) }
                              to   { opacity: 1; transform: translateY(0) } }

@keyframes hpa-heat-wave    { 0%, 100% { transform: translateY(0);    opacity: .5 }
                              50%      { transform: translateY(-4px); opacity: 1 } }

/* ── Skeleton / laadstatus ───────────────────────────────────────────── */

.hpa-skeleton {
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg,
    var(--surface-1) 25%,
    var(--surface-3) 50%,
    var(--surface-1) 75%);
  background-size: 200% 100%;
  animation: hpa-shimmer 1.6s linear infinite;
}

.hpa-skeleton--tile { width: 2.375rem; height: 2.375rem; border-radius: var(--radius-xs); }
.hpa-skeleton--line { height: .6875rem; }
.hpa-skeleton--pill { height: 1.375rem; width: 4rem; border-radius: 999px; }

/* ── Statusdot met puls ──────────────────────────────────────────────
   Alleen op een status-drager (sync-pill). De dot draagt de rolkleur;
   `currentColor` volgt de pill zodat we geen tweede kleurbron nodig hebben.
   ------------------------------------------------------------------- */
.hpa-pulse-dot {
  width: .375rem;
  height: .375rem;
  border-radius: 50%;
  background: currentColor;
  flex: none;
  animation: hpa-pulse-dot 2s ease-in-out infinite;
}

/* ── Voortgangsbalk ──────────────────────────────────────────────────
   Groeit uit de linkerkant. Voortgang = brand-oranje, nooit groen
   (design-afspraken §1: groen betekent kláár).
   ------------------------------------------------------------------- */
.hpa-bar {
  height: .4375rem;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
}

.hpa-bar__fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-orange), var(--accent-orange-deep));
  transform-origin: left;
  animation: hpa-bar-grow 1.1s cubic-bezier(.22, 1, .36, 1) both .2s;
}

/* ── Inkomen (kaarten, regels) ───────────────────────────────────────
   Wordt door js/hpa-motion.js aangezet zodra het element in beeld komt.
   Zonder JS blijft de eindstand staan — geen onzichtbare content.
   ------------------------------------------------------------------- */
.hpa-fade-up[data-hpa-reveal="pending"] { opacity: 0 }

.hpa-fade-up[data-hpa-reveal="in"] {
  animation: hpa-fade-up .5s ease both;
  animation-delay: var(--hpa-delay, 0s);
}

/* ── Succes-moment ───────────────────────────────────────────────────
   Check tekent zich in ~0,6s, met twee zachte ringen i.p.v. confetti.
   Groen = klaar (rolkleur). Op iOS gaat hier HapticManager.success() bij.
   ------------------------------------------------------------------- */
.hpa-success {
  position: relative;
  width: 6rem;
  height: 6rem;
  flex: none;
}

.hpa-success__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: var(--bw-strong) solid color-mix(in srgb, var(--success-color) 45%, transparent);
  animation: hpa-ring-expand 1.4s cubic-bezier(.22, 1, .36, 1) both;
}

.hpa-success__ring:nth-child(1) { animation-delay: .45s }
.hpa-success__ring:nth-child(2) { animation-delay: .65s }

.hpa-success__disc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--success-color) 10%, transparent);
  border: var(--bw-default) solid color-mix(in srgb, var(--success-color) 35%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: hpa-fade-up .4s ease both;
}

/* De cirkel en het vinkje tekenen zich met stroke-dash. De dash-lengtes
   staan in de SVG zelf (126 voor de r=20-cirkel, 28 voor het vinkje). */
.hpa-success__circle { animation: hpa-draw-stroke .55s cubic-bezier(.22, 1, .36, 1) both .15s }
.hpa-success__check  { animation: hpa-draw-stroke .45s cubic-bezier(.22, 1, .36, 1) both .6s }

/* ── Warmtestroom-illustratie ────────────────────────────────────────
   Oranje = warmte-aanvoer, cyaan = retour (koud). Zelfde taal als de UI.
   ------------------------------------------------------------------- */
.hpa-flow-glow  { animation: hpa-glow-pulse 4s ease-in-out infinite }
.hpa-flow-fan   { animation: hpa-spin-fan 3.2s linear infinite; transform-box: fill-box; transform-origin: center }
.hpa-flow-wave  { animation: hpa-heat-wave 2.6s ease-in-out infinite }
.hpa-flow-badge { animation: hpa-float-y 5s ease-in-out infinite; animation-delay: var(--hpa-delay, 0s) }

.hpa-flow-particle {
  position: absolute;
  width: .4375rem;
  height: .4375rem;
  border-radius: 50%;
  offset-path: var(--hpa-path);
  animation: hpa-flow var(--hpa-duration, 2.4s) linear infinite;
  animation-delay: var(--hpa-delay, 0s);
}

.hpa-flow-particle--warm {
  background: var(--accent-orange);
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent-orange) 80%, transparent);
}

.hpa-flow-particle--return {
  width: .375rem;
  height: .375rem;
  background: color-mix(in srgb, var(--accent-cyan) 75%, transparent);
  box-shadow: 0 0 7px color-mix(in srgb, var(--accent-cyan) 60%, transparent);
}

/* ── Getallen ────────────────────────────────────────────────────────
   Elk meetbaar getal krijgt tabular-nums, zodat een count-up niet
   staat te wiebelen (design-afspraken §3: cijfers zijn de helden).
   ------------------------------------------------------------------- */
.hpa-countup {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* ── S11b-5 B0: gedeelde laag trein B ────────────────────────────────
   Opt-in zoals de A0b-laag: alles in dit blok staat binnen
   prefers-reduced-motion: no-preference en achter
   :root:not([data-beweging="rustig"]). Reduce Motion en "Rustig" geven dus
   0 animaties en 0 overgangen (budget B7); de Rustig-regel in
   hpa-components.css (body.app-shell *) dekt ze daarnaast al. Eindige
   animaties eindigen met fill backwards in de basisstijl, zodat ze na
   afloop uit getAnimations() verdwijnen (budget B3).
     hpa-pop-nieuw  nieuw item in een lijst (moment 15), 0,52 s --ease-pop
     hpa-fade-swap  moduswissel (offertes), 0,26 s
     hpa-glans      lichtstreep over een klikbare kaart (moment 13), 1 s
   ------------------------------------------------------------------- */
@keyframes hpa-pop-nieuw { from { opacity: 0; transform: scale(0.92); } }
@keyframes hpa-fade-swap { from { opacity: 0; transform: translateY(-6px); } }
@keyframes hpa-glans     { from { transform: translateX(-110%) skewX(-18deg); }
                           to   { transform: translateX(110%) skewX(-18deg); } }

/* Glans op een klikbare kaart (motion-addendum §2a): een diagonale streep die
   bij aanwijzen één keer over de kaart gaat. In rust staat hij naast de kaart
   en valt hij weg door overflow: hidden, dus zonder beweging is er niets. */
.hpa-card--klikbaar {
  overflow: hidden;
  isolation: isolate;
}
.hpa-card--klikbaar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--on-dark-scrim) 16%, transparent) 50%, transparent 70%);
  transform: translateX(-110%) skewX(-18deg);
}

@media (prefers-reduced-motion: no-preference) {
  /* Schakelaar: de knop schuift (de kleur van de baan springt). */
  :root:not([data-beweging="rustig"]) .hpa-schakelaar__baan::after {
    transition: transform var(--duration-quick) var(--ease-out);
  }

  /* De pagina zet .hpa-pop-nieuw op een item dat net is toegevoegd, en
     .hpa-fade-swap op de inhoud die bij een moduswissel binnenkomt. */
  :root:not([data-beweging="rustig"]) .hpa-pop-nieuw {
    animation: hpa-pop-nieuw 0.52s var(--ease-pop) backwards;
  }
  :root:not([data-beweging="rustig"]) .hpa-fade-swap {
    animation: hpa-fade-swap 0.26s var(--ease-out) backwards;
  }

  @media (hover: hover) and (pointer: fine) {
    :root:not([data-beweging="rustig"]) .hpa-card--klikbaar:hover::before,
    :root:not([data-beweging="rustig"]) .hpa-card--klikbaar:focus-visible::before {
      animation: hpa-glans 1s var(--ease-glans) backwards;
    }
  }
}

/* ── Reduce Motion ───────────────────────────────────────────────────
   Bewust gescoped op de eigen klassen: een globale `*`-reset zou de
   bestaande, al afgestemde reduced-motion-blokken in dashboard.css,
   handleiding.css en index-homepage.css overrulen.

   Regel: animaties uit, eindstand aan. Alles wat zichzelf "tekent"
   (stroke-dash) springt op voltooid; wat pulseert of zweeft staat stil.
   ------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hpa-skeleton,
  .hpa-pulse-dot,
  .hpa-bar__fill,
  .hpa-fade-up[data-hpa-reveal="in"],
  .hpa-success__disc,
  .hpa-success__circle,
  .hpa-success__check,
  .hpa-flow-glow,
  .hpa-flow-fan,
  .hpa-flow-wave,
  .hpa-flow-badge,
  .hpa-flow-particle,
  .hpa-pop-nieuw,
  .hpa-fade-swap,
  .hpa-card--klikbaar::before {
    animation: none !important;
  }

  /* Eindstand forceren waar "geen animatie" anders onzichtbaar is. */
  .hpa-fade-up[data-hpa-reveal="pending"],
  .hpa-fade-up[data-hpa-reveal="in"] { opacity: 1; transform: none }

  .hpa-bar__fill { transform: scaleX(1) }

  .hpa-success__circle,
  .hpa-success__check { stroke-dashoffset: 0 }

  /* Ringen zijn puur decoratief: bij Reduce Motion vervallen ze helemaal,
     zodat alleen het statische vinkje overblijft. */
  .hpa-success__ring { display: none }

  /* Deeltjes langs een pad zijn zonder beweging betekenisloos. */
  .hpa-flow-particle { display: none }

  .hpa-skeleton { background: var(--surface-2) }
}