/* Portrait rotation cues and landscape project browsing controls. */
.l8-video-rotate-cue,
.l8-video-close-icon,
.l8-video-reel-nav {
    display: none;
}

@media (max-width: 809.98px), (pointer: coarse) and (max-height: 600px) {
    .l8-project-modal:has(> .l8-project-modal__panel.is-case.is-video-only:is(.is-monvue, .is-blue-tokai)) {
        height: 100dvh;
        padding: 0;
        box-sizing: border-box;
        place-items: center;
    }

    .l8-project-modal__panel.is-case.is-video-only:is(.is-monvue, .is-blue-tokai) {
        --l8-mobile-video-stage-width: min(calc(100vw - 32px), calc((100dvh - 160px) * 16 / 9));
        --l8-mobile-video-stage-height: calc(var(--l8-mobile-video-stage-width) * 9 / 16);
        width: 100%;
        max-width: none;
        height: 100%;
        max-height: none;
        min-height: 0;
        margin: 0;
        padding: 0;
        aspect-ratio: auto;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-sizing: border-box;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        transform: none;
        transition: none;
    }

    .l8-project-modal__panel.is-case.is-video-only:is(.is-monvue, .is-blue-tokai) .l8-case-modal {
        display: none;
    }

    .l8-project-modal__panel.is-case.is-video-only:is(.is-monvue, .is-blue-tokai) .l8-case-expanded {
        width: 100%;
        height: 100%;
        padding: 0;
        overflow: hidden;
        background: transparent;
    }

    .l8-project-modal__panel.is-case.is-video-only:is(.is-monvue, .is-blue-tokai) .l8-case-expanded__stage {
        inset: 50% auto auto 50%;
        width: var(--l8-mobile-video-stage-width);
        height: var(--l8-mobile-video-stage-height);
        aspect-ratio: 16 / 9;
        border-radius: var(--l8-radius-modal, 6px);
        transform: translate(-50%, -50%);
    }

    .l8-project-modal__panel.is-case.is-video-only:is(.is-monvue, .is-blue-tokai) .l8-case-expanded__close {
        top: max(16px, env(safe-area-inset-top, 0px));
        right: max(16px, env(safe-area-inset-right, 0px));
        width: 44px;
        height: 44px;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        color: rgba(255, 255, 255, 0.9);
        outline: none;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
        transition: transform 140ms cubic-bezier(0.23, 1, 0.32, 1);
    }

    .l8-project-modal__panel.is-case.is-video-only:is(.is-monvue, .is-blue-tokai) .l8-case-expanded__close::before {
        inset: 0;
    }

    .l8-project-modal__panel.is-case.is-video-only:is(.is-monvue, .is-blue-tokai) .l8-case-expanded__close:focus-visible {
        outline: 2px solid rgba(255, 255, 255, 0.9);
        outline-offset: 3px;
    }

    .l8-project-modal__panel.is-case.is-video-only:is(.is-monvue, .is-blue-tokai) .l8-case-expanded__close:active {
        transform: scale(0.97);
    }

    .l8-project-modal__panel.is-case.is-video-only:is(.is-monvue, .is-blue-tokai) .l8-video-close-glyph {
        display: none;
    }

    .l8-project-modal__panel.is-case.is-video-only:is(.is-monvue, .is-blue-tokai) .l8-video-close-icon {
        display: block;
        width: 20px;
        height: 20px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.5;
        stroke-linecap: round;
    }

    .l8-project-modal__panel.is-case.is-video-only:is(.is-monvue, .is-blue-tokai) .l8-video-rotate-cue {
        position: absolute;
        z-index: 2;
        top: auto;
        bottom: calc(10dvh + 5px);
        left: 50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: min(240px, calc(100vw - 32px));
        height: auto;
        box-sizing: border-box;
        color: rgba(255, 255, 255, 0.9);
        pointer-events: none;
        transform: translateX(-50%);
    }

    .l8-project-modal__panel.is-case.is-video-only:is(.is-monvue, .is-blue-tokai) .l8-video-rotate-cue__phone {
        display: block;
        width: 66px;
        height: 66px;
        padding: 15px;
        box-sizing: border-box;
        border: 1px solid rgba(255, 255, 255, 0.46);
        border-radius: 50%;
        background: var(--l8-overlay-control);
        fill: none;
        stroke: currentColor;
        stroke-width: 1.4;
        stroke-linecap: round;
        stroke-linejoin: round;
        transform: rotate(-90deg);
        transform-origin: center;
        animation: l8-phone-turn-pulse 2600ms cubic-bezier(0.77, 0, 0.175, 1) infinite;
    }

    .l8-project-modal__panel.is-case.is-video-only:is(.is-monvue, .is-blue-tokai) .l8-video-rotate-cue__label {
        display: block;
        margin-top: 10px;
        color: rgba(48, 48, 48, 0.72);
        font-family: var(--l8-body-font, "NC Inter", Inter, sans-serif);
        font-size: 11px;
        font-weight: 300;
        line-height: 1.4;
        letter-spacing: 0;
        text-align: center;
        white-space: nowrap;
    }
}

