/**
 * Room Transition Feel System v2
 * Continuity-focused, GPU-friendly transition layer.
 * 
 * Features:
 * - Normalized timing (500ms fade-in, 400ms hold, 450ms fade-out)
 * - First paint smoothness (no flash/FOUC)
 * - Soft exit animations
 * - Background continuity (same dark universe)
 * - Text variation system
 * - Performance optimized for mobile/low-end
 * - Interruption safety
 * - Proper z-index architecture
 * - Accessibility support
 */

/* ═══════════════════════════════════════════════════════════
   TRANSITION OVERLAY
   Critical: visibility and pointer-events must be correct
   ═══════════════════════════════════════════════════════════ */

#room-transition {
  position: fixed;
  inset: 0;
  z-index: 99998;
  
  /* Start hidden and non-interactive */
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  
  /* GPU acceleration */
  will-change: opacity, visibility;
  transform: translateZ(0);
  backface-visibility: hidden;
  contain: strict;
  
  /* Transition timing */
  transition: 
    opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ACTIVE STATE - shown */
#room-transition.active {
  visibility: visible;
  opacity: 1;
  pointer-events: all;
}

/* EMERGENCY HIDE - instant removal */
#room-transition.forced-hide {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: none !important;
}

#room-transition.hiding {
  /* Slightly different curve for exit - softer */
  transition: 
    opacity 0.45s cubic-bezier(0.25, 0.1, 0.25, 1),
    visibility 0.45s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* ═══════════════════════════════════════════════════════════
   TRANSITION BACKGROUND
   Matching the app's dark universe
   ═══════════════════════════════════════════════════════════ */

.transition-bg {
  position: absolute;
  inset: 0;
  
  /* Match app background darkness */
  background: 
    radial-gradient(ellipse 80% 60% at 30% 20%, rgba(15, 12, 30, 0.96) 0%, transparent 70%),
    radial-gradient(ellipse 80% 60% at 70% 80%, rgba(12, 10, 25, 0.96) 0%, transparent 70%),
    linear-gradient(180deg, #07070d 0%, #0a0a14 50%, #07070d 100%);
  
  /* Light blur - keeps text readable */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ═══════════════════════════════════════════════════════════
   AMBIENT GLOW ORBS
   Matches app's purple/cyan glow language
   ═══════════════════════════════════════════════════════════ */

.transition-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.4;
  animation: glowFloat 8s ease-in-out infinite alternate;
  pointer-events: none;
}

/* Purple - matches app's primary accent */
.transition-glow--purple {
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.6) 0%, rgba(139, 92, 246, 0) 70%);
  top: 15%;
  left: 10%;
  animation-delay: 0s;
  animation-duration: 10s;
}

/* Cyan - matches app's secondary accent */
.transition-glow--cyan {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(6, 182, 212, 0.5) 0%, rgba(6, 182, 212, 0) 70%);
  bottom: 15%;
  right: 10%;
  animation-delay: -4s;
  animation-duration: 12s;
}

/* Pink - subtle center glow */
.transition-glow--pink {
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(236, 72, 153, 0.4) 0%, rgba(236, 72, 153, 0) 70%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: glowPulse 4s ease-in-out infinite;
  opacity: 0.3;
}

@keyframes glowFloat {
  0% {
    transform: translate(0, 0) scale(1);
    filter: blur(100px) brightness(1);
  }
  50% {
    transform: translate(25px, -20px) scale(1.05);
    filter: blur(110px) brightness(1.1);
  }
  100% {
    transform: translate(-15px, 25px) scale(0.98);
    filter: blur(95px) brightness(0.95);
  }
}

@keyframes glowPulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.25;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.4);
    opacity: 0.4;
  }
}

/* ═══════════════════════════════════════════════════════════
   FLOATING PARTICLES
   Subtle, ambient - not distracting
   ═══════════════════════════════════════════════════════════ */

.transition-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.transition-particle {
  position: absolute;
  bottom: -10px;
  width: 3px;
  height: 3px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  animation: particleRise linear infinite;
  /* GPU optimization */
  transform: translateZ(0);
}

.transition-particle--dim {
  width: 2px;
  height: 2px;
  background: rgba(255, 255, 255, 0.25);
}

