/* ==========================================================
   INTERACTIVE ANIMATION LAB
   MOBILE FIRST
========================================================== */

.animation-lab-page {
    padding: 50px 25px;
}

.animation-lab-container {
    max-width: 992px;
    margin: 0 auto;
}

.animation-lab-panel {
    background: var(--color-light-grey);
    border: 1px solid var(--color-medium-grey);
    border-radius: 10px;
    padding: 25px;
}

.animation-lab-panel h2 {
    margin-top: 0;
}

.animation-lab-panel > p {
    line-height: 1.65;
}

/* ==========================================================
   ANIMATION PREVIEW
========================================================== */

.animation-lab-preview {
    --lab-color-1: #8dc63f;
    --lab-color-2: #00a79d;
    --lab-color-3: #1c75bc;
    --lab-duration: 5s;
    --lab-scale: 1;

    position: relative;
    isolation: isolate;
    overflow: hidden;

    width: 100%;
    height: 280px;
    margin: 25px 0;

    border-radius: 8px;

    background: radial-gradient(
        ellipse at center,
        #183b42,
        #0b1418
    );
}

/* ==========================================================
   FLOATING SHAPES
========================================================== */

.animation-lab-shape {
    position: absolute;
    border-radius: 50%;

    background: linear-gradient(
        135deg,
        var(--lab-color-1),
        var(--lab-color-2),
        var(--lab-color-3)
    );

    box-shadow: 0 0 30px #00a79d55;

    animation: lab-float var(--lab-duration)
        ease-in-out infinite alternate;

    transform-origin: center;
}

.animation-lab-shape--one {
    width: calc(70px * var(--lab-scale));
    height: calc(70px * var(--lab-scale));
    left: 18%;
    top: 35%;
}

.animation-lab-shape--two {
    width: calc(45px * var(--lab-scale));
    height: calc(45px * var(--lab-scale));
    left: 52%;
    top: 20%;

    animation-delay: -1.5s;
}

.animation-lab-shape--three {
    width: calc(100px * var(--lab-scale));
    height: calc(100px * var(--lab-scale));
    left: 72%;
    top: 42%;

    animation-delay: -2.5s;
}

@keyframes lab-float {
    from {
        transform: translateY(20px) rotate(-12deg);
    }

    to {
        transform: translateY(-20px) rotate(20deg);
    }
}

/* ==========================================================
   PULSING GLOW
========================================================== */

.animation-lab-glow {
    display: none;

    position: absolute;
    left: 50%;
    top: 50%;

    width: calc(130px * var(--lab-scale));
    height: calc(130px * var(--lab-scale));

    border-radius: 50%;

    background: var(--lab-color-2);

    box-shadow:
        0 0 30px var(--lab-color-2),
        0 0 70px var(--lab-color-3);

    animation: lab-pulse var(--lab-duration)
        ease-in-out infinite alternate;
}

@keyframes lab-pulse {
    from {
        transform: translate(-50%, -50%) scale(.7);
        opacity: .55;
    }

    to {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 1;
    }
}

/* ==========================================================
   ANIMATED GRADIENT
========================================================== */

.animation-lab-preview[data-effect="gradient"] {
    background: linear-gradient(
        120deg,
        var(--lab-color-1),
        var(--lab-color-2),
        var(--lab-color-3)
    );

    background-size: 300% 300%;

    animation: lab-gradient var(--lab-duration)
        ease infinite alternate;
}

@keyframes lab-gradient {
    from {
        background-position: 0% 50%;
    }

    to {
        background-position: 100% 50%;
    }
}

/* ==========================================================
   EFFECT VISIBILITY
========================================================== */

.animation-lab-preview[data-effect="glow"] .animation-lab-shape,
.animation-lab-preview[data-effect="gradient"] .animation-lab-shape {
    display: none;
}

.animation-lab-preview[data-effect="glow"] .animation-lab-glow {
    display: block;
}

/* ==========================================================
   PAUSE STATE
========================================================== */

.animation-lab-preview.is-paused,
.animation-lab-preview.is-paused * {
    animation-play-state: paused !important;
}

/* ==========================================================
   CONTROLS
========================================================== */

.animation-lab-controls {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin: 25px 0;
}

.animation-lab-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.animation-lab-field label {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-black);
}

.animation-lab-field label span {
    float: right;
    font-weight: 400;
}

.animation-lab-field select {
    width: 100%;
    padding: 12px;
    border: 1px solid #aaa;
    border-radius: 5px;
    background: var(--color-white);
    color: var(--color-black);
    font: inherit;
}

.animation-lab-field input[type="range"] {
    width: 100%;
    accent-color: var(--color-teal);
}

/* ==========================================================
   ACTION BUTTONS
========================================================== */

.animation-lab-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* ==========================================================
   ANIMATION LAB ACTION BUTTONS
========================================================== */

.animation-lab-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.animation-lab-actions .btn {
    flex: 1 1 130px;
}

/* ==========================================================
   FEEDBACK AND GENERATED CODE
========================================================== */

.animation-lab-feedback {
    min-height: 1em;
    margin: 15px 0;
    color: #176b60;
    font-size: 13px;
}

.animation-lab-code-header {
    margin-top: 25px;
}

.animation-lab-code-header h3 {
    margin: 0;
}

.animation-lab-code {
    width: 100%;
    padding: 18px;
    margin: 15px 0 0;

    background: #20282b;
    color: #f1f6f5;
    border-radius: 7px;

    font-family: monospace;
    font-size: 13px;
    line-height: 1.6;

    white-space: pre;
    overflow-x: auto;
}

/* ==========================================================
   ANIMATION LAB MOTION NOTICE
========================================================== */

.animation-lab-motion-notice {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: -10px 0 20px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-dark-grey);
}

.animation-lab-motion-notice i,
.animation-lab-motion-notice svg {
    color: var(--color-teal);
    font-size: 40px;
    flex-shrink: 0;
}

.animation-lab-motion-notice[hidden] {
    display: none;
}

/* ==========================================================
   DESKTOP
========================================================== */

@media (min-width: 768px) {

    .animation-lab-panel {
        padding: 28px;
        text-align: left;
    }

    .animation-lab-preview {
        height: 360px;
    }

    .animation-lab-controls {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


/* ==========================================================
   ACCESSIBILITY: REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {

    .animation-lab-preview:not(.is-motion-enabled),
    .animation-lab-preview:not(.is-motion-enabled) * {
        animation-play-state: paused !important;
        transition-duration: 0.01ms !important;
    }

}