/* Final mobile refinements loaded after the established landing system. */

/* Samsung/Android stability: opacity-only panel fades. Transform or filter on
   an ancestor changes the containing block of its fixed-position controls. */
@keyframes mobilePanelFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes mobilePanelFadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

@media (max-width: 800px) and (orientation: portrait),
       (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
    body.homepage #introPanel.landing-enter {
        animation: mobilePanelFadeIn 1050ms ease-out both !important;
    }

    body.homepage.is-forging #introPanel {
        animation: mobilePanelFadeOut 720ms cubic-bezier(.55, 0, .45, 1) both !important;
    }

    body.homepage.is-forging #sortPanel.is-active {
        animation: mobilePanelFadeIn 760ms cubic-bezier(.16, 1, .3, 1) both !important;
    }

    body.homepage.is-forging #introPanel .hero-actions,
    body.homepage.is-returning #sortPanel .sort-actions,
    body.homepage.explore-open #introPanel .hero-actions {
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        animation: none !important;
        transition: none !important;
    }
}

/* One approved copper treatment for the primary action in every layout. */
body.explore-open .explore-choice:first-child {
    border-color: rgba(226, 145, 73, .72);
    background: linear-gradient(135deg, #b96735, #dc914f 52%, #9a522c);
    box-shadow: inset 0 1px rgba(255, 224, 188, .3), 0 12px 28px rgba(0, 0, 0, .3);
}

@media (max-width: 800px) and (orientation: portrait) {
    body.explore-open .explore-screen {
        grid-template-rows: auto auto;
        align-content: start;
        gap: clamp(24px, 3.7svh, 34px);
        padding-top: max(clamp(88px, 12svh, 112px), calc(env(safe-area-inset-top) + 70px));
        padding-bottom: max(22px, calc(env(safe-area-inset-bottom) + 14px));
    }

    body.explore-open .explore-boardroom h2 {
        max-width: 100%;
        font-size: clamp(36px, 10.35vw, 46px);
        line-height: .92;
        letter-spacing: -.018em;
    }

    body.explore-open .explore-boardroom p {
        max-width: 40ch;
        font-size: clamp(18px, 4.8vw, 21px);
        line-height: 1.52;
    }

    body.explore-open .explore-choices {
        align-self: start;
        grid-template-rows: repeat(4, clamp(54px, 7.8svh, 68px));
        gap: clamp(13px, 2svh, 19px);
    }

    body.explore-open .explore-choice {
        min-height: 50px;
        padding-top: 8px;
        padding-bottom: 8px;
    }
}

@media (max-width: 800px) and (orientation: portrait) and (max-height: 650px) {
    body.explore-open .explore-screen {
        gap: 8px;
        padding-top: max(58px, calc(env(safe-area-inset-top) + 52px));
        padding-bottom: max(8px, env(safe-area-inset-bottom));
    }

    body.explore-open .explore-boardroom h2 {
        font-size: clamp(34px, 10.2vw, 40px);
    }

    body.explore-open .explore-boardroom p {
        font-size: clamp(13px, 3.65vw, 15px);
        line-height: 1.36;
    }

    body.explore-open .explore-choices {
        grid-template-rows: repeat(4, minmax(44px, 50px));
        gap: 5px;
    }
}

/* Home and Make Me a Site share one white, top-left landscape wordmark. */
@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
    body.homepage:not(.explore-open):has(:is(#introPanel, #sortPanel).is-active) .fm-home-v2-wordmark {
        position: fixed !important;
        top: max(12px, calc(env(safe-area-inset-top) + 8px)) !important;
        right: auto !important;
        left: max(20px, calc(env(safe-area-inset-left) + 14px)) !important;
        width: auto !important;
        color: #eee9e0 !important;
        font-family: Arial, Helvetica, sans-serif !important;
        font-size: clamp(10px, 2.8dvh, 13px) !important;
        font-weight: 500 !important;
        line-height: 1 !important;
        letter-spacing: clamp(3.5px, .58vw, 5px) !important;
        text-align: left !important;
        white-space: nowrap !important;
    }
}