.lab-sky,
.lab-sky * {
    box-sizing: border-box;
}

.lab-sky {
    --lab-text: var(--color-text, #f5f7fb);
    --lab-line: rgba(245, 247, 251, 0.10);

    --lab-day-opacity: 0;
    --lab-night-opacity: 1;

    --lab-mountain-day-opacity: 0;
    --lab-mountain-night-opacity: 0.78;

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

    width: 100%;
    max-width: 100%;

    color: var(--lab-text);
    background: transparent;

    padding: clamp(2.8rem, 5.2vw, 4.8rem) clamp(1.25rem, 5vw, 5rem);
    scroll-margin-top: 96px;
}

.lab-sky::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;

    background:
        radial-gradient(circle at 50% 40%, rgba(97, 49, 173, 0.045), transparent 44%),
        linear-gradient(
            180deg,
            transparent 0%,
            rgba(255, 255, 255, 0.006) 34%,
            transparent 100%
        );

    opacity: 1;
}

.lab-sky__container {
    width: min(1180px, 100%);
    max-width: 100%;
    margin: 0 auto;
}

.lab-sky__sr-only {
    position: absolute;
    overflow: hidden;

    width: 1px;
    height: 1px;

    padding: 0;
    margin: -1px;

    clip: rect(0, 0, 0, 0);
    white-space: nowrap;

    border: 0;
}

/* ================================
   Escena
================================ */

.lab-sky__stage {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    width: 100%;
    max-width: 100%;

    min-height: clamp(260px, 34vw, 430px);
    aspect-ratio: 16 / 5.8;

    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;

    transform: translateZ(0);
}

.lab-sky__stage::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            transparent 0%,
            rgba(245, 247, 251, 0.012) 44%,
            transparent 100%
        );

    opacity: 0.72;
    transition:
        opacity 680ms ease,
        background 680ms ease;
}

.lab-sky__stage::after {
    content: "";
    position: absolute;
    left: 4%;
    right: 4%;
    bottom: 17%;
    z-index: 4;
    pointer-events: none;

    height: 1px;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(245, 247, 251, 0.08) 12%,
        rgba(245, 247, 251, 0.18) 50%,
        rgba(245, 247, 251, 0.08) 88%,
        transparent
    );

    opacity: 0.62;
    transition:
        opacity 680ms ease,
        background 680ms ease;
}

/* ================================
   Capas
================================ */

