/* css/animations.css - Ultra rozbudowane animacje dla Lumra Music */

/* ===== ANIMACJE GLOBALNE ===== */

/* Płynne pojawianie się elementów */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 40px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translate3d(0, -40px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translate3d(-40px, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translate3d(40px, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* Animacje skali */
@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes scaleOut {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.8);
    }
}

@keyframes pulseSoft {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.8;
    }
}

@keyframes pulseStrong {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(230, 180, 80, 0.4);
    }
    50% {
        transform: scale(1.1);
        box-shadow: 0 0 0 10px rgba(230, 180, 80, 0);
    }
}

/* Animacje rotacji */
@keyframes rotateSlow {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

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

@keyframes rotate3D {
    from {
        transform: rotate3d(0, 1, 0, 0deg);
    }
    to {
        transform: rotate3d(0, 1, 0, 360deg);
    }
}

/* Animacje przesuwu */
@keyframes slideInFromLeft {
    from {
        transform: translate3d(-100%, 0, 0);
        opacity: 0;
    }
    to {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

@keyframes slideInFromRight {
    from {
        transform: translate3d(100%, 0, 0);
        opacity: 0;
    }
    to {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

@keyframes slideInFromTop {
    from {
        transform: translate3d(0, -100%, 0);
        opacity: 0;
    }
    to {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

@keyframes slideInFromBottom {
    from {
        transform: translate3d(0, 100%, 0);
        opacity: 0;
    }
    to {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

/* Animacje efektów specjalnych */
@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

@keyframes glow {
    0%, 100% {
        box-shadow: 0 0 5px rgba(230, 180, 80, 0.2),
                    0 0 10px rgba(230, 180, 80, 0.1);
    }
    50% {
        box-shadow: 0 0 20px rgba(230, 180, 80, 0.4),
                    0 0 40px rgba(230, 180, 80, 0.2);
    }
}

@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
}

@keyframes bounceSoft {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

@keyframes wave {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(10px);
    }
}

/* ===== ANIMACJE KONKRETNYCH ELEMENTÓW ===== */

/* Loading screen */
@keyframes loadingProgress {
    0% {
        width: 0%;
        opacity: 0.5;
    }
    50% {
        opacity: 1;
    }
    100% {
        width: 100%;
        opacity: 0.5;
    }
}

@keyframes loadingPulse {
    0%, 100% {
        transform: scale(1);
        border-width: 2px;
    }
    50% {
        transform: scale(1.1);
        border-width: 3px;
    }
}

@keyframes loadingText {
    0%, 100% {
        opacity: 0.5;
        letter-spacing: 4px;
    }
    50% {
        opacity: 1;
        letter-spacing: 6px;
    }
}

/* Navigation animations */
@keyframes navLinkUnderline {
    from {
        width: 0;
        left: 50%;
    }
    to {
        width: 100%;
        left: 0;
    }
}

@keyframes navLogoFloat {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    33% {
        transform: translateY(-3px) rotate(1deg);
    }
    66% {
        transform: translateY(3px) rotate(-1deg);
    }
}

/* Hero section animations */
@keyframes heroTitleLine {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes heroSubtitleReveal {
    0% {
        opacity: 0;
        clip-path: inset(0 100% 0 0);
    }
    100% {
        opacity: 1;
        clip-path: inset(0 0 0 0);
    }
}

@keyframes visualizerComplex {
    0%, 100% {
        height: 40px;
        transform: translateY(0);
    }
    10% {
        height: 280px;
        transform: translateY(-5px);
    }
    20% {
        height: 120px;
        transform: translateY(0);
    }
    30% {
        height: 320px;
        transform: translateY(-3px);
    }
    40% {
        height: 80px;
        transform: translateY(0);
    }
    50% {
        height: 300px;
        transform: translateY(-8px);
    }
    60% {
        height: 100px;
        transform: translateY(0);
    }
    70% {
        height: 260px;
        transform: translateY(-2px);
    }
    80% {
        height: 140px;
        transform: translateY(0);
    }
    90% {
        height: 340px;
        transform: translateY(-6px);
    }
}

@keyframes visualizerRandom {
    0%, 100% {
        height: var(--start-height);
    }
    50% {
        height: var(--peak-height);
    }
}

@keyframes scrollArrow {
    0% {
        transform: translateX(-50%) translateY(0);
        opacity: 0.2;
    }
    30% {
        opacity: 1;
    }
    100% {
        transform: translateX(-50%) translateY(20px);
        opacity: 0;
    }
}

@keyframes heroBackgroundShift {
    0% {
        background-position: 0% 0%;
    }
    50% {
        background-position: 100% 100%;
    }
    100% {
        background-position: 0% 0%;
    }
}

/* About section animations */
@keyframes statCounter {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes imageReveal {
    0% {
        clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
        opacity: 0;
    }
    100% {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        opacity: 1;
    }
}

@keyframes playButtonPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(230, 180, 80, 0.4);
    }
    70% {
        transform: scale(1.1);
        box-shadow: 0 0 0 15px rgba(230, 180, 80, 0);
    }
}

/* Services section animations */
@keyframes serviceCardFloat {
    0%, 100% {
        transform: translateY(0) rotateX(0);
    }
    50% {
        transform: translateY(-20px) rotateX(5deg);
    }
}

@keyframes serviceIconFloat {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    33% {
        transform: translateY(-5px) rotate(5deg);
    }
    66% {
        transform: translateY(5px) rotate(-5deg);
    }
}

@keyframes featureTagPop {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }
    70% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Artists section animations */
@keyframes slideHorizontal {
    from {
        transform: translateX(var(--slide-start));
    }
    to {
        transform: translateX(var(--slide-end));
    }
}

@keyframes artistCardReveal {
    0% {
        opacity: 0;
        transform: scale(0.9) rotateY(-10deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotateY(0deg);
    }
}

@keyframes sliderButtonHover {
    0% {
        transform: scale(1) rotate(0deg);
    }
    25% {
        transform: scale(1.1) rotate(5deg);
    }
    75% {
        transform: scale(1.1) rotate(-5deg);
    }
    100% {
        transform: scale(1.1) rotate(0deg);
    }
}

/* Studio section animations */
@keyframes thumbnailSelect {
    0% {
        transform: scale(1);
        border-color: var(--border-color);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
        border-color: var(--primary-color);
    }
}

@keyframes imageZoomPan {
    0% {
        transform: scale(1) translate(0, 0);
    }
    25% {
        transform: scale(1.05) translate(-2%, -1%);
    }
    50% {
        transform: scale(1.03) translate(1%, 2%);
    }
    75% {
        transform: scale(1.06) translate(-1%, 1%);
    }
    100% {
        transform: scale(1) translate(0, 0);
    }
}

/* Releases section animations */
@keyframes recordSpin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes progressFill {
    from {
        width: 0%;
    }
    to {
        width: var(--progress-width);
    }
}

@keyframes volumeKnob {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(var(--volume-rotation));
    }
}

@keyframes playButtonBeat {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(0.9);
    }
}

@keyframes releaseCardHover {
    0% {
        transform: translateY(0) rotateX(0);
    }
    100% {
        transform: translateY(-20px) rotateX(5deg);
    }
}

/* Contact section animations */
@keyframes formFieldFocus {
    0% {
        transform: scaleX(0);
    }
    100% {
        transform: scaleX(1);
    }
}

@keyframes sendButtonFly {
    0% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-10px) scale(1.05);
    }
    100% {
        transform: translateY(0) scale(1);
    }
}

@keyframes messageAppear {
    0% {
        opacity: 0;
        transform: translateY(-10px) scale(0.95);
    }
    70% {
        transform: translateY(5px) scale(1.02);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes contactIconBob {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    25% {
        transform: translateY(-8px) rotate(5deg);
    }
    75% {
        transform: translateY(4px) rotate(-3deg);
    }
}

/* Footer animations */
@keyframes footerLinkSlide {
    0% {
        transform: translateX(0);
        opacity: 1;
    }
    100% {
        transform: translateX(5px);
        opacity: 1;
    }
}

@keyframes socialIconOrbit {
    0% {
        transform: rotate(0deg) translateX(0) rotate(0deg);
    }
    100% {
        transform: rotate(360deg) translateX(5px) rotate(-360deg);
    }
}

@keyframes copyrightPulse {
    0%, 100% {
        opacity: 0.6;
    }
    50% {
        opacity: 1;
    }
}

/* ===== ANIMACJE SPECJALNE ===== */

/* Parallax effect */
@keyframes parallaxSlow {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(var(--parallax-distance));
    }
}

@keyframes parallaxFast {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(calc(var(--parallax-distance) * 2));
    }
}

/* Morphing shapes */
@keyframes morphCircleToSquare {
    0% {
        border-radius: 50%;
    }
    100% {
        border-radius: 20%;
    }
}

@keyframes morphSquareToCircle {
    0% {
        border-radius: 20%;
    }
    100% {
        border-radius: 50%;
    }
}

/* Particle effects */
@keyframes particleFloat {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(-100px) rotate(360deg);
        opacity: 0;
    }
}

@keyframes particleWave {
    0%, 100% {
        transform: translateX(0) translateY(0);
    }
    25% {
        transform: translateX(10px) translateY(-5px);
    }
    50% {
        transform: translateX(0) translateY(-10px);
    }
    75% {
        transform: translateX(-10px) translateY(-5px);
    }
}

/* Typography animations */
@keyframes textReveal {
    0% {
        clip-path: inset(0 100% 0 0);
    }
    100% {
        clip-path: inset(0 0 0 0);
    }
}

@keyframes letterSpacing {
    0%, 100% {
        letter-spacing: normal;
    }
    50% {
        letter-spacing: 2px;
    }
}

@keyframes textShadowPulse {
    0%, 100% {
        text-shadow: 0 0 0 rgba(230, 180, 80, 0);
    }
    50% {
        text-shadow: 0 0 10px rgba(230, 180, 80, 0.3);
    }
}

/* Background animations */
@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes noise {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 100% 100%;
    }
}

@keyframes scanlines {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 0 100%;
    }
}

/* ===== KLASY ANIMACJI ===== */

/* Podstawowe klasy animacji */
.animate-fade-in {
    animation: fadeIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.animate-fade-in-up {
    animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.animate-fade-in-down {
    animation: fadeInDown 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.animate-fade-in-left {
    animation: fadeInLeft 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.animate-fade-in-right {
    animation: fadeInRight 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.animate-scale-in {
    animation: scaleIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.animate-pulse-soft {
    animation: pulseSoft 3s ease-in-out infinite;
}

.animate-pulse-strong {
    animation: pulseStrong 2s ease-in-out infinite;
}

.animate-float {
    animation: float 6s ease-in-out infinite;
}

.animate-bounce-soft {
    animation: bounceSoft 2s ease-in-out infinite;
}

.animate-rotate-slow {
    animation: rotateSlow 20s linear infinite;
}

.animate-rotate-reverse {
    animation: rotateReverse 15s linear infinite;
}

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

/* Klasy opóźnienia animacji */
.animation-delay-100 {
    animation-delay: 100ms;
}

.animation-delay-200 {
    animation-delay: 200ms;
}

.animation-delay-300 {
    animation-delay: 300ms;
}

.animation-delay-400 {
    animation-delay: 400ms;
}

.animation-delay-500 {
    animation-delay: 500ms;
}

.animation-delay-600 {
    animation-delay: 600ms;
}

.animation-delay-700 {
    animation-delay: 700ms;
}

.animation-delay-800 {
    animation-delay: 800ms;
}

.animation-delay-900 {
    animation-delay: 900ms;
}

.animation-delay-1000 {
    animation-delay: 1000ms;
}

.animation-delay-1500 {
    animation-delay: 1500ms;
}

.animation-delay-2000 {
    animation-delay: 2000ms;
}

/* Klasy czasu trwania animacji */
.animation-duration-fast {
    animation-duration: 0.3s;
}

.animation-duration-normal {
    animation-duration: 0.6s;
}

.animation-duration-slow {
    animation-duration: 1s;
}

.animation-duration-slower {
    animation-duration: 2s;
}

.animation-duration-slowest {
    animation-duration: 3s;
}

/* Klasy wypełnienia animacji */
.animation-fill-both {
    animation-fill-mode: both;
}

.animation-fill-forwards {
    animation-fill-mode: forwards;
}

.animation-fill-backwards {
    animation-fill-mode: backwards;
}

/* Klasy trybu animacji */
.animation-ease {
    animation-timing-function: ease;
}

.animation-ease-in {
    animation-timing-function: ease-in;
}

.animation-ease-out {
    animation-timing-function: ease-out;
}

.animation-ease-in-out {
    animation-timing-function: ease-in-out;
}

.animation-linear {
    animation-timing-function: linear;
}

.animation-cubic-bezier {
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.animation-bounce {
    animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Klasy iteracji animacji */
.animation-infinite {
    animation-iteration-count: infinite;
}

.animation-twice {
    animation-iteration-count: 2;
}

.animation-thrice {
    animation-iteration-count: 3;
}

/* ===== ANIMACJE SPECJALNE DLA KOMPONENTÓW ===== */

/* Loading screen kompletne animacje */
.loading-screen {
    animation: fadeIn 0.5s ease forwards;
}

.loading-screen.hide {
    animation: fadeOut 0.8s ease forwards;
}

.logo-circle {
    animation: rotateSlow 20s linear infinite,
               loadingPulse 2s ease-in-out infinite;
}

.logo-text {
    animation: loadingText 3s ease-in-out infinite;
}

.loading-bar {
    animation: shimmer 2s infinite linear;
}

.loading-progress {
    animation: loadingProgress 2s ease-in-out forwards;
}

.loading-subtitle {
    animation: fadeIn 1s ease 0.5s both;
}

/* Navigation animacje */
.main-nav {
    animation: fadeInDown 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.nav-logo a:hover .logo-image {
    animation: navLogoFloat 2s ease-in-out infinite;
}

.nav-link::before {
    animation: navLinkUnderline 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards paused;
}

.nav-link:hover::before {
    animation-play-state: running;
}

.social-icon {
    animation: fadeIn 0.5s ease forwards;
}

.social-icon:hover {
    animation: socialIconOrbit 0.5s ease forwards;
}

.menu-bar {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hero section animacje */
.hero-overlay {
    animation: fadeIn 1.5s ease forwards;
}

.particles-container {
    animation: fadeIn 2s ease 0.5s forwards;
}

.hero-title .title-line:nth-child(1) {
    animation: heroTitleLine 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.2s both;
}

.hero-title .title-line:nth-child(2) {
    animation: heroTitleLine 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.4s both;
}

.hero-title .title-line:nth-child(3) {
    animation: heroTitleLine 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.6s both;
}

.hero-subtitle {
    animation: heroSubtitleReveal 1.2s cubic-bezier(0.4, 0, 0.2, 1) 0.8s both;
}

.hero-buttons {
    animation: fadeInUp 1s cubic-bezier(0.4, 0, 0.2, 1) 1s both;
}

.visualizer-bar {
    animation: visualizerComplex 3s ease-in-out infinite;
}

.visualizer-bar:nth-child(1) { animation-delay: 0s; }
.visualizer-bar:nth-child(2) { animation-delay: 0.1s; }
.visualizer-bar:nth-child(3) { animation-delay: 0.2s; }
.visualizer-bar:nth-child(4) { animation-delay: 0.3s; }
.visualizer-bar:nth-child(5) { animation-delay: 0.4s; }
.visualizer-bar:nth-child(6) { animation-delay: 0.5s; }
.visualizer-bar:nth-child(7) { animation-delay: 0.6s; }
.visualizer-bar:nth-child(8) { animation-delay: 0.7s; }
.visualizer-bar:nth-child(9) { animation-delay: 0.8s; }

.scroll-down {
    animation: bounce 2s ease-in-out infinite 2s;
}

.scroll-arrow::before {
    animation: scrollArrow 2s ease-in-out infinite;
}

/* About section animacje */
.about-section::before {
    animation: float 20s ease-in-out infinite;
}

.about-heading {
    animation: fadeInLeft 0.8s ease both;
}

.about-text p {
    animation: fadeIn 0.8s ease both;
}

.about-text p:nth-child(2) {
    animation-delay: 0.2s;
}

.stat-item {
    animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.stat-item:nth-child(1) { animation-delay: 0.1s; }
.stat-item:nth-child(2) { animation-delay: 0.2s; }
.stat-item:nth-child(3) { animation-delay: 0.3s; }

.stat-number {
    animation: statCounter 1s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.image-frame {
    animation: imageReveal 1.2s cubic-bezier(0.4, 0, 0.2, 1) 0.5s both;
}

.play-button {
    animation: playButtonPulse 2s ease-in-out infinite;
}

/* Services section animacje */
.service-card {
    animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.service-card:hover {
    animation: serviceCardFloat 3s ease-in-out infinite;
}

.service-icon {
    animation: fadeIn 0.5s ease both;
}

.service-card:hover .service-icon {
    animation: serviceIconFloat 3s ease-in-out infinite;
}

.feature {
    animation: featureTagPop 0.3s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.feature:nth-child(1) { animation-delay: 0.1s; }
.feature:nth-child(2) { animation-delay: 0.2s; }
.feature:nth-child(3) { animation-delay: 0.3s; }

/* Artists section animacje */
.slider-container {
    animation: fadeIn 0.8s ease both;
}

.slider-btn:hover {
    animation: sliderButtonHover 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Studio section animacje */
.studio-gallery {
    animation: fadeInRight 0.8s ease both;
}

.studio-info {
    animation: fadeInLeft 0.8s ease both;
}

.studio-main-img {
    animation: imageZoomPan 20s ease-in-out infinite;
}

.thumbnail.active {
    animation: thumbnailSelect 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.equipment-list li {
    animation: fadeInLeft 0.4s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.equipment-list li:nth-child(1) { animation-delay: 0.1s; }
.equipment-list li:nth-child(2) { animation-delay: 0.2s; }
.equipment-list li:nth-child(3) { animation-delay: 0.3s; }
.equipment-list li:nth-child(4) { animation-delay: 0.4s; }
.equipment-list li:nth-child(5) { animation-delay: 0.5s; }
.equipment-list li:nth-child(6) { animation-delay: 0.6s; }

/* Releases section animacje */
.release-card {
    animation: fadeInUp 0.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.release-card:hover {
    animation: releaseCardHover 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.release-cover img {
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.release-card:hover .release-cover img {
    animation: recordSpin 20s linear infinite;
}

.player-container {
    animation: fadeIn 0.8s ease 0.2s both;
}

.play-btn:hover {
    animation: playButtonBeat 0.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.progress-fill {
    animation: progressFill var(--progress-duration) linear forwards;
    animation-play-state: paused;
}

.progress-fill.playing {
    animation-play-state: running;
}

.control-btn:hover {
    animation: bounceSoft 0.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* Contact section animacje */
.contact-info {
    animation: fadeInLeft 0.8s ease both;
}

.contact-form-container {
    animation: fadeInRight 0.8s ease both;
}

.contact-item {
    animation: fadeInUp 0.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.contact-item:nth-child(1) { animation-delay: 0.1s; }
.contact-item:nth-child(2) { animation-delay: 0.2s; }
.contact-item:nth-child(3) { animation-delay: 0.3s; }
.contact-item:nth-child(4) { animation-delay: 0.4s; }

.contact-item:hover .contact-icon {
    animation: contactIconBob 2s ease-in-out infinite;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    animation: formFieldFocus 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.btn[type="submit"]:hover {
    animation: sendButtonFly 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.form-message {
    animation: messageAppear 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Footer animacje */
.main-footer {
    animation: fadeIn 1s ease 0.3s both;
}

.footer-logo {
    animation: fadeIn 0.8s ease 0.4s both;
}

.footer-column {
    animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.footer-column:nth-child(1) { animation-delay: 0.5s; }
.footer-column:nth-child(2) { animation-delay: 0.6s; }
.footer-column:nth-child(3) { animation-delay: 0.7s; }

.footer-column ul li a:hover {
    animation: footerLinkSlide 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.footer-social a {
    animation: fadeIn 0.5s ease both;
}

.footer-social a:nth-child(1) { animation-delay: 0.6s; }
.footer-social a:nth-child(2) { animation-delay: 0.7s; }
.footer-social a:nth-child(3) { animation-delay: 0.8s; }
.footer-social a:nth-child(4) { animation-delay: 0.9s; }
.footer-social a:nth-child(5) { animation-delay: 1.0s; }
.footer-social a:nth-child(6) { animation-delay: 1.1s; }

.footer-social a:hover {
    animation: socialIconOrbit 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.footer-bottom {
    animation: fadeIn 0.8s ease 1s both;
}

.footer-bottom p {
    animation: copyrightPulse 3s ease-in-out infinite;
}

/* ===== ANIMACJE NA SCROLL ===== */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.animate-on-scroll.animated {
    opacity: 1;
    transform: translateY(0);
}

.animate-on-scroll-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.animate-on-scroll-left.animated {
    opacity: 1;
    transform: translateX(0);
}

.animate-on-scroll-right {
    opacity: 0;
    transform: translateX(50px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.animate-on-scroll-right.animated {
    opacity: 1;
    transform: translateX(0);
}

.animate-on-scroll-scale {
    opacity: 0;
    transform: scale(0.9);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.animate-on-scroll-scale.animated {
    opacity: 1;
    transform: scale(1);
}

.animate-on-scroll-rotate {
    opacity: 0;
    transform: rotate(-5deg) scale(0.95);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.animate-on-scroll-rotate.animated {
    opacity: 1;
    transform: rotate(0) scale(1);
}

/* ===== ANIMACJE INTERAKTYWNE ===== */
.hover-lift {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-lift:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.hover-scale {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-scale:hover {
    transform: scale(1.05);
}

.hover-rotate {
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-rotate:hover {
    transform: rotate(5deg);
}

.hover-glow {
    transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-glow:hover {
    box-shadow: 0 0 30px rgba(230, 180, 80, 0.3);
}

.hover-color-shift {
    transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-color-shift:hover {
    color: var(--primary-color);
    background-color: rgba(230, 180, 80, 0.1);
}

/* ===== ANIMACJE PARTYKUŁ ===== */
.particle {
    position: absolute;
    background: var(--primary-color);
    border-radius: 50%;
    pointer-events: none;
    animation: particleFloat 4s ease-in-out forwards;
}

.particle-wave {
    position: absolute;
    background: radial-gradient(circle, var(--primary-color) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    animation: particleWave 3s ease-in-out infinite;
}

/* ===== ANIMACJE TŁA ===== */
.bg-gradient-animate {
    background-size: 200% 200%;
    animation: gradientShift 15s ease infinite;
}

.bg-noise {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMDAiIGhlaWdodD0iMzAwIj48ZmlsdGVyIGlkPSJhIiB4PSIwIiB5PSIwIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iLjc0IiBzdGl0Y2hUaWxlcz0ic3RpdGNoIi8+PGZlQ29sb3JNYXRyaXggdHlwZT0ic2F0dXJhdGUiIHZhbHVlcz0iMCIvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPSIzMDAiIGhlaWdodD0iMzAwIiBmaWx0ZXI9InVybCgjYSkiIG9wYWNpdHk9Ii4wNSIvPjwvc3ZnPg==');
    animation: noise 1s steps(10) infinite;
}

.bg-scanlines {
    background-image: linear-gradient(to bottom, 
        transparent 50%, 
        rgba(255, 255, 255, 0.02) 50%);
    background-size: 100% 4px;
    animation: scanlines 0.1s linear infinite;
}

/* ===== ANIMACJE TEKSTU ===== */
.text-reveal {
    animation: textReveal 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.text-shadow-pulse {
    animation: textShadowPulse 3s ease-in-out infinite;
}

.letter-spacing-animate {
    animation: letterSpacing 3s ease-in-out infinite;
}

/* ===== ANIMACJE PRZY ZMIANIE STANU ===== */
.is-loading {
    animation: pulseSoft 1.5s ease-in-out infinite;
}

.is-success {
    animation: scaleIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards,
               pulseSoft 2s ease-in-out 0.3s infinite;
}

.is-error {
    animation: shake 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

.is-active {
    animation: pulseStrong 2s ease-in-out infinite;
}

/* ===== ANIMACJE RESPONSYWNE ===== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ===== ANIMACJE PERFORMANCE OPTYMALIZACJA ===== */
.will-change-transform {
    will-change: transform;
}

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

.will-change-all {
    will-change: transform, opacity;
}

.backface-hidden {
    backface-visibility: hidden;
}

.perspective-1000 {
    perspective: 1000px;
}

.transform-3d {
    transform-style: preserve-3d;
}

/* ===== ANIMACJE CUSTOM PROPERTIES ===== */
@property --progress-width {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 0%;
}

@property --progress-duration {
    syntax: '<time>';
    inherits: false;
    initial-value: 0s;
}

@property --volume-rotation {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

@property --parallax-distance {
    syntax: '<length>';
    inherits: false;
    initial-value: 0px;
}

@property --start-height {
    syntax: '<length>';
    inherits: false;
    initial-value: 40px;
}

@property --peak-height {
    syntax: '<length>';
    inherits: false;
    initial-value: 300px;
}

@property --slide-start {
    syntax: '<length>';
    inherits: false;
    initial-value: 0px;
}

@property --slide-end {
    syntax: '<length>';
    inherits: false;
    initial-value: 0px;
}

/* ===== ANIMACJE JS CONTROLLED ===== */
.js-animate-pause {
    animation-play-state: paused;
}

.js-animate-play {
    animation-play-state: running;
}

.js-animate-reverse {
    animation-direction: reverse;
}

.js-animate-alternate {
    animation-direction: alternate;
}

.js-animate-reset {
    animation: none;
}

/* ===== ANIMACJE ACCESSIBILITY ===== */
@media (prefers-reduced-motion: reduce) {
    .animate-fade-in,
    .animate-fade-in-up,
    .animate-fade-in-down,
    .animate-fade-in-left,
    .animate-fade-in-right,
    .animate-scale-in,
    .animate-pulse-soft,
    .animate-pulse-strong,
    .animate-float,
    .animate-bounce-soft,
    .animate-rotate-slow,
    .animate-rotate-reverse,
    .animate-glow,
    .loading-screen,
    .logo-circle,
    .logo-text,
    .loading-bar,
    .loading-progress,
    .loading-subtitle,
    .main-nav,
    .nav-logo a:hover .logo-image,
    .social-icon,
    .hero-overlay,
    .particles-container,
    .hero-title .title-line,
    .hero-subtitle,
    .hero-buttons,
    .visualizer-bar,
    .scroll-down,
    .scroll-arrow::before,
    .about-section::before,
    .about-heading,
    .about-text p,
    .stat-item,
    .stat-number,
    .image-frame,
    .play-button,
    .service-card,
    .service-icon,
    .feature,
    .slider-container,
    .slider-btn:hover,
    .studio-gallery,
    .studio-info,
    .studio-main-img,
    .thumbnail.active,
    .equipment-list li,
    .release-card,
    .player-container,
    .play-btn:hover,
    .progress-fill,
    .control-btn:hover,
    .contact-info,
    .contact-form-container,
    .contact-item,
    .btn[type="submit"]:hover,
    .form-message,
    .main-footer,
    .footer-logo,
    .footer-column,
    .footer-social a,
    .footer-bottom,
    .footer-bottom p {
        animation: none !important;
        transition: none !important;
    }
    
    .animate-on-scroll,
    .animate-on-scroll-left,
    .animate-on-scroll-right,
    .animate-on-scroll-scale,
    .animate-on-scroll-rotate {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ===== ANIMACJE KOŃCOWE ===== */
.fade-out {
    animation: fadeOut 0.8s ease forwards;
}

@keyframes fadeOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(20px);
    }
}

.slide-out-left {
    animation: slideOutLeft 0.8s ease forwards;
}

@keyframes slideOutLeft {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(-100%);
        opacity: 0;
    }
}

.slide-out-right {
    animation: slideOutRight 0.8s ease forwards;
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

.scale-out {
    animation: scaleOut 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Finalne efekty animacji */
.animation-complete {
    animation: pulseSoft 1s ease 1;
}