/* ==========================================================================
   DROPSITE ULTRA-PREMIUM MOTION DESIGN ENGINE v2.0
   ==========================================================================
   Artisanal motion system: animated gradient borders, particle fields,
   morphing icons, liquid ripples, staggered reveals, glowing inputs,
   and kinetic upload button energy.
   100% GPU-accelerated (Compositor Thread: transform3d & opacity only)
   ========================================================================== */

/* -------------------------------------------------------------------------
   1. QUIET LUXURY FROSTED RIM LIGHT (Wyłączony krzykliwy obracający się neon)
   ------------------------------------------------------------------------- */
.siri-glow-frame::before,
.siri-glow-frame::after {
    display: none !important;
}

/* -------------------------------------------------------------------------
   2. PARTICLE FIELD (Świetliste cząsteczki w dropzone)
   — Canvas z cząsteczkami reagującymi na hover i drag-over
   ------------------------------------------------------------------------- */

.dropzone-particles-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
    opacity: 0.55;
    transition: opacity 0.4s ease;
}

/* Dzieci wewnątrz dropzone ponad cząsteczkami */
.dropzone > *:not(.dropzone-particles-canvas):not(.dropzone-ripple):not(.dropzone-ripple-secondary) {
    position: relative;
    z-index: 2;
}

.dropzone:hover .dropzone-particles-canvas {
    opacity: 0.8;
}

.dropzone.drag-over .dropzone-particles-canvas,
.dropzone.active .dropzone-particles-canvas {
    opacity: 1;
}


/* -------------------------------------------------------------------------
   3. MORPHING UPLOAD ICON (Oddech i metamorfoza ikony)
   — Ikona z organicznym pulsowaniem i tłem energetycznym
   ------------------------------------------------------------------------- */

/* Nadpisanie domyślnego upload-icon-bubble z dodatkową aurą */
.upload-icon-bubble {
    position: relative;
}

/* Energetyczna aura za bąbelkiem ikony */
.upload-icon-bubble::before {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 22px;
    background: radial-gradient(
        circle,
        rgba(52, 211, 153, 0.3) 0%,
        rgba(56, 189, 248, 0.15) 50%,
        transparent 75%
    );
    opacity: 0;
    animation: iconAuraPulse 3s ease-in-out infinite;
    pointer-events: none;
    z-index: -1;
    will-change: transform, opacity;
}

@keyframes iconAuraPulse {
    0%, 100% {
        opacity: 0.3;
        transform: scale(0.95);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.15);
    }
}

/* Morphing oddech ikony uploadu */
.upload-icon {
    animation: iconBreathe 3.5s ease-in-out infinite !important;
    transform-origin: center center;
}

@keyframes iconBreathe {
    0%, 100% {
        transform: translateY(0) scale(1);
        filter: drop-shadow(0 0 8px rgba(52, 211, 153, 0.4));
    }
    35% {
        transform: translateY(-4px) scale(1.06);
        filter: drop-shadow(0 0 16px rgba(52, 211, 153, 0.7));
    }
    65% {
        transform: translateY(-2px) scale(1.02);
        filter: drop-shadow(0 0 12px rgba(56, 189, 248, 0.5));
    }
}

/* Drag-over: ikona napęczniałe od energii */
.dropzone.drag-over .upload-icon,
.dropzone.active .upload-icon {
    animation: iconEnergyBurst 0.8s ease-in-out infinite alternate !important;
}

@keyframes iconEnergyBurst {
    0% {
        transform: translateY(-2px) scale(1.05);
        filter: drop-shadow(0 0 18px rgba(52, 211, 153, 0.8))
               drop-shadow(0 0 40px rgba(56, 189, 248, 0.5));
    }
    100% {
        transform: translateY(-6px) scale(1.12);
        filter: drop-shadow(0 0 28px rgba(52, 211, 153, 1))
               drop-shadow(0 0 60px rgba(56, 189, 248, 0.7));
    }
}


/* -------------------------------------------------------------------------
   4. LIQUID RIPPLE ON DROP (Fala od punktu upuszczenia)
   — Dynamiczna okrągła fala ekspandująca z drop point
   ------------------------------------------------------------------------- */

.dropzone-ripple {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 3;
    background: radial-gradient(
        circle,
        rgba(52, 211, 153, 0.6) 0%,
        rgba(56, 189, 248, 0.3) 30%,
        rgba(52, 211, 153, 0.1) 60%,
        transparent 80%
    );
    width: 20px;
    height: 20px;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    will-change: transform, opacity;
}

