/*
 * Foundation - Animations
 * Keyframes, loading states, and Turbo Frame styles
 *
 * Following Rails conventions:
 * - Performance-optimized animations
 * - Accessible motion preferences
 * - Turbo Frame integration
 */

/* View Transitions - Universal Zoom Effect */
/* Simple, consistent zoom-in transition for all page navigations */

/* Give main content a transition name */
.app-content {
  view-transition-name: main-content;
  /* Prevent flash by creating stacking context */
  isolation: isolate;
  /* GPU layer for smoother transitions */
  transform: translateZ(0);
}

/* Keep sidebar, bottom nav, and content header static during transitions */
.sidebar {
  view-transition-name: sidebar;
}

.nav {
  view-transition-name: nav;
}

.session-nav {
  view-transition-name: session-nav;
}

/* Static UI elements: hide old, snap new in */
::view-transition-old(sidebar),
::view-transition-old(nav),
::view-transition-old(mobile-topbar),
::view-transition-old(session-nav) {
  animation: none;
  opacity: 0;
}

::view-transition-new(sidebar),
::view-transition-new(nav),
::view-transition-new(mobile-topbar),
::view-transition-new(session-nav) {
  animation: none;
}

/* Universal page transition - simple fade */
::view-transition-old(main-content) {
  animation: pageFadeOut 200ms ease-in forwards;
}

::view-transition-new(main-content) {
  animation: pageFadeIn 220ms ease-out backwards;
}

/* Same page navigation - no animation */
html[data-turbo-visit-direction="none"]::view-transition-old(main-content),
html[data-turbo-visit-direction="none"]::view-transition-new(main-content) {
  animation: none;
}

/* Smooth crossfade blending */
::view-transition-group(main-content) {
  background: var(--bg);
}

@keyframes pageFadeOut {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.98); }
}

@keyframes pageFadeIn {
  from { opacity: 0; transform: scale(1.01); }
  to   { opacity: 1; transform: scale(1); }
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(main-content),
  ::view-transition-new(main-content) {
    animation: none;
  }
}

/* Turbo Progress Bar - Shows during page navigation */
.turbo-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: var(--accent);
  z-index: 10001;
  box-shadow: none;
  transition: width 300ms ease-out, opacity 150ms 150ms ease-in;
  transform: translateZ(0);
  /* Respect safe areas on notched devices */
  margin-left: var(--safe-inset-left);
  margin-right: var(--safe-inset-right);
}

/* Animation keyframes */
@keyframes fadeInUp {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  .panel-content,
  .modal-content {
    transition: none !important;
  }

  .panel-backdrop {
    transition: none !important;
  }
}

/* Turbo Frame Styles */
turbo-frame {
  display: block;
}

/* Loading states */
.loading {
  opacity: 0.6;
  pointer-events: none;
}

/* Spinner Animation - CSS-only animated spinner */
@keyframes submitting {
  0%    { -webkit-mask-position: 0% 0%,   50% 0%,   100% 0% }
  12.5% { -webkit-mask-position: 0% 50%,  50% 0%,   100% 0% }
  25%   { -webkit-mask-position: 0% 100%, 50% 50%,  100% 0% }
  37.5% { -webkit-mask-position: 0% 100%, 50% 100%, 100% 50% }
  50%   { -webkit-mask-position: 0% 100%, 50% 100%, 100% 100% }
  62.5% { -webkit-mask-position: 0% 50%,  50% 100%, 100% 100% }
  75%   { -webkit-mask-position: 0% 0%,   50% 50%,  100% 100% }
  87.5% { -webkit-mask-position: 0% 0%,   50% 0%,   100% 50% }
  100%  { -webkit-mask-position: 0% 0%,   50% 0%,   100% 0% }
}

/* Accessibility improvements */
.btn:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}