/* Loaded by index.html only. The product section/card clips the art vertically. */
[data-product-variable-timing] .mypage-scroll-slide {
    display: flex;
    align-items: safe center;
    justify-content: center;
    overflow: visible;
}

@media (min-width: 992px) {
    [data-product-variable-timing] {
        overflow-x: visible;
        overflow-y: clip;
    }
}

@media (max-width: 577px) {
    /* Join the cards and paint the PDF shadow above the My Page card (z-index 3). */
    .landing-main > [data-product-boundary-shadow] {
        padding-top: 0;
        z-index: 4;
    }
}

/* Static mobile screenshots are enlarged to 120%; keep the screen visible. */
[data-product-variable-timing] .product-mobile-card .mypage-scroll-slide {
    inset: 0;
    width: 100%;
    height: 100%;
    transform: none;
}

.mypage-scroll-laptop {
    position: relative;
    flex: none;
    width: 100%;
    aspect-ratio: 2250 / 1638;
}

.mypage-scroll-art {
    position: absolute;
    width: 2250px;
    height: 1638px;
    transform: scale(var(--mypage-laptop-scale, 0));
    transform-origin: 0 0;
}

.mypage-scroll-window {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 1600px;
    height: 1000px;
    overflow: hidden;
    background: #fff;
    /* Screen corners in the cropped PNG: (434,255), (1633,32),
       (1623,882), (446,1136). Preserve the original perspective. */
    transform: matrix3d(
        0.792407735291801, -0.1385317375815, 0, 0.00002635195057671,
        0.02049621709372738, 0.9026405888307, 0, 0.00001904981411149,
        0, 0, 1, 0,
        434, 255, 0, 1
    );
    transform-origin: 0 0;
}

/* Override the landing page's general desktop/mobile image sizing. */
[data-product-variable-timing] .mypage-scroll-slide .mypage-scroll-frame,
[data-product-variable-timing] .mypage-scroll-slide .mypage-scroll-page {
    display: block;
    width: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    opacity: 1;
    pointer-events: none;
    user-select: none;
    transition: none;
}

[data-product-variable-timing] .mypage-scroll-slide .mypage-scroll-frame {
    position: absolute;
    z-index: 2;
    inset: 0;
    height: 100%;
    object-fit: contain;
}

[data-product-variable-timing] .mypage-scroll-slide .mypage-scroll-page {
    height: auto;
    transform: translateY(0);
    will-change: transform;
}

[data-product-variable-timing] .mypage-scroll-slide.is-playing .mypage-scroll-page {
    animation: mypage-automatic-scroll 20s cubic-bezier(.16, .7, .3, 1) infinite;
}

[data-product-variable-timing] .mypage-scroll-slide.is-playing.is-paused .mypage-scroll-page {
    animation-play-state: paused;
}

/* Keep touch hover from overriding the scheduled active slide. */
[data-product-variable-timing] .product-mobile-card [data-swap-step="2"]:hover > .product-visual-swap__image {
    opacity: 0;
}

[data-product-variable-timing] .product-mobile-card [data-swap-step="2"]:hover > .product-visual-swap__image.is-active {
    opacity: 1;
}

@keyframes mypage-automatic-scroll {
    0%, 6% { transform: translateY(0); }
    10%, 16% { transform: translateY(calc(-8% + 80px)); }
    19%, 21% { transform: translateY(calc(-14% + 140px)); }
    26%, 34% { transform: translateY(calc(-28% + 280px)); }
    38%, 43% { transform: translateY(calc(-39% + 390px)); }
    46%, 48% { transform: translateY(calc(-45% + 450px)); }
    53%, 61% { transform: translateY(calc(-59% + 590px)); }
    65%, 70% { transform: translateY(calc(-71% + 710px)); }
    73%, 76% { transform: translateY(calc(-78% + 780px)); }
    81%, 87% { transform: translateY(calc(-91% + 910px)); }
    90%, 96% {
        transform: translateY(calc(-100% + 1000px));
        animation-timing-function: cubic-bezier(.65, 0, .35, 1);
    }
    98.5%, 100% { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    [data-product-variable-timing] .mypage-scroll-slide.is-playing .mypage-scroll-page {
        animation: none;
    }
}