/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(150, 133, 115, 0.1);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(150, 133, 115, 0.5);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(150, 133, 115, 0.7);
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(150, 133, 115, 0.5) rgba(150, 133, 115, 0.1);
}

[data-music-target="toggle"].active {
  animation: pulse 2s infinite;
}

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

[data-controller="music"] {
  transition: transform 0.8s ease-in-out;
}

[data-controller="music"].music-playing {
  transform: translateY(-80px);
}

[data-controller="music"].mobile-music-playing {
  transform: translateY(-40px);
}

[data-music-target="speechBubble"] {
  animation: bubble-pulse 2.5s ease-in-out infinite;
}

@keyframes bubble-pulse {
  0% {
    transform: rotate(-13deg) scale(1);
  }
  50% {
    transform: rotate(-13deg) scale(1.05);
  }
  100% {
    transform: rotate(-13deg) scale(1);
  }
}

@keyframes bounce {
  0%,
  20%,
  53%,
  80%,
  100% {
    transform: translateY(0);
  }
  40%,
  43% {
    transform: translateY(-20px);
  }
  70% {
    transform: translateY(-10 px);
  }
  90% {
    transform: translateY(-4px);
  }
}

.animate-bouncee {
  animation: bounce 1s ease-in-out infinite;
}

@keyframes get-my-attention {
  0%,
  100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
  20%,
  53%,
  80% {
    transform: translateY(0) rotate(-6deg) scale(1.05);
  }
  40%,
  43% {
    transform: translateY(-10px) rotate(6deg) scale(1.1);
  }
  70% {
    transform: translateY(-6px) rotate(-6deg) scale(1.07);
  }
  90% {
    transform: translateY(-2px) rotate(6deg) scale(1.03);
  }
}

.animate-get-my-attention {
  animation: get-my-attention 1s ease-in-out infinite;
  will-change: transform;
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
}

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #dbc3a8;
  background: url("/assets/bg-cf05d959.svg");
  background-size: cover;
  background-position: right bottom;
  z-index: -1;
}

main {
  background: transparent !important;
}

.disable-transitions {
  transition: none !important;

  & * {
    transition: none !important;
  }
}

/* Angry question mark. Chris calls it angry.¯\_(ツ)_/¯ */
.tutorial-help-btn {
  background: #523a52;
}

.tutorial-help-btn:hover {
  background: #856185;
}

.video-autoplay {
  transition: opacity 0.3s ease;
}

.video-autoplay:hover .video-sound-hint {
  opacity: 1;
}

.video-sound-hint {
  transition: opacity 0.3s ease;
  opacity: 0.7;
}

.video-sound-hint:hover {
  opacity: 1;
}

video {
  background-color: #000;
  transition: opacity 0.3s ease;
}

video[data-loading="true"] {
  opacity: 0.7;
}

.video-overlay {
  transition: all 0.3s ease;
}