/*
 * Film Portal
 * The static layout is the baseline. JavaScript only adds the scroll choreography
 * after feature detection, so the player and explanatory copy never depend on it.
 */

.film-portal {
    --film-ink: #0e0719;
    --film-deep: #150c24;
    --film-violet: #8f67c8;
    --film-lilac: #d9c4ff;
    --film-flame: #ff6a2b;
    position: relative;
    z-index: 1;
    overflow: clip;
    color: #fbf8ff;
    background:
        radial-gradient(90% 95% at 87% 8%, rgba(143, 103, 200, 0.2), transparent 60%),
        radial-gradient(64% 78% at 8% 92%, rgba(255, 106, 43, 0.1), transparent 70%),
        linear-gradient(158deg, #12091f 0%, #0d0718 52%, #130a23 100%);
    isolation: isolate;
}

.film-portal::before,
.film-portal::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.film-portal::before {
    /* 原本畫了一層 7.5rem 的細網格，手機上看得出格線，拿掉；只留 ::after 的暗角 */
    display: none;
}

.film-portal::after {
    background: radial-gradient(ellipse at 50% 48%, transparent 25%, rgba(3, 2, 7, 0.64) 100%);
}

.film-portal__scroll {
    position: relative;
}

.film-portal__sticky {
    position: relative;
    display: grid;
    min-height: clamp(42rem, 92svh, 58rem);
    align-items: center;
    overflow: hidden;
    padding: clamp(5rem, 10vw, 8rem) 1.5rem;
}

.film-portal__stage {
    position: relative;
    z-index: 2;
    display: grid;
    width: min(72rem, 100%);
    margin-inline: auto;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: center;
    gap: clamp(2rem, 6vw, 6rem);
}

.film-portal__copy {
    position: relative;
    z-index: 5;
    min-width: 0;
    max-width: 44rem;
}

.film-portal__eyebrow {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin: 0 0 1rem;
    color: #ffb077;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.film-portal__eyebrow::before {
    width: 2.2rem;
    height: 1px;
    background: currentColor;
    content: "";
}

.film-portal__video:focus-visible,
.film-portal__cinema:focus-visible {
    outline: 3px solid #ffb077;
    outline-offset: 4px;
}

.film-portal__card-transition {
    display: none;
}

.film-portal__theatre {
    position: relative;
    min-width: 0;
    height: 100%;
}

.film-portal__continuation-phone {
    display: grid;
    place-items: center;
}

.film-portal__cinema {
    position: relative;
    z-index: 3;
    grid-column: 1 / -1;
    width: min(66rem, 100%);
    margin: clamp(4rem, 8vw, 7rem) auto 0;
    scroll-margin-top: 6rem;
}

.film-portal__screen {
    position: relative;
    overflow: hidden;
    padding: clamp(0.35rem, 0.65vw, 0.6rem);
    border: 1px solid rgba(218, 184, 130, 0.28);
    border-radius: clamp(1rem, 2.4vw, 1.6rem);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.14), transparent 18%),
        linear-gradient(145deg, rgba(72, 94, 101, 0.52), rgba(6, 8, 11, 0.96) 42%, rgba(151, 86, 50, 0.32));
    box-shadow:
        0 1.8rem 5.5rem rgba(0, 0, 0, 0.62),
        0 0 3rem rgba(94, 147, 161, 0.08),
        0 0 0 1px rgba(255, 255, 255, 0.035) inset;
}

.film-portal__media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    border-radius: calc(clamp(1rem, 2.4vw, 1.6rem) - 0.38rem);
    background: #07030d;
}

.film-portal__screen::after {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(122deg, rgba(206, 230, 235, 0.16), transparent 18%, transparent 78%, rgba(255, 177, 119, 0.13));
    content: "";
    pointer-events: none;
}

.film-portal__video {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.film-portal__fallback {
    position: absolute;
    inset: 0;
    display: none;
    place-items: center;
    overflow: hidden;
    color: #fff;
    background: #07030d;
}

.film-portal__fallback::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(8, 4, 15, 0.08), rgba(8, 4, 15, 0.72));
    content: "";
}

