/* ==========================================================================
   Alembic Transitions — Shared Animation Class Library
   Loaded globally via _app.html. All values reference CSS custom property
   tokens defined in style.css :root. Never hardcode values here.

   Namespace: .al-enter-*, .al-exit-*, .al-flash-*, .al-stagger-*,
              .al-bar-fill, .al-dot-transition, .al-badge-transition,
              .al-celebrate, .check, .flash
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Entrance Keyframes + Classes
   -------------------------------------------------------------------------- */
@keyframes al-enter-row {
  from {
    opacity: 0;
    transform: translateY(-8px) scaleY(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scaleY(1);
  }
}

@keyframes al-enter-card {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes al-enter-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes al-enter-scale {
  from {
    opacity: 0;
    transform: scale(0.85);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.al-enter-row {
  animation: al-enter-row 300ms var(--spring) both;
}

.al-enter-card {
  animation: al-enter-card 350ms var(--spring) both;
}

.al-enter-fade {
  animation: al-enter-fade var(--duration-enter) var(--ease-out) both;
}

.al-enter-scale {
  animation: al-enter-scale 250ms var(--spring) both;
}


/* --------------------------------------------------------------------------
   2. Exit Keyframes + Classes
   -------------------------------------------------------------------------- */
@keyframes al-exit-row {
  from {
    opacity: 1;
    transform: translateY(0) scaleY(1);
  }
  to {
    opacity: 0;
    transform: translateY(-6px) scaleY(0.9);
  }
}

@keyframes al-exit-card {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(8px) scale(0.97);
  }
}

@keyframes al-exit-fade {
  from { opacity: 1; }
  to   { opacity: 0; }
}

.al-exit-row {
  animation: al-exit-row var(--duration-exit) var(--ease-in) both;
}

.al-exit-card {
  animation: al-exit-card var(--duration-exit) var(--ease-in) both;
}

.al-exit-fade {
  animation: al-exit-fade var(--duration-exit) var(--ease-in) both;
}


/* --------------------------------------------------------------------------
   3. Flash Keyframes + Classes
   -------------------------------------------------------------------------- */
@keyframes al-flash-success {
  from { background-color: var(--color-green-bg); }
  to   { background-color: transparent; }
}

@keyframes al-flash-error {
  from { background-color: var(--color-red-bg); }
  to   { background-color: transparent; }
}

@keyframes al-flash-update {
  from { background-color: var(--color-blue-50); }
  to   { background-color: transparent; }
}

@keyframes al-flash-amber {
  from { background-color: var(--color-amber-bg); }
  to   { background-color: transparent; }
}

.al-flash-success {
  animation: al-flash-success 1.5s var(--ease-out) forwards;
}

.al-flash-error {
  animation: al-flash-error 1.5s var(--ease-out) forwards;
}

.al-flash-update {
  animation: al-flash-update 1.5s var(--ease-out) forwards;
}

.al-flash-amber {
  animation: al-flash-amber 1.5s var(--ease-out) forwards;
}

/* Backward-compat flash alias (formerly used by the removed event-panel.js) */
.flash {
  animation: al-flash-update 1.5s var(--ease-out) forwards;
}


/* --------------------------------------------------------------------------
   4. Stagger Utility
   -------------------------------------------------------------------------- */
.al-stagger-1  { animation-delay:  40ms; }
.al-stagger-2  { animation-delay:  80ms; }
.al-stagger-3  { animation-delay: 120ms; }
.al-stagger-4  { animation-delay: 160ms; }
.al-stagger-5  { animation-delay: 200ms; }
.al-stagger-6  { animation-delay: 240ms; }
.al-stagger-7  { animation-delay: 280ms; }
.al-stagger-8  { animation-delay: 320ms; }
.al-stagger-9  { animation-delay: 360ms; }
.al-stagger-10 { animation-delay: 400ms; }
.al-stagger-11 { animation-delay: 440ms; }
.al-stagger-12 { animation-delay: 480ms; }


/* --------------------------------------------------------------------------
   5. Persistent Transitions (apply once to long-lived elements)
   -------------------------------------------------------------------------- */
.al-bar-fill {
  transition: width 500ms var(--ease-out), background-color 600ms var(--ease-out);
}

.al-dot-transition {
  transition: background 300ms var(--ease-out);
}

.al-badge-transition {
  transition: background var(--duration-enter) var(--ease-out),
              color var(--duration-enter) var(--ease-out),
              border-color var(--duration-enter) var(--ease-out);
}


/* --------------------------------------------------------------------------
   6. Celebration
   -------------------------------------------------------------------------- */
@keyframes al-celebrate {
  0%   { transform: scale(1);    box-shadow: 0 0 0 0 transparent; }
  50%  { transform: scale(1.02); box-shadow: 0 0 12px 2px var(--color-green-600); }
  100% { transform: scale(1);    box-shadow: 0 0 0 0 transparent; }
}

.al-celebrate {
  animation: al-celebrate 600ms var(--spring);
}


/* --------------------------------------------------------------------------
   7. Checkbox Animations
   -------------------------------------------------------------------------- */
@keyframes check-pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.check {
  transition: transform var(--duration-exit) var(--spring),
              background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}

.check.just-checked {
  animation: check-pop 250ms var(--spring);
}

.check svg polyline {
  stroke-dasharray: 16;
  stroke-dashoffset: 16;
  transition: stroke-dashoffset var(--duration-enter) var(--ease-out);
}

.check.checked svg polyline {
  stroke-dashoffset: 0;
}


/* --------------------------------------------------------------------------
   8. Reduced Motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  [class*="al-enter-"],
  [class*="al-exit-"],
  [class*="al-flash-"],
  [class*="al-stagger-"],
  .al-celebrate,
  .check.just-checked,
  .flash {
    animation: none !important;
  }

  .al-bar-fill,
  .al-dot-transition,
  .al-badge-transition,
  .check,
  .check svg polyline {
    transition: none !important;
  }
}