.dropzone-ripple.active {
    animation: liquidRippleExpand 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes liquidRippleExpand {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 1;
    }
    50% {
        opacity: 0.6;
    }
    100% {
        transform: translate(-50%, -50%) scale(35);
        opacity: 0;
    }
}

/* Drugie kółko ripple (delay) */
.dropzone-ripple-secondary {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 2;
    border: 2px solid rgba(52, 211, 153, 0.5);
    background: transparent;
    width: 10px;
    height: 10px;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    will-change: transform, opacity;
}

.dropzone-ripple-secondary.active {
    animation: liquidRippleRing 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
}

@keyframes liquidRippleRing {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 1;
        border-width: 3px;
    }
    100% {
        transform: translate(-50%, -50%) scale(40);
        opacity: 0;
        border-width: 0.5px;
    }
}


/* -------------------------------------------------------------------------
   5. STAGGERED REVEAL (Kaskadowe wejście elementów formularza)
   — IntersectionObserver-driven entrance animations
   ------------------------------------------------------------------------- */

/* Elementy czekające na wejście */
.motion-reveal {
    opacity: 0;
    transform: translate3d(0, 28px, 0) scale(0.97);
    transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
}

.motion-reveal.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

/* Stagger delays via CSS custom property */
.motion-reveal[data-reveal-delay="1"] { transition-delay: 0.08s; }
.motion-reveal[data-reveal-delay="2"] { transition-delay: 0.16s; }
.motion-reveal[data-reveal-delay="3"] { transition-delay: 0.24s; }
.motion-reveal[data-reveal-delay="4"] { transition-delay: 0.32s; }
.motion-reveal[data-reveal-delay="5"] { transition-delay: 0.40s; }
.motion-reveal[data-reveal-delay="6"] { transition-delay: 0.48s; }

/* Wariant: wejście z lewej (dla hero copy) */
.motion-reveal-left {
    opacity: 0;
    transform: translate3d(-32px, 0, 0);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
}

.motion-reveal-left.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* Wariant: wejście z prawej (dla kapsuły) */
.motion-reveal-right {
    opacity: 0;
    transform: translate3d(32px, 0, 0);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
}

.motion-reveal-right.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* Wariant: efekt scale-in z blur (dla modali i dropzone) */
.motion-reveal-scale {
    opacity: 0;
    transform: scale(0.92);
    filter: blur(8px);
    transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
                filter 0.55s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity, filter;
}

.motion-reveal-scale.is-visible {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
}


/* -------------------------------------------------------------------------
   6. GLOWING TYPING EFFECT (Pulsująca aura na inputach)
   — Pole tekstowe emitujące neonową poświatę przy focus/pisaniu
   ------------------------------------------------------------------------- */

/* Glowing focus ring na polach formularza w upload panelu */
.upload-container .adv-pro-input,
.upload-container .custom-slug-input,
.upload-container input[type="text"],
.upload-container input[type="password"],
.upload-container input[type="datetime-local"] {
    transition: border-color 0.3s ease,
                box-shadow 0.3s ease,
                background 0.3s ease !important;
}

.upload-container .adv-pro-input:focus,
.upload-container .custom-slug-input:focus,
.upload-container input[type="text"]:focus,
.upload-container input[type="password"]:focus,
.upload-container input[type="datetime-local"]:focus {
    border-color: rgba(52, 211, 153, 0.6) !important;
    box-shadow: 
        0 0 0 3px rgba(52, 211, 153, 0.15),
        0 0 20px rgba(52, 211, 153, 0.2),
        0 0 40px rgba(52, 211, 153, 0.08),
        inset 0 0 12px rgba(52, 211, 153, 0.06) !important;
    background: rgba(52, 211, 153, 0.03) !important;
}

/* Animacja pulsowania aury przy aktywnym pisaniu */
.upload-container input.is-typing {
    animation: typingGlowPulse 1.2s ease-in-out infinite alternate !important;
}

@keyframes typingGlowPulse {
    0% {
        box-shadow: 
            0 0 0 3px rgba(52, 211, 153, 0.12),
            0 0 16px rgba(52, 211, 153, 0.15),
            inset 0 0 8px rgba(52, 211, 153, 0.04);
    }
    100% {
        box-shadow: 
            0 0 0 4px rgba(52, 211, 153, 0.2),
            0 0 28px rgba(52, 211, 153, 0.3),
            0 0 50px rgba(56, 189, 248, 0.12),
            inset 0 0 14px rgba(52, 211, 153, 0.08);
    }
}

