/* ESCAPE LAB Page Transitions
 * Modern, smooth page transitions for better UX
 */

/* Base page transition styles */
body {
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-x: hidden;
}

body.loaded {
  opacity: 1;
}

/* Page transition overlay */
.page-transition {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.page-transition.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Transition background with theme-aware styling */
.page-transition::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, 
    rgba(2, 6, 23, 0.95) 0%, 
    rgba(15, 23, 42, 0.9) 50%, 
    rgba(2, 6, 23, 0.95) 100%);
  background-size: 200% 200%;
  animation: gradientShift 2s ease-in-out;
}

/* Theme-specific transition backgrounds */
body:has(input[value="light"]:checked) .page-transition::before {
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.95) 0%, 
    rgba(248, 250, 252, 0.9) 50%, 
    rgba(255, 255, 255, 0.95) 100%);
}

body:has(input[value="dim"]:checked) .page-transition::before {
  background: linear-gradient(135deg, 
    rgba(30, 41, 59, 0.95) 0%, 
    rgba(51, 65, 85, 0.9) 50%, 
    rgba(30, 41, 59, 0.95) 100%);
}

body:has(input[value="dark"]:checked) .page-transition::before {
  background: linear-gradient(135deg, 
    rgba(0, 0, 0, 0.95) 0%, 
    rgba(15, 23, 42, 0.9) 50%, 
    rgba(0, 0, 0, 0.95) 100%);
}

/* Loading spinner */
.page-transition::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top: 3px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* Theme-aware spinner colors */
body:has(input[value="light"]:checked) .page-transition::after {
  border: 3px solid rgba(0, 0, 0, 0.3);
  border-top: 3px solid rgba(0, 0, 0, 0.8);
}

/* Transition animations */
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Slide transition variants */
.page-transition.slide-left {
  transform: translateX(100%);
}

.page-transition.slide-left.active {
  transform: translateX(0);
}

.page-transition.slide-right {
  transform: translateX(-100%);
}

.page-transition.slide-right.active {
  transform: translateX(0);
}

.page-transition.slide-up {
  transform: translateY(100%);
}

.page-transition.slide-up.active {
  transform: translateY(0);
}

.page-transition.slide-down {
  transform: translateY(-100%);
}

.page-transition.slide-down.active {
  transform: translateY(0);
}

/* Fade transition variants */
.page-transition.fade {
  opacity: 0;
}

.page-transition.fade.active {
  opacity: 1;
}

/* Scale transition variants */
.page-transition.scale {
  transform: scale(0.8);
  opacity: 0;
}

.page-transition.scale.active {
  transform: scale(1);
  opacity: 1;
}

/* Blur transition variants */
.page-transition.blur {
  backdrop-filter: blur(0px);
  opacity: 0;
}

.page-transition.blur.active {
  backdrop-filter: blur(10px);
  opacity: 1;
}

/* Page content transitions */
.page-content {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.page-content.loaded {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered content animation */
.page-content .stagger-item {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.page-content.loaded .stagger-item:nth-child(1) { transition-delay: 0.1s; }
.page-content.loaded .stagger-item:nth-child(2) { transition-delay: 0.2s; }
.page-content.loaded .stagger-item:nth-child(3) { transition-delay: 0.3s; }
.page-content.loaded .stagger-item:nth-child(4) { transition-delay: 0.4s; }
.page-content.loaded .stagger-item:nth-child(5) { transition-delay: 0.5s; }

.page-content.loaded .stagger-item {
  opacity: 1;
  transform: translateY(0);
}

/* Link hover effects for better UX */
a {
  position: relative;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

a::before {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: currentColor;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

a:hover::before {
  width: 100%;
}

/* Button transition effects */
button, .btn {
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

button::before, .btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

button:hover::before, .btn:hover::before {
  width: 300px;
  height: 300px;
}

/* Form element transitions */
input, textarea, select {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

input:focus, textarea:focus, select:focus {
  transform: scale(1.02);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Mobile optimizations */
@media (max-width: 768px) {
  .page-transition {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .page-content {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .stagger-item {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  body, .page-transition, .page-content, .stagger-item {
    transition: none;
    animation: none;
  }
  
  .page-transition::after {
    animation: none;
  }
  
  .page-transition::before {
    animation: none;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .page-transition::before {
    background: rgba(0, 0, 0, 0.9);
  }
  
  body:has(input[value="light"]:checked) .page-transition::before {
    background: rgba(255, 255, 255, 0.9);
  }
}