/* ecount-customer-portal — Bewegung. Port aus docs/mockups/src/mockup.css (Motion-Block).
   Alle Dauern und Kurven aus den Tokens in portal.css. Technik-Leiter Stufe 0:
   nur CSS-Transitions/Keyframes und <details>, keine Bibliothek.
   Reduced-Motion-Vertrag: Dauern 1 ms UND Keyframes ohne Transform — Bewegung wird Ein-/Ausblendung. */

@keyframes ecp-rise { from { opacity: 0; translate: 0 7px; } to { opacity: 1; translate: 0 0; } }
@keyframes ecp-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ecp-pop { from { opacity: 0; translate: 0 4px; } to { opacity: 1; translate: 0 0; } }
@keyframes ecp-rail { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes ecp-dot { from { opacity: 0; transform: translateY(-50%) scale(.3); } to { opacity: 1; transform: translateY(-50%) scale(1); } }
@keyframes ecp-star-pulse { 0% { scale: 1; } 45% { scale: 1.3; } 100% { scale: 1; } }
@keyframes ecp-spin { to { transform: rotate(360deg); } }
@keyframes ecp-check { from { opacity: 0; scale: .5; } to { opacity: 1; scale: 1; } }
@keyframes ecp-shimmer { to { background-position: -200% 0; } }

.ecp-view:not([hidden]) > * { animation: ecp-rise var(--t-move) var(--e-out) both; }
.ecp-grid > .ecp-product { animation: ecp-rise var(--t-quick) var(--e-out) both; animation-delay: calc(var(--i, 0) * 30ms); }
.ecp-grid > .ecp-product:nth-child(1) { --i: 0; } .ecp-grid > .ecp-product:nth-child(2) { --i: 1; } .ecp-grid > .ecp-product:nth-child(3) { --i: 2; }
.ecp-grid > .ecp-product:nth-child(4) { --i: 3; } .ecp-grid > .ecp-product:nth-child(5) { --i: 4; } .ecp-grid > .ecp-product:nth-child(n+6) { --i: 5; }
.ecp-panel:not([hidden]) { animation: ecp-fade var(--t-quick) var(--e-out) both; }
.ecp-search__panel:not([hidden]) { animation: ecp-pop var(--t-quick) var(--e-out) both; }
.ecp-versions[open] .ecp-versions__list::before { animation: ecp-rail var(--t-move) var(--e-out) both; }
.ecp-versions[open] .ecp-versions__row { animation: ecp-fade var(--t-quick) var(--e-out) both; animation-delay: calc(var(--i, 0) * 60ms); }
.ecp-versions[open] .ecp-versions__row::before { animation: ecp-dot var(--t-quick) var(--e-out) both; animation-delay: calc(var(--i, 0) * 60ms + 60ms); }
.ecp-versions__row:nth-child(1) { --i: 0; } .ecp-versions__row:nth-child(2) { --i: 1; } .ecp-versions__row:nth-child(3) { --i: 2; }
.ecp-versions__row:nth-child(4) { --i: 3; } .ecp-versions__row:nth-child(n+5) { --i: 4; }
.ecp-star.is-pulse svg { animation: ecp-star-pulse var(--t-quick) var(--e-out); }

@supports (interpolate-size: allow-keywords) {
  .ecp { interpolate-size: allow-keywords; }
  .ecp-versions::details-content { block-size: 0; overflow: clip; transition: block-size var(--t-move) var(--e-in-out), content-visibility var(--t-move) allow-discrete; }
  .ecp-versions[open]::details-content { block-size: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .ecp { --t-instant: 1ms; --t-quick: 1ms; --t-move: 1ms; }
  @keyframes ecp-rise { from { opacity: 0; } to { opacity: 1; } }
  @keyframes ecp-pop { from { opacity: 0; } to { opacity: 1; } }
  @keyframes ecp-dot { from { opacity: 0; transform: translateY(-50%); } to { opacity: 1; transform: translateY(-50%); } }
  @keyframes ecp-star-pulse { from { opacity: 1; } to { opacity: 1; } }
  @keyframes ecp-rail { from { opacity: 0; transform: scaleY(1); } to { opacity: 1; transform: scaleY(1); } }
  @keyframes ecp-check { from { opacity: 0; } to { opacity: 1; } }
  .ecp-grid > .ecp-product, .ecp-versions[open] .ecp-versions__row, .ecp-versions[open] .ecp-versions__row::before { animation-delay: 0ms; }
  .ecp-btn.is-busy::after { animation: none; border-top-color: currentColor; }
  .ecp-skel span { animation: none; }
}