/* Cat Animation Styles */
/* 
 * To customize sprite paths, search and replace the path in this file,
 * or override the background-image properties in your own CSS.
 * 
 * Default sprite path: "/animation/white outline/"
 */

:root {
  --bg-color: #3a5a41;
}

/* * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
} */

.stage {
  position: relative;
  width: 900px;
  height: 400px;
  background: var(--bg-color);
  border-radius: 16px;
  overflow: hidden;
  margin-top: -23px;
}

/* Preload all sprite images by setting them on a hidden pseudo-element */
.stage::before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
  background-image: url("/animation/white outline/spotted_walking_once_out_out.png"),
    url("/animation/white outline/striped_walking_once_out_out.png"),
    url("/animation/white outline/spotted_stand_out_out.png"),
    url("/animation/white outline/striped_stand_out_out.png"),
    url("/animation/white outline/cuddle_out_out.png"),
    url("/animation/white outline/final_out_out.png");
}

/* Ground line */
/* .stage::after {
  content: "";
  position: absolute;
  bottom: 60px;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(0, 0, 0, 0.2);
} */

.cat {
  position: absolute;
  bottom: 60px;
  background-repeat: no-repeat;
  image-rendering: crisp-edges;
  /* Prevent flash during phase transitions */
  will-change: transform, opacity, background-position;
  backface-visibility: hidden;
}

/* Spotted cat (Annie) - walks from left */
.spotted {
  left: -300px;
  bottom: 61px;
  width: 291px;
  height: 158px;
  background-image: url("/animation/white outline/spotted_walking_once_out_out.png");
  background-size: 1746px 948px;
  transform: scale(1);
  transform-origin: bottom left;
}

/* Striped cat (Danielle) - walks from right, mirrored */
.striped {
  right: -300px;
  bottom: 60px;
  width: 274px;
  height: 160px;
  background-image: url("/animation/white outline/striped_walking_once_out_out.png");
  background-size: 1644px 960px;
  transform: scaleX(-1) scale(1);
  transform-origin: bottom right;
}

/* Cuddle (both cats) - centered, hidden initially */
.cuddle {
  left: 50%;
  transform: translateX(-50%) scale(1);
  transform-origin: bottom center;
  bottom: 60px;
  width: 319px;
  height: 203px;
  background-image: url("/animation/white outline/cuddle_out_out.png");
  background-size: 1914px 1218px;
  opacity: 0;
  pointer-events: none;
}

/* Final result - centered, hidden initially */
.final {
  opacity: 0;
  pointer-events: none;
  width: 400px;
  height: 400px;
  background-image: url("/animation/white outline/final_out_out.png");
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  left: 50% + 25px;
  bottom: 0px;
  transform: translateX(-50%) scale(1);
  transform-origin: bottom center;
}

/* ===== OVERLAY STYLES ===== */
.overlay {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  filter: brightness(1.2) sepia(0.5) hue-rotate(180deg); /* Blue tint to distinguish */
}

.overlay.visible {
  opacity: 0.5;
}

/* Stand overlay (first frame) - spotted */
.spotted-stand-overlay {
  width: 365px;
  height: 301px;
  background-image: url("/animation/white outline/spotted_stand_out_out.png");
  background-size: 2190px 1806px;
  background-position: 0 0; /* First frame */
}

/* Stand overlay (first frame) - striped */
.striped-stand-overlay {
  width: 365px;
  height: 301px;
  background-image: url("/animation/white outline/striped_stand_out_out.png");
  background-size: 2190px 1806px;
  background-position: 0 0; /* First frame */
  transform: scaleX(-1);
}

/* Cuddle overlay (first frame) */
.cuddle-overlay {
  width: 319px;
  height: 203px;
  background-image: url("/animation/white outline/cuddle_out_out.png");
  background-size: 1914px 1218px;
  background-position: 0 0; /* First frame */
}

/* ===== ANIMATION STATES ===== */

/* Phase 1: Walking */
.stage.phase-walk .spotted {
  left: var(--walk-spotted-x, 278px);
  bottom: var(--walk-spotted-y, 141px);
  transform: scale(var(--walk-spotted-scale, 0.56));
  animation: spotted-walk-sprite 3s steps(1) infinite,
    spotted-enter 3s ease-out forwards;
  opacity: 1;
}

.stage.phase-walk .striped {
  right: var(--walk-striped-x, 435px);
  bottom: var(--walk-striped-y, 141px);
  transform: scaleX(-1) scale(var(--walk-striped-scale, 0.5));
  animation: striped-walk-sprite 3s steps(1) infinite,
    striped-enter 3s ease-out forwards;
  opacity: 1;
}

