/* ===========================================
   Bolas Carta - Playful Animations
   For in-store display screens
   =========================================== */

/* ----- Keyframe Definitions ----- */

/* Logo breathing */
@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}

/* Entrance fade-in up */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade out for clearing */
@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* Spin in */
@keyframes spinIn {
  from {
    opacity: 0;
    transform: rotate(-180deg) scale(0.5);
  }
  to {
    opacity: 1;
    transform: rotate(0) scale(1);
  }
}

/* Slide from left */
@keyframes slideFromLeft {
  from {
    opacity: 0;
    transform: translateX(-100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Slide from right */
@keyframes slideFromRight {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Bounce in */
@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    transform: scale(1.1);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Slide from bottom */
@keyframes slideFromBottom {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ----- Apply Continuous Animations ----- */

/* Logo - subtle breathing */
.logo-image {
  animation: breathe 4s ease-in-out infinite;
}

/* ----- Entrance Animation Classes (applied via JS) ----- */

.fade-out { animation: fadeOut 0.5s ease-out forwards; }
.anim-spin { animation: spinIn 0.8s ease-out forwards; }
.anim-slide-left { animation: slideFromLeft 0.8s ease-out forwards; }
.anim-slide-right { animation: slideFromRight 0.8s ease-out forwards; }
.anim-bounce { animation: bounceIn 0.8s ease-out forwards; }
.anim-slide-bottom { animation: slideFromBottom 0.8s ease-out forwards; }
.anim-fade { animation: fadeInUp 0.8s ease-out forwards; }

/* Hidden state for refresh */
.hidden { opacity: 0; }

/* ----- Blue Spill Transition ----- */

/* Blue overlay that expands to cover screen */
.blue-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #1e1a3d;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
}

@keyframes blueSpill {
  0% {
    opacity: 0;
    transform: scale(0);
    border-radius: 50%;
  }
  50% {
    opacity: 1;
    transform: scale(1.5);
    border-radius: 0;
  }
  100% {
    opacity: 1;
    transform: scale(1);
    border-radius: 0;
  }
}

@keyframes blueRetract {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

.blue-spill {
  animation: blueSpill 0.8s ease-out forwards;
  transform-origin: center;
}

.blue-retract {
  animation: blueRetract 0.5s ease-out forwards;
}

/* ----- Logo Center Animation ----- */

@keyframes logoToCenter {
  0% {
    position: relative;
    transform: translate(0, 0) scale(1);
  }
  100% {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1.5);
    z-index: 1001;
  }
}

@keyframes logoFromCenter {
  0% {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1.5);
    z-index: 1001;
  }
  100% {
    position: relative;
    top: auto;
    left: auto;
    transform: translate(0, 0) scale(1);
    z-index: auto;
  }
}

.logo-to-center {
  animation: logoToCenter 0.6s ease-out forwards;
  z-index: 1001 !important;
}

.logo-from-center {
  animation: logoFromCenter 0.6s ease-out forwards;
}

/* ----- Hide Blue Backgrounds Effect ----- */

.bg-disappear {
  background-color: white !important;
  color: white !important;
  transition: background-color 0.3s ease-out, color 0.3s ease-out;
}