/* ============================================================
   MYLO CINEMATIC HERO
   Desktop + Mobile

   Desktop:
   Full cinematic viewport treatment.

   Mobile:
   Controlled website hero window.
   The vertical film is cropped deliberately using object-fit
   and object-position instead of forcing a 9:16 page section.
   ============================================================ */

:root {
    --mylo-bg: #07080a;
    --mylo-text: #ffffff;

    --mylo-purple: #7c3aed;
    --mylo-green: #22c55e;

    --mylo-header-desktop: 80px;

    --mylo-fast: 260ms;
    --mylo-medium: 520ms;
    --mylo-slow: 900ms;

    --mylo-ease: cubic-bezier(0.22, 1, 0.36, 1);
}


/* ============================================================
   PAGE
   ============================================================ */

.mh-small-business-page {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}


/* ============================================================
   HERO — DESKTOP BASE
   ============================================================ */

.mylo-cinematic-hero {
    position: relative;

    width: 100%;

    min-height:
        calc(100vh - var(--mylo-header-desktop));

    height:
        calc(100svh - var(--mylo-header-desktop));

    overflow: hidden;
    isolation: isolate;

    background: var(--mylo-bg);
    color: var(--mylo-text);
}


/* ============================================================
   MEDIA
   ============================================================ */

.mylo-cinematic-media {
    position: absolute;
    inset: 0;

    z-index: 0;

    overflow: hidden;

    background: #000;
}


.mylo-cinematic-video {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center center;

    opacity: 1;

    transform:
        scale(1.012)
        translateZ(0);

    filter:
        brightness(1)
        saturate(1.02)
        contrast(1.02);

    transition:
        opacity var(--mylo-medium) var(--mylo-ease),
        filter var(--mylo-medium) var(--mylo-ease),
        transform var(--mylo-slow) var(--mylo-ease);

    will-change:
        opacity,
        filter,
        transform;
}


/* ============================================================
   VIDEO OVERLAYS
   ============================================================ */

.mylo-cinematic-shade {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(2, 6, 23, 0.08) 0%,
            rgba(2, 6, 23, 0.07) 40%,
            rgba(0, 0, 0, 0.22) 100%
        );

    opacity: 0.26;

    transition:
        opacity var(--mylo-medium) var(--mylo-ease),
        background var(--mylo-medium) var(--mylo-ease);

    pointer-events: none;
}


.mylo-cinematic-vignette {
    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at 50% 45%,
            transparent 36%,
            rgba(0, 0, 0, 0.18) 70%,
            rgba(0, 0, 0, 0.50) 100%
        );

    opacity: 0.62;

    pointer-events: none;
}


.mylo-cinematic-grain {
    position: absolute;
    inset: -15%;

    opacity: 0.035;

    background-image:
        radial-gradient(
            circle at 20% 30%,
            rgba(255, 255, 255, 0.26) 0.6px,
            transparent 0.8px
        );

    background-size: 9px 9px;

    pointer-events: none;

    animation:
        mylo-grain-shift
        4s
        steps(6)
        infinite;
}


@keyframes mylo-grain-shift {

    0% {
        transform: translate3d(0, 0, 0);
    }

    25% {
        transform: translate3d(-1%, 1%, 0);
    }

    50% {
        transform: translate3d(1%, -1%, 0);
    }

    75% {
        transform: translate3d(0.7%, 1.1%, 0);
    }

    100% {
        transform: translate3d(0, 0, 0);
    }

}


/* ============================================================
   AMBIENT LIGHTS
   ============================================================ */

.mylo-cinematic-ambient {
    position: absolute;
    inset: 0;

    z-index: 1;

    overflow: hidden;

    pointer-events: none;
}


.mylo-ambient {
    position: absolute;

    border-radius: 50%;

    filter: blur(110px);

    opacity: 0;

    transform: scale(0.85);

    transition:
        opacity var(--mylo-slow) var(--mylo-ease),
        transform var(--mylo-slow) var(--mylo-ease);
}


.mylo-ambient-purple {
    width: 500px;
    height: 500px;

    top: 3%;
    left: -8%;

    background:
        rgba(124, 58, 237, 0.23);
}


.mylo-ambient-green {
    width: 430px;
    height: 430px;

    right: -6%;
    bottom: -8%;

    background:
        rgba(34, 197, 94, 0.18);
}


