/* ========================================
   FORCE INTERACTIVE - EMERGENCY FALLBACK ONLY
   This ensures elements are interactive ONLY:
   1. After animation completes, OR
   2. If animation script fails to load
   
   CRITICAL: DO NOT override during opening-active phases!
   ======================================== */

/* ONLY force interactivity AFTER animation completes */
html.animation-complete .lens-pill,
html.animation-complete .transform-button,
html.animation-complete .text-input,
html.animation-complete .abstraction-slider,
html.animation-complete .title-letter {
  pointer-events: auto !important;
  cursor: pointer !important;
}

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

/* Fallback: If neither opening-active NOR animation-complete classes exist */
/* (i.e., animation script failed to load), then make interactive */
html:not(.opening-active):not(.animation-complete) .lens-pill,
html:not(.opening-active):not(.animation-complete) .transform-button,
html:not(.opening-active):not(.animation-complete) .text-input,
html:not(.opening-active):not(.animation-complete) .abstraction-slider,
html:not(.opening-active):not(.animation-complete) .title-letter {
  pointer-events: auto !important;
  cursor: pointer !important;
}

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

/* CRITICAL: DO NOT FORCE DURING OPENING ANIMATION */
/* The following ensures we NEVER override the phase-based blocking */
html.opening-active:not(.phase-7) .transform-button,
html.opening-active:not(.phase-6):not(.phase-7) .abstraction-slider,
html.opening-active:not(.phase-5):not(.phase-6):not(.phase-7) .lens-pill,
html.opening-active:not(.phase-4):not(.phase-5):not(.phase-6):not(.phase-7) .text-input,
html.opening-active:not(.phase-2):not(.phase-3):not(.phase-4):not(.phase-5):not(.phase-6):not(.phase-7) .title-letter {
  pointer-events: none !important;
  cursor: default !important;
}