.film-portal__fallback img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.film-portal__fallback span {
    position: relative;
    z-index: 1;
    padding: 0.48rem 0.78rem;
    border: 1px solid rgba(255, 207, 173, 0.42);
    border-radius: 999px;
    background: rgba(12, 6, 21, 0.72);
    color: #ffcfad;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.film-portal__cinema[data-video-state="error"] .film-portal__video {
    display: none;
    pointer-events: none;
}

.film-portal__cinema[data-video-state="error"] .film-portal__fallback {
    display: grid;
}

.film-portal__caption {
    padding: 1.25rem 0.3rem 0;
}

.film-portal__caption .film-portal__eyebrow {
    margin-bottom: 0.7rem;
    font-size: 0.64rem;
}

.film-portal__caption h3 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.25rem, 2vw, 1.65rem);
    font-weight: 800;
    letter-spacing: -0.035em;
}

.film-portal__caption > p:not(.film-portal__eyebrow):not(.film-portal__status) {
    margin: 0.55rem 0 0;
    color: rgba(243, 238, 248, 0.68);
    font-size: 0.9rem;
    line-height: 1.7;
}

.film-portal__status {
    min-height: 1.5rem;
    margin: 0.85rem 0 0;
    color: rgba(243, 238, 248, 0.56);
    font-size: 0.76rem;
    line-height: 1.55;
}

.film-portal__status[data-state="error"] {
    color: #ffcfad;
}

.film-portal__status[data-state="ready"] {
    color: #ddcbff;
}

.film-portal__noscript-note {
    color: #ffcfad !important;
}

.film-portal__noscript-note a {
    color: inherit;
    font-weight: 800;
    text-underline-offset: 0.18em;
}

.film-portal__mobile-download {
    transition: opacity 180ms ease-out, transform 220ms ease-out;
}

.film-portal-motion-ready .film-portal__scroll {
    /* 110vh 跑道（翻牌）＋ 100vh 停留區（影片翻出來後仍黏住、完整可見再一整屏），
       快滑的人也會經過一個完整的影片畫面，不會剛翻完就被捲走 */
    min-height: 310vh;
    min-height: 310svh;
}

.film-portal-motion-ready .film-portal__sticky {
    position: sticky;
    top: 0;
    display: block;
    width: 100%;
    height: 100svh;
    min-height: 0;
    padding: 0;
}

.film-portal-motion-ready .film-portal__sticky::before {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(62% 54% at 50% 48%, rgba(56, 74, 83, 0.16), transparent 68%),
        linear-gradient(180deg, rgba(3, 5, 8, 0.44), rgba(2, 3, 5, 0.92));
    content: "";
    opacity: var(--film-world-opacity, 0);
    pointer-events: none;
    will-change: opacity;
}

.film-portal-motion-ready .film-portal__stage {
    display: grid;
    width: min(72rem, 100%);
    height: 100%;
    margin-inline: auto;
    padding: 5rem 1.5rem 4rem;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: center;
    gap: 2.5rem;
}

.film-portal-motion-ready .film-portal[data-film-depth="phone-front"] .film-portal__stage {
    z-index: 5;
}

.film-portal-motion-ready .film-portal[data-film-depth="card-front"] .film-portal__stage {
    z-index: 2;
}

.film-portal-motion-ready .film-portal__copy {
    position: relative;
    top: auto;
    left: auto;
    z-index: 6;
    width: auto;
    max-width: none;
    opacity: var(--film-copy-opacity, 1);
    transform: translate3d(0, var(--film-copy-y, 0px), 0);
    will-change: opacity, transform;
}

.film-portal-motion-ready .film-portal__copy,
.film-portal-motion-ready .film-portal__cinema {
    pointer-events: none;
}

.film-portal-motion-ready .film-portal[data-film-state="intro"] .film-portal__copy,
.film-portal-motion-ready .film-portal[data-film-state="cinema"] .film-portal__cinema {
    pointer-events: auto;
}

.film-portal-motion-ready .film-portal__continuation-phone {
    position: relative;
    top: auto;
    left: auto;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 100%;
    pointer-events: none;
    opacity: var(--film-phone-opacity, 1);
    transform: translate3d(var(--film-phone-x, 0px), var(--film-phone-y, 0px), 0) scale(var(--film-phone-scale, 1)) rotate(var(--film-phone-rotate, -2deg));
    transform-origin: center center;
    will-change: transform, opacity;
}