/* ============================================================
   CONTENT
   ============================================================ */

.mylo-cinematic-content {
    position: relative;

    z-index: 8;

    width: 100%;
    height: 100%;
}


.mylo-scene {
    position: absolute;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    padding:
        clamp(28px, 5vw, 70px)
        clamp(24px, 7vw, 110px);

    opacity: 0;
    visibility: hidden;

    transform:
        translateY(14px)
        scale(0.988);

    transition:
        opacity var(--mylo-medium) var(--mylo-ease),
        transform var(--mylo-medium) var(--mylo-ease),
        visibility 0s linear var(--mylo-medium);

    pointer-events: none;
}


.mylo-scene.is-active {
    opacity: 1;
    visibility: visible;

    transform:
        translateY(0)
        scale(1);

    transition:
        opacity var(--mylo-medium) var(--mylo-ease),
        transform var(--mylo-medium) var(--mylo-ease),
        visibility 0s linear 0s;
}


.mylo-scene-inner {
    width: min(1040px, 100%);

    margin: 0 auto;

    text-align: center;
}


/* ============================================================
   DESKTOP TYPOGRAPHY
   ============================================================ */

.mylo-scene-eyebrow,
.mylo-scene-kicker {
    margin: 0 0 12px;

    color: rgba(255, 255, 255, 0.66);

    font-size:
        clamp(12px, 1.2vw, 14px);

    font-weight: 800;

    line-height: 1.2;

    letter-spacing: 0.18em;

    text-transform: uppercase;
}


.mylo-scene-title {
    margin: 0 auto;

    max-width: 980px;

    color: #ffffff;

    font-size:
        clamp(42px, 6.1vw, 84px);

    font-weight: 800;

    line-height: 0.98;

    letter-spacing: -0.05em;

    text-wrap: balance;

    text-shadow:
        0 14px 36px rgba(0, 0, 0, 0.36);
}


.mylo-scene-title span {
    display: block;

    margin-top: 6px;

    background:
        linear-gradient(
            90deg,
            #ffffff 0%,
            #c4b5fd 42%,
            #86efac 100%
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}


.mylo-scene-title-medium {
    max-width: 840px;

    font-size:
        clamp(38px, 5.4vw, 72px);
}


/* ============================================================
   STORY SWITCHING
   ============================================================ */

.mylo-mobile-story {
    display: none;
}


.mylo-desktop-story {
    display: block;
}


.mylo-desktop-only {
    display: flex;
}


/* ============================================================
   DESKTOP PRODUCT MERGE
   ============================================================ */

.mylo-product-merge {
    position: absolute;

    left: 50%;
    top: 31%;

    z-index: 12;

    align-items: center;
    justify-content: center;

    gap:
        clamp(14px, 2vw, 26px);

    width:
        min(720px, calc(100% - 48px));

    transform:
        translate(-50%, -50%);

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transition:
        opacity var(--mylo-fast) var(--mylo-ease),
        visibility 0s linear var(--mylo-fast);
}


.mylo-product-merge.is-active {
    opacity: 1;
    visibility: visible;
}


.mylo-merge-item {
    min-width:
        clamp(150px, 16vw, 205px);

    padding:
        14px
        20px;

    border:
        1px solid
        rgba(255, 255, 255, 0.16);

    border-radius: 999px;

    background:
        rgba(15, 23, 42, 0.58);

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);

    box-shadow:
        0 18px 50px rgba(0, 0, 0, 0.26);

    color: #ffffff;

    font-size:
        clamp(13px, 1.3vw, 17px);

    font-weight: 800;

    letter-spacing: 0.10em;

    text-align: center;

    opacity: 0;
}


.mylo-merge-hardware {
    transform: translateX(-95px);
}


.mylo-merge-software {
    transform: translateX(95px);
}


.mylo-merge-plus {
    color: rgba(255, 255, 255, 0.62);

    font-size:
        clamp(22px, 2.6vw, 32px);

    font-weight: 500;

    opacity: 0;

    transform: scale(0.72);
}


.mylo-product-merge.is-active
.mylo-merge-hardware,
.mylo-product-merge.is-active
.mylo-merge-software {
    opacity: 1;

    transform: translateX(0);

    transition:
        opacity 500ms var(--mylo-ease),
        transform 660ms var(--mylo-ease);
}


