.animazione-panel {
    display: grid;
    gap: 12px;
    min-width: min(320px, 75vw);
}

    .animazione-panel label {
        display: grid;
        gap: 5px;
    }

    .animazione-panel select {
        box-sizing: border-box;
        width: 100%;
        padding: 8px;
        font: inherit;
    }

.animazione-preview {
    display: grid;
    min-height: 80px;
    place-items: center;
    overflow: hidden;
    padding: 10px;
    background: #f4f1eb;
    text-align: center;
}

#animPreview {
    padding: 12px;
}

/* Velocità */

.animazione-slow {
    --anim-duration: 1200ms;
}

.animazione-normal {
    --anim-duration: 650ms;
}

.animazione-fast {
    --anim-duration: 300ms;
}

/* Direzioni */

.animazione-move.animazione-up,
.animazione-slide.animazione-up {
    --anim-x: 0;
    --anim-y: 35px;
}

.animazione-move.animazione-down,
.animazione-slide.animazione-down {
    --anim-x: 0;
    --anim-y: -35px;
}

.animazione-move.animazione-left,
.animazione-slide.animazione-left {
    --anim-x: 50px;
    --anim-y: 0;
}

.animazione-move.animazione-right,
.animazione-slide.animazione-right {
    --anim-x: -50px;
    --anim-y: 0;
}

/* Dissolvenza */

.animazione-run.animazione-fade {
    animation: animFade var(--anim-duration, 650ms) ease-out both;
}

/* Movimento */

.animazione-run.animazione-move,
.animazione-run.animazione-slide {
    animation: animMove var(--anim-duration, 650ms) ease-out both;
}

/* Zoom */

.animazione-run.animazione-zoom {
    animation: animZoom var(--anim-duration, 650ms) ease-out both;
}

/* Rotazione */

.animazione-run.animazione-rotate {
    animation: animRotate var(--anim-duration, 650ms) ease-out both;
}

/* Rimbalzo */

.animazione-run.animazione-bounce {
    animation: animBounce var(--anim-duration, 650ms) ease-out both;
}

/* Capovolgimento */

.animazione-run.animazione-flip.animazione-left,
.animazione-run.animazione-flip.animazione-right {
    animation: animFlipY var(--anim-duration, 650ms) ease-out both;
}

.animazione-run.animazione-flip.animazione-up,
.animazione-run.animazione-flip.animazione-down {
    animation: animFlipX var(--anim-duration, 650ms) ease-out both;
}

/* Espansione */

.animazione-run.animazione-expand {
    animation: animExpand var(--anim-duration, 650ms) ease-out both;
}

/* Macchina da scrivere */

.animazione-run.animazione-typewriter {
    animation: animTypewriter var(--anim-duration, 650ms) steps(18, end) both;
}

/* Sfocatura */

.animazione-run.animazione-blur {
    animation: animBlur var(--anim-duration, 650ms) ease-out both;
}

/* Elastico */

.animazione-run.animazione-elastic {
    animation: animElastic var(--anim-duration, 650ms) ease-out both;
}

/* Oscillazione */

.animazione-run.animazione-swing {
    transform-origin: top center;
    animation: animSwing var(--anim-duration, 650ms) ease-in-out both;
}

/* Caduta */

.animazione-run.animazione-drop {
    animation: animDrop var(--anim-duration, 650ms) cubic-bezier(.2, .8, .3, 1) both;
}

/* Comparsa improvvisa */

.animazione-run.animazione-pop {
    animation: animPop var(--anim-duration, 650ms) ease-out both;
}

/* Schiacciamento */

.animazione-run.animazione-squash {
    animation: animSquash var(--anim-duration, 650ms) ease-out both;
}

/* Pulsazione */

.animazione-run.animazione-pulse {
    animation: animPulse var(--anim-duration, 650ms) ease-in-out infinite;
}

/* Bagliore */

.animazione-run.animazione-glow {
    animation: animGlow var(--anim-duration, 650ms) ease-in-out infinite alternate;
}

/* Glitch digitale */

.animazione-run.animazione-glitch {
    animation: animGlitch var(--anim-duration, 650ms) steps(2, end) both;
}

/* Fluttuazione */

.animazione-run.animazione-float {
    animation: animFloat var(--anim-duration, 650ms) ease-in-out infinite alternate;
}

/* Rivelazione */

.animazione-run.animazione-reveal {
    animation: animReveal var(--anim-duration, 650ms) ease-out both;
}

/* Giro completo */

.animazione-run.animazione-spin {
    animation: animSpin var(--anim-duration, 650ms) ease-out both;
}

/* Scossa */

.animazione-run.animazione-shake {
    animation: animShake var(--anim-duration, 650ms) ease-in-out both;
}

/* Onda */

.animazione-run.animazione-wave {
    animation: animWave var(--anim-duration, 650ms) ease-in-out both;
}

/* Animazioni */

@keyframes animFade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes animMove {
    from {
        opacity: 0;
        transform: translate(var(--anim-x, 0), var(--anim-y, 35px));
    }

    to {
        opacity: 1;
        transform: translate(0, 0);
    }
}