.transition-particle--bright {
  width: 4px;
  height: 4px;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.6);
}

@keyframes particleRise {
  0% {
    transform: translateY(0) translateX(0) translateZ(0);
    opacity: 0;
  }
  10% {
    opacity: 0.8;
  }
  80% {
    opacity: 0.6;
  }
  100% {
    transform: translateY(-110vh) translateX(40px) translateZ(0);
    opacity: 0;
  }
}

/* ═══════════════════════════════════════════════════════════
   WAVEFORM PULSE
   Audio-visual hint, subtle
   ═══════════════════════════════════════════════════════════ */

.transition-waveform {
  position: absolute;
  bottom: 28%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 45px;
  opacity: 0.35;
  pointer-events: none;
}

.transition-waveform-bar {
  width: 3px;
  background: linear-gradient(to top, rgba(139, 92, 246, 0.8), rgba(192, 132, 252, 0.6));
  border-radius: 2px;
  animation: waveformPulse 1.4s ease-in-out infinite;
  /* GPU optimization */
  transform: scaleY(1);
  transform-origin: bottom;
}

.transition-waveform-bar:nth-child(1)  { height: 20px; animation-delay: 0s; }
.transition-waveform-bar:nth-child(2)  { height: 35px; animation-delay: 0.1s; }
.transition-waveform-bar:nth-child(3)  { height: 25px; animation-delay: 0.2s; }
.transition-waveform-bar:nth-child(4)  { height: 42px; animation-delay: 0.3s; }
.transition-waveform-bar:nth-child(5)  { height: 30px; animation-delay: 0.4s; }
.transition-waveform-bar:nth-child(6)  { height: 38px; animation-delay: 0.5s; }
.transition-waveform-bar:nth-child(7)  { height: 22px; animation-delay: 0.6s; }
.transition-waveform-bar:nth-child(8)  { height: 32px; animation-delay: 0.7s; }
.transition-waveform-bar:nth-child(9)  { height: 28px; animation-delay: 0.8s; }
.transition-waveform-bar:nth-child(10) { height: 36px; animation-delay: 0.9s; }
.transition-waveform-bar:nth-child(11) { height: 24px; animation-delay: 1.0s; }
.transition-waveform-bar:nth-child(12) { height: 30px; animation-delay: 1.1s; }

@keyframes waveformPulse {
  0%, 100% {
    transform: scaleY(0.35);
    opacity: 0.35;
  }
  50% {
    transform: scaleY(1);
    opacity: 0.9;
  }
}

/* ═══════════════════════════════════════════════════════════
   TEXT CONTAINER
   Cinematic, subtle typography
   ═══════════════════════════════════════════════════════════ */

.transition-text {
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
}

.transition-text-main {
  font-family: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(1.1rem, 3.5vw, 1.75rem);
  font-weight: 300;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.88);
  
  /* Fade in animation */
  opacity: 0;
  transform: translateY(12px);
  animation: textFadeIn 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.15s forwards;
  
  /* GPU optimization */
  will-change: opacity, transform;
}

.transition-text-sub {
  font-family: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(0.65rem, 1.8vw, 0.85rem);
  font-weight: 400;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 0.85rem;
  
  /* Fade in animation - slightly delayed */
  opacity: 0;
  transform: translateY(8px);
  animation: textFadeIn 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.35s forwards;
  
  /* GPU optimization */
  will-change: opacity, transform;
}