/* Phase 2: Standing */
.stage.phase-stand .spotted {
  left: var(--stand-spotted-x, 283px);
  bottom: var(--stand-spotted-y, 98px);
  width: 394px;
  height: 279px;
  background-image: url("/animation/white outline/spotted_stand_out_out.png");
  background-size: 2364px 1674px;
  animation: spotted-stand-sprite 3s steps(1) infinite;
  transform: scale(var(--stand-spotted-scale, 0.5));
  transform-origin: bottom left;
  opacity: 1;
  /* Keep old background visible during transition to prevent flash */
  transition: background-image 0s;
}

.stage.phase-stand .striped {
  right: var(--stand-striped-x, 457px);
  bottom: var(--stand-striped-y, 102px);
  width: 365px;
  height: 301px;
  background-image: url("/animation/white outline/striped_stand_out_out.png");
  background-size: 2190px 1806px;
  animation: striped-stand-sprite 3s steps(1) infinite;
  transform: scaleX(-1) scale(var(--stand-striped-scale, 0.44));
  transform-origin: bottom right;
  opacity: 1;
  /* Keep old background visible during transition to prevent flash */
  transition: background-image 0s;
}

/* Phase 3: Cuddling */
.stage.phase-cuddle .spotted,
.stage.phase-cuddle .striped {
  opacity: 0;
  pointer-events: none;
}

.stage.phase-cuddle .cuddle {
  opacity: 1;
  pointer-events: auto;
  animation: cuddle-sprite 3s steps(1) forwards;
}

/* Phase 4: Result */
.stage.phase-final .spotted,
.stage.phase-final .striped {
  opacity: 0;
  pointer-events: none;
}

/* Morph from cuddle to final */
.stage.phase-final .cuddle {
  /* Set to last frame of cuddle animation */
  background-position: -1595px -1015px;
  opacity: 1;
}

.stage.phase-final .final {
  opacity: 1;
  pointer-events: auto;
  background-color: var(--bg-color);
  animation: final-heart-grow 1.5s cubic-bezier(0.77, 0, 0.18, 1) forwards;
}

@keyframes final-heart-grow {
  0% {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M50,90 C50,90 10,60 10,40 C10,25 20,15 30,15 C40,15 50,25 50,25 C50,25 60,15 70,15 C80,15 90,25 90,40 C90,60 50,90 50,90 Z" fill="black"/></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M50,90 C50,90 10,60 10,40 C10,25 20,15 30,15 C40,15 50,25 50,25 C50,25 60,15 70,15 C80,15 90,25 90,40 C90,60 50,90 50,90 Z" fill="black"/></svg>');
    -webkit-mask-size: 0% 0%;
    mask-size: 0% 0%;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }
  100% {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M50,90 C50,90 10,60 10,40 C10,25 20,15 30,15 C40,15 50,25 50,25 C50,25 60,15 70,15 C80,15 90,25 90,40 C90,60 50,90 50,90 Z" fill="black"/></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M50,90 C50,90 10,60 10,40 C10,25 20,15 30,15 C40,15 50,25 50,25 C50,25 60,15 70,15 C80,15 90,25 90,40 C90,60 50,90 50,90 Z" fill="black"/></svg>');
    -webkit-mask-size: 300% 300%;
    mask-size: 300% 300%;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }
}

/* Movement animations */
@keyframes spotted-enter {
  0% {
    left: -300px;
  }
  100% {
    left: var(--walk-spotted-x, 278px);
  }
}

@keyframes striped-enter {
  0% {
    right: -300px;
  }
  100% {
    right: var(--walk-striped-x, 435px);
  }
}

/* Sprite animations - 6x6 grid */
@keyframes spotted-walk-sprite {
  0% {
    background-position: 0 0;
  }
  2.78% {
    background-position: -291px 0;
  }
  5.56% {
    background-position: -582px 0;
  }
  8.33% {
    background-position: -873px 0;
  }
  11.11% {
    background-position: -1164px 0;
  }
  13.89% {
    background-position: -1455px 0;
  }
  16.67% {
    background-position: 0 -158px;
  }
  19.44% {
    background-position: -291px -158px;
  }
  22.22% {
    background-position: -582px -158px;
  }
  25% {
    background-position: -873px -158px;
  }
  27.78% {
    background-position: -1164px -158px;
  }
  30.56% {
    background-position: -1455px -158px;
  }
  33.33% {
    background-position: 0 -316px;
  }
  36.11% {
    background-position: -291px -316px;
  }
  38.89% {
    background-position: -582px -316px;
  }
  41.67% {
    background-position: -873px -316px;
  }
  44.44% {
    background-position: -1164px -316px;
  }
  47.22% {
    background-position: -1455px -316px;
  }
  50% {
    background-position: 0 -474px;
  }
  52.78% {
    background-position: -291px -474px;
  }
  55.56% {
    background-position: -582px -474px;
  }
  58.33% {
    background-position: -873px -474px;
  }
  61.11% {
    background-position: -1164px -474px;
  }
  63.89% {
    background-position: -1455px -474px;
  }
  66.67% {
    background-position: 0 -632px;
  }
  69.44% {
    background-position: -291px -632px;
  }
  72.22% {
    background-position: -582px -632px;
  }
  75% {
    background-position: -873px -632px;
  }
  77.78% {
    background-position: -1164px -632px;
  }
  80.56% {
    background-position: -1455px -632px;
  }
  83.33% {
    background-position: 0 -790px;
  }
  86.11% {
    background-position: -291px -790px;
  }
  88.89% {
    background-position: -582px -790px;
  }
  91.67% {
    background-position: -873px -790px;
  }
  94.44% {
    background-position: -1164px -790px;
  }
  97.22% {
    background-position: -1455px -790px;
  }
  100% {
    background-position: -1595px -790px;
  }
}

