/**
 * 🚪 ZONE TRANSITIONS - Sacred Doorways Between Spaces
 * Each transition should feel like passing through a threshold
 * 
 * Transitions:
 * - Underground ↔ Library: Ascending/Descending with light change
 * - Library ↔ Lab: Portal opening with energy
 * - Lab ↔ Vault: Golden seal / transmutation complete
 * - Any ↔ Underground: Descent into darkness
 */

/* ==================== TRANSITION VARIABLES ==================== */
:root {
  /* Jobs audit: Reduced transition duration */
  --transition-duration: 150ms;
  --transition-ease: ease-out;
}

/* ==================== BASE ZONE CONTAINER ==================== */
.dig-space,
#library-zone,
#lab-zone,
#vault-zone,
.vault-v2 {
  transition: 
    opacity var(--transition-duration) var(--transition-ease),
    transform var(--transition-duration) var(--transition-ease),
    filter var(--transition-duration) var(--transition-ease);
}

/* ==================== ZONE EXIT STATES ==================== */
/* When leaving a zone, these classes are briefly applied */

.zone-exiting {
  opacity: 0;
  pointer-events: none;
}

/* Underground exit - ascending/fading up */
.zone-underground.zone-exiting .dig-space,
.zone-underground.zone-exiting .card-space {
  transform: translateY(-30px);
  opacity: 0;
  filter: brightness(1.5);
}

/* Library exit - pages closing */
.zone-library.zone-exiting #library-zone,
.zone-library.zone-exiting .library-container {
  transform: scale(0.95);
  opacity: 0;
  filter: sepia(0.5);
}

/* Lab exit - energy dispersing */
.zone-lab.zone-exiting #lab-zone,
.zone-lab.zone-exiting .lab-container {
  transform: scale(1.05);
  opacity: 0;
  filter: hue-rotate(30deg) brightness(1.3);
}

/* Vault exit - golden fade */
.zone-vault.zone-exiting .vault-v2,
.zone-vault.zone-exiting #vault-zone {
  transform: translateY(20px);
  opacity: 0;
  filter: brightness(1.2) saturate(1.5);
}

/* ==================== ZONE ENTER STATES ==================== */
/* Applied when entering a zone */

/* Jobs audit: All zone enter animations simplified to basic fade */
/* No filter tricks, no complex transforms */

.zone-underground .dig-space,
.zone-library #library-zone,
.zone-library .library-container,
.zone-lab #lab-zone,
.zone-lab .lab-container,
.zone-vault .vault-v2,
.zone-vault #vault-zone {
  animation: zone-fade-in var(--transition-duration) var(--transition-ease);
}

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

/* ==================== TRANSITION OVERLAY ==================== */
/* Optional: A full-screen overlay during transitions */

.zone-transition-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms ease;
}

.zone-transition-overlay.active {
  opacity: 1;
}

/* Underground overlay - darkness */
.zone-transition-overlay.to-underground {
  background: radial-gradient(circle at 50% 50%, transparent 0%, #050508 70%);
}

/* Library overlay - warm light */
.zone-transition-overlay.to-library {
  background: radial-gradient(circle at 50% 50%, rgba(255, 179, 71, 0.3) 0%, transparent 70%);
}

/* Lab overlay - electric */
.zone-transition-overlay.to-lab {
  background: radial-gradient(circle at 50% 50%, rgba(0, 240, 255, 0.2) 0%, transparent 70%);
}

/* Vault overlay - golden */
.zone-transition-overlay.to-vault {
  background: radial-gradient(circle at 50% 50%, rgba(212, 175, 55, 0.3) 0%, transparent 70%);
}

/* ==================== ZONE BUTTON TRANSITIONS ==================== */
/* The zone selector buttons */

.float-zones .zone-btn {
  transition: all 0.2s ease;
  position: relative;
}

.float-zones .zone-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* Hover glows match destination zone */
.float-zones .zone-btn[data-zone="underground"]:hover::before {
  background: radial-gradient(circle, rgba(255, 107, 53, 0.3) 0%, transparent 70%);
  opacity: 1;
}

.float-zones .zone-btn[data-zone="library"]:hover::before {
  background: radial-gradient(circle, rgba(255, 179, 71, 0.3) 0%, transparent 70%);
  opacity: 1;
}

.float-zones .zone-btn[data-zone="lab"]:hover::before {
  background: radial-gradient(circle, rgba(0, 240, 255, 0.3) 0%, transparent 70%);
  opacity: 1;
}

.float-zones .zone-btn[data-zone="vault"]:hover::before {
  background: radial-gradient(circle, rgba(212, 175, 55, 0.3) 0%, transparent 70%);
  opacity: 1;
}

/* Active state */
.float-zones .zone-btn.active {
  transform: scale(1.05);
}

.float-zones .zone-btn.active::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 3px;
  border-radius: 2px;
  background: currentColor;
}

/* Jobs audit: Content stagger REMOVED - all items appear together */
/* Stagger delays add perceived slowness */

/* ==================== HEADER ZONE INDICATOR ==================== */
/* The zone title in the header */

.float-zone-title {
  transition: all 0.3s ease;
}

.float-zone-title .zone-title-icon {
  transition: transform 0.3s ease;
}

/* Zone icon bounce - REMOVED (Jobs audit: decorative) */

/* ==================== REDUCED MOTION ==================== */
@media (prefers-reduced-motion: reduce) {
  .dig-space,
  #library-zone,
  #lab-zone,
  #vault-zone,
  .vault-v2,
  .sample-card,
  .library-item,
  .vault-pack-card {
    animation: none !important;
    transition: opacity 0.2s ease !important;
  }
  
  .zone-transition-overlay {
    display: none;
  }
}