:root {
    --pm-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --pm-ease-soft: cubic-bezier(0.22, 0.72, 0.28, 1);
}

/* Scroll reveal: small overshoot creates the restrained "detach" motion. */
.pm-reveal {
    opacity: 0;
    transform: translate3d(0, 26px, 0) scale(0.986);
    transform-origin: 50% 100%;
    will-change: transform, opacity;
}

.pm-reveal.pm-is-revealed {
    animation: pmDetachUp 0.68s var(--pm-ease-out) var(--pm-delay, 0ms) both;
}

@keyframes pmDetachUp {
    0% { opacity: 0; transform: translate3d(0, 26px, 0) scale(0.986); }
    68% { opacity: 1; transform: translate3d(0, -3px, 0) scale(1.003); }
    100% { opacity: 1; transform: none; }
}

/* Cards get depth without changing their layout or content. */
.pm-lift-card {
    position: relative;
    isolation: isolate;
    --pm-x: 50%;
    --pm-y: 35%;
    transition:
        transform 0.48s var(--pm-ease-out),
        box-shadow 0.48s var(--pm-ease-out),
        border-color 0.48s ease,
        filter 0.48s ease;
}

.pm-lift-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(circle at var(--pm-x) var(--pm-y), rgba(255, 255, 255, 0.2), transparent 42%);
    transition: opacity 0.45s ease;
}

.pm-premium-action {
    transition:
        transform 0.34s var(--pm-ease-out),
        box-shadow 0.34s ease,
        filter 0.34s ease,
        background-color 0.34s ease,
        border-color 0.34s ease !important;
}

@media (hover: hover) and (pointer: fine) {
    .pm-lift-card:hover {
        transform: translate3d(0, -5px, 0);
        box-shadow: 0 20px 46px rgba(1, 43, 53, 0.17), 0 1px 0 rgba(255, 255, 255, 0.16) inset;
        filter: saturate(1.025);
    }

    .pm-lift-card:hover::after {
        opacity: 0.72;
    }

    .pm-premium-action:hover {
        transform: translate3d(0, -2px, 0) scale(1.008);
        box-shadow: 0 12px 28px rgba(1, 43, 53, 0.2);
        filter: brightness(1.055);
    }

    .pm-premium-action:active {
        transform: translate3d(0, 0, 0) scale(0.985);
        transition-duration: 0.12s !important;
    }
}

/* Sticky headers become denser and more glass-like after the first scroll. */
.pm-site-header,
.pm-site-nav {
    transition:
        padding 0.38s var(--pm-ease-soft),
        box-shadow 0.38s ease,
        backdrop-filter 0.38s ease,
        -webkit-backdrop-filter 0.38s ease,
        border-color 0.38s ease;
}

html.pm-page-scrolled .pm-site-header {
    padding-top: 0.7rem !important;
    padding-bottom: 0.7rem !important;
    box-shadow: 0 12px 32px rgba(1, 43, 53, 0.12);
    backdrop-filter: blur(18px) saturate(135%);
    -webkit-backdrop-filter: blur(18px) saturate(135%);
}

html.pm-page-scrolled .pm-site-nav {
    box-shadow: 0 14px 34px rgba(1, 30, 38, 0.2);
    backdrop-filter: blur(18px) saturate(135%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(135%) !important;
}

/* The format chooser reads clearly as the primary interactive object. */
#main-nav-btn {
    isolation: isolate;
    border-color: rgba(255, 255, 255, 0.34) !important;
    box-shadow:
        0 18px 44px rgba(0, 25, 32, 0.2),
        0 0 0 1px rgba(77, 217, 192, 0.1) inset,
        0 0 34px rgba(77, 217, 192, 0.12);
}

#main-nav-btn::after {
    content: "";
    position: absolute;
    inset: -30% -55%;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.06) 45%, rgba(255, 255, 255, 0.38) 50%, rgba(255, 255, 255, 0.08) 55%, transparent 62%);
    transform: translate3d(-70%, 0, 0) skewX(-16deg);
}

#main-nav-btn.pm-cta-active {
    animation: pmCtaBreathe 6.4s ease-in-out infinite;
}

#main-nav-btn.pm-cta-active::after {
    animation: pmCtaSheen 6.4s 0.9s ease-in-out infinite;
}

.pm-cta-chevron {
    position: relative;
    z-index: 10;
    display: flex;
    justify-content: center;
    width: 24px;
    height: 16px;
    margin: 7px auto -5px;
    color: rgba(170, 243, 229, 0.9);
    animation: pmChevronHint 2.4s ease-in-out infinite;
}

.pm-cta-chevron svg {
    width: 20px;
    height: 12px;
}

@keyframes pmCtaSheen {
    0%, 62% { transform: translate3d(-70%, 0, 0) skewX(-16deg); opacity: 0; }
    66% { opacity: 1; }
    82% { transform: translate3d(70%, 0, 0) skewX(-16deg); opacity: 0.9; }
    86%, 100% { transform: translate3d(70%, 0, 0) skewX(-16deg); opacity: 0; }
}

@keyframes pmCtaBreathe {
    0%, 100% {
        filter: brightness(1);
        box-shadow: 0 18px 44px rgba(0, 25, 32, 0.2), 0 0 0 1px rgba(77, 217, 192, 0.1) inset, 0 0 30px rgba(77, 217, 192, 0.1);
    }
    50% {
        filter: brightness(1.07);
        box-shadow: 0 20px 48px rgba(0, 25, 32, 0.24), 0 0 0 1px rgba(151, 244, 226, 0.2) inset, 0 0 46px rgba(77, 217, 192, 0.2);
    }
}

@keyframes pmChevronHint {
    0%, 100% { transform: translateY(0); opacity: 0.66; }
    50% { transform: translateY(3px); opacity: 1; }
}

#hero-slider .hero-slide > a > img,
#hero-slider .hero-slide > a > .relative.z-10 {
    will-change: transform;
}

@media (max-width: 767px) {
    .pm-reveal {
        transform: translate3d(0, 18px, 0) scale(0.99);
    }

    @keyframes pmDetachUp {
        0% { opacity: 0; transform: translate3d(0, 18px, 0) scale(0.99); }
        72% { opacity: 1; transform: translate3d(0, -2px, 0) scale(1.002); }
        100% { opacity: 1; transform: none; }
    }

    html.pm-page-scrolled .pm-site-header {
        padding-top: 0.45rem !important;
        padding-bottom: 0.45rem !important;
    }

    #main-nav-btn.pm-cta-active {
        animation-duration: 7.2s;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pm-reveal,
    .pm-reveal.pm-is-revealed,
    #main-nav-btn.pm-cta-active,
    #main-nav-btn.pm-cta-active::after,
    .pm-cta-chevron {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }

    .pm-lift-card,
    .pm-premium-action,
    .pm-site-header,
    .pm-site-nav {
        transition: none !important;
    }
}