@keyframes textFadeIn {
  0% {
    opacity: 0;
    transform: translateY(12px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ═══════════════════════════════════════════════════════════
   PULSE RINGS
   Subtle center pulse
   ═══════════════════════════════════════════════════════════ */

.transition-pulse-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 180px;
  height: 180px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(139, 92, 246, 0.18);
  border-radius: 50%;
  animation: ringPulse 4s ease-out infinite;
  pointer-events: none;
}

.transition-pulse-ring:nth-child(2) {
  animation-delay: 1.3s;
}

.transition-pulse-ring:nth-child(3) {
  animation-delay: 2.6s;
}

@keyframes ringPulse {
  0% {
    transform: translate(-50%, -50%) scale(0.6);
    opacity: 0.5;
  }
  100% {
    transform: translate(-50%, -50%) scale(3.5);
    opacity: 0;
  }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE OPTIMIZATIONS
   Safe-area aware, reduced complexity
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  #room-transition {
    /* Safe area for notched devices */
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }

  .transition-glow--purple {
    width: 280px;
    height: 280px;
    opacity: 0.3;
  }

  .transition-glow--cyan {
    width: 220px;
    height: 220px;
    opacity: 0.25;
  }

  .transition-glow--pink {
    width: 160px;
    height: 160px;
  }

  .transition-text-main {
    letter-spacing: 0.18em;
  }

  .transition-waveform {
    bottom: 32%;
    height: 35px;
    gap: 4px;
    opacity: 0.28;
  }

  .transition-waveform-bar {
    width: 2px;
  }

  .transition-pulse-ring {
    width: 140px;
    height: 140px;
  }
}

/* Small mobile */
@media (max-width: 480px) {
  .transition-glow {
    filter: blur(70px);
  }

  .transition-glow--purple {
    width: 200px;
    height: 200px;
  }

  .transition-glow--cyan {
    width: 160px;
    height: 160px;
  }

  .transition-text-main {
    letter-spacing: 0.12em;
  }

  .transition-text-sub {
    letter-spacing: 0.08em;
  }
}

/* ═══════════════════════════════════════════════════════════
   REDUCED MOTION
   Accessibility - minimal or no animation
   ═══════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce), (max-width: 768px) {
  .transition-glow,
  .transition-particle,
  .transition-waveform-bar,
  .transition-pulse-ring {
    animation: none !important;
  }

  /* Static glow opacity */
  .transition-glow--purple { opacity: 0.25; }
  .transition-glow--cyan { opacity: 0.2; }
  .transition-glow--pink { opacity: 0.15; }

  /* Instant text visibility */
  .transition-text-main,
  .transition-text-sub {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* Static waveform */
  .transition-waveform {
    opacity: 0.2;
  }

  .transition-waveform-bar {
    transform: scaleY(0.5);
    opacity: 0.5;
  }

  /* Fast transition */
  #room-transition {
    transition-duration: 0.2s !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   LOW-END DEVICE OPTIMIZATION
   Tier-based performance
   ═══════════════════════════════════════════════════════════ */

/* Tier Low - hide particles and extra effects */
.tier-low #room-transition .transition-particles,
.tier-low #room-transition .transition-pulse-ring {
  display: none;
}

.tier-low #room-transition .transition-glow--pink {
  display: none;
}

.tier-low #room-transition .transition-waveform {
  opacity: 0.15;
}

/* Tier Mid - reduced particles */
.tier-mid #room-transition .transition-particles {
  opacity: 0.5;
}

.tier-mid #room-transition .transition-pulse-ring:nth-child(3) {
  display: none;
}

/* ═══════════════════════════════════════════════════════════
   FIRST PAINT PROTECTION
   Prevent flash/FOUC on page load
   ═══════════════════════════════════════════════════════════ */

/* Ensure transition styles are loaded before body renders */
.transition-init {
  opacity: 0;
}

/* Hide transition immediately on first paint */
html.transition-ready #room-transition {
  /* Styles ready - can be shown safely */
}

/* ═══════════════════════════════════════════════════════════
   Z-INDEX ARCHITECTURE
   Layer hierarchy for proper stacking
   ═══════════════════════════════════════════════════════════ */

/*
   z-index layers (reference):
   
   99998  - Room Transition Overlay (this system)
   99999  - Reserved for emergency (never auto)
   100000 - Reserved for system (alerts, etc.)
   
   Modal/Panel layers should be below this.
   Modal base: ~1000
   Toast: ~9999
   
   If stuck overlay needs to be dismissed,
   use RoomTransition.forceHide()
*/

/* ═══════════════════════════════════════════════════════════
   PERFORMANCE MONITORING
   Debug only - remove in production
   ═══════════════════════════════════════════════════════════ */

/*
#room-transition::before {
  content: attr(data-perf);
  position: absolute;
  bottom: 10px;
  right: 10px;
  font-size: 10px;
  color: rgba(255,255,255,0.3);
  z-index: 100;
}
*/