/* ============================================
   Lightli.uk — Home Landing Styles
   ============================================ */

/* --- Landing -------------------------------------------- */

.landing {
    /* Frame - full desktop landing */
    --landing-height-desktop: 101vh;
    --landing-header-height: 30%;
    --landing-phone-container-height: 70%;

    /* Frame - compact carousel shell */
    --landing-height-portrait: 25svh;
    --landing-height-mobile-landscape: 50svh;
    --landing-height-tablet-landscape: 32svh;

    /* Phone stack - desktop / 4K */
    --landing-phone-width: clamp(240px, 21.6vw, 660px);
    --landing-phone-width-4k: clamp(240px, 19.5vw, 700px);
    --landing-phone-overlap: clamp(-126px, -6.75vw, -81px);
    --landing-phone-top-offset: 14vh;
    --landing-phone-second-top-offset: 5vh;
    --landing-phone-stack-offset-y-desktop: 0px;
    --landing-phone-stack-offset-y-4k: 3.5vh;
    --landing-phone-stack-offset-y: var(--landing-phone-stack-offset-y-desktop);

    /* Phone stack - desktop hover */
    --landing-phone-hover-x: 30px;
    --landing-phone-hover-y: -120px;
    --landing-phone-shadow: drop-shadow(15px 15px 30px rgba(58, 58, 58, 0.4));

    /* Type - title */
    --landing-title-size-desktop: clamp(40px, 3.5vw, 90px);
    --landing-title-size-tablet-portrait: clamp(48px, 7vw, 72px);
    --landing-title-size-tablet-landscape: clamp(40px, 6svh, 64px);
    --landing-title-size-portrait: clamp(28px, 7vw, 42px);
    --landing-title-size-mobile-landscape: clamp(24px, 7svh, 34px);
    --landing-title-size: var(--landing-title-size-desktop);
    --landing-title-outline-width: 0.12vw;

    /* Type - subtitle */
    --landing-subtitle-size: clamp(14px, 0.9vw, 32px);
    --landing-subtitle-line-height: clamp(22px, 0.9vw, 32px);

    /* Compact brand - base */
    --landing-mobile-header-padding-top: 16px;
    --landing-mobile-brand-gap: 13px;
    --landing-mobile-brand-logo-size: clamp(25px, 4vw, 30px);
    --landing-mobile-brand-size: clamp(16px, 4vw, 24px);
    --landing-mobile-brand-margin-bottom: 5px;

    /* Compact brand - phone landscape */
    --landing-mobile-brand-logo-size-landscape: clamp(20px, 6svh, 28px);
    --landing-mobile-brand-size-landscape: clamp(14px, 4.5svh, 20px);

    /* Compact carousel-shell landing variants hide the phone stack. */

    background: url("/assets/images/backgrounds/Landing_bg.png") #ffffff no-repeat bottom center;
    background-size: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: var(--landing-height-desktop);
    width: 100%;

    @media (min-width: 2560px) and (orientation: landscape) {
        --landing-phone-width: var(--landing-phone-width-4k);
        --landing-phone-stack-offset-y: var(--landing-phone-stack-offset-y-4k);
    }

    @media (min-width: 961px) and (max-width: 1366px) and (min-height: 600px) and (orientation: landscape) {
        --landing-title-size: var(--landing-title-size-tablet-landscape);

        background: none;
        height: var(--landing-height-tablet-landscape);
        scroll-snap-align: start;
    }

    @media (max-width: 1050px) and (orientation: portrait) {
        --landing-title-size: var(--landing-title-size-portrait);

        background: none;
        height: var(--landing-height-portrait);
        scroll-snap-align: start;
    }

    @media (max-width: 960px) and (max-height: 500px) and (orientation: landscape) {
        --landing-title-size: var(--landing-title-size-mobile-landscape);
        --landing-mobile-brand-logo-size: var(--landing-mobile-brand-logo-size-landscape);
        --landing-mobile-brand-size: var(--landing-mobile-brand-size-landscape);

        background: none;
        height: var(--landing-height-mobile-landscape);
        scroll-snap-align: start;
    }

    @media (min-width: 1000px) and (orientation: portrait) {
        --landing-title-size: var(--landing-title-size-tablet-portrait);
    }

    & .page-header {
        height: var(--landing-header-height);
        display: flex;
        flex-direction: column;
        justify-content: flex-end;

        @media (max-width: 1050px) and (orientation: portrait), (max-width: 960px) and (max-height: 500px) and (orientation: landscape), (min-width: 961px) and (max-width: 1366px) and (min-height: 600px) and (orientation: landscape) {
            margin-top: 0;
            padding-top: var(--landing-mobile-header-padding-top);
            justify-content: space-evenly;
            height: 100%;
            align-items: center;
        }

        & .brand-group {
            display: contents;

            @media (max-width: 1050px) and (orientation: portrait), (max-width: 960px) and (max-height: 500px) and (orientation: landscape), (min-width: 961px) and (max-width: 1366px) and (min-height: 600px) and (orientation: landscape) {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: var(--landing-mobile-brand-gap);
            }
        }

        & .logo-for-phone-mq {
            display: none;

            @media (max-width: 1050px) and (orientation: portrait), (max-width: 960px) and (max-height: 500px) and (orientation: landscape), (min-width: 961px) and (max-width: 1366px) and (min-height: 600px) and (orientation: landscape) {
                display: inline-block;
                width: var(--landing-mobile-brand-logo-size);
            }
        }

        & .brand {
            font-weight: 400;
            font-family: "montserrat", sans-serif;
            text-decoration: none;
            color: #3a3a3a;
            display: none;
            font-size: var(--landing-mobile-brand-size);

            @media (max-width: 1050px) and (orientation: portrait), (max-width: 960px) and (max-height: 500px) and (orientation: landscape), (min-width: 961px) and (max-width: 1366px) and (min-height: 600px) and (orientation: landscape) {
                display: inline-block;
                text-align: center;
                margin-bottom: var(--landing-mobile-brand-margin-bottom);
            }
        }

        & h1 {
            font-family: "Vollkorn", serif;
            font-weight: 700;
            font-style: normal;
            color: #3a3a3a;
            margin: 0;
            font-size: var(--landing-title-size);

            @media (max-width: 1050px) and (orientation: portrait), (max-width: 960px) and (max-height: 500px) and (orientation: landscape), (min-width: 961px) and (max-width: 1366px) and (min-height: 600px) and (orientation: landscape) {
                background: none;
                text-align: center;
            }

            & .outline-toggle {
                -webkit-text-fill-color: #ffffff;
                -webkit-text-stroke-width: var(--landing-title-outline-width);
                -webkit-text-stroke-color: #3a3a3a;
                paint-order: stroke fill;

                @media (max-width: 1050px) and (orientation: portrait), (max-width: 960px) and (max-height: 500px) and (orientation: landscape), (min-width: 961px) and (max-width: 1366px) and (min-height: 600px) and (orientation: landscape) {
                    -webkit-text-fill-color: #3a3a3a;
                    -webkit-text-stroke-color: transparent;
                }
            }

            & .text-breaker-toggle {
                display: none;

                @media (max-width: 1050px) and (orientation: portrait), (max-width: 960px) and (max-height: 500px) and (orientation: landscape), (min-width: 961px) and (max-width: 1366px) and (min-height: 600px) and (orientation: landscape) {
                    display: initial;
                }
            }
        }

        & p {
            font-weight: 400;
            font-family: "montserrat", sans-serif;
            text-decoration: none;
            color: #3a3a3a;
            font-size: var(--landing-subtitle-size);
            margin: 0;
            text-align: center;
            line-height: var(--landing-subtitle-line-height);

            @media (max-width: 1050px) and (orientation: portrait), (max-width: 960px) and (max-height: 500px) and (orientation: landscape), (min-width: 961px) and (max-width: 1366px) and (min-height: 600px) and (orientation: landscape) {
                display: none;
            }
        }
    }

    & .phone-container {
        height: var(--landing-phone-container-height);
        display: flex;
        justify-content: center;
        transform: translateY(var(--landing-phone-stack-offset-y));

        @media (max-width: 1050px) and (orientation: portrait), (max-width: 960px) and (max-height: 500px) and (orientation: landscape), (min-width: 961px) and (max-width: 1366px) and (min-height: 600px) and (orientation: landscape) {
            display: none;
        }

        & img {
            filter: var(--landing-phone-shadow);
            transition: all 0.8s ease-in-out;
            position: relative;
            width: var(--landing-phone-width);
            opacity: 1;
            animation: phoneRevealIn 0.72s cubic-bezier(0.22, 0.8, 0.28, 1) var(--phone-reveal-delay) backwards;

            &:hover {
                transform: translate(var(--landing-phone-hover-x), var(--landing-phone-hover-y));
            }
        }

        & a {
            --phone-reveal-delay: 0s;
            --phone-wave-delay: 2s;
            --phone-reveal-distance: clamp(6px, 0.5vw, 10px);
            --phone-wave-distance: clamp(8px, 0.85vw, 18px);
            --phone-wave-distance-active: var(--phone-wave-distance);
            --phone-wave-lift-active: -3px;

            position: relative;
            margin-top: var(--landing-phone-top-offset);
            animation: phoneIdleWave 5.4s ease-in-out var(--phone-wave-delay) infinite;

            @media (max-width: 1050px) and (orientation: portrait), (max-width: 960px) and (max-height: 500px) and (orientation: landscape), (min-width: 961px) and (max-width: 1366px) and (min-height: 600px) and (orientation: landscape) {
                pointer-events: none;
            }

            &:nth-child(1) {
                --phone-reveal-delay: 0.12s;
                --phone-wave-delay: 2.25s;

                z-index: 5;
            }

            &:nth-child(2) {
                --phone-reveal-delay: 0.22s;
                --phone-wave-delay: 2.43s;

                z-index: 4;
                margin-top: var(--landing-phone-second-top-offset);
                margin-left: var(--landing-phone-overlap);
            }

            &:nth-child(3) {
                --phone-reveal-delay: 0.32s;
                --phone-wave-delay: 2.61s;

                z-index: 3;
                margin-left: var(--landing-phone-overlap);
            }

            &:nth-child(4) {
                --phone-reveal-delay: 0.42s;
                --phone-wave-delay: 2.79s;

                z-index: 2;
                margin-left: var(--landing-phone-overlap);
            }

            &:nth-child(5) {
                --phone-reveal-delay: 0.52s;
                --phone-wave-delay: 2.97s;

                z-index: 1;
                margin-left: var(--landing-phone-overlap);
            }

            &:nth-child(6) {
                --phone-reveal-delay: 0.62s;
                --phone-wave-delay: 3.15s;

                z-index: 0;
                margin-left: var(--landing-phone-overlap);
            }
        }

        & a:hover {
            --phone-wave-distance-active: 0px;
            --phone-wave-lift-active: 0px;
        }
    }
}

@keyframes phoneRevealIn {
    0% {
        opacity: 0;
        transform: translateY(var(--phone-reveal-distance));
    }

    70% {
        opacity: 1;
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes phoneIdleWave {
    0% { transform: translateY(0); }
    7% { transform: translateY(var(--phone-wave-distance-active)); }
    12% { transform: translateY(var(--phone-wave-lift-active)); }
    18% { transform: translateY(0); }
    100% { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .landing .phone-container {
        & img {
            opacity: 1;
            animation: none;
            transition: none;

            &:hover {
                transform: none;
            }
        }

        & a {
            animation: none;
        }
    }
}