@keyframes striped-walk-sprite {
  0% {
    background-position: 0 0;
  }
  2.78% {
    background-position: -274px 0;
  }
  5.56% {
    background-position: -548px 0;
  }
  8.33% {
    background-position: -822px 0;
  }
  11.11% {
    background-position: -1096px 0;
  }
  13.89% {
    background-position: -1370px 0;
  }
  16.67% {
    background-position: 0 -160px;
  }
  19.44% {
    background-position: -274px -160px;
  }
  22.22% {
    background-position: -548px -160px;
  }
  25% {
    background-position: -822px -160px;
  }
  27.78% {
    background-position: -1096px -160px;
  }
  30.56% {
    background-position: -1370px -160px;
  }
  33.33% {
    background-position: 0 -320px;
  }
  36.11% {
    background-position: -274px -320px;
  }
  38.89% {
    background-position: -548px -320px;
  }
  41.67% {
    background-position: -822px -320px;
  }
  44.44% {
    background-position: -1096px -320px;
  }
  47.22% {
    background-position: -1370px -320px;
  }
  50% {
    background-position: 0 -480px;
  }
  52.78% {
    background-position: -274px -480px;
  }
  55.56% {
    background-position: -548px -480px;
  }
  58.33% {
    background-position: -822px -480px;
  }
  61.11% {
    background-position: -1096px -480px;
  }
  63.89% {
    background-position: -1370px -480px;
  }
  66.67% {
    background-position: 0 -640px;
  }
  69.44% {
    background-position: -274px -640px;
  }
  72.22% {
    background-position: -548px -640px;
  }
  75% {
    background-position: -822px -640px;
  }
  77.78% {
    background-position: -1096px -640px;
  }
  80.56% {
    background-position: -1370px -640px;
  }
  83.33% {
    background-position: 0 -800px;
  }
  86.11% {
    background-position: -274px -800px;
  }
  88.89% {
    background-position: -548px -800px;
  }
  91.67% {
    background-position: -822px -800px;
  }
  94.44% {
    background-position: -1096px -800px;
  }
  97.22% {
    background-position: -1370px -800px;
  }
}

@keyframes spotted-stand-sprite {
  0% {
    background-position: 0 0;
  }
  2.78% {
    background-position: -394px 0;
  }
  5.56% {
    background-position: -788px 0;
  }
  8.33% {
    background-position: -1182px 0;
  }
  11.11% {
    background-position: -1576px 0;
  }
  13.89% {
    background-position: -1970px 0;
  }
  16.67% {
    background-position: 0 -279px;
  }
  19.44% {
    background-position: -394px -279px;
  }
  22.22% {
    background-position: -788px -279px;
  }
  25% {
    background-position: -1182px -279px;
  }
  27.78% {
    background-position: -1576px -279px;
  }
  30.56% {
    background-position: -1970px -279px;
  }
  33.33% {
    background-position: 0 -558px;
  }
  36.11% {
    background-position: -394px -558px;
  }
  38.89% {
    background-position: -788px -558px;
  }
  41.67% {
    background-position: -1182px -558px;
  }
  44.44% {
    background-position: -1576px -558px;
  }
  47.22% {
    background-position: -1970px -558px;
  }
  50% {
    background-position: 0 -837px;
  }
  52.78% {
    background-position: -394px -837px;
  }
  55.56% {
    background-position: -788px -837px;
  }
  58.33% {
    background-position: -1182px -837px;
  }
  61.11% {
    background-position: -1576px -837px;
  }
  63.89% {
    background-position: -1970px -837px;
  }
  66.67% {
    background-position: 0 -1116px;
  }
  69.44% {
    background-position: -394px -1116px;
  }
  72.22% {
    background-position: -788px -1116px;
  }
  75% {
    background-position: -1182px -1116px;
  }
  77.78% {
    background-position: -1576px -1116px;
  }
  80.56% {
    background-position: -1970px -1116px;
  }
  83.33% {
    background-position: 0 -1395px;
  }
  86.11% {
    background-position: -394px -1395px;
  }
  88.89% {
    background-position: -788px -1395px;
  }
  91.67% {
    background-position: -1182px -1395px;
  }
  94.44% {
    background-position: -1576px -1395px;
  }
  97.22% {
    background-position: -1970px -1395px;
  }
}

