/* ==============================
   ALTA RESEARCH S.A.
   Main CSS Entry Point
   ============================== */

/* Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=Audiowide&family=Inter:wght@400;500;600;700;800;900&display=swap");

/* Base */
@import url("./base/variables.css");
@import url("./base/reset.css");
@import url("./base/typography.css");

/* Layout */
@import url("./layout/containers.css");
@import url("./layout/sections.css");

/* Components */
@import url("./components/buttons.css");
@import url("./components/navbar.css");
@import url("./components/cards.css");
@import url("./components/process.css");
@import url("./components/action-cards.css");
@import url("./components/footer.css");

/* Pages */
@import url("./pages/home.css");
@import url("./pages/projects.css");
@import url("./pages/submarine.css");
@import url("./pages/submarine-experience.css");
@import url("./pages/contact.css");
@import url("./pages/gallery.css");
@import url("./pages/volcano.css");

/* Theme override */
@import url("./theme/alta-theme.css");

/* Responsive always last */
@import url("./layout/responsive.css");


/* ==============================
   GLOBAL SCROLL TOP BUTTON
   ============================== */

.scroll-top-button {
    position: fixed;
    right: clamp(18px, 3vw, 34px);
    bottom: clamp(18px, 3vw, 34px);
    z-index: 120;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: var(--color-white);
    background:
        linear-gradient(135deg, #1f5997 0%, #071e5a 100%);
    box-shadow:
        0 18px 42px rgba(2, 11, 36, 0.24),
        0 0 0 1px rgba(255, 255, 255, 0.12) inset;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, 14px, 0) scale(0.92);
    transition:
        opacity 0.24s ease,
        visibility 0.24s ease,
        transform 0.24s ease,
        box-shadow 0.24s ease,
        background 0.24s ease;
}

.scroll-top-button.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translate3d(0, 0, 0) scale(1);
}

.scroll-top-button:hover {
    background:
        linear-gradient(135deg, #298aca 0%, #071e5a 100%);
    box-shadow:
        0 22px 52px rgba(2, 11, 36, 0.32),
        0 0 0 1px rgba(255, 255, 255, 0.16) inset;
    transform: translate3d(0, -3px, 0) scale(1);
}

.scroll-top-button:focus-visible {
    outline: 3px solid rgba(245, 210, 17, 0.75);
    outline-offset: 4px;
}

.scroll-top-button svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

body[data-page="volcano"].is-volcano-descent-active .scroll-top-button {
    bottom: 28px;
    left: clamp(18px, 3vw, 34px);
    right: auto;
}

@media (max-width: 980px) {
    .scroll-top-button {
        width: 48px;
        height: 48px;
        right: 18px;
        bottom: 18px;
    }

    body[data-page="volcano"].is-volcano-descent-active .scroll-top-button {
        left: 18px;
        right: auto;
        bottom: 160px;
    }
}

@media (max-width: 480px) {
    .scroll-top-button {
        width: 44px;
        height: 44px;
        right: 14px;
        bottom: 14px;
    }

    .scroll-top-button svg {
        width: 22px;
        height: 22px;
    }

    body[data-page="volcano"].is-volcano-descent-active .scroll-top-button {
        left: 14px;
        bottom: 150px;
    }
}