/*
 * 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-main {
  view-transition-name: main-content;
  /* Prevent flash by creating stacking context */
  isolation: isolate;
  /* GPU layer for smoother transitions */
  transform: translateZ(0);
}

/* Keep navigation static during transitions */
.nav {
  view-transition-name: nav;
}

/* Disable nav animation */
::view-transition-old(nav),
::view-transition-new(nav) {
  animation: none;
}

/* Universal page transition - simple zoom in */
html[data-turbo-visit-direction="forward"]::view-transition-old(main-content),
::view-transition-old(main-content) {
  animation: fadeOutZoom 0.15s ease-in forwards;
}

html[data-turbo-visit-direction="forward"]::view-transition-new(main-content),
::view-transition-new(main-content) {
  animation: fadeInZoom 0.15s ease-out backwards;
}

/* Back navigation - zoom out animation (reversed) */
html[data-turbo-visit-direction="back"]::view-transition-old(main-content) {
  animation: fadeOutZoomOut 0.15s ease-in forwards;
}

html[data-turbo-visit-direction="back"]::view-transition-new(main-content) {
  animation: fadeInZoomOut 0.15s 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);
}

/* Old page: fade out while slightly zooming in
   Using scale3d for GPU compositing */
@keyframes fadeOutZoom {
  from {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
  to {
    opacity: 0;
    transform: scale3d(1.03, 1.03, 1);
  }
}

/* New page: fade in from slightly zoomed out */
@keyframes fadeInZoom {
  from {
    opacity: 0;
    transform: scale3d(0.97, 0.97, 1);
  }
  to {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

/* Back navigation animations - zoom out effect */
@keyframes fadeOutZoomOut {
  from {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
  to {
    opacity: 0;
    transform: scale3d(0.97, 0.97, 1);
  }
}

@keyframes fadeInZoomOut {
  from {
    opacity: 0;
    transform: scale3d(1.03, 1.03, 1);
  }
  to {
    opacity: 1;
    transform: scale3d(1, 1, 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: env(safe-area-inset-left, 0);
  margin-right: env(safe-area-inset-right, 0);
}

/* 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;
  }
}

/* Panel animations - Bottom sheet (mobile)
   Using translate3d() forces GPU compositing for smoother 60fps animations */
@keyframes slideInFromBottom {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideOutToBottom {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
}

/* Panel animations - Right slide (desktop) */
@keyframes slideInFromRight {
  from {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideOutToRight {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }
}

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

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

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

/* Spinner Animation - Campfire-inspired 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% }
}

/* Success/Error States */
.success {
  border-color: var(--valid);
  box-shadow: none;
}

.error {
  border-color: var(--invalid);
  box-shadow: none;
}

/* Accessibility improvements */
.btn:focus,
.player-card:focus,
.player-photo-link:focus,
.player-name-link:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.player-photo-link:focus .player-photo {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.player-name-link:focus .player-name {
  color: var(--accent);
}