@keyframes striped-stand-sprite {
  0% {
    background-position: 0 0;
  }
  2.78% {
    background-position: -365px 0;
  }
  5.56% {
    background-position: -730px 0;
  }
  8.33% {
    background-position: -1095px 0;
  }
  11.11% {
    background-position: -1460px 0;
  }
  13.89% {
    background-position: -1825px 0;
  }
  16.67% {
    background-position: 0 -301px;
  }
  19.44% {
    background-position: -365px -301px;
  }
  22.22% {
    background-position: -730px -301px;
  }
  25% {
    background-position: -1095px -301px;
  }
  27.78% {
    background-position: -1460px -301px;
  }
  30.56% {
    background-position: -1825px -301px;
  }
  33.33% {
    background-position: 0 -602px;
  }
  36.11% {
    background-position: -365px -602px;
  }
  38.89% {
    background-position: -730px -602px;
  }
  41.67% {
    background-position: -1095px -602px;
  }
  44.44% {
    background-position: -1460px -602px;
  }
  47.22% {
    background-position: -1825px -602px;
  }
  50% {
    background-position: 0 -903px;
  }
  52.78% {
    background-position: -365px -903px;
  }
  55.56% {
    background-position: -730px -903px;
  }
  58.33% {
    background-position: -1095px -903px;
  }
  61.11% {
    background-position: -1460px -903px;
  }
  63.89% {
    background-position: -1825px -903px;
  }
  66.67% {
    background-position: 0 -1204px;
  }
  69.44% {
    background-position: -365px -1204px;
  }
  72.22% {
    background-position: -730px -1204px;
  }
  75% {
    background-position: -1095px -1204px;
  }
  77.78% {
    background-position: -1460px -1204px;
  }
  80.56% {
    background-position: -1825px -1204px;
  }
  83.33% {
    background-position: 0 -1505px;
  }
  86.11% {
    background-position: -365px -1505px;
  }
  88.89% {
    background-position: -730px -1505px;
  }
  91.67% {
    background-position: -1095px -1505px;
  }
  94.44% {
    background-position: -1460px -1505px;
  }
  97.22% {
    background-position: -1825px -1505px;
  }
}

@keyframes cuddle-sprite {
  0% {
    background-position: 0 0;
  }
  2.78% {
    background-position: -319px 0;
  }
  5.56% {
    background-position: -638px 0;
  }
  8.33% {
    background-position: -957px 0;
  }
  11.11% {
    background-position: -1276px 0;
  }
  13.89% {
    background-position: -1595px 0;
  }
  16.67% {
    background-position: 0 -203px;
  }
  19.44% {
    background-position: -319px -203px;
  }
  22.22% {
    background-position: -638px -203px;
  }
  25% {
    background-position: -957px -203px;
  }
  27.78% {
    background-position: -1276px -203px;
  }
  30.56% {
    background-position: -1595px -203px;
  }
  33.33% {
    background-position: 0 -406px;
  }
  36.11% {
    background-position: -319px -406px;
  }
  38.89% {
    background-position: -638px -406px;
  }
  41.67% {
    background-position: -957px -406px;
  }
  44.44% {
    background-position: -1276px -406px;
  }
  47.22% {
    background-position: -1595px -406px;
  }
  50% {
    background-position: 0 -609px;
  }
  52.78% {
    background-position: -319px -609px;
  }
  55.56% {
    background-position: -638px -609px;
  }
  58.33% {
    background-position: -957px -609px;
  }
  61.11% {
    background-position: -1276px -609px;
  }
  63.89% {
    background-position: -1595px -609px;
  }
  66.67% {
    background-position: 0 -812px;
  }
  69.44% {
    background-position: -319px -812px;
  }
  72.22% {
    background-position: -638px -812px;
  }
  75% {
    background-position: -957px -812px;
  }
  77.78% {
    background-position: -1276px -812px;
  }
  80.56% {
    background-position: -1595px -812px;
  }
  83.33% {
    background-position: 0 -1015px;
  }
  86.11% {
    background-position: -319px -1015px;
  }
  88.89% {
    background-position: -638px -1015px;
  }
  91.67% {
    background-position: -957px -1015px;
  }
  94.44% {
    background-position: -1276px -1015px;
  }
  97.22% {
    background-position: -1595px -1015px;
  }
  100% {
    background-position: -1595px -1015px;
  }
}