@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";
/* [project]/styles/discographyAnimations.css [app-client] (css) */
@font-face {
  font-family: PP Neue Montreal;
  src: url("https://fonts.cdnfonts.com/s/100431/ppneuemontreal-bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

.pp-neue-montreal {
  font-family: PP Neue Montreal, -apple-system, BlinkMacSystemFont, Segoe UI, Inter, sans-serif;
}

.discography-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.discography-scrollbar::-webkit-scrollbar {
  display: none;
}

.discography-item {
  position: relative;
  overflow: hidden;
}

.discography-item:before {
  content: "";
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(90deg, #0000, #00ffff1a, #0000);
  width: 100%;
  height: 100%;
  transition: left .5s cubic-bezier(.25, .46, .45, .94);
  position: absolute;
  top: 0;
  left: -100%;
}

.discography-item:hover:before {
  left: 100%;
}

@keyframes letterWave {
  0%, 100% {
    transform: translateY(0)scale(1);
  }

  50% {
    transform: translateY(-10px)scale(1.05);
  }
}

.title-letter-hover {
  animation: .6s ease-in-out infinite paused letterWave;
}

.title-container:hover .title-letter-hover {
  animation-play-state: running;
}

.title-letter-hover:first-child {
  animation-delay: 0s;
}

.title-letter-hover:nth-child(2) {
  animation-delay: 50ms;
}

.title-letter-hover:nth-child(3) {
  animation-delay: .1s;
}

.title-letter-hover:nth-child(4) {
  animation-delay: .15s;
}

.title-letter-hover:nth-child(5) {
  animation-delay: .2s;
}

.title-letter-hover:nth-child(6) {
  animation-delay: .25s;
}

.title-letter-hover:nth-child(7) {
  animation-delay: .3s;
}

.title-letter-hover:nth-child(8) {
  animation-delay: .35s;
}

@keyframes noiseMove {
  0% {
    transform: translateX(0)translateY(0);
  }

  25% {
    transform: translateX(-1px)translateY(-1px);
  }

  50% {
    transform: translateX(1px)translateY(0);
  }

  75% {
    transform: translateX(0)translateY(1px);
  }

  100% {
    transform: translateX(0)translateY(0);
  }
}

.noise-overlay {
  opacity: .03;
  pointer-events: none;
  z-index: 1;
  background-image: radial-gradient(circle at 1px 1px, #00000026 1px, #0000 0);
  background-size: 20px 20px;
  width: 200%;
  height: 200%;
  animation: 4s linear infinite noiseMove;
  position: absolute;
  top: -50%;
  left: -50%;
}

@keyframes glowPulse {
  0%, 100% {
    filter: brightness();
    box-shadow: 0 0 5px #00ffff4d;
  }

  50% {
    filter: brightness(1.1);
    box-shadow: 0 0 20px #0ff9, 0 0 30px #00ffff4d;
  }
}

.glow-cyan {
  animation: 3s ease-in-out infinite glowPulse;
}

@keyframes touchFeedback {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(.98);
  }

  100% {
    transform: scale(1);
  }
}

.touch-feedback:active {
  animation: .2s ease-out touchFeedback;
}

@keyframes imageReveal {
  0% {
    opacity: 0;
    filter: blur(10px) brightness(1.2) contrast() saturate(.8);
    transform: scale(1.2)rotate(.5deg);
  }

  100% {
    opacity: .5;
    filter: blur() brightness(1.2) contrast() saturate(.8);
    transform: scale(1)rotate(0);
  }
}

.background-image-reveal {
  animation: .8s cubic-bezier(.25, .46, .45, .94) forwards imageReveal;
}

@media (width <= 768px) {
  .mobile-slide-in {
    animation: .6s ease-out mobileSlideIn;
  }

  @keyframes mobileSlideIn {
    0% {
      opacity: 0;
      transform: translateX(-20px);
    }

    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }

  .discography-item:before {
    transition-duration: .3s;
  }

  .discography-item {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
}

@media (prefers-contrast: high) {
  .discography-item {
    border-width: 2px;
  }

  .title-container {
    text-shadow: none;
  }

  .glow-cyan {
    animation: none;
    box-shadow: 0 0 0 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .discography-item:before, .title-letter-hover, .noise-overlay, .glow-cyan, .background-image-reveal {
    animation: none;
  }

  .discography-item:before {
    transition: none;
  }

  * {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

.will-change-transform {
  will-change: transform;
}

.will-change-opacity {
  will-change: opacity;
}

.gpu-accelerated {
  backface-visibility: hidden;
  perspective: 1000px;
  transform: translateZ(0);
}

.text-crisp {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

@container (width <= 480px) {
  .responsive-text {
    font-size: clamp(1rem, 4vw, 1.5rem);
  }
}

.discography-item:focus-visible {
  outline-offset: 2px;
  outline: 2px solid #0ff;
}

@media (prefers-color-scheme: dark) {
  .discography-wrapper {
    --bg-color: #0a0a0a;
    --text-color: #f5f5f5;
    --border-color: #f5f5f526;
  }
}

@media print {
  .discography-wrapper {
    color: #000 !important;
    background: #fff !important;
  }

  .discography-item:before, .noise-overlay, .glow-cyan {
    display: none !important;
  }
}


/*# sourceMappingURL=styles_discographyAnimations_ec9a1e8e.css.map*/