/**
 * DWC shared motion system — transform/opacity only in loops.
 * Load after theme CSS; one pattern per element.
 */

:root {
  --anim-duration-enter: 0.42s;
  --anim-duration-fast: 0.28s;
  --anim-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --anim-stagger-step: 50ms;
  --anim-stagger-max: 10;
}

/* --------------------------------------------------------------------------
   fade-in-up
   -------------------------------------------------------------------------- */

@keyframes dwc-fade-in-up {
  from {
    opacity: 0;
    transform: translate3d(0, 12px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.anim-fade-in-up {
  animation: dwc-fade-in-up var(--anim-duration-enter) var(--anim-ease-out) both;
}

/* --------------------------------------------------------------------------
   stagger-in (direct children, capped at 10)
   -------------------------------------------------------------------------- */

.anim-stagger > * {
  animation: dwc-fade-in-up var(--anim-duration-enter) var(--anim-ease-out) both;
}

.anim-stagger > *:nth-child(1)  { animation-delay: calc(var(--anim-stagger-step) * 0); }
.anim-stagger > *:nth-child(2)  { animation-delay: calc(var(--anim-stagger-step) * 1); }
.anim-stagger > *:nth-child(3)  { animation-delay: calc(var(--anim-stagger-step) * 2); }
.anim-stagger > *:nth-child(4)  { animation-delay: calc(var(--anim-stagger-step) * 3); }
.anim-stagger > *:nth-child(5)  { animation-delay: calc(var(--anim-stagger-step) * 4); }
.anim-stagger > *:nth-child(6)  { animation-delay: calc(var(--anim-stagger-step) * 5); }
.anim-stagger > *:nth-child(7)  { animation-delay: calc(var(--anim-stagger-step) * 6); }
.anim-stagger > *:nth-child(8)  { animation-delay: calc(var(--anim-stagger-step) * 7); }
.anim-stagger > *:nth-child(9)  { animation-delay: calc(var(--anim-stagger-step) * 8); }
.anim-stagger > *:nth-child(10) { animation-delay: calc(var(--anim-stagger-step) * 9); }
.anim-stagger > *:nth-child(n + 11) { animation-delay: calc(var(--anim-stagger-step) * 9); }

/* --------------------------------------------------------------------------
   shine-sweep (featured / winner / premium)
   -------------------------------------------------------------------------- */

@keyframes dwc-shine-sweep {
  0% {
    transform: translate3d(-120%, 0, 0);
    opacity: 0;
  }

  18% {
    opacity: 0.35;
  }

  50% {
    transform: translate3d(120%, 0, 0);
    opacity: 0.12;
  }

  100% {
    transform: translate3d(120%, 0, 0);
    opacity: 0;
  }
}

.anim-shine-sweep {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.anim-shine-sweep::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 38%,
    rgba(255, 255, 255, 0.22) 50%,
    transparent 62%
  );
  transform: translate3d(-120%, 0, 0);
  animation: dwc-shine-sweep 3.6s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   pulse-soft (live / pending / up-next)
   -------------------------------------------------------------------------- */

@keyframes dwc-pulse-soft {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.88;
    transform: scale(1.03);
  }
}

.anim-pulse-soft {
  animation: dwc-pulse-soft 3s ease-in-out infinite;
}

/* Live schedule — pulse via status class hooks (poll-safe, no entrance anim) */
.live-schedule-entry__status-badge--on-stage,
.live-schedule-entry__status-badge--up-next {
  animation: dwc-pulse-soft 3s ease-in-out infinite;
}

.live-schedule-mobile-card__section--on_stage:not(.live-schedule-mobile-card__section--empty) .live-schedule-mobile-card__status,
.live-schedule-mobile-card__section--up_next:not(.live-schedule-mobile-card__section--empty) .live-schedule-mobile-card__status {
  animation: dwc-pulse-soft 3s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   hover-lift (clickable cards / rows)
   -------------------------------------------------------------------------- */

.anim-hover-lift {
  transition: transform 0.2s var(--anim-ease-out), filter 0.2s ease;
  will-change: transform;
}

.anim-hover-lift:hover,
.anim-hover-lift:focus-visible {
  transform: translate3d(0, -2px, 0);
  filter: brightness(1.02);
}

.anim-hover-lift:active {
  transform: translate3d(0, 0, 0);
  transition-duration: 0.1s;
}

/* --------------------------------------------------------------------------
   skeleton-load (AJAX filter containers)
   -------------------------------------------------------------------------- */

@keyframes dwc-skeleton-shimmer {
  0% {
    transform: translate3d(-100%, 0, 0);
  }

  100% {
    transform: translate3d(100%, 0, 0);
  }
}

.anim-skeleton-load {
  position: relative;
  min-height: 12rem;
  overflow: hidden;
  border-radius: 12px;
}

.anim-skeleton-load::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.04) 0%,
    rgba(255, 255, 255, 0.14) 50%,
    rgba(255, 255, 255, 0.04) 100%
  );
  transform: translate3d(-100%, 0, 0);
  animation: dwc-skeleton-shimmer 1.2s ease-in-out infinite;
  pointer-events: none;
}

