/* Arena Incubator Styling */

/* Incubator positioning controls */
:root {
  --incubator-offset-x: 216px;
  --incubator-offset-y: 503px;
  --incubator-scale: 1.75;
}

/* Incubator container positioning */
.incubator-container {
  position: absolute;
  right: 0; /* base position: to the right of the container */
  top: 0; /* anchored to the top */
  width: 150px;
  height: 150px;
  z-index: 100; /* above monsters section */
  pointer-events: none;
  transform: 
    translateX(var(--incubator-offset-x)) 
    translateY(var(--incubator-offset-y)) 
    scale(var(--incubator-scale));
  transform-origin: center center;
  transition: all 0.2s ease;
  border-radius: 10px;
}

/* Single incubator slot (equivalent to incubator-egg-slot from lab) */
.incubator {
  width: 100%;
  height: 100%;
  position: relative;
  cursor: pointer;
  transition: all 0.3s ease;
  pointer-events: all; /* Re-enable pointer events for the incubator itself */
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

/* Layer 1: Incubator slot background (interior dry - base layer) */
.incubator::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('/shared/images/incubator-interior-dry.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 1;
}

/* Layer 2: Incubator slot interior wet layer (overlay with variable opacity) */
.incubator .wet-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('/shared/images/incubator-interior-wet.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 2;
  opacity: var(--humidity-opacity, 0.5); /* Default 50% humidity */
  pointer-events: none;
}

/* Layer 3: Egg (z-index 3, positioned by JavaScript) */
.incubator-egg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}

.incubator-egg .egg-image {
  width: 70px;
  height: 70px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
}

/* Egg crack overlay for completed eggs */
.incubator-egg .egg-crack {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  mix-blend-mode: multiply;
  opacity: 0.4;
  pointer-events: none;
  z-index: 1;
  
  /* Use the parent's egg image as a mask to clip the crack */
  mask: var(--egg-image-url);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask: var(--egg-image-url);
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

/* Layer 4: Glass overlay (when incubator is closed) */
.incubator .glass-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('/shared/images/incubator-glass.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 4;
  opacity: 1;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* Hide glass when incubator is open */
.incubator.incubator-open .glass-layer {
  opacity: 0;
}

/* Layer 5: Incubator slot frame (front layer) */
.incubator::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('/shared/images/incubator-frame.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 5;
  pointer-events: none;
}

/* Visual feedback for preparing incubator */
.incubator.incubator-preparing {
  animation: gentle-glow 2s infinite alternate;
}

/* Visual feedback for completed eggs */
.incubator.incubator-completed .incubator-egg {
  animation: egg-wiggle-inner 1s infinite ease-in-out;
}

/*
.incubator.stby {
}

.incubator.idle {
}

.incubator.prep {
}

.incubator.cook {
}
*/

.incubator.done {
  /* Egg is ready to hatch */
  animation: gentle-glow 1.5s infinite alternate;
}

.incubator.done .incubator-egg {
  animation: egg-wiggle-inner 1s infinite ease-in-out;
}

/* Layer 6: Digital Display (highest z-index, always visible) */
.digital-display {
  position: absolute;
  top: calc(50% + 32.5%);
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 12px;
  background: #2b2b2b;
  border: 1px solid #4d4d4d;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'VT323', monospace;
  font-size: 8px;
  font-weight: normal;
  z-index: 6;
  pointer-events: none;
  box-shadow: 
    inset 0 0 2px rgba(0, 0, 0, 0.8),
    0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Digital display state colors */
.digital-display.display-stby {
  color: #ffffff;
  text-shadow: 0 0 1px #d1d1d1;
}

.digital-display.display-idle {
  color: #ffff00;
  text-shadow: 0 0 1px #acac00;
}

.digital-display.display-prep {
  color: #ffa500;
  text-shadow: 0 0 1px #d18800;
}

.digital-display.display-cook {
  color: #ff4141;
  animation: pulse-red 1.5s infinite ease-in-out;
}

.digital-display.display-done {
  color: #00ff00;
  animation: pulse-green 1s infinite ease-in-out;
}

/* Pulsing animations for COOK and DONE states */
@keyframes pulse-red {
  0%, 100% {
    color: #9c3131;
    text-shadow: 0 0 1px #ff0000;
  }
  50% {
    color: #ff5d5d;
    text-shadow: 0 0 2px #ff0000, 0 0 4px #ff0000;
  }
}

@keyframes pulse-green {
  0%, 100% {
    color: #36b136;
    text-shadow: 0 0 1px #00ff00;
  }
  50% {
    color: #64ff64;
    text-shadow: 0 0 2px #00ff00, 0 0 4px #00ff00;
  }
}

@keyframes gentle-glow {
  from {
    filter: brightness(1.0);
  }
  to {
    filter: brightness(1.2);
  }
}

@keyframes egg-wiggle-inner {
  /* 250ms wiggle (0-25%), 750ms rest (25-100%) */
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  6.25% {
    transform: translate(-50%, -50%) rotate(-3deg);
  }
  12.5% {
    transform: translate(-50%, -50%) rotate(3deg);
  }
  18.75% {
    transform: translate(-50%, -50%) rotate(-3deg);
  }
  25% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
}