/* Micro sheen przebiegający po polu podczas pisania */
.upload-container input.is-typing::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(52, 211, 153, 0.12) 40%,
        rgba(56, 189, 248, 0.2) 50%,
        rgba(52, 211, 153, 0.12) 60%,
        transparent 100%
    );
    pointer-events: none;
    animation: inputSheen 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes inputSheen {
    0% { left: -100%; }
    100% { left: 200%; }
}


/* -------------------------------------------------------------------------
   7. KINETIC UPLOAD BUTTON (System fal energii wewnątrz przycisku)
   — Przycisk z wewnętrznym oceanem energii gdy jest aktywny
   ------------------------------------------------------------------------- */

/* Warstwa energetyczna wewnątrz przycisku */
.btn-primary::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        135deg,
        rgba(52, 211, 153, 0) 0%,
        rgba(52, 211, 153, 0.12) 25%,
        rgba(56, 189, 248, 0.1) 50%,
        rgba(52, 211, 153, 0) 75%,
        rgba(168, 85, 247, 0.08) 100%
    );
    background-size: 300% 300%;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: 0;
    will-change: background-position;
}

/* Aktywny przycisk (nie disabled) — pokaż energię */
.btn-primary:not(:disabled):not(.dl-btn-large)::before {
    opacity: 1;
    animation: kineticEnergyFlow 5s ease-in-out infinite;
}

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

/* Hover: intensyfikacja fal energii */
.btn-primary:hover:not(:disabled):not(.dl-btn-large)::before {
    animation-duration: 2.5s;
    background: linear-gradient(
        135deg,
        rgba(52, 211, 153, 0) 0%,
        rgba(52, 211, 153, 0.22) 25%,
        rgba(56, 189, 248, 0.18) 50%,
        rgba(52, 211, 153, 0) 75%,
        rgba(168, 85, 247, 0.14) 100%
    );
    background-size: 300% 300%;
}

/* Pulsujące świetlne krawędzie na aktywnym przycisku */
.btn-primary:not(:disabled):not(.dl-btn-large)::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: conic-gradient(
        from var(--btn-angle, 0deg),
        transparent 0%,
        rgba(52, 211, 153, 0.4) 10%,
        transparent 20%,
        transparent 50%,
        rgba(56, 189, 248, 0.3) 60%,
        transparent 70%,
        transparent 100%
    );
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    padding: 1px;
    pointer-events: none;
    z-index: 0;
    animation: btnBorderSpin 6s linear infinite;
    opacity: 0.5;
    transition: opacity 0.3s ease;
    will-change: transform;
}

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

@keyframes btnBorderSpin {
    0% { --btn-angle: 0deg; }
    100% { --btn-angle: 360deg; }
}

.btn-primary:hover:not(:disabled):not(.dl-btn-large)::after {
    opacity: 0.9;
    animation-duration: 3s;
}

/* Disabled button — brak efektów kinetycznych */
.btn-primary:disabled::before,
.btn-primary:disabled::after {
    display: none !important;
}

/* Loading state — ekstremalny kinetic mode */
.btn-primary.loading::before {
    animation-duration: 1.5s !important;
    background: linear-gradient(
        135deg,
        rgba(52, 211, 153, 0) 0%,
        rgba(52, 211, 153, 0.25) 25%,
        rgba(56, 189, 248, 0.22) 50%,
        rgba(168, 85, 247, 0.15) 75%,
        rgba(52, 211, 153, 0) 100%
    ) !important;
    background-size: 300% 300% !important;
}

.btn-primary.loading::after {
    animation-duration: 1.8s !important;
    opacity: 1 !important;
}


/* -------------------------------------------------------------------------
   8. DRAG-OVER MEGA ENHANCEMENT (Wzmocniony stan przeciągania)
   — Ekstremalny visual feedback podczas drag-over na dropzone
   ------------------------------------------------------------------------- */

/* Dropzone drag-over z pulsującym tłem i neonowym borderem */
.dropzone.drag-over {
    border-color: rgba(52, 211, 153, 0.9) !important;
    border-style: solid !important;
    background: linear-gradient(
        180deg, 
        rgba(52, 211, 153, 0.15) 0%, 
        rgba(56, 189, 248, 0.12) 50%,
        rgba(52, 211, 153, 0.08) 100%
    ) !important;
    box-shadow: 
        0 0 40px rgba(52, 211, 153, 0.35),
        0 0 80px rgba(52, 211, 153, 0.15),
        inset 0 0 30px rgba(52, 211, 153, 0.15) !important;
    animation: dragOverMegaPulse 1.5s ease-in-out infinite alternate !important;
}

