/**
 * Web Studio leads: homepage forms input → iOS push (reuses pl-forms-anim + pl-ios-anim).
 * Scoped to body.pl-landing-time only.
 */
body.pl-landing-time .pl-time-webstudio-leads-stage {
    margin-top: auto;
    flex: 0 0 auto;
    height: 276px;
    min-height: 276px;
    max-height: 276px;
    padding: 14px 14px 0;
    display: flex;
    align-items: stretch;
    background: #fafafa;
    border-color: rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

body.pl-landing-time .pl-webstudio-leads-anim {
    --webstudio-leads-cycle: 12s;
    --webstudio-leads-ios-delay: 4.6s;
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0;
}

body.pl-landing-time .pl-webstudio-leads-anim__form-scene,
body.pl-landing-time .pl-webstudio-leads-anim__ios-scene {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
}

body.pl-landing-time .pl-webstudio-leads-anim__form-scene {
    z-index: 2;
    display: flex;
    align-items: stretch;
    padding: 4px 2px 0;
    animation: plWsLeadsSceneForm var(--webstudio-leads-cycle) ease both;
}

body.pl-landing-time .pl-webstudio-leads-anim__ios-scene {
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding: 4px 8px 0;
    animation: plWsLeadsSceneIos var(--webstudio-leads-cycle) ease both;
}

/* Scene 1: exact homepage form (single browser panel) */
body.pl-landing-time .pl-webstudio-leads-anim .pl-forms-anim {
    --forms-cycle: 7.2s;
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0;
}

body.pl-landing-time .pl-webstudio-leads-anim .pl-forms-anim__browser {
    width: 100%;
    height: 100%;
    min-height: 0;
}

@media (max-width: 720px) {
    /*
     * Forms mobile styles hide .pl-forms-anim__browser (opacity 0 + scene swap).
     * This bento only has the browser panel → iOS push, so undo that hide or it
     * sits blank until the iOS scene (~4.8s).
     */
    body.pl-landing-time .pl-webstudio-leads-anim .pl-forms-anim__browser {
        position: relative;
        inset: auto;
        opacity: 1;
        transform: none;
        pointer-events: none;
        box-shadow:
            0 1px 2px rgba(0, 0, 0, 0.04),
            0 12px 28px rgba(0, 0, 0, 0.06);
        animation: plFormsBrowserPulse var(--forms-cycle) ease-in-out 1 forwards;
    }

    body.pl-landing-time .pl-webstudio-leads-anim .pl-forms-anim__type--name {
        animation-name: plFormsTypeName;
    }

    body.pl-landing-time .pl-webstudio-leads-anim .pl-forms-anim__type--email {
        animation-name: plFormsTypeEmail;
    }

    body.pl-landing-time .pl-webstudio-leads-anim .pl-forms-anim__type--msg {
        animation-name: plFormsTypeMsg;
    }

    body.pl-landing-time .pl-webstudio-leads-anim .pl-forms-anim__submit {
        animation-name: plFormsSubmit;
    }
}

/* Scene 2: index iOS push, offset until form finishes */
body.pl-landing-time .pl-time-webstudio-leads-stage .pl-ios-anim,
body.pl-landing-time .pl-time-webstudio-leads-stage .pl-ios-anim * {
    animation-delay: var(--webstudio-leads-ios-delay);
}

@keyframes plWsLeadsSceneForm {
    0%, 2% { opacity: 0; transform: translateY(8px); }
    6%, 36% { opacity: 1; transform: translateY(0); }
    40%, 100% { opacity: 0; transform: translateY(-6px); visibility: hidden; }
}

@keyframes plWsLeadsSceneIos {
    0%, 38% { opacity: 0; transform: translateY(8px); visibility: hidden; }
    42%, 100% { opacity: 1; transform: translateY(0); visibility: visible; }
}

@media (prefers-reduced-motion: reduce) {
    body.pl-landing-time .pl-webstudio-leads-anim__form-scene,
    body.pl-landing-time .pl-webstudio-leads-anim__ios-scene {
        animation: none !important;
    }

    body.pl-landing-time .pl-webstudio-leads-anim__form-scene {
        opacity: 0;
        visibility: hidden;
    }

    body.pl-landing-time .pl-webstudio-leads-anim__ios-scene {
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    body.pl-landing-time .pl-time-webstudio-leads-stage .pl-ios-anim,
    body.pl-landing-time .pl-time-webstudio-leads-stage .pl-ios-anim * {
        animation-delay: 0s !important;
    }
}