.film-portal-motion-ready .film-portal[data-film-depth="phone-front"] .film-portal__continuation-phone {
    z-index: 5;
}

.film-portal-motion-ready .film-portal[data-film-depth="card-front"] .film-portal__continuation-phone {
    z-index: 3;
}

.film-portal-motion-ready .film-portal__continuation-phone .iphone-stage {
    padding: 0;
}

.film-portal-motion-ready .film-portal__continuation-phone .iphone-mockup {
    --phone-w: clamp(280px, 30vw, 390px);
    transform: none;
    transition: none;
}

/*
 * Card-to-camera transition
 *
 * The phone display and the card front are matched in size, aspect ratio and
 * position during a short crossfade. The same apparent object then flips into
 * the real Practice card back before a clean black cut to the film.
 */
.film-portal-motion-ready .film-portal__card-transition {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: block;
    overflow: hidden;
    pointer-events: none;
    opacity: var(--film-card-stage-opacity, 0);
    perspective: 1800px;
    transform-style: preserve-3d;
    contain: layout paint style;
    will-change: opacity;
}

.film-portal__card-field,
.film-portal__card-blackout {
    position: absolute;
    inset: 0;
    display: block;
}

.film-portal__card-field {
    z-index: 0;
    background:
        radial-gradient(ellipse at 50% 48%, rgba(111, 158, 173, 0.16), transparent 30%),
        radial-gradient(ellipse at 58% 58%, rgba(213, 122, 66, 0.11), transparent 34%),
        linear-gradient(180deg, rgba(5, 8, 12, 0.38), rgba(2, 3, 5, 0.94));
    opacity: var(--film-card-field-opacity, 0);
    will-change: opacity;
}

.film-portal__card-field::before {
    position: absolute;
    inset: 7% 0;
    background:
        linear-gradient(90deg, transparent 49.9%, rgba(208, 188, 154, 0.13) 50%, transparent 50.1%),
        radial-gradient(circle at center, transparent 0 24%, rgba(202, 184, 152, 0.08) 24.15% 24.35%, transparent 24.5%);
    content: "";
    opacity: var(--film-card-focus-opacity, 0);
}

.film-portal__card-shell {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    width: clamp(12.5rem, 26vw, 21.5rem);
    aspect-ratio: var(--film-card-aspect, 0.6331);
    transform: translate3d(calc(-50% + var(--film-card-x, 0px)), calc(-50% + var(--film-card-y, 7vh)), 0)
        scale(var(--film-card-scale, 0.42))
        rotateZ(var(--film-card-roll, -5deg))
        rotateX(var(--film-card-tilt, 5deg))
        rotateY(var(--film-card-flip, 0deg));
    transform-origin: center center;
    transform-style: preserve-3d;
    will-change: transform;
}

.film-portal__card-face {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border: 0;
    border-radius: var(--film-card-radius, 4.7%);
    background: #05070a;
    backface-visibility: hidden;
    opacity: var(--film-card-content-opacity, 1);
    box-shadow:
        0 2.4rem 6rem rgba(0, 0, 0, 0.68),
        0 0 0 1px rgba(255, 255, 255, 0.035) inset;
    transform-style: preserve-3d;
    will-change: opacity;
}

.film-portal__card-face > img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.film-portal__card-neon,
.film-portal__card-depth,
.film-portal__card-trace,
.film-portal__card-scan,
.film-portal__card-core,
.film-portal__card-particles {
    position: absolute;
    display: block;
    pointer-events: none;
}

.film-portal__card-face--back {
    transform: rotateY(180deg) translateZ(1px);
}

.film-portal__card-art {
    filter: saturate(0.94) brightness(0.79) contrast(1.07);
}

.film-portal__card-face > .film-portal__card-neon {
    object-fit: fill;
    /* 濾鏡已烘進 practice-draw-card-back-neon-baked.webp，翻牌時不再即時算 */
    opacity: var(--film-card-neon-opacity, 0);
    will-change: opacity;
}

