/* Moved CSS from index.html to style.css */
body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  font-family: 'Orbitron', sans-serif;
  /* @tweakable Body text color */
  color: #00ff00;
  /* @tweakable Body background color */
  background-color: #000;
  /* Base filter applied to the body, useful for global effects like hueRotate */
  filter: none;
  transition: filter 5s ease-in-out;
}
#backgroundGif {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  /* Initial filter for background, can be overridden by effects */
  filter: hue-rotate(0deg);
  transition: filter 5s ease-in-out, transform 1s ease-in-out;
  /* Ensure transform origin is center for spin effect */
  transform-origin: center center;
}
#gifContainer {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  /* @tweakable Perspective for 3D effects */
  perspective: 1000px;
}
.gifWrapper {
  width: 48%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  transform-style: preserve-3d;
  /* @tweakable Base floating animation duration */
  /* Base animation, can be overridden */
  animation: floatAnimation 10s infinite ease-in-out;
}
/* @tweakable Base floating animation properties */
@keyframes floatAnimation {
  0%, 100% { transform: translateZ(0px) rotateX(0deg) rotateY(0deg); }
  /* @tweakable Float animation peak Z translation */
  25% { transform: translateZ(50px) rotateX(5deg) rotateY(5deg); }
   /* @tweakable Float animation trough Z translation */
  50% { transform: translateZ(-30px) rotateX(-3deg) rotateY(-3deg); }
  /* @tweakable Float animation mid-peak Z translation */
  75% { transform: translateZ(20px) rotateX(2deg) rotateY(2deg); }
}
.currentGif {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  /* @tweakable GIF border radius */
  border-radius: 20px;
  /* @tweakable Base GIF shadow */
  box-shadow: 0 0 20px rgba(0, 255, 0, 0.5);
  transition: all 0.5s ease;
  /* Default blend mode */
  mix-blend-mode: normal;
  /* Default filter */
  filter: none;
  /* Default animation */
  animation: none;
  /* Default transform */
  transform: none;
}
.currentGif:hover {
  /* @tweakable GIF hover scale */
  transform: scale(1.05);
  /* @tweakable GIF hover shadow */
  box-shadow: 0 0 30px rgba(0, 255, 255, 0.8);
}
.button {
  padding: 10px 20px;
  /* @tweakable Button font size */
  font-size: 16px;
  /* @tweakable Button background color */
  background-color: rgba(0, 255, 0, 0.2);
  /* @tweakable Button text color */
  color: #00ff00;
  /* @tweakable Button border properties */
  border: 2px solid #00ff00;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s;
  font-family: 'Orbitron', sans-serif;
  text-transform: uppercase;
  letter-spacing: 2px;
}
.button:hover {
  /* @tweakable Button hover background color */
  background-color: rgba(0, 255, 0, 0.4);
  /* @tweakable Button hover shadow */
  box-shadow: 0 0 15px #00ff00;
}
#controlPanel {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 10;
}
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  /* @tweakable Dropdown background color */
  background-color: rgba(0, 0, 0, 0.9);
  min-width: 250px;
  /* @tweakable Dropdown shadow */
  box-shadow: 0 8px 16px rgba(0, 255, 0, 0.2);
  padding: 15px;
  z-index: 1;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 10px;
  /* @tweakable Dropdown border radius */
  border-radius: 10px;
  /* @tweakable Dropdown font size */
  font-size: 14px;
  /* @tweakable Dropdown border color */
  border: 1px solid #00ff00;
}
.dropdown:hover .dropdown-content {
  display: block;
}
#blendModeSelector, #effectSelector {
  margin-top: 10px;
  padding: 5px;
  width: 100%;
  font-size: 14px;
  background-color: rgba(0, 255, 0, 0.1);
  color: #00ff00;
  border: 1px solid #00ff00;
  border-radius: 5px;
  font-family: 'Orbitron', sans-serif;
}
.icon {
  width: 24px;
  height: 24px;
  /* @tweakable Icon fill color */
  fill: #00ff00;
}
#infoPanel {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 10;
}
/* @tweakable colorPulse effect animation colors */
@keyframes colorPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(0, 255, 0, 0.8), 0 0 30px rgba(0, 255, 0, 0.6), 0 0 40px rgba(0, 255, 0, 0.4); }
  25% { box-shadow: 0 0 20px rgba(255, 0, 0, 0.8), 0 0 30px rgba(255, 0, 0, 0.6), 0 0 40px rgba(255, 0, 0, 0.4); }
  50% { box-shadow: 0 0 20px rgba(0, 0, 255, 0.8), 0 0 30px rgba(0, 0, 255, 0.6), 0 0 40px rgba(0, 0, 255, 0.4); }
  75% { box-shadow: 0 0 20px rgba(255, 255, 0, 0.8), 0 0 30px rgba(255, 255, 0, 0.6), 0 0 40px rgba(255, 255, 0, 0.4); }
}
/* @tweakable spin effect animation properties */
@keyframes spin {
  0% { transform: rotate(0deg) scale(1.5); }
  /* @tweakable Spin end rotation */
  100% { transform: rotate(360deg) scale(1.5); }
}
/* @tweakable hueRotate effect animation speed */
@keyframes hueRotate {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}
/* @tweakable glitch effect animation properties */
@keyframes glitch {
  0% { transform: translate(0); }
   /* @tweakable Glitch translation amount X */
  20% { transform: translate(-3px, 3px); }
   /* @tweakable Glitch translation amount Y */
  40% { transform: translate(3px, -3px); }
   /* @tweakable Glitch translation amount X */
  60% { transform: translate(-3px, -3px); }
   /* @tweakable Glitch translation amount Y */
  80% { transform: translate(3px, 3px); }
  100% { transform: translate(0); }
}
/* @tweakable dimensionShift effect animation properties */
@keyframes dimensionShift {
  0%, 100% { transform: perspective(1000px) rotateX(0deg) rotateY(0deg) scale(1); }
  /* @tweakable Dimension shift max scale */
  25% { transform: perspective(800px) rotateX(180deg) rotateY(0deg) scale(1.2); }
  /* @tweakable Dimension shift min scale */
  50% { transform: perspective(1200px) rotateX(180deg) rotateY(180deg) scale(0.8); }
  /* @tweakable Dimension shift mid scale */
  75% { transform: perspective(900px) rotateX(0deg) rotateY(180deg) scale(1.1); }
}
/* @tweakable wave effect animation properties */
@keyframes wave {
  0%, 100% { transform: translateY(0) translateX(0); }
  /* @tweakable Wave translation amount Y */
  25% { transform: translateY(5px) translateX(5px); }
   /* @tweakable Wave translation amount X */
  50% { transform: translateY(0) translateX(10px); }
   /* @tweakable Wave translation amount Y */
  75% { transform: translateY(-5px) translateX(5px); }
}
/* Placeholder for potential 3D class, currently unused */
.gif3d {
   /* @tweakable 3D effect perspective */
  transform: perspective(1000px) rotateY(15deg);
  transition: transform 0.5s;
}
.gif3d:hover {
  transform: perspective(1000px) rotateY(-15deg);
}
.dropdown-content div {
  margin-bottom: 10px;
}
.dropdown-content input[type="checkbox"] {
  margin-right: 10px;
}
.dropdown-content label {
  color: #00ff00;
  cursor: pointer;
}
#dokterAreQuote {
  position: fixed;
  bottom: 80px;
  right: 20px;
  text-align: right;
  /* @tweakable Quote font size */
  font-size: 12px;
  /* @tweakable Quote text color */
  color: #ffffff;
  /* @tweakable Quote text shadow */
  text-shadow: 0 0 5px #00ff00;
  z-index: 1000;
}
#dokterAreQuote p {
  margin: 5px 0;
}
#fsmQuote {
  position: fixed;
  bottom: 20px;
  right: 20px;
  text-align: right;
  /* @tweakable FSM Quote font size */
  font-size: 12px;
  /* @tweakable FSM Quote text color */
  color: #ffffff;
  /* @tweakable FSM Quote text shadow */
  text-shadow: 0 0 5px #ff0000;
  font-style: italic;
  z-index: 1000;
}

/* Add any new animations needed here, e.g., vortex, escape if they weren't CSS keyframes before */
 /* @tweakable vortex animation blur */
 @keyframes vortex {
  0% { transform: rotate(0deg) scale(1); filter: blur(0px); }
  /* @tweakable Vortex mid-rotation */
  50% { transform: rotate(180deg) scale(1.2); filter: blur(5px); }
  /* @tweakable Vortex end-rotation */
  100% { transform: rotate(360deg) scale(1); filter: blur(0px); }
}
/* @tweakable escape animation properties */
@keyframes escape {
   0%, 100% { transform: translate(0, 0) scale(1); opacity: 1; }
   /* @tweakable Escape target position X */
   /* @tweakable Escape target position Y */
   /* @tweakable Escape target scale */
   /* @tweakable Escape target opacity */
   50% { transform: translate(150px, -150px) scale(0.5); opacity: 0; }
}