/**
 * FOX IPTV Animations and Micro-Interactions
 * Smooth, performant animations with reduced motion support
 * Version: 2.0.0
 */

/* ============================================
   PAGE TRANSITION ANIMATIONS
   Requirement 13.1: Fade-in animation for page loads
   ============================================ */

/* Page fade-in animation */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Apply fade-in to main content areas */
body {
  animation: fadeIn 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

main,
.page-content,
.content-wrapper {
  animation: fadeIn 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Fade-in with slight upward movement */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Apply to sections for staggered effect */
section {
  animation: fadeInUp 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Stagger animation for multiple elements */
.fade-in-stagger > * {
  animation: fadeInUp 300ms cubic-bezier(0.4, 0, 0.2, 1);
  animation-fill-mode: both;
}

.fade-in-stagger > *:nth-child(1) { animation-delay: 0ms; }
.fade-in-stagger > *:nth-child(2) { animation-delay: 50ms; }
.fade-in-stagger > *:nth-child(3) { animation-delay: 100ms; }
.fade-in-stagger > *:nth-child(4) { animation-delay: 150ms; }
.fade-in-stagger > *:nth-child(5) { animation-delay: 200ms; }
.fade-in-stagger > *:nth-child(6) { animation-delay: 250ms; }

/* Utility class for manual fade-in */
.fade-in {
  animation: fadeIn 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-in-up {
  animation: fadeInUp 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Fade-in for dynamically loaded content */
.content-loaded {
  animation: fadeIn 300ms cubic-bezier(0.4, 0, 0.2, 1);
}


/* ============================================
   BUTTON CLICK FEEDBACK
   Requirement 13.3: Scale feedback on active state
   ============================================ */

/* Enhanced button active state with fast transition */
.btn:active {
  transform: scale(0.95);
  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Ensure hover state doesn't interfere */
.btn {
  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Button press animation for visual feedback */
@keyframes buttonPress {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
  }
}

/* Apply to buttons with .btn-press class for programmatic feedback */
.btn-press {
  animation: buttonPress 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Ripple effect for button clicks */
.btn {
  position: relative;
  overflow: hidden;
}

.btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 150ms cubic-bezier(0.4, 0, 0.2, 1), 
              height 150ms cubic-bezier(0.4, 0, 0.2, 1),
              opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0;
  pointer-events: none;
}

.btn:active::after {
  width: 200px;
  height: 200px;
  opacity: 1;
  transition: width 0ms, height 0ms, opacity 0ms;
}

/* Card click feedback */
.card:active {
  transform: translateY(-6px) scale(0.98);
  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
}


/* ============================================
   MODAL ANIMATIONS
   Requirement 13.4: Scale and fade for modal open/close
   ============================================ */

/* Modal backdrop fade */
@keyframes modalBackdropFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes modalBackdropFadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* Modal content scale and fade */
@keyframes modalScaleIn {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes modalScaleOut {
  from {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  to {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.9);
  }
}

/* Modal base styles */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-modal);
  display: none;
  align-items: center;
  justify-content: center;
}

.modal.open {
  display: flex;
}

/* Modal backdrop */
.modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  z-index: var(--z-modal-backdrop);
}

.modal.open .modal-backdrop {
  animation: modalBackdropFadeIn 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.modal.closing .modal-backdrop {
  animation: modalBackdropFadeOut 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Modal content */
.modal-content {
  position: relative;
  z-index: var(--z-modal);
  background: var(--bg-secondary);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  max-width: 600px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-2xl);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.modal.open .modal-content {
  animation: modalScaleIn 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.modal.closing .modal-content {
  animation: modalScaleOut 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Modal header */
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.modal-title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: white;
  margin: 0;
}

.modal-close {
  background: none;
  border: none;
  color: var(--color-neutral-400);
  font-size: var(--font-size-2xl);
  cursor: pointer;
  padding: var(--space-2);
  line-height: 1;
  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-close:hover {
  color: white;
}

/* Modal body */
.modal-body {
  margin-bottom: var(--space-6);
}

/* Modal footer */
.modal-footer {
  display: flex;
  gap: var(--space-4);
  justify-content: flex-end;
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Slide-in modal variant (from bottom) */
@keyframes modalSlideInUp {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes modalSlideOutDown {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(100%);
  }
}

.modal-slide-up .modal-content {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 100%;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  max-height: 80vh;
}

.modal-slide-up.open .modal-content {
  animation: modalSlideInUp 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-slide-up.closing .modal-content {
  animation: modalSlideOutDown 300ms cubic-bezier(0.4, 0, 0.2, 1);
}


/* ============================================
   ADDITIONAL MICRO-INTERACTIONS
   ============================================ */

/* Hover lift effect for interactive elements */
.hover-lift {
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

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

/* Hover glow effect */
.hover-glow {
  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-glow:hover {
  box-shadow: var(--shadow-glow);
}

/* Pulse animation for attention */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.05);
  }
}

.pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* Bounce animation */
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.bounce {
  animation: bounce 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* Shake animation for errors */
@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-5px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(5px);
  }
}

.shake {
  animation: shake 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Rotate animation */
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.rotate {
  animation: rotate 1s linear infinite;
}

/* Slide in from left */
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.slide-in-left {
  animation: slideInLeft 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Slide in from right */
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.slide-in-right {
  animation: slideInRight 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Scale in */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.scale-in {
  animation: scaleIn 300ms cubic-bezier(0.4, 0, 0.2, 1);
}


/* ============================================
   REDUCED MOTION SUPPORT
   Requirement 13.7: Respect prefers-reduced-motion
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  /* Disable all animations */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  /* Provide simple fade alternatives */
  body,
  main,
  .page-content,
  .content-wrapper,
  section {
    animation: simpleFade 100ms ease-in;
  }
  
  @keyframes simpleFade {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  
  /* Remove transforms */
  .btn:hover,
  .btn:active,
  .card:hover,
  .card:active,
  .hover-lift:hover {
    transform: none;
  }
  
  /* Keep opacity transitions for accessibility */
  .btn,
  .card,
  a {
    transition: opacity 100ms ease-in !important;
  }
  
  .btn:hover,
  .card:hover,
  a:hover {
    opacity: 0.9;
  }
  
  /* Disable modal animations, use instant display */
  .modal.open .modal-backdrop,
  .modal.open .modal-content,
  .modal.closing .modal-backdrop,
  .modal.closing .modal-content {
    animation: none;
  }
  
  .modal-content {
    transform: none !important;
  }
  
  /* Disable ripple effect */
  .btn::after {
    display: none;
  }
  
  /* Disable all decorative animations */
  .pulse,
  .bounce,
  .shake,
  .rotate {
    animation: none;
  }
  
  /* Disable stagger effects */
  .fade-in-stagger > * {
    animation: simpleFade 100ms ease-in;
    animation-delay: 0ms !important;
  }
}


/* ============================================
   PERFORMANCE OPTIMIZATIONS
   Requirement 17.6: Use transform and opacity only
   ============================================ */

/* Use GPU acceleration for transforms */
.btn,
.card,
.modal-content,
.hover-lift {
  will-change: transform;
}

/* Remove will-change after animation completes - Requirement 17.6 */
.btn:not(:hover):not(:active),
.card:not(:hover):not(:active),
.hover-lift:not(:hover) {
  will-change: auto;
}

/* Modal content - add will-change only when open */
.modal.open .modal-content {
  will-change: transform, opacity;
}

.modal:not(.open) .modal-content {
  will-change: auto;
}

/* Contain layout for better performance */
.modal-content {
  contain: layout style paint;
}

/* Use transform and opacity only for animations (GPU accelerated) */
@keyframes optimizedFadeIn {
  from {
    opacity: 0;
    transform: translateZ(0);
  }
  to {
    opacity: 1;
    transform: translateZ(0);
  }
}


/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 767px) {
  /* Reduce animation intensity on mobile */
  .card:hover {
    transform: translateY(-4px);
  }
  
  .hover-lift:hover {
    transform: translateY(-2px);
  }
  
  /* Full-screen modals on mobile */
  .modal-content {
    width: 100%;
    max-width: 100%;
    max-height: 100vh;
    border-radius: 0;
    padding: var(--space-6);
  }
  
  /* Always use slide-up on mobile */
  .modal .modal-content {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    max-height: 90vh;
  }
  
  .modal.open .modal-content {
    animation: modalSlideInUp 300ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .modal.closing .modal-content {
    animation: modalSlideOutDown 300ms cubic-bezier(0.4, 0, 0.2, 1);
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  /* Tablet adjustments */
  .modal-content {
    max-width: 500px;
  }
}