.film-portal__card-depth {
    inset: 0;
    background:
        linear-gradient(115deg, rgba(255, 255, 255, 0.11), transparent 16% 76%, rgba(221, 142, 85, 0.08)),
        radial-gradient(circle at 50% 50%, transparent 28%, rgba(1, 2, 4, 0.22) 84%);
}

.film-portal__card-trace {
    inset: 0.82%;
    padding: 2px;
    border-radius: 4.45%;
    background: conic-gradient(
        from var(--film-card-trace-turn, -100deg),
        transparent 0 59%,
        rgba(69, 220, 247, 0.08) 64%,
        rgba(69, 220, 247, 0.94) 69%,
        rgba(255, 255, 255, 0.98) 73%,
        rgba(244, 213, 141, 0.94) 77%,
        transparent 84% 100%
    );
    filter: drop-shadow(0 0 0.42rem rgba(255, 255, 255, 0.7));
    opacity: var(--film-card-trace-opacity, 0);
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

.film-portal__card-scan {
    top: -18%;
    bottom: -18%;
    left: 50%;
    width: 22%;
    background: linear-gradient(90deg, transparent, rgba(69, 220, 247, 0.08), rgba(255, 255, 255, 0.2), rgba(244, 213, 141, 0.08), transparent);
    filter: blur(0.32rem);
    opacity: var(--film-card-scan-opacity, 0);
    transform: translateX(var(--film-card-scan-x, -260%)) skewX(-11deg);
    will-change: transform, opacity;
}

.film-portal__card-core {
    top: 50%;
    left: 50%;
    width: 42%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.2) 0 7%,
        rgba(244, 213, 141, 0.14) 18%,
        rgba(183, 115, 214, 0.09) 36%,
        rgba(69, 220, 247, 0.055) 54%,
        transparent 72%
    );
    box-shadow:
        0 0 1.2rem rgba(255, 255, 255, 0.13),
        0 0 3rem rgba(244, 213, 141, 0.13),
        0 0 5rem rgba(69, 220, 247, 0.08);
    mix-blend-mode: screen;
    filter: blur(var(--film-card-core-blur, 0px));
    opacity: var(--film-card-core-opacity, 0);
    transform: translate(-50%, -50%) scale(var(--film-card-core-scale, 0.7));
}

.film-portal__card-particles {
    /* SVG 裡的卡片框是 1040×1260 畫布上的 486×766（generate-ritual-particle-field.mjs 的 card），
       光軌貼在它外緣。要讓光軌貼齊真正的卡片邊緣，圖片就要放大到 1040/486＝214%、1260/766＝164.5%
       並置中；之前 182%×148% 會讓光軌落在卡片內側，看起來像大卡包小卡。 */
    top: -32.25%;
    left: -57%;
    right: auto;
    bottom: auto;
    z-index: 3;
    width: 214%;
    max-width: none;
    height: 164.5%;
    object-fit: fill;
    backface-visibility: hidden;
    contain: paint;
    /* 不用 screen 混合：混合模式會逼合成器每幀把整個卡片層先畫進暫存表面再合成（桌機也會掉幀）；
       光軌圖本身帶透明度，normal 看起來幾乎一樣。手機版原本就是 normal */
    mix-blend-mode: normal;
    opacity: var(--film-card-particle-opacity, 0);
    transform: rotateY(180deg) translateZ(5px) scale(var(--film-card-particle-scale, 0.94));
    transform-origin: center;
    will-change: opacity, transform;
}

.film-portal__card-orbit,
.film-portal__card-focus-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    pointer-events: none;
}

.film-portal__card-orbit {
    width: clamp(21rem, 45vw, 41rem);
    height: clamp(5.5rem, 13vw, 10.5rem);
    border: 1px solid rgba(219, 198, 161, 0.28);
    border-radius: 50%;
    opacity: var(--film-card-orbit-opacity, 0);
    transform: translate(-50%, -50%) rotate(var(--film-card-orbit-turn, -10deg));
    box-shadow:
        0 -1px 0 rgba(69, 220, 247, 0.12),
        0 1px 0 rgba(244, 213, 141, 0.1);
    will-change: transform, opacity;
}