@keyframes dragOverMegaPulse {
    0% {
        box-shadow: 
            0 0 30px rgba(52, 211, 153, 0.3),
            0 0 60px rgba(52, 211, 153, 0.1),
            inset 0 0 20px rgba(52, 211, 153, 0.1);
    }
    100% {
        box-shadow: 
            0 0 50px rgba(52, 211, 153, 0.5),
            0 0 100px rgba(56, 189, 248, 0.2),
            inset 0 0 40px rgba(52, 211, 153, 0.2);
    }
}


/* -------------------------------------------------------------------------
   9. TRANSFER MODE SWITCHER MOTION (Mikro-animacje przełącznika)
   — Płynne przejścia między trybami transferu
   ------------------------------------------------------------------------- */

.transfer-mode-switcher .mode-switch-btn {
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    position: relative;
    overflow: hidden;
}

.transfer-mode-switcher .mode-switch-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(52, 211, 153, 0.15) 0%, rgba(56, 189, 248, 0.1) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.transfer-mode-switcher .mode-switch-btn:hover::before {
    opacity: 1;
}

.transfer-mode-switcher .mode-switch-btn.active {
    box-shadow: 0 0 16px rgba(52, 211, 153, 0.2), inset 0 0 8px rgba(52, 211, 153, 0.08) !important;
}


/* -------------------------------------------------------------------------
   10. DOWNLOAD STAGE ULTRA-PREMIUM MOTION SYSTEM (Awwwards-Grade Motion)
   ------------------------------------------------------------------------- */

/* Płynne wejście ramy i płynnej plazmy */
#view-download.active .dl-siri-glow-frame {
    animation: dlFrameFadeIn 0.85s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Uniesienie i odszumienie karty pobierania */
#view-download.active .upload-container.download-card {
    animation: dlCardFloatEntrance 0.75s cubic-bezier(0.16, 1, 0.3, 1) both;
    will-change: transform, opacity;
}

@keyframes dlFrameFadeIn {
    0% {
        opacity: 0;
        transform: scale(0.96);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes dlCardFloatEntrance {
    0% {
        opacity: 0;
        transform: translate3d(0, 26px, 0) scale(0.985);
        filter: blur(8px);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
        filter: blur(0);
    }
}

/* Kaskadowe opóźnienia warstw wewnętrznych (Staggered Children Cascade) */
#view-download.active .dl-meta-cockpit {
    animation: dlCascadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.08s both;
}

#view-download.active .dl-header-unified {
    animation: dlCascadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.14s both;
}

#view-download.active .dl-showcase-stage {
    animation: dlCascadeIn 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.22s both;
}

#view-download.active .dl-note-card,
#view-download.active .burn-warning-box {
    animation: dlCascadeIn 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.28s both;
}

#view-download.active .dl-actions {
    animation: dlCascadeIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.34s both;
}

#view-download.active .viral-loop-card {
    animation: dlCascadeIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.42s both;
}

#view-download.active .dl-stats-counter {
    animation: dlCascadeIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.48s both;
}

