/* Existing animations */
#pipette-water,
#pipette-milk {
  position: absolute;
  transition: opacity 0.5s ease-in-out;
  pointer-events: none;
  z-index: 100;
  clip-path: inset(100% 0 0 0);
}

#empty-pippete {
  z-index: 1000;
}

#distilled-water {
  z-index: 10;
}

#burette-sol {
  transition: clip-path 3s ease-in-out;
  clip-path: inset(100% 0 0 0);
}

#burette-sol.fill {
  clip-path: inset(0% 0 0 0);
}

#empty-flask {
  z-index: 1;
}

#filled-flask {
  z-index: 2;
  transition: opacity 0.5s ease-in-out;
  cursor: pointer;
}

#filled-flask.to-pink {
  opacity: 1;
  animation: toPink 2s forwards ease;
}

#flask {
  transform-origin: bottom center;
}

#titrated-flask {
  z-index: 5;
}

#filled-flask {
  z-index: 2;
  transition: opacity 1s ease-in-out, filter 0.3s ease;
  cursor: pointer;
}

#filled-flask.swirl {
  animation: pinkSwirl 0.8s ease-in-out;
}

@keyframes pinkSwirl {
  0% {
    filter: none;
  }

  50% {
    filter: hue-rotate(-20deg) saturate(2) brightness(0.9) drop-shadow(0 0 5px rgba(255, 105, 180, 0.5));
  }

  100% {
    filter: none;
  }
}

#filled-flask.show,
#titrated-flask.show {
  opacity: 1 !important;
}

#filled-flask.blush {
  filter: hue-rotate(-10deg) saturate(1.5);
}

#flask.shake {
  animation: shakeFlask 2s ease-in-out;
}

#pipette-water.show,
#pipette-milk.show {
  opacity: 1;
  animation: fillWater 1s ease-in-out forwards;
}

#pipette-water.pour,
#pipette-milk.pour {
  opacity: 1;
  animation: pourWater 1s ease-in-out forwards;
}

#naoh {
  z-index: 10;
  transition: transform 1s ease-in-out;
}

#naoh.tilt {
  animation: tiltNaOH 1s forwards;
}

#naoh-liquid {
  position: absolute;
  bottom: 24%;
  left: 76.3%;
  height: 95%;
  z-index: 0;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 2s ease-in-out;
}

#naoh-liquid.empty {
  animation: drainCylinder 3s steps(8) forwards;
}

.pinkify {
  filter: hue-rotate(-25deg) saturate(1.4);
  transition: filter 1.4s ease;
}

@keyframes toPink {
  0% {
    filter: none;
  }

  100% {
    filter: hue-rotate(-25deg) saturate(1.4);
  }
}

@keyframes drainCylinder {
  0% {
    clip-path: inset(9% 0 0 0);
  }

  100% {
    clip-path: inset(100% 0 0 0);
  }
}

@keyframes fillWater {
  0% {
    clip-path: inset(100% 0 0 0);
  }

  100% {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes pourWater {
  0% {
    clip-path: inset(0 0 0 0);
  }

  100% {
    clip-path: inset(100% 0 0 0);
  }
}

@keyframes shakeFlask {

  0%,
  100% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(5deg);
  }

  75% {
    transform: rotate(-5deg);
  }
}

@keyframes tiltNaOH {
  0% {
    transform: translate(var(--x), var(--y)) rotate(0deg);
  }

  50% {
    transform: translate(var(--x), var(--y)) rotate(-90deg);
  }

  100% {
    transform: translate(var(--x), var(--y)) rotate(-90deg);
  }
}

#phenol-drop {
  animation: dropFall 1s ease-in-out;
}

.show {
  display: block !important;
}

@keyframes dropFall {
  0% {
    opacity: 0;
    transform: translateY(0);
  }

  50% {
    opacity: 1;
    transform: translateY(50px);
  }

  100% {
    opacity: 0;
    transform: translateY(100px);
  }
}



#cylinder-container.tilt {
  animation: tiltcylinder 1s forwards;
}

@keyframes tiltcylinder {
  0% {
    transform: translate(var(--x), var(--y)) rotate(0deg);
  }

  50% {
    transform: translate(var(--x), var(--y)) rotate(-90deg);
  }

  100% {
    transform: translate(var(--x), var(--y)) rotate(-90deg);
  }
}

#burette-nob.open {
  transform: rotate(45deg);
  transform-origin: center;
  transition: transform 0.2s ease-in-out;
}

#burette-drop.show {
  display: block !important;
  animation: buretteDrop 0.8s linear infinite;
}

@keyframes buretteDrop {
  0% {
    opacity: 0;
    transform: translateY(0);
  }

  20% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateY(90px);
  }
}

#hover-tooltip {
  position: fixed;
  pointer-events: none;
  z-index: 2000;
}

/* =========================================
   STEP-BASED VISIBILITY CONTROL
   ========================================= */
/* Default: Everything Hidden unless specified */
/* We toggle opacity to allow transitions, and pointer-events to prevent clicking hidden items */
/* Step 0: Intro (Show All) */
/* Actually, Step 0 serves as a gallery. */
body.step-0 .group-burette,
body.step-0 .group-flask,
body.step-0 .group-pipette,
body.step-0 .group-phenol,
body.step-0 .group-milk,
body.step-0 .group-titration-tools {
  opacity: 1;
  pointer-events: auto;
}

body.step-0 #btn-start {
  display: block;
}

body:not(.step-0) #btn-start {
  display: none;
}

body.step-0 #timer-container {
  opacity: 0;
}

/* Step 1: Prep (Milk, Pipette, Flask, Phenol) */
/* Hide Burette, Titration Tools (NaOH, Cylinder) */
body.step-1 .group-burette {
  opacity: 0;
  pointer-events: none;
}

body.step-1 .group-titration-tools {
  opacity: 0;
  pointer-events: none;
}

body.step-1 .group-flask {
  opacity: 1;
  pointer-events: auto;
}

body.step-1 .group-pipette {
  opacity: 1;
  pointer-events: auto;
}

body.step-1 .group-phenol {
  opacity: 1;
  pointer-events: auto;
}

body.step-1 .group-milk {
  opacity: 1;
  pointer-events: auto;
}

body.step-1 #btn-start {
  display: none;
}

/* Controlled by JS validation mostly, but css can allow block */
body.step-1 #timer-container {
  opacity: 0;
}

/* Step 2: Titration (Flask, Burette, NaOH, Cylinder) */
/* Hide Pipette, Phenol, Milk Beaker */
body.step-2 .group-pipette {
  opacity: 0;
  pointer-events: none;
}

body.step-2 .group-phenol {
  opacity: 0;
  pointer-events: none;
}

body.step-2 .group-milk {
  opacity: 0;
  pointer-events: none;
}

body.step-2 .group-burette {
  opacity: 1;
  pointer-events: auto;
}

body.step-2 .group-titration-tools {
  opacity: 1;
  pointer-events: auto;
}

body.step-2 .group-flask {
  opacity: 1;
  pointer-events: auto;
}

body.step-2 #btn-start {
  display: none;
}

body.step-2 #titration-table-container {
  display: block;
}

/* Show small table */
/* Step 3: Observation (Handled by overlay #observation-screen) */
/* Background can stay as Step 2 or blur */