.mylo-product-merge.is-active
.mylo-merge-plus {
    opacity: 1;

    transform: scale(1);

    transition:
        opacity 380ms var(--mylo-ease) 160ms,
        transform 380ms var(--mylo-ease) 160ms;
}


.mylo-scene-product
.mylo-scene-inner {
    padding-top:
        clamp(150px, 17vh, 210px);
}


/* ============================================================
   DESKTOP NETWORK
   ============================================================ */

.mylo-network-layer {
    position: absolute;
    inset: 0;

    z-index: 4;

    opacity: 0;
    visibility: hidden;

    pointer-events: none;
}


.mylo-network-layer.is-active {
    opacity: 1;
    visibility: visible;
}


.mylo-network-line {
    position: absolute;

    width:
        clamp(120px, 22vw, 320px);

    height: 1px;

    overflow: hidden;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.18),
            rgba(255, 255, 255, 0.06),
            transparent
        );
}


.mylo-network-line-1 {
    left: 3%;
    top: 30%;
    transform: rotate(8deg);
}


.mylo-network-line-2 {
    left: 6%;
    top: 50%;
    transform: rotate(-3deg);
}


.mylo-network-line-3 {
    left: 3%;
    top: 68%;
    transform: rotate(-10deg);
}


.mylo-network-line-4 {
    right: 3%;
    top: 30%;
    transform: rotate(-8deg);
}


.mylo-network-line-5 {
    right: 6%;
    top: 50%;
    transform: rotate(3deg);
}


.mylo-network-line-6 {
    right: 3%;
    top: 68%;
    transform: rotate(10deg);
}


.mylo-network-pulse {
    position: absolute;

    top: 50%;
    left: 0;

    width: 42px;
    height: 3px;

    border-radius: 999px;

    transform:
        translateY(-50%)
        translateX(-60px);

    background:
        linear-gradient(
            90deg,
            transparent,
            #ffffff,
            #8b5cf6,
            #22c55e,
            transparent
        );

    animation:
        mylo-network-inbound
        1.55s
        linear
        infinite;
}


@keyframes mylo-network-inbound {

    0% {
        left: 0%;
        opacity: 0;
    }

    12% {
        opacity: 1;
    }

    88% {
        opacity: 1;
    }

    100% {
        left: 100%;
        opacity: 0;
    }

}


/* ============================================================
   VISUAL STATES
   ============================================================ */

.mylo-cinematic-hero.is-video-dominant
.mylo-cinematic-video {
    opacity: 1;

    filter:
        brightness(1)
        saturate(1.02)
        contrast(1.02);
}


.mylo-cinematic-hero.is-video-dominant
.mylo-cinematic-shade {
    opacity: 0.20;
}


.mylo-cinematic-hero.is-text-dominant
.mylo-cinematic-video {
    opacity: 0.30;

    filter:
        brightness(0.40)
        saturate(0.78)
        contrast(1.04)
        blur(2px);
}


.mylo-cinematic-hero.is-text-dominant
.mylo-cinematic-shade {
    opacity: 0.86;
}


.mylo-cinematic-hero.is-product-scene
.mylo-cinematic-video {
    opacity: 0.18;

    filter:
        brightness(0.28)
        saturate(0.62)
        blur(4px);
}


.mylo-cinematic-hero.is-product-scene
.mylo-cinematic-shade {
    opacity: 0.92;
}


.mylo-cinematic-hero.is-onprem-scene
.mylo-cinematic-video {
    opacity: 0.17;

    filter:
        brightness(0.26)
        saturate(0.60)
        blur(4px);
}


.mylo-cinematic-hero.is-onprem-scene
.mylo-cinematic-shade {
    opacity: 0.92;
}


/* ============================================================
   SOUND CONTROL
   ============================================================ */

.mylo-sound-control {
    position: absolute;

    right:
        clamp(18px, 3vw, 38px);

    bottom:
        clamp(18px, 2.8vw, 34px);

    z-index: 20;

    display: inline-flex;
    align-items: center;

    gap: 8px;

    min-height: 40px;

    padding:
        8px
        13px;

    border:
        1px solid
        rgba(255, 255, 255, 0.16);

    border-radius: 999px;

    background:
        rgba(9, 9, 11, 0.52);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    color:
        rgba(255, 255, 255, 0.80);

    font: inherit;

    font-size: 12px;
    font-weight: 700;

    cursor: pointer;
}