@keyframes dlCascadeIn {
    0% {
        opacity: 0;
        transform: translate3d(0, 16px, 0);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* Sonar Beacon Pulse na statusach i zabezpieczeniach */
.dl-badge-dot.temp,
.unboxing-badge-dot,
.cinematic-badge-dot {
    position: relative;
}

.dl-badge-dot.temp::before,
.unboxing-badge-dot::before,
.cinematic-badge-dot::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.75;
    animation: mintBeaconSonar 2.2s cubic-bezier(0, 0, 0.2, 1) infinite;
    pointer-events: none;
    z-index: -1;
}

@keyframes mintBeaconSonar {
    0% {
        transform: scale(0.9);
        opacity: 0.85;
    }
    100% {
        transform: scale(2.8);
        opacity: 0;
    }
}

/* Mikro-interakcje prezentacji multimedialnej */
.dl-preview-container {
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
}

.dl-preview-container:hover {
    transform: translate3d(0, -2px, 0);
}

.dl-preview-container img,
.dl-preview-container video {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}

.dl-preview-container:hover img,
.dl-preview-container:hover video {
    transform: scale(1.015);
}

/* Karta notatki z płynnym uniesieniem */
.dl-note-card {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}

.dl-note-card:hover {
    transform: translate3d(0, -2px, 0);
    box-shadow: 0 14px 32px -6px rgba(0, 0, 0, 0.55), 0 0 24px -4px rgba(196, 231, 212, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.28);
    border-color: rgba(196, 231, 212, 0.45);
}

/* Iskrząca ikona w banerze referral */
.viral-spark-icon {
    display: inline-block;
    animation: sparkTwinkle 3.2s ease-in-out infinite;
    transform-origin: center center;
}

@keyframes sparkTwinkle {
    0%, 100% {
        transform: scale(1) rotate(0deg);
        opacity: 0.85;
    }
    50% {
        transform: scale(1.25) rotate(14deg);
        opacity: 1;
        filter: drop-shadow(0 0 6px rgba(196, 231, 212, 0.8));
    }
}

.viral-loop-card:hover .viral-spark-icon {
    animation: none;
    transform: scale(1.3) rotate(20deg);
    filter: drop-shadow(0 0 8px rgba(196, 231, 212, 1));
}

.viral-loop-card:hover .viral-cta-btn svg {
    transform: translate3d(4px, 0, 0) scale(1.08) !important;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}


/* -------------------------------------------------------------------------
   11. ECO-MODE / REDUCED MOTION SAFEGUARDS
   — Zerowe obciążenie gdy użytkownik preferuje ograniczony ruch
   ------------------------------------------------------------------------- */

.eco-mode .siri-glow-frame::before,
.eco-mode .siri-glow-frame::after,
.eco-mode .btn-primary::before,
.eco-mode .btn-primary::after,
.eco-mode .upload-icon-bubble::before,
.eco-mode .dropzone-particles-canvas,
.eco-mode .dropzone-ripple,
.eco-mode .dropzone-ripple-secondary,
.eco-mode .upload-container.download-card::after,
.eco-mode .dl-badge-dot.temp::before,
.eco-mode .unboxing-badge-dot::before,
.eco-mode .cinematic-badge-dot::before {
    display: none !important;
}

.eco-mode .motion-reveal,
.eco-mode .motion-reveal-left,
.eco-mode .motion-reveal-right,
.eco-mode .motion-reveal-scale,
.eco-mode #view-download.active .dl-siri-glow-frame,
.eco-mode #view-download.active .upload-container.download-card,
.eco-mode #view-download.active .dl-meta-cockpit,
.eco-mode #view-download.active .dl-header-unified,
.eco-mode #view-download.active .dl-showcase-stage,
.eco-mode #view-download.active .dl-note-card,
.eco-mode #view-download.active .burn-warning-box,
.eco-mode #view-download.active .dl-actions,
.eco-mode #view-download.active .viral-loop-card,
.eco-mode #view-download.active .dl-stats-counter,
.eco-mode #dlDownloadBtn,
.eco-mode #dlDownloadBtn svg,
.eco-mode #dlDownloadBtn::before,
.eco-mode .viral-spark-icon {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
    animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .siri-glow-frame::before,
    .siri-glow-frame::after,
    .btn-primary::before,
    .btn-primary::after,
    .upload-icon-bubble::before,
    .dropzone-particles-canvas,
    .dropzone-ripple,
    .dropzone-ripple-secondary,
    .upload-container.download-card::after,
    .dl-badge-dot.temp::before,
    .unboxing-badge-dot::before,
    .cinematic-badge-dot::before {
        display: none !important;
    }

    .motion-reveal,
    .motion-reveal-left,
    .motion-reveal-right,
    .motion-reveal-scale,
    #view-download.active .dl-siri-glow-frame,
    #view-download.active .upload-container.download-card,
    #view-download.active .dl-meta-cockpit,
    #view-download.active .dl-header-unified,
    #view-download.active .dl-showcase-stage,
    #view-download.active .dl-note-card,
    #view-download.active .burn-warning-box,
    #view-download.active .dl-actions,
    #view-download.active .viral-loop-card,
    #view-download.active .dl-stats-counter,
    #dlDownloadBtn,
    #dlDownloadBtn svg,
    #dlDownloadBtn::before,
    .viral-spark-icon {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
        animation: none !important;
    }

    .upload-icon {
        animation: none !important;
    }

    .upload-container input.is-typing {
        animation: none !important;
    }
}