@keyframes animZoom {
    from {
        opacity: 0;
        transform: scale(.6);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes animRotate {
    from {
        opacity: 0;
        transform: rotate(-180deg) scale(.7);
    }

    to {
        opacity: 1;
        transform: rotate(0) scale(1);
    }
}

@keyframes animBounce {
    0% {
        opacity: 0;
        transform: translateY(35px);
    }

    55% {
        opacity: 1;
        transform: translateY(-12px);
    }

    75% {
        transform: translateY(5px);
    }

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

@keyframes animFlipY {
    from {
        opacity: 0;
        transform: perspective(500px) rotateY(90deg);
    }

    to {
        opacity: 1;
        transform: perspective(500px) rotateY(0);
    }
}

@keyframes animFlipX {
    from {
        opacity: 0;
        transform: perspective(500px) rotateX(90deg);
    }

    to {
        opacity: 1;
        transform: perspective(500px) rotateX(0);
    }
}

@keyframes animExpand {
    from {
        opacity: 0;
        transform: scale(.1);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes animTypewriter {
    from {
        clip-path: inset(0 100% 0 0);
    }

    to {
        clip-path: inset(0 0 0 0);
    }
}

@keyframes animBlur {
    from {
        opacity: 0;
        filter: blur(12px);
        transform: scale(1.05);
    }

    to {
        opacity: 1;
        filter: blur(0);
        transform: scale(1);
    }
}

@keyframes animElastic {
    0% {
        opacity: 0;
        transform: scale(.3);
    }

    50% {
        opacity: 1;
        transform: scale(1.12);
    }

    70% {
        transform: scale(.92);
    }

    85% {
        transform: scale(1.04);
    }

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

@keyframes animSwing {
    0% {
        opacity: 0;
        transform: rotate(-15deg);
    }

    40% {
        opacity: 1;
        transform: rotate(10deg);
    }

    70% {
        transform: rotate(-5deg);
    }

    100% {
        transform: rotate(0);
    }
}

@keyframes animDrop {
    from {
        opacity: 0;
        transform: translateY(-70px);
    }

    65% {
        opacity: 1;
        transform: translateY(8px);
    }

    to {
        transform: translateY(0);
    }
}

@keyframes animPop {
    0% {
        opacity: 0;
        transform: scale(.2);
    }

    70% {
        opacity: 1;
        transform: scale(1.15);
    }

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

@keyframes animSquash {
    0% {
        opacity: 0;
        transform: scale(.7, 1.4);
    }

    40% {
        opacity: 1;
        transform: scale(1.2, .75);
    }

    70% {
        transform: scale(.9, 1.1);
    }

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

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

    50% {
        transform: scale(1.08);
    }
}

@keyframes animGlow {
    from {
        text-shadow: 0 0 0 transparent;
        filter: brightness(1);
    }

    to {
        text-shadow: 0 0 8px currentColor;
        filter: brightness(1.35);
    }
}

@keyframes animGlitch {
    0%, 100% {
        transform: translate(0);
        text-shadow: none;
    }

    20% {
        transform: translate(-3px, 1px);
        text-shadow: 3px 0 #c00;
    }

    40% {
        transform: translate(3px, -1px);
        text-shadow: -3px 0 #06c;
    }

    60% {
        transform: translate(-2px, 0);
        text-shadow: 2px 0 #c00;
    }

    80% {
        transform: translate(2px, 1px);
        text-shadow: -2px 0 #06c;
    }
}

@keyframes animFloat {
    from {
        transform: translateY(5px);
    }

    to {
        transform: translateY(-5px);
    }
}

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

    to {
        opacity: 1;
        clip-path: inset(0 0 0 0);
    }
}

@keyframes animSpin {
    from {
        opacity: 0;
        transform: rotate(-360deg) scale(.6);
    }

    to {
        opacity: 1;
        transform: rotate(0) scale(1);
    }
}

@keyframes animShake {
    0%, 100% {
        transform: translateX(0);
    }

    20%, 60% {
        transform: translateX(-6px);
    }

    40%, 80% {
        transform: translateX(6px);
    }
}

@keyframes animWave {
    0%, 100% {
        transform: skewX(0);
    }

    25% {
        transform: skewX(10deg);
    }

    50% {
        transform: skewX(-10deg);
    }

    75% {
        transform: skewX(5deg);
    }
}

/* Accessibilità */

@media (prefers-reduced-motion: reduce) {
    .animazione-run {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        clip-path: none !important;
        text-shadow: none !important;
    }
}

/* Nasconde gli elementi animati prima dell'avvio */
section[class*="animazione-"]:not(.animazione-run) {
    visibility: hidden;
}

/* Li rende visibili quando parte l'animazione */
section.animazione-run {
    visibility: visible;
}

section.animazione-fade:not(.animazione-run),
section.animazione-move:not(.animazione-run),
section.animazione-zoom:not(.animazione-run),
section.animazione-rotate:not(.animazione-run),
section.animazione-bounce:not(.animazione-run),
section.animazione-flip:not(.animazione-run),
section.animazione-expand:not(.animazione-run),
section.animazione-typewriter:not(.animazione-run),
section.animazione-blur:not(.animazione-run),
section.animazione-elastic:not(.animazione-run),
section.animazione-swing:not(.animazione-run),
section.animazione-drop:not(.animazione-run),
section.animazione-pop:not(.animazione-run),
section.animazione-squash:not(.animazione-run),
section.animazione-pulse:not(.animazione-run),
section.animazione-glow:not(.animazione-run),
section.animazione-glitch:not(.animazione-run),
section.animazione-float:not(.animazione-run),
section.animazione-slide:not(.animazione-run),
section.animazione-reveal:not(.animazione-run),
section.animazione-spin:not(.animazione-run),
section.animazione-shake:not(.animazione-run),
section.animazione-wave:not(.animazione-run) {
    visibility: hidden;
}