.mylo-sound-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}


.mylo-sound-icon-on {
    display: none;
}


.mylo-sound-control.is-sound-on
.mylo-sound-icon-off {
    display: none;
}


.mylo-sound-control.is-sound-on
.mylo-sound-icon-on {
    display: inline-flex;
}


/* ============================================================
   STATUS
   ============================================================ */

.mylo-cinematic-status {
    position: absolute;

    width: 1px;
    height: 1px;

    padding: 0;
    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border: 0;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 768px) {

    /*
     * MOBILE HERO WINDOW
     *
     * Do NOT force the website section to the video's native
     * 9:16 ratio.
     *
     * The vertical video is now treated as source material.
     * This container is the website's viewing window.
     */

    .mylo-cinematic-hero {
        width: 100%;

        min-height: 0;

        height:
            clamp(
                380px,
                112vw,
                500px
            );

        overflow: hidden;

        background: #000;
    }


    /* --------------------------------------------------------
       STORY SWITCH
       -------------------------------------------------------- */

    .mylo-desktop-story {
        display: none;
    }


    .mylo-mobile-story {
        display: block;
    }


    .mylo-desktop-only {
        display: none !important;
    }


    /* --------------------------------------------------------
       VIDEO WINDOW
       -------------------------------------------------------- */

    .mylo-cinematic-media {
        position: absolute;
        inset: 0;

        width: 100%;
        height: 100%;

        overflow: hidden;

        background: #000;
    }


    /*
     * MYLO-MOBILE.mp4 is vertical.
     *
     * It fills the controlled website hero window.
     * Top/bottom portions are deliberately cropped.
     *
     * 44% keeps the useful visual area slightly above
     * geometric centre.
     */

    .mylo-cinematic-video {
        position: absolute;
        inset: 0;

        width: 100%;
        height: 100%;

        object-fit: cover;
        object-position: 50% 44%;

        transform: none;
    }


    /* --------------------------------------------------------
       MOBILE STORY
       -------------------------------------------------------- */

    .mylo-mobile-story {
        position: absolute;
        inset: 0;

        width: 100%;
        height: 100%;

        z-index: 8;
    }


    /*
     * Website messages are centred inside the hero.
     *
     * Previously they were pushed to the bottom of a very tall
     * 9:16 section, making them easy to miss.
     */

    .mylo-mobile-story
    .mylo-scene {
        position: absolute;
        inset: 0;

        width: 100%;
        height: 100%;

        padding:
            24px
            20px;

        align-items: center;
        justify-content: center;
    }


    /* --------------------------------------------------------
       MOBILE MESSAGE
       -------------------------------------------------------- */

    .mylo-mobile-message {
        width:
            min(
                calc(100% - 32px),
                410px
            );

        max-width: 410px;

        margin: 0 auto;

        padding:
            17px
            17px
            18px;

        border:
            1px solid
            rgba(255, 255, 255, 0.16);

        border-radius: 18px;

        background:
            rgba(5, 7, 10, 0.64);

        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);

        box-shadow:
            0 18px 42px
            rgba(0, 0, 0, 0.34);

        text-align: center;
    }


    .mylo-mobile-eyebrow {
        margin:
            0 0 7px;

        color:
            rgba(255, 255, 255, 0.72);

        font-size: 10px;

        font-weight: 800;

        line-height: 1.2;

        letter-spacing: 0.16em;

        text-transform: uppercase;
    }


    .mylo-mobile-title {
        margin: 0;

        color: #ffffff;

        font-size:
            clamp(
                25px,
                7.2vw,
                34px
            );

        line-height: 1.02;

        font-weight: 800;

        letter-spacing: -0.038em;

        text-wrap: balance;

        text-shadow:
            0 10px 28px
            rgba(0, 0, 0, 0.30);
    }


    .mylo-mobile-title span {
        display: block;

        margin-top: 4px;

        background:
            linear-gradient(
                90deg,
                #ffffff 0%,
                #c4b5fd 45%,
                #86efac 100%
            );

        -webkit-background-clip: text;
        background-clip: text;

        color: transparent;
    }


    .mylo-mobile-subtitle {
        margin:
            9px 0 0;

        color:
            rgba(255, 255, 255, 0.74);

        font-size:
            clamp(
                12px,
                3.3vw,
                14px
            );

        line-height: 1.4;
    }


    /* --------------------------------------------------------
       MOBILE VISUAL STATES
       -------------------------------------------------------- */

    /*
     * Pure-film scenes.
     */

    .mylo-cinematic-hero.is-video-dominant
    .mylo-cinematic-video {
        opacity: 1;

        filter:
            brightness(1)
            saturate(1)
            contrast(1);

        transform: none;
    }


    .mylo-cinematic-hero.is-video-dominant
    .mylo-cinematic-shade {
        opacity: 0.06;
    }


    /*
     * Intro statement.
     *
     * Dark enough that "Affordable On-Premise Telephony"
     * is clearly visible, but the film still remains present.
     */

    .mylo-cinematic-hero.is-text-dominant
    .mylo-cinematic-video {
        opacity: 0.52;

        filter:
            brightness(0.48)
            saturate(0.84)
            contrast(1.02);

        transform: none;
    }


    .mylo-cinematic-hero.is-text-dominant
    .mylo-cinematic-shade {
        opacity: 0.66;
    }


    /*
     * Product statement.
     */

    .mylo-cinematic-hero.is-product-scene
    .mylo-cinematic-video {
        opacity: 0.50;

        filter:
            brightness(0.45)
            saturate(0.82)
            contrast(1.02);

        transform: none;
    }


    .mylo-cinematic-hero.is-product-scene
    .mylo-cinematic-shade {
        opacity: 0.68;
    }


    /* --------------------------------------------------------
       LIGHT MOBILE AMBIENT EFFECTS
       -------------------------------------------------------- */

    .mylo-ambient {
        filter: blur(70px);
    }


    .mylo-ambient-purple {
        width: 220px;
        height: 220px;

        left: -28%;
        top: 8%;
    }


    .mylo-ambient-green {
        width: 200px;
        height: 200px;

        right: -24%;
        bottom: 8%;
    }


    /* --------------------------------------------------------
       SOUND CONTROL
       -------------------------------------------------------- */

    .mylo-sound-control {
        right: 12px;
        bottom: 12px;

        min-height: 38px;

        padding:
            7px
            10px;

        font-size: 11px;

        background:
            rgba(0, 0, 0, 0.60);
    }


    .mylo-scroll-indicator {
        display: none;
    }

}