.film-portal__card-orbit--back {
    z-index: 2;
    clip-path: inset(0 0 50% 0);
}

.film-portal__card-orbit--front {
    z-index: 4;
    clip-path: inset(50% 0 0 0);
}

.film-portal__card-focus-ring {
    z-index: 1;
    width: clamp(18rem, 36vw, 33rem);
    aspect-ratio: 1;
    border: 1px solid rgba(105, 166, 182, 0.16);
    border-radius: 50%;
    opacity: var(--film-card-focus-opacity, 0);
    transform: translate(-50%, -50%) scale(var(--film-card-focus-scale, 0.72));
    box-shadow:
        0 0 0 1.4rem rgba(6, 8, 11, 0.24),
        0 0 5rem rgba(79, 142, 159, 0.08);
}

.film-portal__card-blackout {
    z-index: 8;
    background: #010204;
    opacity: var(--film-card-blackout-opacity, 0);
    will-change: opacity;
}

/*
 * Keep the recognizable card flip, neon rail and particle burst, but remove
 * the low-value layers that force extra masked/blurred composites while the
 * user is actively scrolling.
 */
.film-portal__card-trace,
.film-portal__card-scan,
.film-portal__card-core,
.film-portal__card-orbit,
.film-portal__card-focus-ring {
    display: none;
}

.film-portal-motion-ready .film-portal__cinema {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    width: min(66rem, calc(100vw - 3rem));
    margin: 0;
    opacity: var(--film-player-opacity, 0);
    transform: translate3d(-50%, calc(-50% + var(--film-player-y, 3.5rem)), 0) scale(var(--film-player-scale, 0.9));
    transform-origin: center center;
    will-change: transform, opacity;
}

.film-portal-motion-ready .film-portal__cinema:focus:not(:focus-visible) {
    outline: none;
}

@media (max-width: 767px) {
    body {
        background-attachment: scroll;
    }

    body::after {
        display: none;
    }

    html.film-portal-motion-ready body > header {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        background-color: #150C24 !important;
    }

    html.film-portal-motion-ready body:not([data-film-state="transition"]) .film-portal__mobile-download {
        visibility: hidden;
        opacity: 0;
        transform: translate3d(0, 100%, 0);
        pointer-events: none;
    }

    .film-portal__mobile-download,
    body > header {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        background-color: #150C24 !important;
    }

    .film-portal__sticky {
        min-height: auto;
        padding: 4.5rem 1.25rem 5rem;
    }

    .film-portal__stage {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 2.8rem;
    }

    .film-portal-motion-ready .film-portal__scroll {
        min-height: 0; /* 手機版不用跑道：文案在上、劇場區在下，儀式在劇場區原地播 */
    }

    .film-portal-motion-ready .film-portal__sticky {
        position: static;
        display: block;
        width: auto;
        height: auto;
        min-height: 0;
        padding: 0;
    }

    .film-portal-motion-ready .film-portal__stage {
        display: block;
        width: 100%;
        padding: 0 1.25rem;
    }

    /* 劇場區：固定 44rem 高，手機一開始就固定在正中央；卡片、影片由 JS 搬進來同一個中心 */
    .film-portal-motion-ready .film-portal__theatre {
        position: relative;
        height: 44rem;
        margin: 0 -1.25rem;
        overflow: hidden;
    }

    /* 卡片層（含黑幕）要在影片之上：影片提早放好，靠卡片層淡出揭開，影片本身不動 */
    .film-portal-motion-ready .film-portal__theatre .film-portal__card-transition {
        z-index: 4;
    }

    .film-portal-motion-ready .film-portal__theatre .film-portal__cinema {
        z-index: 2;
    }

    /* 手機版文案＝乾淨的第一屏（固定 rem 高、垂直置中）；第二屏才是劇場區，手機獨占一屏 */
    .film-portal-motion-ready .film-portal__copy {
        position: relative;
        top: auto;
        left: auto;
        width: auto;
        opacity: 1;
        transform: none;
        display: grid;
        align-content: start;
        padding: 1.25rem 0 1rem;
    }

    /* 第一屏收緊，讓手機在第一屏底部露出約三分之一（刻意的邀請，不是露一角） */
    .film-portal-motion-ready .film-portal__copy > span:first-child {
        margin-bottom: 1rem !important;
    }

    .film-portal-motion-ready .film-portal__copy h1 {
        font-size: clamp(1.9rem, 9.4vw, 2.6rem) !important;
        margin-bottom: 0.9rem !important;
    }

    .film-portal-motion-ready .film-portal__copy p.zh-reading {
        font-size: 15px !important;
        line-height: 1.65 !important;
        margin-bottom: 1.25rem !important;
    }

    .film-portal-motion-ready .film-portal__copy h1 {
        max-width: 22rem;
        font-size: clamp(2.05rem, 10.6vw, 3.2rem);
    }

    .film-portal-motion-ready .film-portal__continuation-phone {
        position: absolute;
        top: 50%;
        left: 50%;
        width: min(72vw, 18.5rem);
        opacity: var(--film-phone-opacity, 0);
        transform: translate3d(calc(-50% + var(--film-phone-x, 0px)), calc(-50% + var(--film-phone-y, 0px)), 0) scale(var(--film-phone-scale, 1)) rotate(var(--film-phone-rotate, -2deg));
    }

    .film-portal-motion-ready .film-portal__continuation-phone .iphone-mockup {
        /* 絕對長度：外殼邊框／圓角／瀏海都是 --phone-w 的百分比，給 100% 會讓上下邊框胖一倍 */
        --phone-w: min(72vw, 18.5rem);
    }

    .film-portal-motion-ready .film-portal__continuation-phone .iphone-stage {
        width: 100%;
    }

    .film-portal-motion-ready .film-portal__cinema {
        width: calc(100vw - 2rem);
    }

    .film-portal-motion-ready .film-portal__caption {
        padding-inline: 0.2rem;
    }
}

