/* Extra styles for Honey Cake Marathon */
/* Template elements are hidden by default */
[data-is-template-element="true"] {
  display: none !important;
}
/* If the value is "hidden", the element is hidden by default, but still in the DOM */
[data-is-template-element="hidden"] {
  visibility: hidden !important;
}

/* Micromodal - show modal when is-open class is added (overrides hidden) */
.modal.hidden.is-open {
  display: block !important;
}

/* Micromodal slide animations */
.micromodal-slide {
  animation: none;
}

.micromodal-slide[aria-hidden="false"] .modal__overlay {
  animation: mmfadeIn 0.2s cubic-bezier(0, 0, 0.2, 1);
}

.micromodal-slide[aria-hidden="false"] .modal__container {
  animation: mmslideIn 0.2s cubic-bezier(0, 0, 0.2, 1);
}

.micromodal-slide[aria-hidden="true"] .modal__overlay {
  animation: mmfadeOut 0.2s cubic-bezier(0, 0, 0.2, 1);
}

.micromodal-slide[aria-hidden="true"] .modal__container {
  animation: mmslideOut 0.2s cubic-bezier(0, 0, 0.2, 1);
}

@keyframes mmfadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes mmfadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes mmslideIn {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes mmslideOut {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(20px);
    opacity: 0;
  }
}

/* Honeypot shake animations */
@keyframes shake {
  0%,
  100% {
    transform: translateX(0) rotate(0deg);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translateX(-2.5px) rotate(-1deg);
  }
  20%,
  40%,
  60%,
  80% {
    transform: translateX(2.5px) rotate(1deg);
  }
}

img.honeypot-image {
  content: url("assets/pot.png");
  margin: auto;
  position: relative;
  z-index: 1;
  --shake-intensity: 1;
}

img.honeypot-image.shaking {
  animation: shake 0.5s ease-in-out infinite;
  --shake-intensity: 1;
}

img.honeypot-image.intro {
  animation: shakeIntro 0.5s ease-in forwards;
  --shake-intensity: 0;
}

img.honeypot-image.outro {
  animation: shakeOutro 0.5s ease-out forwards;
  --shake-intensity: 1;
}

@keyframes shakeIntro {
  0% {
    transform: translateX(0) rotate(0deg);
  }
  10% {
    transform: translateX(-0.25px) rotate(-0.1deg);
  }
  20% {
    transform: translateX(0.25px) rotate(0.1deg);
  }
  30% {
    transform: translateX(-0.75px) rotate(-0.3deg);
  }
  40% {
    transform: translateX(0.75px) rotate(0.3deg);
  }
  50% {
    transform: translateX(-1.25px) rotate(-0.5deg);
  }
  60% {
    transform: translateX(1.25px) rotate(0.5deg);
  }
  70% {
    transform: translateX(-1.75px) rotate(-0.7deg);
  }
  80% {
    transform: translateX(1.75px) rotate(0.7deg);
  }
  90% {
    transform: translateX(-2.25px) rotate(-0.9deg);
  }
  100% {
    transform: translateX(-2.5px) rotate(-1deg);
  }
}

@keyframes shakeOutro {
  0% {
    transform: translateX(-2.5px) rotate(-1deg);
  }
  10% {
    transform: translateX(-2.25px) rotate(-0.9deg);
  }
  20% {
    transform: translateX(2.25px) rotate(0.9deg);
  }
  30% {
    transform: translateX(-1.75px) rotate(-0.7deg);
  }
  40% {
    transform: translateX(1.75px) rotate(0.7deg);
  }
  50% {
    transform: translateX(-1.25px) rotate(-0.5deg);
  }
  60% {
    transform: translateX(1.25px) rotate(0.5deg);
  }
  70% {
    transform: translateX(-0.75px) rotate(-0.3deg);
  }
  80% {
    transform: translateX(0.75px) rotate(0.3deg);
  }
  90% {
    transform: translateX(-0.25px) rotate(-0.1deg);
  }
  100% {
    transform: translateX(0) rotate(0deg);
  }
}

/* Bee wobble animation - uses CSS custom properties for dynamic rotation and scale */
@keyframes beeWobble {
  0% {
    transform: scaleX(var(--bee-scale-x)) rotate(var(--bee-rotation))
      translate(0, 0);
  }
  12.5% {
    transform: scaleX(var(--bee-scale-x)) rotate(var(--bee-rotation))
      translate(12px, -8px);
  }
  25% {
    transform: scaleX(var(--bee-scale-x)) rotate(var(--bee-rotation))
      translate(-7px, 11px);
  }
  37.5% {
    transform: scaleX(var(--bee-scale-x)) rotate(var(--bee-rotation))
      translate(9px, -5px);
  }
  50% {
    transform: scaleX(var(--bee-scale-x)) rotate(var(--bee-rotation))
      translate(-11px, 9px);
  }
  62.5% {
    transform: scaleX(var(--bee-scale-x)) rotate(var(--bee-rotation))
      translate(6px, -12px);
  }
  75% {
    transform: scaleX(var(--bee-scale-x)) rotate(var(--bee-rotation))
      translate(-8px, 7px);
  }
  87.5% {
    transform: scaleX(var(--bee-scale-x)) rotate(var(--bee-rotation))
      translate(10px, -9px);
  }
  100% {
    transform: scaleX(var(--bee-scale-x)) rotate(var(--bee-rotation))
      translate(-4px, 6px);
  }
}

img.bee-image {
  --bee-scale-x: 1;
  --bee-rotation: 0deg;
  animation: beeWobble 3.2s ease-in-out infinite;
}

/* Choices.js library overrides - third-party library styles */
.choices__item--choice {
  display: flex;
  align-items: center;
  gap: 8px;
}

.choices__list--dropdown .choices__item--choice {
  padding: 8px 12px;
}

/* Campaign view logo container - adjust height to match image */
.campaign-view-logo {
  height: auto !important;
  max-height: none !important;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}