/**
 * CelRelay Keyframe Animations and View Transitions
 */

/* Detail Modal Animations */
@keyframes detailModalFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes detailModalCardPop {
  0% {
    opacity: 0;
    transform: scale(0.88) translateY(24px);
  }
  60% {
    opacity: 1;
    transform: scale(1.02) translateY(-2px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

#detail-modal.flex {
  animation: detailModalFadeIn 240ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

#detail-modal.flex .detail-modal-card {
  animation: detailModalCardPop 320ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  will-change: transform, opacity;
  transform-origin: center center;
}

/* Gallery Card Pop-In & Stagger Entrance Animation */
@keyframes cardPopIn {
  0% {
    opacity: 0;
    transform: scale(0.85) translateY(14px);
  }
  70% {
    opacity: 1;
    transform: scale(1.02) translateY(-2px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* New Gallery Creations Emerald Entrance */
@keyframes newCreationPop {
  0% {
    opacity: 0;
    transform: scale(0.92) translateY(-14px);
    box-shadow: 0 0 0 0 rgba(0, 166, 119, 0);
    border-color: #00a677;
  }
  40% {
    opacity: 1;
    transform: scale(1.02) translateY(-2px);
    box-shadow: 0 0 26px 4px rgba(0, 166, 119, 0.65);
    border-color: #00a677;
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
    box-shadow: 0 0 0 0 rgba(0, 166, 119, 0);
    border-color: #26262d;
  }
}

.card-new-arrival {
  animation: newCreationPop 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Seamless Page & View Transitions (Canvas <-> Gallery) */
@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.12s;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

body {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.1s ease-out, transform 0.1s ease-out;
}

body.page-leaving {
  opacity: 0 !important;
  transform: scale(0.995) !important;
  pointer-events: none;
}

/* Timeline Frame Drag and Drop Indicator Pulse */
@keyframes pulse-drop-indicator {
  0%, 100% {
    opacity: 1;
    transform: scaleY(1);
  }
  50% {
    opacity: 0.7;
    transform: scaleY(1.08);
  }
}