/*
 * View Transitions
 *
 * CSS for the View Transitions API, enabling native-like animations
 * when navigating between pages or updating content via Turbo.
 *
 * Uses CSS custom properties from Tailwind theme for timing.
 */

/* ===== Panel Slide Animations ===== */

@keyframes slide-in-right {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slide-out-right {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

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

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

@keyframes scale-in {
  from {
    transform: scale(0.95);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes scale-out {
  from {
    transform: scale(1);
    opacity: 1;
  }
  to {
    transform: scale(0.95);
    opacity: 0;
  }
}

/* ===== View Transition Rules ===== */

/* Slide Panel transitions */
::view-transition-old(slide-panel) {
  animation: slide-out-right var(--transition-panel, 350ms) var(--ease-out, cubic-bezier(0, 0, 0.2, 1)) forwards;
}

::view-transition-new(slide-panel) {
  animation: slide-in-right var(--transition-panel, 350ms) var(--ease-out, cubic-bezier(0, 0, 0.2, 1)) forwards;
}

/* Panel backdrop fade */
::view-transition-old(panel-backdrop) {
  animation: fade-out var(--transition-normal, 200ms) var(--ease-default, cubic-bezier(0.4, 0, 0.2, 1)) forwards;
}

::view-transition-new(panel-backdrop) {
  animation: fade-in var(--transition-normal, 200ms) var(--ease-default, cubic-bezier(0.4, 0, 0.2, 1)) forwards;
}

/* Recipe card morph between library and slot */
::view-transition-group(recipe-card) {
  animation-duration: var(--transition-slow, 300ms);
  animation-timing-function: var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
}

::view-transition-old(recipe-card),
::view-transition-new(recipe-card) {
  /* Let the browser handle the crossfade and position interpolation */
  mix-blend-mode: normal;
}

/* Default page transitions - subtle fade */
::view-transition-old(root) {
  animation: fade-out var(--transition-fast, 150ms) var(--ease-default, cubic-bezier(0.4, 0, 0.2, 1)) forwards;
}

::view-transition-new(root) {
  animation: fade-in var(--transition-fast, 150ms) var(--ease-default, cubic-bezier(0.4, 0, 0.2, 1)) forwards;
}

/* ===== View Transition Name Utilities ===== */

/* Apply to elements that should animate during view transitions */
.vt-slide-panel {
  view-transition-name: slide-panel;
}

.vt-panel-backdrop {
  view-transition-name: panel-backdrop;
}

.vt-recipe-card {
  view-transition-name: recipe-card;
}

/* Dynamic recipe card names - use with inline style */
/* e.g., style="view-transition-name: recipe-123" */

/* ===== Reduced Motion ===== */

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation-duration: 0.01ms !important;
  }
}

/* ===== Utility Classes for Manual Animations ===== */

.animate-slide-in-right {
  animation: slide-in-right var(--transition-panel, 350ms) var(--ease-out, cubic-bezier(0, 0, 0.2, 1)) forwards;
}

.animate-slide-out-right {
  animation: slide-out-right var(--transition-panel, 350ms) var(--ease-out, cubic-bezier(0, 0, 0.2, 1)) forwards;
}

.animate-fade-in {
  animation: fade-in var(--transition-normal, 200ms) var(--ease-default, cubic-bezier(0.4, 0, 0.2, 1)) forwards;
}

.animate-fade-out {
  animation: fade-out var(--transition-normal, 200ms) var(--ease-default, cubic-bezier(0.4, 0, 0.2, 1)) forwards;
}

.animate-scale-in {
  animation: scale-in var(--transition-normal, 200ms) var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)) forwards;
}

.animate-scale-out {
  animation: scale-out var(--transition-normal, 200ms) var(--ease-default, cubic-bezier(0.4, 0, 0.2, 1)) forwards;
}

/* ===== Staggered Entry Animation ===== */

@keyframes stagger-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Apply to grid/list children for staggered entry effect */
.stagger-children > * {
  opacity: 0;
  animation: stagger-in var(--transition-slow, 300ms) var(--ease-out, cubic-bezier(0, 0, 0.2, 1)) forwards;
}

.stagger-children > *:nth-child(1) { animation-delay: 0ms; }
.stagger-children > *:nth-child(2) { animation-delay: 50ms; }
.stagger-children > *:nth-child(3) { animation-delay: 100ms; }
.stagger-children > *:nth-child(4) { animation-delay: 150ms; }
.stagger-children > *:nth-child(5) { animation-delay: 200ms; }
.stagger-children > *:nth-child(6) { animation-delay: 250ms; }
.stagger-children > *:nth-child(7) { animation-delay: 300ms; }
.stagger-children > *:nth-child(8) { animation-delay: 350ms; }
.stagger-children > *:nth-child(n+9) { animation-delay: 400ms; }

/* ===== Button Press Effect ===== */

.btn-press {
  transition: transform var(--transition-fast, 150ms) var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
}

.btn-press:active {
  transform: scale(0.95);
}

/* ===== Card Lift on Hover ===== */

.card-lift {
  transition: transform var(--transition-normal, 200ms) var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)),
              box-shadow var(--transition-normal, 200ms) var(--ease-default, cubic-bezier(0.4, 0, 0.2, 1));
}

.card-lift:hover {
  transform: translateY(-4px);
}