/* Coarse-pointer height coverage includes phones wider than 810px when turned. */
@media (max-width: 809.98px) and (orientation: landscape), (pointer: coarse) and (max-height: 600px) and (orientation: landscape) {
    .l8-project-modal:has(> .l8-project-modal__panel.is-case.is-video-only.is-sizzle-expanded) {
        height: 100dvh;
        padding: 0;
        box-sizing: border-box;
        place-items: center;
    }

    .l8-project-modal__panel.is-case.is-video-only.is-sizzle-expanded {
        width: 100%;
        max-width: none;
        height: 100%;
        max-height: none;
        min-height: 0;
        margin: 0;
        padding: 0;
        aspect-ratio: auto;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-sizing: border-box;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        transform: none;
        transition: none;
    }

    .l8-project-modal__panel.is-case.is-video-only.is-sizzle-expanded .l8-case-modal {
        display: none;
    }

    .l8-project-modal__panel.is-case.is-video-only.is-sizzle-expanded .l8-case-expanded {
        width: 100%;
        height: 100%;
        padding: 0;
        overflow: hidden;
    }

    .l8-project-modal__panel.is-case.is-video-only.is-sizzle-expanded .l8-case-expanded__stage {
        inset: 0;
        width: 100%;
        height: 100%;
        aspect-ratio: auto;
        border-radius: 0;
        transform: none;
    }

    .l8-project-modal__panel.is-case.is-video-only:is(.is-monvue, .is-blue-tokai) .l8-case-expanded__stage > video {
        object-fit: cover;
        object-position: center;
    }

    .l8-project-modal__panel.is-case.is-video-only.is-sizzle-expanded .l8-video-rotate-cue {
        display: none;
    }

    .l8-project-modal__panel.is-case.is-video-only.is-sizzle-expanded :is(.l8-video-reel-nav, .l8-case-expanded__close) {
        position: absolute;
        z-index: 3;
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        border: 1px solid rgba(255, 255, 255, 0.46);
        border-radius: 50%;
        background: var(--l8-overlay-control);
        color: rgba(255, 255, 255, 0.9);
        cursor: pointer;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
        transition: transform 140ms cubic-bezier(0.23, 1, 0.32, 1);
    }

    .l8-project-modal__panel.is-case.is-video-only.is-sizzle-expanded .l8-case-expanded__close {
        top: max(16px, env(safe-area-inset-top, 0px));
        right: max(16px, env(safe-area-inset-right, 0px));
    }

    .l8-project-modal__panel.is-case.is-video-only.is-sizzle-expanded .l8-case-expanded__close::before {
        inset: 0;
    }

    .l8-project-modal__panel.is-case.is-video-only.is-sizzle-expanded .l8-video-close-glyph {
        display: none;
    }

    .l8-project-modal__panel.is-case.is-video-only.is-sizzle-expanded :is(.l8-video-reel-nav svg, .l8-video-close-icon) {
        display: block;
        width: 20px;
        height: 20px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.5;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .l8-video-reel-nav {
        bottom: max(16px, env(safe-area-inset-bottom, 0px));
    }

    .l8-video-reel-nav--previous {
        left: max(16px, env(safe-area-inset-left, 0px));
    }

    .l8-video-reel-nav--next {
        right: max(16px, env(safe-area-inset-right, 0px));
    }

    .l8-project-modal__panel.is-case.is-video-only.is-sizzle-expanded :is(.l8-video-reel-nav, .l8-case-expanded__close):focus-visible {
        outline: 2px solid rgba(255, 255, 255, 0.9);
        outline-offset: 3px;
    }

    .l8-project-modal__panel.is-case.is-video-only.is-sizzle-expanded :is(.l8-video-reel-nav, .l8-case-expanded__close):active {
        transform: scale(0.97);
    }

    .l8-video-reel-nav:disabled {
        opacity: 0.35;
        cursor: default;
    }
}

@keyframes l8-phone-turn-pulse {
    0%, 18%, 100% {
        transform: rotate(0) scale(1);
        box-shadow: 0 0 0 0 rgba(48, 48, 48, 0.14);
    }
    52%, 70% {
        transform: rotate(-90deg) scale(1.06);
        box-shadow: 0 0 0 10px rgba(48, 48, 48, 0);
    }
}

/* Keyboard-opened viewers keep the orientation hint still. */
.l8-project-modal.is-instant-open .l8-video-rotate-cue__phone {
    animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .l8-project-modal__panel.is-case.is-video-only.is-sizzle-expanded :is(.l8-video-reel-nav, .l8-case-expanded__close) {
        transition: none;
    }

    .l8-project-modal__panel.is-case.is-video-only.is-sizzle-expanded :is(.l8-video-reel-nav, .l8-case-expanded__close):active {
        transform: none;
    }

    .l8-project-modal__panel.is-case.is-video-only:is(.is-monvue, .is-blue-tokai) .l8-video-rotate-cue__phone {
        animation: none;
    }

    .l8-project-modal__panel.is-case.is-video-only:is(.is-monvue, .is-blue-tokai) .l8-case-expanded__close {
        transition: none;
    }

    .l8-project-modal__panel.is-case.is-video-only:is(.is-monvue, .is-blue-tokai) .l8-case-expanded__close:active {
        transform: none;
    }
}