/*
 * 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);
    }
  }

  body {
    cursor: url("/assets/cursor-7dedd0b6.svg") 0 0, auto;
  }
  
  a,
  button,
  [role="button"],
  input[type="submit"],
  input[type="button"],
  input[type="reset"] {
    cursor: url("/assets/cursorPointer-95cefca5.svg") 6 2, pointer;
  }

  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  input[type="number"],
  textarea,
  [contenteditable="true"] {
    cursor: url("/assets/cursorText-5c3380a1.svg") 6 12, text;
  }