@media (min-width: 768px) {
    .film-portal-motion-ready .film-portal__cinema {
        /* 第三項：筆電高度時播放器＋字幕區要塞進視窗（導覽列 64px、字幕區約 180px、留白 56px），否則上緣被導覽列吃掉 */
        width: min(66rem, calc(100vw - 8rem), calc((100vh - 300px) * 16 / 9));
    }

    /* 筆電高度（700–750px）時 Hero 手機不能超過視窗：否則商店徽章與「AI 實戰練習室」標籤都掉到摺線下。
       寬度取「原本的 clamp」與「(視窗高 − 導覽列 64px − 上下留白 72px) ÷ 手機長寬比 2.085」的較小者 */
    .film-portal-motion-ready .film-portal__continuation-phone .iphone-mockup {
        --phone-w: min(clamp(280px, 30vw, 390px), calc((100vh - 64px - 72px) / 2.085));
    }
}

@media (max-width: 767px) and (max-height: 720px) {
    .film-portal-motion-ready .film-portal__copy {
        top: 2.75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .film-portal *,
    .film-portal *::before,
    .film-portal *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

    .film-portal-motion-ready .film-portal__scroll {
        min-height: auto;
    }

    .film-portal-motion-ready .film-portal__sticky {
        position: relative;
        display: grid;
        width: auto;
        height: auto;
        min-height: clamp(42rem, 92svh, 58rem);
        padding: clamp(5rem, 10vw, 8rem) 1.5rem;
    }

    .film-portal-motion-ready .film-portal__stage {
        display: grid;
        width: min(70rem, 100%);
        height: auto;
        margin-inline: auto;
    }

    .film-portal-motion-ready .film-portal__copy,
    .film-portal-motion-ready .film-portal__cinema {
        position: relative;
        top: auto;
        left: auto;
        width: auto;
        opacity: 1;
        transform: none;
    }

    .film-portal-motion-ready .film-portal__continuation-phone,
    .film-portal-motion-ready .film-portal__card-transition {
        display: none;
    }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
    .film-portal-motion-ready .film-portal__sticky {
        min-height: auto;
        padding: 4.5rem 1.25rem 5rem;
    }

    .film-portal-motion-ready .film-portal__stage {
        display: flex;
        width: auto;
        flex-direction: column;
        align-items: stretch;
        gap: 2.8rem;
    }
}