/* ========================================
   CSS CUSTOM PROPERTIES
   ======================================== */
:root {
  /* Button dimensions */
  --button-size: 15vw;
  --img-size: 12vw;
  --button-radius: 50%;

  /* Colors */
  --button-bg: #fff;
  --bg-color: #242121;

  /* Shadows */
  --button-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);

  /* Animation durations */
  --pop-in-duration: 1s;
  --fade-out-duration: 1s;
  --jump-duration: 1s;
  --sound-transition: 1s;

  /* Move animation timing */
  --move-duration: 5s;
  --move-stagger: 2s;

  /* Eye tracking / Gaze */
  --gaze-dwell-time: 2000ms;
  --gaze-gradient-start: rgba(66, 133, 244, 0.3);
  --gaze-gradient-end: rgba(66, 133, 244, 0.7);
  /* --gaze-scale: 1.05; */
}

/* ========================================
   BASE STYLES
   ======================================== */
body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

html {
  overflow: hidden;
}

/* ========================================
   CONTROL BUTTONS
   ======================================== */
.control-btn {
  position: fixed;
  border-radius: 50%;
  border: none;
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0.2vw 0.8vw rgba(0, 0, 0, 0.2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  padding: 0;
  z-index: 1000;
}

.reset-btn {
  width: 7vw;
  height: 7vw;
  min-width: 6vh;
  min-height: 6vh;
  top: 2vh;
  right: 2vw;
}

.reset-btn svg {
  width: 4vw;
  height: 4vw;
  min-width: 3.5vh;
  min-height: 3.5vh;
  color: #333;
}

.settings-btn {
  width: 5vw;
  height: 5vw;
  min-width: 5vh;
  min-height: 5vh;
  bottom: 2vh;
  right: 3vw;
}

.settings-btn svg,
img {
  width: 2.5vw;
  height: 2.5vw;
  min-width: 2.5vh;
  min-height: 2.5vh;
  color: #333;
}

.control-btn:hover {
  background-color: rgba(255, 255, 255, 1);
  box-shadow: 0 0.4vw 1.2vw rgba(0, 0, 0, 0.3);
}

.control-btn:active {
  transform: scale(0.95);
}

/* Gaze focus effect for control buttons */
.control-btn.gaze-focused {
  /* Don't scale to prevent layout shift */
  transition: none;
}

.control-btn.gaze-focused::before {
  content: "";
  position: absolute;
  top: -0.5vw;
  left: -0.5vw;
  width: calc(100% + 1vw);
  height: calc(100% + 1vw);
  border-radius: 50%;
  background: linear-gradient(
    to left,
    var(--gaze-gradient-end) 0%,
    var(--gaze-gradient-start) 100%
  );
  animation: gaze-dwell-progress var(--gaze-dwell-time) linear;
  pointer-events: none;
  z-index: -1;
}

/* Background Theme Classes */
body.theme-light {
  background-color: #f5f5f5;
}

body.theme-dark {
  background-color: #242121;
}

body.theme-image {
  background-image: url("../public/images/farm-yard.jpg");
  background-size: cover;
  background-position: bottom;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* ========================================
   ANIMAL BUTTON COMPONENT
   ======================================== */
.animal-btn {
  width: var(--button-size);
  height: var(--button-size);
  padding: 0;
  border: none;
  border-radius: var(--button-radius);
  background-color: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.animal-img {
  width: var(--img-size);
  height: var(--img-size);
}

/* ========================================
   ANIMATION STATES
   ======================================== */
.animal-btn.animate-in {
  animation: pop-in var(--pop-in-duration) ease-in-out;
}

.animal-btn.animate-paused {
  animation-play-state: paused;
}

.animal-btn.animate-out {
  animation: fade-out var(--fade-out-duration) forwards;
}

.animal-btn.animate-sound {
  transform: scale(1.5);
  transition: transform var(--sound-transition) ease-in-out;
  /* animation: jump var(--jump-duration) ease-in-out infinite; */
}

/* ========================================
   GAZE / EYE TRACKING STATES
   ======================================== */
.animal-btn.gaze-focused {
  transform: scale(var(--gaze-scale));
  transition: transform 0.5s ease-out;
  position: relative;
}

.animal-btn.gaze-focused::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--button-radius);
  background: linear-gradient(
    to left,
    var(--gaze-gradient-end) 0%,
    var(--gaze-gradient-start) 100%
  );
  animation: gaze-dwell-progress var(--gaze-dwell-time) linear;
  pointer-events: none;
  z-index: -1;
}

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */
@keyframes move-top {
  from {
    transform: none;
  }
  to {
    transform: translateY(var(--top-position));
  }
}

@keyframes pop-in {
  from {
    transform: scale(0.2);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes jump {
  0%,
  100% {
    transform: none;
  }
  50% {
    transform: translateY(-5%);
  }
}

@keyframes fade-out {
  from {
    transform: scale(1.5);
    opacity: 1;
  }
  to {
    transform: scale(0.2);
    opacity: 0;
  }
}

@keyframes gaze-dwell-progress {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

/* Play button pulsing animation */
.animal-btn.animate-pulse {
  animation: pulse 0.8s ease-in-out infinite;
}