/* ========================================
   POETICA - MAGICAL OPENING ANIMATION
   Delightful, Immersive, Seamless
   ======================================== */

/* ===== REDUCED MOTION SUPPORT ===== */
@media (prefers-reduced-motion: reduce) {
  .opening-active * {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ===== INITIAL HIDDEN STATE ===== */
html.opening-active body {
  opacity: 0;
}

/* Hide UI elements initially */
html.opening-active .app-title,
html.opening-active .app-subtitle,
html.opening-active .input-container,
html.opening-active .lens-section,
html.opening-active .abstraction-control,
html.opening-active .transform-button {
  opacity: 0;
}

/* ========================================
   INTERACTIVITY CONTROL - PHASE-SYNCHRONIZED
   Elements are ONLY interactive AFTER their appearance phase
   ======================================== */

/* NUCLEAR BLOCK - MAXIMUM SPECIFICITY - HIGHEST PRIORITY */
html.opening-active:not(.phase-2) .app-title .title-letter,
html.opening-active:not(.phase-3) .app-title .title-letter,
html.opening-active:not(.phase-4) .app-title .title-letter,
html.opening-active:not(.phase-5) .app-title .title-letter,
html.opening-active:not(.phase-6) .app-title .title-letter,
html.opening-active:not(.phase-7) .app-title .title-letter,
html.opening-active.phase-1 .app-title .title-letter {
  pointer-events: none !important;
  cursor: default !important;
}

html.opening-active:not(.phase-4) .text-input,
html.opening-active:not(.phase-5) .text-input,
html.opening-active:not(.phase-6) .text-input,
html.opening-active:not(.phase-7) .text-input,
html.opening-active.phase-1 .text-input,
html.opening-active.phase-2 .text-input,
html.opening-active.phase-3 .text-input {
  pointer-events: none !important;
  cursor: default !important;
}

html.opening-active:not(.phase-5) .lens-pill,
html.opening-active:not(.phase-6) .lens-pill,
html.opening-active:not(.phase-7) .lens-pill,
html.opening-active.phase-1 .lens-pill,
html.opening-active.phase-2 .lens-pill,
html.opening-active.phase-3 .lens-pill,
html.opening-active.phase-4 .lens-pill {
  pointer-events: none !important;
  cursor: default !important;
}

html.opening-active:not(.phase-6) .abstraction-slider,
html.opening-active:not(.phase-7) .abstraction-slider,
html.opening-active.phase-1 .abstraction-slider,
html.opening-active.phase-2 .abstraction-slider,
html.opening-active.phase-3 .abstraction-slider,
html.opening-active.phase-4 .abstraction-slider,
html.opening-active.phase-5 .abstraction-slider {
  pointer-events: none !important;
  cursor: default !important;
}

html.opening-active:not(.phase-7) .transform-button,
html.opening-active.phase-1 .transform-button,
html.opening-active.phase-2 .transform-button,
html.opening-active.phase-3 .transform-button,
html.opening-active.phase-4 .transform-button,
html.opening-active.phase-5 .transform-button,
html.opening-active.phase-6 .transform-button {
  pointer-events: none !important;
  cursor: default !important;
}

/* Enable title letter interactions ONLY from phase-2 onwards (1200ms - title appears) */
html.opening-active.phase-2 .app-title .title-letter,
html.opening-active.phase-3 .app-title .title-letter,
html.opening-active.phase-4 .app-title .title-letter,
html.opening-active.phase-5 .app-title .title-letter,
html.opening-active.phase-6 .app-title .title-letter,
html.opening-active.phase-7 .app-title .title-letter {
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* Enable input interactions ONLY from phase-4 onwards (3200ms - input appears) */
html.opening-active.phase-4 .text-input,
html.opening-active.phase-5 .text-input,
html.opening-active.phase-6 .text-input,
html.opening-active.phase-7 .text-input {
  pointer-events: auto !important;
  cursor: text !important;
}

/* Enable lens pill interactions ONLY from phase-5 onwards (4000ms - lenses appear) */
html.opening-active.phase-5 .lens-pill,
html.opening-active.phase-6 .lens-pill,
html.opening-active.phase-7 .lens-pill {
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* Enable slider interactions ONLY from phase-6 onwards (5200ms - slider appears) */
html.opening-active.phase-6 .abstraction-control,
html.opening-active.phase-6 .abstraction-slider,
html.opening-active.phase-7 .abstraction-control,
html.opening-active.phase-7 .abstraction-slider {
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* Enable button interactions ONLY from phase-7 onwards (5800ms - button appears) */
html.opening-active.phase-7 .transform-button {
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* Ensure all interactions work after animation completes */
html.animation-complete .lens-pill,
html.animation-complete .text-input,
html.animation-complete .transform-button,
html.animation-complete .abstraction-control,
html.animation-complete .app-title .title-letter {
  pointer-events: auto !important;
  cursor: pointer !important;
}

html.animation-complete .text-input {
  cursor: text !important;
}

/* CRITICAL: Force all elements to be interactive after animation */
html.animation-complete .lens-pill {
  pointer-events: auto !important;
  cursor: pointer !important;
}

html.animation-complete .transform-button {
  pointer-events: auto !important;
  cursor: pointer !important;
}

html.animation-complete .abstraction-slider {
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* CRITICAL FIX: Ensure elements are interactive by default when no animation class exists */
/* This prevents elements from being stuck as non-interactive if animation doesn't load */
html:not(.opening-active):not(.animation-complete) .lens-pill,
html:not(.opening-active):not(.animation-complete) .text-input,
html:not(.opening-active):not(.animation-complete) .transform-button,
html:not(.opening-active):not(.animation-complete) .abstraction-control {
  pointer-events: auto !important;
  cursor: pointer !important;
}

html:not(.opening-active):not(.animation-complete) .text-input {
  cursor: text !important;
}

/* REMOVED: forceInteractive animations that would override phase-based interactivity */

/* CRITICAL: Hide lens pills and prevent white overlay during entire opening animation */
html.opening-active .lens-pill {
  /* Pills are hidden via the parent lens-section opacity:0 during phases 1-4 */
  /* During phase-5, pills get animation which controls their opacity */
  /* Hide backdrop-filter to prevent white overlay */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Hide the gradient pseudo-element during opening animation to prevent white overlay */
html.opening-active .lens-pill::before {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Orbs: start transparent, transition to visible with their natural float opacity */
html.opening-active .background-orb {
  opacity: 0 !important;
  transition: opacity 2s ease-out;
}

/* Phase 1: Orbs fade in with staggered delays - use inherit to let float anim control opacity */
html.opening-active.phase-1 .orb-1 {
  opacity: 0.45 !important;
  transition-delay: 0s;
}

html.opening-active.phase-1 .orb-2 {
  opacity: 0.45 !important;
  transition-delay: 0.3s;
}

html.opening-active.phase-1 .orb-3 {
  opacity: 0.45 !important;
  transition-delay: 0.5s;
}

html.opening-active.phase-1 .orb-4 {
  opacity: 0.45 !important;
  transition-delay: 0.7s;
}

/* ===== PARTICLES (Bottom 1/3rd Ambient) ===== */
.opening-particle {
  position: fixed;
  bottom: -10px; /* Start below screen */
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 4px rgba(167, 139, 250, 0.6); /* Subtle magical glow */
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  will-change: transform, opacity;
  /* Animation applied in JS to allow random durations */
}

@keyframes ambientFloat {
  0% {
    transform: translateY(0) translateX(0);
    opacity: 0;
  }
  10% {
    opacity: var(--max-opacity, 0.4); /* Fade in quickly */
  }
  100% {
    /* Move up to ~35vh (approx 1/3 screen) with some drift */
    transform: translateY(-35vh) translateX(var(--drift, 20px)); 
    opacity: 0; /* Fade out at top */
  }
}

/* ===== PHASE 1: FADE IN BODY & ORBS ===== */
html.opening-active.phase-1 body {
  animation: fadeInBody 2s ease-out forwards;
}

@keyframes fadeInBody {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* Animation complete: remove all overrides so float animations work fully */
html.animation-complete .background-orb {
  transition: none;
  /* Don't set opacity here - let the float animations control it */
}

/* ===== TITLE LETTERS - Always start invisible until animation ===== */
.title-letter {
  opacity: 0;
}

/* ===== PHASE 2: MAGICAL TITLE REVEAL (Dispersed to Formed) ===== */
html.opening-active.phase-2 .app-title {
  opacity: 1;
}

html.opening-active.phase-2 .app-title .title-letter {
  display: inline-block;
  /* Animation controls opacity - starts at 0, ends at 1 */
  animation: letterRevealDispersed 1.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  will-change: transform, opacity, filter;
  /* Enable hover transitions even during animation phase */
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
              filter 0.8s cubic-bezier(0.4, 0, 0.2, 1),
              color 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Staggered delays for each letter */
html.opening-active.phase-2 .app-title .title-letter:nth-child(1) { animation-delay: 0ms; }
html.opening-active.phase-2 .app-title .title-letter:nth-child(2) { animation-delay: 80ms; }
html.opening-active.phase-2 .app-title .title-letter:nth-child(3) { animation-delay: 160ms; }
html.opening-active.phase-2 .app-title .title-letter:nth-child(4) { animation-delay: 240ms; }
html.opening-active.phase-2 .app-title .title-letter:nth-child(5) { animation-delay: 320ms; }
html.opening-active.phase-2 .app-title .title-letter:nth-child(6) { animation-delay: 400ms; }
html.opening-active.phase-2 .app-title .title-letter:nth-child(7) { animation-delay: 480ms; }

@keyframes letterRevealDispersed {
  0% {
    opacity: 0;
    transform: translate(var(--disperse-x, 0), var(--disperse-y, -40px)) rotate(var(--disperse-rot, 0deg)) scale(0.3);
    filter: blur(4px);
    color: #a78bfa;
  }
  40% {
    opacity: 0.6;
    filter: blur(2px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg) scale(1);
    filter: blur(0);
    color: inherit;
  }
}

/* ===== PHASE 3: SUBTITLE ===== */
html.opening-active.phase-3 .app-subtitle {
  animation: subtitleFloatUp 1.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes subtitleFloatUp {
  0% {
    opacity: 0;
    transform: translateY(25px);
    letter-spacing: 2px;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    letter-spacing: 0.5px;
  }
}

/* ===== PHASE 4: INPUT REVEAL ===== */
/* Simple fade-in animation */

html.opening-active.phase-4 .input-container {
  animation: inputReveal 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

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

/* ===== UNFOLD BUTTON - Hidden until phase 7 ===== */
html.opening-active .transform-button {
  opacity: 0;
  transform: translateY(25px);
}

html.animation-complete .transform-button {
  opacity: 1 !important;
  transform: translateY(0) !important;
}


/* ===== PHASE 5: LENS PILLS WAVE ===== */
html.opening-active.phase-5 .lens-section {
  opacity: 1;
}

html.opening-active.phase-5 .lens-pill {
  /* Use individual animation properties so staggered delays aren't overridden */
  animation-name: pillPopIn;
  animation-duration: 0.8s;
  animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
  animation-fill-mode: both;
  /* animation-delay is set per-pill via nth-of-type rules below */
}

/* Staggered delays - using nth-of-type to skip break divs */
html.opening-active.phase-5 .lens-pill:nth-of-type(1) { animation-delay: 0ms; }
html.opening-active.phase-5 .lens-pill:nth-of-type(2) { animation-delay: 60ms; }
html.opening-active.phase-5 .lens-pill:nth-of-type(3) { animation-delay: 120ms; }
html.opening-active.phase-5 .lens-pill:nth-of-type(4) { animation-delay: 180ms; }
html.opening-active.phase-5 .lens-pill:nth-of-type(5) { animation-delay: 240ms; }
html.opening-active.phase-5 .lens-pill:nth-of-type(6) { animation-delay: 300ms; }
html.opening-active.phase-5 .lens-pill:nth-of-type(7) { animation-delay: 360ms; }
html.opening-active.phase-5 .lens-pill:nth-of-type(8) { animation-delay: 420ms; }
html.opening-active.phase-5 .lens-pill:nth-of-type(9) { animation-delay: 480ms; }
html.opening-active.phase-5 .lens-pill:nth-of-type(10) { animation-delay: 540ms; }
html.opening-active.phase-5 .lens-pill:nth-of-type(11) { animation-delay: 600ms; }
html.opening-active.phase-5 .lens-pill:nth-of-type(12) { animation-delay: 660ms; }

@keyframes pillPopIn {
  0% {
    opacity: 0;
    transform: scale(0.5) translateY(25px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* ===== PHASE 6: SLIDER ===== */
html.opening-active.phase-6 .abstraction-control {
  animation: sliderRise 1.3s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

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

/* ===== PHASE 7: UNFOLD BUTTON (after slider) ===== */
/* Matches the same gentle, seamless style as other elements */
html.opening-active.phase-7 .transform-button {
  animation: buttonFloatUp 1.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

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

/* ===== ANIMATION COMPLETE ===== */
html.animation-complete .app-title,
html.animation-complete .app-subtitle,
html.animation-complete .input-container,
html.animation-complete .lens-section,
html.animation-complete .abstraction-control,
html.animation-complete .transform-button {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  animation: none !important;
}

/* Lens pills - ensure final visible state, don't override transform (FLIP animation needs it) */
html.animation-complete .lens-pill {
  opacity: 1 !important;
  filter: none !important;
  animation: none !important;
  /* Restore backdrop-filter after opening animation */
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  /* No transform override - let FLIP animation control it */
}

/* Re-enable the gradient pseudo-element after animation (for hover effect) */
html.animation-complete .lens-pill::before {
  visibility: visible !important;
  opacity: 0 !important; /* Default opacity, hover will change it */
}

/* Title letters need transitions for hover effect - works immediately after intro */
html.animation-complete .title-letter,
html.opening-active .title-letter {
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
              filter 0.8s cubic-bezier(0.4, 0, 0.2, 1),
              color 0.8s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

html.animation-complete .title-letter {
  opacity: 1;
  transform: none;
  filter: none;
  animation: none;
}

html.animation-complete body {
  opacity: 1 !important;
}

/* Keep particles visible but subtle after animation */
html.animation-complete .opening-particle {
  /* Continue animation */
}

/* ========================================
   MOBILE-SPECIFIC ANIMATION ADJUSTMENTS
   ======================================== */
@media (max-width: 768px) {
  /* Adjust input reveal to prevent overlap with title */
  @keyframes inputReveal {
    0% {
      opacity: 0;
      transform: translateY(30px); /* Increased from 20px */
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  /* Ensure proper spacing during animation phases */
  html.opening-active.phase-4 .input-container {
    margin-top: var(--space-lg); /* Add spacing on mobile */
  }
  
  /* Mobile: Faster animation for better UX */
  html.opening-active.phase-2 .app-title .title-letter {
    animation-duration: 1.2s; /* Reduced from 1.6s */
  }
  
  html.opening-active.phase-3 .app-subtitle {
    animation-duration: 1.2s; /* Reduced from 1.5s */
  }
  
  html.opening-active.phase-4 .input-container {
    animation-duration: 1.2s; /* Reduced from 1.5s */
  }
  
  html.opening-active.phase-5 .lens-pill {
    animation-duration: 0.6s; /* Reduced from 0.8s */
  }
  
  html.opening-active.phase-6 .abstraction-control {
    animation-duration: 1.0s; /* Reduced from 1.3s */
  }
  
  html.opening-active.phase-7 .transform-button {
    animation-duration: 1.2s; /* Reduced from 1.5s */
  }
  
  /* Reduce stagger delays on mobile for faster reveal */
  html.opening-active.phase-5 .lens-pill:nth-of-type(1) { animation-delay: 0ms; }
  html.opening-active.phase-5 .lens-pill:nth-of-type(2) { animation-delay: 40ms; }
  html.opening-active.phase-5 .lens-pill:nth-of-type(3) { animation-delay: 80ms; }
  html.opening-active.phase-5 .lens-pill:nth-of-type(4) { animation-delay: 120ms; }
  html.opening-active.phase-5 .lens-pill:nth-of-type(5) { animation-delay: 160ms; }
  html.opening-active.phase-5 .lens-pill:nth-of-type(6) { animation-delay: 200ms; }
  html.opening-active.phase-5 .lens-pill:nth-of-type(7) { animation-delay: 240ms; }
  html.opening-active.phase-5 .lens-pill:nth-of-type(8) { animation-delay: 280ms; }
  html.opening-active.phase-5 .lens-pill:nth-of-type(9) { animation-delay: 320ms; }
  html.opening-active.phase-5 .lens-pill:nth-of-type(10) { animation-delay: 360ms; }
  html.opening-active.phase-5 .lens-pill:nth-of-type(11) { animation-delay: 400ms; }
  html.opening-active.phase-5 .lens-pill:nth-of-type(12) { animation-delay: 440ms; }
}