.anim-skeleton-load > * {
  visibility: hidden;
}

/* --------------------------------------------------------------------------
   toast-slide
   -------------------------------------------------------------------------- */

@keyframes dwc-toast-slide-in {
  from {
    opacity: 0;
    transform: translate3d(0, -16px, 0) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

.dwc-toast .dwc-toast-panel {
  opacity: 0;
  transform: translate3d(0, -16px, 0) scale(0.98);
}

.dwc-toast.show .dwc-toast-panel {
  animation: dwc-toast-slide-in var(--anim-duration-fast) var(--anim-ease-out) forwards;
}

/* --------------------------------------------------------------------------
   modal-scale (Bootstrap dialogbox modals)
   -------------------------------------------------------------------------- */

.modal.dialogbox .modal-dialog {
  opacity: 0;
  transform: scale(0.96);
  transition:
    transform var(--anim-duration-fast) var(--anim-ease-out),
    opacity var(--anim-duration-fast) var(--anim-ease-out);
}

.modal.dialogbox.show .modal-dialog {
  opacity: 1;
  transform: scale(1);
}

/* --------------------------------------------------------------------------
   validation shake (forms — one-shot)
   -------------------------------------------------------------------------- */

@keyframes dwc-field-shake {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  20%,
  60% {
    transform: translate3d(-4px, 0, 0);
  }

  40%,
  80% {
    transform: translate3d(4px, 0, 0);
  }
}

.anim-field-shake,
.dwc-field:has(> .dwc-field-error) {
  animation: dwc-field-shake 0.45s ease both;
}

.dancer-entry-card__pending {
  animation: dwc-pulse-soft 3s ease-in-out infinite;
}

.dancer-media-entry-card__status--processing {
  animation: dwc-pulse-soft 3s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   prefers-reduced-motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .anim-fade-in-up,
  .anim-stagger > *,
  .anim-shine-sweep::after,
  .anim-pulse-soft,
  .live-schedule-entry__status-badge--on-stage,
  .live-schedule-entry__status-badge--up-next,
  .live-schedule-mobile-card__section--on_stage:not(.live-schedule-mobile-card__section--empty) .live-schedule-mobile-card__status,
  .live-schedule-mobile-card__section--up_next:not(.live-schedule-mobile-card__section--empty) .live-schedule-mobile-card__status,
  .dancer-entry-card__pending,
  .dancer-media-entry-card__status--processing,
  .anim-field-shake,
  .dwc-field:has(> .dwc-field-error),
  .dwc-toast.show .dwc-toast-panel {
    animation: none !important;
  }

  .anim-hover-lift {
    transition: none !important;
  }

  .anim-hover-lift:hover,
  .anim-hover-lift:focus-visible,
  .anim-hover-lift:active {
    transform: none !important;
    filter: none !important;
  }

  .anim-skeleton-load::before {
    animation: none !important;
    opacity: 0.35;
    transform: none;
  }

  .modal.dialogbox .modal-dialog {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .dwc-toast .dwc-toast-panel {
    opacity: 1 !important;
    transform: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .anim-fade-in-up,
  .anim-stagger > * {
    opacity: 1 !important;
    transform: none !important;
  }

  .anim-shine-sweep::after {
    content: none !important;
  }

  .anim-skeleton-load::before {
    opacity: 0 !important;
  }

  .anim-skeleton-load > * {
    visibility: visible !important;
  }
}