/* ============================================================
   PHONE-SPECIFIC WINDOW
   ============================================================ */

@media (max-width: 480px) {

    /*
     * Typical iPhone / Android portrait widths.
     *
     * At 390px width this gives around 437px hero height.
     */

    .mylo-cinematic-hero {
        height:
            clamp(
                390px,
                112vw,
                470px
            );
    }


    /*
     * Slightly higher crop on small phones.
     */

    .mylo-cinematic-video {
        object-position: 50% 42%;
    }


    .mylo-mobile-story
    .mylo-scene {
        padding:
            20px
            14px;
    }


    .mylo-mobile-message {
        width:
            calc(100% - 28px);

        padding:
            15px
            14px
            16px;

        border-radius: 16px;
    }


    .mylo-mobile-title {
        font-size:
            clamp(
                23px,
                7vw,
                30px
            );
    }


    .mylo-sound-label {
        display: none;
    }


    .mylo-sound-control {
        width: 40px;
        height: 40px;

        padding: 0;

        justify-content: center;
    }

}


/* ============================================================
   VERY SMALL PHONES
   ============================================================ */

@media (max-width: 360px) {

    .mylo-cinematic-hero {
        height: 390px;
    }


    .mylo-cinematic-video {
        object-position: 50% 41%;
    }


    .mylo-mobile-message {
        width:
            calc(100% - 22px);
    }


    .mylo-mobile-title {
        font-size: 23px;
    }

}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    .mylo-cinematic-grain,
    .mylo-network-pulse {
        animation: none !important;
    }


    .mylo-cinematic-video,
    .mylo-cinematic-shade,
    .mylo-scene,
    .mylo-ambient,
    .mylo-product-merge,
    .mylo-merge-item,
    .mylo-merge-plus {
        transition-duration:
            0.01ms !important;
    }


    .mylo-scene {
        transform: none !important;
    }

}