.lab-sky__layer {
    position: absolute;
    inset: 0;
    z-index: 1;

    overflow: hidden;
    pointer-events: none;

    transition:
        opacity 780ms cubic-bezier(0.2, 0.8, 0.2, 1),
        transform 780ms cubic-bezier(0.2, 0.8, 0.2, 1),
        filter 780ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.lab-sky__layer--day {
    opacity: var(--lab-day-opacity);
    transform: translateY(8px);
}

.lab-sky__layer--night {
    opacity: var(--lab-night-opacity);
    transform: translateY(0);
}

/* ================================
   Montañas
================================ */

.lab-sky__mountain {
    position: absolute;
    left: 50%;
    bottom: 15%;
    z-index: 2;

    display: block;

    width: min(1320px, 112%);
    max-width: none;
    height: auto;

    object-fit: contain;
    object-position: center bottom;

    transform: translate3d(-50%, 0, 0) scale(1.001);
    transform-origin: 50% 100%;

    user-select: none;
    pointer-events: none;

    transition:
        opacity 780ms cubic-bezier(0.2, 0.8, 0.2, 1),
        filter 780ms cubic-bezier(0.2, 0.8, 0.2, 1),
        transform 780ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.lab-sky__mountain--day {
    opacity: var(--lab-mountain-day-opacity);

    filter: grayscale(1) contrast(1.08) brightness(0.68);
    mix-blend-mode: multiply;
}

.lab-sky__mountain--night {
    opacity: var(--lab-mountain-night-opacity);

    filter: invert(1) grayscale(1) contrast(1.05) brightness(0.96);
    mix-blend-mode: screen;
}

.lab-sky__mountain.is-image-missing {
    opacity: 0 !important;
}

/* ================================
   Reveal
================================ */

.lab-sky.lab-sky--js [data-lab-reveal] {
    opacity: 0;
    transform: translateY(14px);

    transition:
        opacity 620ms ease,
        transform 620ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.lab-sky.lab-sky--js [data-lab-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ================================
   Light mode
================================ */

html[data-theme="light"] .lab-sky,
body[data-theme="light"] .lab-sky,
body.light .lab-sky,
body.light-mode .lab-sky,
body.theme-light .lab-sky,
body.is-light .lab-sky {
    --lab-text: var(--color-text, #151515);
    --lab-line: rgba(21, 21, 21, 0.10);

    --lab-day-opacity: 1;
    --lab-night-opacity: 0;

    --lab-mountain-day-opacity: 0.74;
    --lab-mountain-night-opacity: 0;

    color: var(--lab-text);
    background: transparent;
}

html[data-theme="light"] .lab-sky::before,
body[data-theme="light"] .lab-sky::before,
body.light .lab-sky::before,
body.light-mode .lab-sky::before,
body.theme-light .lab-sky::before,
body.is-light .lab-sky::before {
    background:
        radial-gradient(circle at 50% 42%, rgba(184, 146, 74, 0.05), transparent 44%),
        linear-gradient(
            180deg,
            transparent 0%,
            rgba(184, 146, 74, 0.018) 42%,
            transparent 100%
        );
}

html[data-theme="light"] .lab-sky__stage::before,
body[data-theme="light"] .lab-sky__stage::before,
body.light .lab-sky__stage::before,
body.light-mode .lab-sky__stage::before,
body.theme-light .lab-sky__stage::before,
body.is-light .lab-sky__stage::before {
    background:
        linear-gradient(
            180deg,
            transparent 0%,
            rgba(184, 146, 74, 0.025) 46%,
            transparent 100%
        );

    opacity: 0.76;
}

html[data-theme="light"] .lab-sky__stage::after,
body[data-theme="light"] .lab-sky__stage::after,
body.light .lab-sky__stage::after,
body.light-mode .lab-sky__stage::after,
body.theme-light .lab-sky__stage::after,
body.is-light .lab-sky__stage::after {
    background: linear-gradient(
        90deg,
        transparent,
        rgba(21, 21, 21, 0.08) 12%,
        rgba(21, 21, 21, 0.18) 50%,
        rgba(21, 21, 21, 0.08) 88%,
        transparent
    );

    opacity: 0.56;
}

html[data-theme="light"] .lab-sky__layer--day,
body[data-theme="light"] .lab-sky__layer--day,
body.light .lab-sky__layer--day,
body.light-mode .lab-sky__layer--day,
body.theme-light .lab-sky__layer--day,
body.is-light .lab-sky__layer--day {
    transform: translateY(0);
}

html[data-theme="light"] .lab-sky__layer--night,
body[data-theme="light"] .lab-sky__layer--night,
body.light .lab-sky__layer--night,
body.light-mode .lab-sky__layer--night,
body.theme-light .lab-sky__layer--night,
body.is-light .lab-sky__layer--night {
    transform: translateY(-8px);
}

/* ================================
   Estado de cambio de tema
================================ */

.lab-sky.is-theme-switching .lab-sky__layer,
.lab-sky.is-theme-switching .lab-sky__mountain,
.lab-sky.is-theme-switching .lab-sky__stage::before,
.lab-sky.is-theme-switching .lab-sky__stage::after {
    transition-duration: 920ms;
}

/* ================================
   Responsive
================================ */

@media (max-width: 1020px) {
    .lab-sky {
        padding-top: clamp(2.6rem, 6vw, 4.2rem);
        padding-bottom: clamp(3rem, 6vw, 4.6rem);
    }

    .lab-sky__stage {
        min-height: clamp(260px, 42vw, 380px);
        aspect-ratio: 16 / 6.4;
    }

    .lab-sky__mountain {
        width: 124%;
        bottom: 16%;
    }
}

@media (max-width: 720px) {
    .lab-sky {
        padding: clamp(2.8rem, 10vw, 4.2rem) 1rem;
        scroll-margin-top: 82px;
    }

    .lab-sky__stage {
        min-height: clamp(260px, 76vw, 360px);
        aspect-ratio: 1 / 0.82;
    }

    .lab-sky__mountain {
        width: 174%;
        bottom: 18%;
    }

    .lab-sky__mountain--day {
        transform: translate3d(-50%, 0, 0) scale(1.01);
    }

    .lab-sky__mountain--night {
        transform: translate3d(-49%, 0, 0) scale(1.01);
    }

    .lab-sky__stage::after {
        left: 6%;
        right: 6%;
        bottom: 19%;
    }
}

/* ================================
   Reduced Motion
================================ */

@media (prefers-reduced-motion: reduce) {
    .lab-sky *,
    .lab-sky *::before,
    .lab-sky *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }

    .lab-sky.lab-sky--js [data-lab-reveal] {
        opacity: 1;
        transform: none;
    }
}