/* SOLK Audio Visual Effects - Exact Implementation */

/* Logo scroll states (matching SOLK's active_0 through active_5) */
#logo {
  transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
  transform-origin: center center;
}

/* Scroll velocity states matching SOLK implementation */
#logo.active_0 {
  transform: scale(1) rotate(0deg);
  opacity: 1;
  filter: none;
}

#logo.active_1 {
  transform: scale(1.01) rotate(0.5deg);
  opacity: 0.98;
  filter: none;
}

#logo.active_2 {
  transform: scale(1.02) rotate(1deg);
  opacity: 0.96;
  filter: blur(0.2px);
}

#logo.active_3 {
  transform: scale(1.04) rotate(1.8deg);
  opacity: 0.92;
  filter: blur(0.5px);
}

#logo.active_4 {
  transform: scale(1.06) rotate(2.5deg);
  opacity: 0.88;
  filter: blur(0.8px);
}

#logo.active_5 {
  transform: scale(1.08) rotate(3.5deg);
  opacity: 0.82;
  filter: blur(1.2px);
}

/* Speaker icon states (matching SOLK behavior) */
#speaker {
  cursor: pointer;
  transition: all 0.3s ease;
}

#speaker:hover {
  transform: scale(1.05);
}

#speaker .speaker,
#speaker .muted {
  transition: all 0.3s ease;
}

/* Audio visualization indicator */
.audio-active #speaker {
  position: relative;
}

.audio-active #speaker::after {
  content: '';
  position: absolute;
  top: -2px;
  right: -2px;
  width: 6px;
  height: 6px;
  background: #8D1CF0;
  border-radius: 50%;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.2); }
}

/* Scroll-based page effects (matching SOLK's scroll response) */
body {
  transition: filter 0.2s ease;
}

#logo.active_4 ~ * {
  filter: brightness(0.98);
}

#logo.active_5 ~ * {
  filter: brightness(0.95) blur(0.3px);
}

/* Interactive elements hover effects (for PLAY_FX system) */
a, button, .work-item-wrapper {
  transition: all 0.2s ease;
}

a:hover, button:hover, .work-item-wrapper:hover {
  transform: translateY(-1px);
}

/* Navigation blur effect based on scroll velocity */
.section-bottom-wrapper.sticky {
  transition: backdrop-filter 0.3s ease;
}

#logo.active_0 ~ .section-bottom-wrapper.sticky {
  backdrop-filter: blur(0px);
}

#logo.active_1 ~ .section-bottom-wrapper.sticky {
  backdrop-filter: blur(1px);
}

#logo.active_2 ~ .section-bottom-wrapper.sticky {
  backdrop-filter: blur(2px);
}

#logo.active_3 ~ .section-bottom-wrapper.sticky {
  backdrop-filter: blur(4px);
}

#logo.active_4 ~ .section-bottom-wrapper.sticky {
  backdrop-filter: blur(6px);
}

#logo.active_5 ~ .section-bottom-wrapper.sticky {
  backdrop-filter: blur(10px);
}

/* Hero section scroll response */
.hero-section {
  transition: all 0.3s ease;
}

#logo.active_4 ~ .hero-section,
#logo.active_5 ~ .hero-section {
  filter: blur(0.3px) brightness(0.97);
}

/* Work grid items scroll response */
.work-item-wrapper {
  transition: all 0.2s ease;
}

#logo.active_3 .work-item-wrapper,
#logo.active_4 .work-item-wrapper,
#logo.active_5 .work-item-wrapper {
  filter: blur(0.2px);
}

/* Audio loading state */
.audio-loading #speaker {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  #logo,
  #speaker,
  .section-bottom-wrapper.sticky,
  .hero-section,
  .work-item-wrapper,
  a, button {
    transition: none !important;
    animation: none !important;
  }
  
  #logo.active_0,
  #logo.active_1,
  #logo.active_2,
  #logo.active_3,
  #logo.active_4,
  #logo.active_5 {
    transform: none !important;
    filter: none !important;
  }
}