@use "@/common/styles/colors" as *

*
  box-sizing: border-box

body
  margin: 0
  padding: 0
  letter-spacing: 0.2rem
  color: #E0E0E0
  font-family: 'Bangers', sans-serif
  height: 100vh
  width: 100vw
  background-size: 300% 300%
  animation: shifting-background 30s ease infinite
  background: linear-gradient(45deg, #AE00FF 0%, #FF007F 100%) fixed
  user-select: none
  overflow: hidden
  position: relative
  
  &:before
    content: ""
    position: fixed
    top: 0
    left: 0
    right: 0
    bottom: 0
    background-image: url("/background.svg")

  .background-overlay
    position: fixed
    top: 0
    left: 0
    width: 100vw
    height: 100vh
    z-index: 0
    pointer-events: none
    
    .rotating-gradient
      position: absolute
      top: 50%
      left: 50%
      width: 250vh
      height: 250vh
      transform: translate(-50%, -50%)
      background: conic-gradient(from 0deg, rgba(255, 102, 196, 0.2), rgba(102, 204, 255, 0.2), rgba(255, 209, 128, 0.2), rgba(133, 255, 189, 0.2), rgba(255, 102, 196, 0.2))
      border-radius: 50%
      animation: rotate-background 180s linear infinite
      will-change: transform
      transform-origin: center center
      opacity: 0.7
      filter: blur(40px)

  &:after
    content: ""
    position: fixed
    top: 0
    left: 0
    right: 0
    bottom: 0
    background: radial-gradient(circle at center, transparent 0%, rgba(0, 0, 0, 0.1) 60%, rgba(0, 0, 0, 0.4) 100%)
    z-index: 1
    pointer-events: none

::-webkit-scrollbar
  width: 8px
  background-color: rgba(0, 0, 0, 0.2)
  border-radius: 4px

::-webkit-scrollbar-thumb
  background-color: rgba(255, 255, 255, 0.15)
  border-radius: 4px
  border: 1px solid rgba(255, 255, 255, 0.05)
  
  &:hover
    background-color: rgba(255, 255, 255, 0.25)

.glassy
  background: $background
  backdrop-filter: blur(10px)
  border: 2px solid $border
  border-radius: 0.8rem

.background-elements
  position: fixed
  top: 0
  left: 0
  width: 100vw
  height: 100vh
  overflow: hidden
  z-index: 2
  pointer-events: none

  .glow-point
    position: absolute
    width: 250px
    height: 250px
    border-radius: 50%
    filter: blur(100px)
    opacity: 0.4
    will-change: transform
    transform: translateZ(0)
    
    &.point-1
      top: 20%
      left: 10%
      background-color: rgba(255, 102, 196, 0.8)
      animation: float-glow 15s infinite alternate ease-in-out
      
    &.point-2
      top: 70%
      left: 80%
      background-color: rgba(102, 204, 255, 0.8)
      animation: float-glow 18s infinite alternate-reverse ease-in-out
      
    &.point-3
      top: 80%
      left: 20%
      background-color: rgba(133, 255, 189, 0.8)
      animation: float-glow 12s infinite alternate ease-in-out 2s

  .music-note
    position: absolute
    font-size: 60pt
    opacity: 0.7
    will-change: transform, opacity, filter
    filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.7))
    transform: translateZ(0)
    backface-visibility: hidden
    
    @for $i from 1 through 5
      &.note-#{$i}
        animation-name: float-note-#{$i}, pulse-note
        animation-duration: #{10 + ($i * 1)}s, 5s
        animation-timing-function: ease-in-out, ease-in-out
        animation-iteration-count: infinite, infinite
        animation-direction: alternate, alternate
        animation-delay: #{$i * 0.7}s, #{$i * 0.4}s
        
        @if $i % 4 == 0
          color: rgba(255, 102, 196, 0.8)
        @else if $i % 4 == 1
          color: rgba(102, 204, 255, 0.8)
        @else if $i % 4 == 2
          color: rgba(255, 209, 128, 0.8)
        @else
          color: rgba(133, 255, 189, 0.8)

.card-element
  background: rgba(255, 255, 255, 0.07)
  backdrop-filter: blur(10px)
  border: 1px solid rgba(255, 255, 255, 0.2)
  border-radius: 20px
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1), 0 0 20px rgba(255, 255, 255, 0.1)
  overflow: hidden
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)
  animation: card-float 6s infinite ease-in-out alternate

  &:hover
    transform: translateY(-10px) scale(1.02)
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2), 0 0 40px rgba(255, 255, 255, 0.2)
    border: 1px solid rgba(255, 255, 255, 0.4)

@keyframes shifting-background
  0%
    background-position: 0% 0%
  50%
    background-position: 100% 100%
  100%
    background-position: 0% 0%

@keyframes rotate-background
  0%
    transform: translate(-50%, -50%) rotate(0deg)
  100%
    transform: translate(-50%, -50%) rotate(360deg)

@keyframes float-glow
  0%, 100%
    transform: translate(0, 0) scale(1)
    filter: blur(100px)
  50%
    transform: translate(30px, -20px) scale(1.2)
    filter: blur(80px)

@keyframes card-float
  0%, 100%
    transform: translateY(0)
  50%
    transform: translateY(-8px)

@keyframes float-note-1
  0%, 100%
    transform: translateY(0) rotate(0deg)
  50%
    transform: translateY(-40px) rotate(10deg)

@keyframes float-note-2
  0%, 100%
    transform: translateY(0) rotate(0deg)
  50%
    transform: translateY(-30px) rotate(-8deg)

@keyframes float-note-3
  0%, 100%
    transform: translateY(0) rotate(0deg)
  50%
    transform: translateY(-50px) rotate(15deg)

@keyframes float-note-4
  0%, 100%
    transform: translateY(0) rotate(0deg)
  33%
    transform: translateY(-25px) rotate(-5deg)
  66%
    transform: translateY(-40px) rotate(5deg)

@keyframes float-note-5
  0%, 100%
    transform: translateY(0) rotate(0deg)
  50%
    transform: translateY(-35px) rotate(-12deg)

@keyframes pulse-note
  0%, 100%
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5))
    opacity: 0.6
  50%
    filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.7))
    opacity: 0.9