/* ============================================
   Lightli.uk — Home App Sections
   ============================================ */

.app-section {
    /* Section frame - base */
    --section-width: 90vw;
    --section-height: clamp(420px, calc(100svh - var(--site-nav-height) - (var(--app-section-gutter) * 2)), 860px);
    --section-radius: 24px;
    --section-padding: clamp(48px, 8vw, 144px);
    --section-column-gap: clamp(24px, 4vw, 72px);
    --section-row-gap: 0px;
    --section-shadow: 5px 10px 10px rgba(58, 58, 58, 0.2);

    /* Section frame - content alignment */
    --section-align: start;
    --section-text-align: start;

    /* Section frame - carousel landscape cards */
    --section-tablet-landscape-column-gap: clamp(32px, 4vw, 64px);
    --section-tablet-landscape-padding: clamp(56px, 6vw, 96px);
    --section-tablet-landscape-height: 100%;
    --section-mobile-landscape-column-gap: clamp(16px, 4vw, 40px);
    --section-mobile-landscape-padding: clamp(20px, 5vh, 32px) clamp(28px, 5vw, 54px);
    --section-mobile-landscape-height: calc(100% - clamp(8px, 3lvh, 16px));

    /* Content rhythm - base */
    --content-logo-size: clamp(42px, 3vw, 80px);
    --mobile-logo-size: clamp(28px, 8vw, 42px);
    --content-row-gap-min: clamp(12px, 1vw, 24px);
    --content-button-height: clamp(40px, 3vw, 80px);
    --content-button-gap: clamp(6px, 0.5vw, 14px);
    --content-buttons-margin-top: 0px;
    --content-buttons-height: calc(var(--content-button-height) + var(--content-button-height) + var(--content-button-gap));

    /* Content rhythm - mobile landscape */
    --section-mobile-landscape-content-gap: clamp(4px, 1.2vh, 8px);
    --content-logo-size-mobile-landscape: 34px;
    --content-button-height-mobile-landscape: clamp(30px, 8vh, 38px);
    --content-button-gap-mobile-landscape: 4px;
    --content-buttons-margin-top-mobile-landscape: clamp(4px, 1vh, 8px);

    /* Content width - portrait */
    --app-title-max-width-portrait: clamp(260px, 75vw, 380px);
    --app-description-max-width-portrait: clamp(260px, 75vw, 380px);
    --app-title-max-width-tablet-portrait: min(80%, 620px);
    --app-description-max-width-tablet-portrait: min(84%, 660px);

    /* Graphic frame */
    --graphic-circle-size: min(100%, 620px);
    --graphic-phone-size: min(100%, 775px);
    --graphic-size-mobile-landscape: min(30vw, 46svh, 280px);

    /* Graphic circle scale */
    --graphic-circle-base-scale-desktop: 1.5;
    --graphic-circle-base-scale-4k: 1.35;
    --graphic-circle-base-scale-tablet-landscape: 0.9;
    --graphic-circle-base-scale-tablet-portrait: var(--graphic-circle-base-scale-mobile);
    --graphic-circle-base-scale-mobile: 1.4;
    --graphic-circle-base-scale-mobile-landscape: 1.2;
    --graphic-circle-base-scale: var(--graphic-circle-base-scale-desktop);

    /* Graphic hero phone scale */
    --graphic-hero-base-scale-desktop: 2;
    --graphic-hero-base-scale-4k: 1.85;
    --graphic-hero-base-scale-tablet-landscape: 1.2;
    --graphic-hero-base-scale-tablet-portrait: var(--graphic-hero-base-scale-mobile);
    --graphic-hero-base-scale-mobile: 1.8;
    --graphic-hero-base-scale-mobile-landscape: 1.45;

    /* Graphic implementation aliases */
    --graphic-phone-base-scale-desktop: var(--graphic-hero-base-scale-desktop);
    --graphic-phone-base-scale-4k: var(--graphic-hero-base-scale-4k);
    --graphic-phone-base-scale-tablet-landscape: var(--graphic-hero-base-scale-tablet-landscape);
    --graphic-phone-base-scale-tablet-portrait: var(--graphic-hero-base-scale-tablet-portrait);
    --graphic-phone-base-scale-mobile: var(--graphic-hero-base-scale-mobile);
    --graphic-phone-base-scale-mobile-landscape: var(--graphic-hero-base-scale-mobile-landscape);
    --graphic-phone-animation-multiplier: 1.02;
    --graphic-phone-base-scale: var(--graphic-phone-base-scale-desktop);
    --graphic-phone-active-scale: calc(var(--graphic-phone-base-scale) * var(--graphic-phone-animation-multiplier));

    /* Type locks - title */
    --app-title-line-height: 1.08;
    --app-title-max-lines: 2;
    --app-title-min-height: 2.16em;
    --app-title-max-height: 2.16em;
    --app-title-size-mobile-landscape: clamp(21px, 5.4vh, 28px);
    --app-title-lines-mobile-landscape: 1;
    --app-title-height-mobile-landscape: 2.16em;

    /* Type locks - description */
    --app-description-line-height: 1.8;
    --app-description-max-lines: 2;
    --app-description-min-height: 3.6em;
    --app-description-max-height: 3.6em;
    --app-description-size-mobile-landscape: clamp(10px, 2.8vh, 13px);
    --app-description-line-height-mobile-landscape: 1.35;
    --app-description-lines-mobile-landscape: 3;
    --app-description-height-mobile-landscape: 5em;

    position: relative;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "content graphic";
    align-items: stretch;
    column-gap: var(--section-column-gap);
    width: var(--section-width);
    height: var(--section-height);
    margin-top: var(--app-section-gutter);
    padding: var(--section-padding);
    overflow: hidden;
    border-radius: var(--section-radius);
    background-color: #ffffff;
    background-size: 400% 400%;
    box-shadow: var(--section-shadow);
    opacity: 0;
    transition: opacity 0.5s ease;
    animation-play-state: paused;
    scroll-margin-top: var(--app-section-scroll-offset);


    &.revealed {
        opacity: 1;
    }

    &::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        border-radius: inherit;
        background-image: url("/assets/images/decorative/app_grain_overlay.png");
        background-repeat: repeat;
        background-size: 256px 256px;
        mix-blend-mode: color-dodge;
        opacity: 0.4;
    }

    & > * {
        position: relative;
        z-index: 2;
        min-width: 0;
        min-height: 0;
        overflow: visible;
    }

    &:nth-child(even) {
        --section-align: end;
        --section-text-align: end;

        grid-template-areas: "graphic content";
    }

    &:nth-child(1) {
        background-image: linear-gradient(135deg, #8FB2EC, #C39AF7, #767EF2, #DDB8FB, #8FB2EC, #C39AF7);
        animation: meshGradientA 40s ease infinite;
    }

    &:nth-child(2) {
        background-image: linear-gradient(135deg, #F897E4, #F8B3BB, #FFB9CF, #FF79D2, #F897E4, #F8B3BB);
        animation: meshGradientB 44s ease infinite;
    }

    &:nth-child(3) {
        background-image: linear-gradient(135deg, #7DE588, #9FEFCD, #B7EAB0, #BCEDE2, #7DE588, #9FEFCD);
        animation: meshGradientA 36s ease infinite reverse;
    }

    &:nth-child(4) {
        background-image: linear-gradient(135deg, #FD6464, #FFBABB, #FF597E, #FFB4E0, #FD6464, #FFBABB);
        animation: meshGradientC 48s ease infinite;
    }

    &:nth-child(5) {
        background-image: linear-gradient(135deg, #FFF4AA, #FFC49B, #FB9891, #FFC484, #FFF4AA, #FFC49B);
        animation: meshGradientB 42s ease infinite reverse;
    }

    &:nth-child(6) {
        background-image: linear-gradient(135deg, #9BEEBD, #8DF5EC, #A5DAF4, #BBEAFE, #9BEEBD, #8DF5EC);
        animation: meshGradientC 38s ease infinite reverse;
    }

    &.is-active-section {
        will-change: background-position;
        animation-play-state: running;
    }

    &:not(.is-active-section) {
        animation-play-state: paused;
    }

    & .app-section__content {
        grid-area: content;
        display: grid;
        grid-template-rows: auto auto auto auto auto;
        align-content: space-between;
        row-gap: var(--content-row-gap-min);
        height: 100%;
        justify-items: var(--section-align);
        text-align: var(--section-text-align);
    }

    & .app-section__logo {
        object-fit: contain;
    }

    & .app-section__logo--desktop {
        width: var(--content-logo-size);
        height: var(--content-logo-size);
    }

    & .app-section__logo--mobile {
        grid-area: logo;
        display: none;
        width: var(--mobile-logo-size);
        height: var(--mobile-logo-size);
    }

    & .app-section__title {
        display: -webkit-box;
        width: 95%;
        max-width: clamp(300px, 25vw, 700px);
        margin: 0;
        overflow: hidden;
        color: #3a3a3a;
        font-family: "Vollkorn", serif;
        font-size: clamp(30px, 2.8vw, 62px);
        font-weight: 700;
        line-height: var(--app-title-line-height);
        min-height: var(--app-title-min-height);
        max-height: var(--app-title-max-height);
        -webkit-line-clamp: var(--app-title-max-lines);
        line-clamp: var(--app-title-max-lines);
        -webkit-box-orient: vertical;
    }

    & .app-section__description {
        display: -webkit-box;
        width: 95%;
        max-width: clamp(300px, 28vw, 680px);
        margin: 0;
        overflow: hidden;
        color: #3a3a3a;
        font-family: "montserrat", sans-serif;
        font-size: clamp(12px, 0.85vw, 24px);
        font-weight: 400;
        line-height: var(--app-description-line-height);
        min-height: var(--app-description-min-height);
        max-height: var(--app-description-max-height);
        -webkit-line-clamp: var(--app-description-max-lines);
        line-clamp: var(--app-description-max-lines);
        -webkit-box-orient: vertical;
    }

    & .app-section__store-buttons {
        display: grid;
        grid-template-rows: repeat(2, var(--content-button-height));
        gap: var(--content-button-gap);
        height: var(--content-buttons-height);
        margin-top: var(--content-buttons-margin-top);
    }

    & .app-section__store-button {
        display: flex;
        align-items: center;
        justify-content: center;
        width: clamp(230px, 16vw, 500px);
        height: var(--content-button-height);
        border-radius: 999px;
        background: #3a3a3a;

        & img {
            height: clamp(24px, 2vw, 55px);
        }

        & a {
            width: 70%;
            margin: 0;
            color: #ffffff;
            font-family: "montserrat", sans-serif;
            font-size: clamp(11px, 0.85vw, 22px);
            font-weight: 400;
            text-align: center;
            text-decoration: none;
            transition: font-weight 0.2s ease;

            &::before {
                content: attr(data-text);
                display: block;
                height: 0;
                overflow: hidden;
                visibility: hidden;
                font-weight: 900;
            }

            &:hover {
                font-weight: 600;
            }

            &:active {
                font-weight: 900;
            }
        }

        & .comingsoon {
            pointer-events: none;
        }
    }

    & .app-section__graphic {
        grid-area: graphic;
        display: grid;
        place-items: center;
        width: 100%;
        height: 100%;
        overflow: visible;
        container-type: size;

        @supports (width: 1cqh) {
            --graphic-circle-size: min(100cqh, 100cqw, 620px);
            --graphic-phone-size: min(100cqh, 100cqw, 775px);
        }

        &::before {
            content: "";
            grid-area: 1 / 1;
            z-index: 0;
            width: var(--graphic-circle-size);
            aspect-ratio: 1;
            border-radius: 50%;
            background: #f6f6f6;
            transform: scale(var(--graphic-circle-base-scale));
            transform-origin: center;
        }
    }

    & .app-section__graphic-frame {
        grid-area: 1 / 1;
        display: flex;
        align-items: center;
        justify-content: center;
        width: var(--graphic-phone-size);
        height: 100%;
        min-width: 0;
        min-height: 0;
        overflow: visible;
    }

    & .app-section__graphic-img {
        z-index: 1;
        display: block;
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
        filter: drop-shadow(12px 18px 36px rgba(58, 58, 58, 0.16));
        transform: scale(var(--graphic-phone-base-scale));
        transform-origin: center;
    }

    & .scroll-graphic-animation {
        animation: heroGraphicAnimator 2.5s ease 1s;
    }

    &:nth-child(odd) .scroll-graphic-animation {
        animation: heroGraphicAnimatorReverse 2.5s ease 1s;
    }

    @media (min-width: 2560px) and (orientation: landscape) {
        --graphic-circle-base-scale: var(--graphic-circle-base-scale-4k);
        --graphic-phone-base-scale: var(--graphic-phone-base-scale-4k);
    }

    @media (min-width: 961px) and (max-width: 1366px) and (min-height: 600px) and (orientation: landscape) {
        --graphic-circle-base-scale: var(--graphic-circle-base-scale-tablet-landscape);
        --graphic-phone-base-scale: var(--graphic-phone-base-scale-tablet-landscape);
    }
    @media (max-width: 1050px) and (orientation: portrait), (max-width: 960px) and (max-height: 500px) and (orientation: landscape) {
        --section-align: center;
        --section-text-align: center;
        --section-shadow: 5px 10px 10px rgba(58, 58, 58, 0.4);
        --section-padding: clamp(14px, 2.5vh, 28px) clamp(18px, 5vw, 32px);
        --section-row-gap: clamp(6px, 1.2vh, 12px);
        --content-row-gap-min: clamp(6px, 1.1vh, 10px);
        --content-button-height: 42px;
        --content-button-gap: 5px;
        --content-buttons-margin-top: clamp(8px, 1.6vh, 18px);
        --content-buttons-height: calc(var(--content-button-height) + var(--content-button-height) + var(--content-button-gap));
        --app-title-line-height: 1.08;
        --app-description-line-height: 1.4;
        flex: 0 0 90vw;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: var(--mobile-logo-size) minmax(0, 1fr) auto;
        grid-template-areas:
            "logo"
            "graphic"
            "content";
        justify-items: center;
        align-content: stretch;
        row-gap: var(--section-row-gap);
        height: 100%;
        margin: 0 5%;
        padding: var(--section-padding);
        border-radius: 18px;
        scroll-snap-align: center;

        --graphic-circle-size: 100%;
        --graphic-circle-base-scale: var(--graphic-circle-base-scale-mobile);

        --graphic-phone-size: 100%;
        --graphic-phone-base-scale: var(--graphic-phone-base-scale-mobile);
        --app-title-max-lines: 1;
        --app-title-min-height: 1.08em;
        --app-title-max-height: 1.08em;
        --app-description-max-lines: 3;
        --app-description-min-height: 4.2em;
        --app-description-max-height: 4.2em;

        &:nth-child(even) {
            --section-align: center;
            --section-text-align: center;

            grid-template-areas:
                "logo"
                "graphic"
                "content";
        }

        & .app-section__content {
            align-content: start;
            row-gap: var(--content-row-gap-min);
        }

        & .app-section__logo--desktop {
            display: none;
        }

        & .app-section__logo--mobile {
            display: block;
        }

        & .app-section__title {
            max-width: var(--app-title-max-width-portrait);
            font-size: clamp(20px, 5vw, 28px);
            line-height: var(--app-title-line-height);
        }

        & .app-section__description {
            max-width: var(--app-description-max-width-portrait);
            font-size: clamp(11px, 2.8vw, 14px);
            line-height: var(--app-description-line-height);
        }

        & .app-section__store-button {
            width: clamp(200px, 55vw, 280px);
        }

        & .app-section__graphic {
            --graphic-circle-size: 100%;
            --graphic-phone-size: 100%;

            align-self: center;
            width: min(60vw, 30svh, 360px);
            height: auto;
            aspect-ratio: 1;
        }

        & .app-section__graphic-frame {
            width: 100%;
            height: 100%;
        }

        & .app-section__graphic-img {
            width: auto;
            max-width: 100%;
            max-height: 100%;
        }

        & .carousel-dots-inline {
            margin-top: 0;
        }

        & .scroll-graphic-animation,
        &:nth-child(odd) .scroll-graphic-animation {
            animation: heroGraphicAnimatorScale 2.5s ease 1s;
        }
    }



    /* Tablet portrait: named knobs alias mobile portrait until it needs its own tuning. */
    @media (min-width: 701px) and (max-width: 1050px) and (orientation: portrait) {
        --graphic-circle-base-scale: var(--graphic-circle-base-scale-tablet-portrait);
        --graphic-phone-base-scale: var(--graphic-phone-base-scale-tablet-portrait);
        --app-title-max-width-portrait: var(--app-title-max-width-tablet-portrait);
        --app-description-max-width-portrait: var(--app-description-max-width-tablet-portrait);
    }
    /* Tablet landscape: use carousel shell with row cards. */
    @media (min-width: 961px) and (max-width: 1366px) and (min-height: 600px) and (orientation: landscape) {
        flex: 0 0 90vw;
        height: var(--section-tablet-landscape-height);
        margin: 0 5%;
        padding: var(--section-tablet-landscape-padding);
        column-gap: var(--section-tablet-landscape-column-gap);
        scroll-snap-align: center;
    }
    /* Mobile landscape: keep the carousel, but use row cards. */
    @media (max-width: 960px) and (max-height: 500px) and (orientation: landscape) {
        --section-align: start;
        --section-text-align: start;
        --section-padding: var(--section-mobile-landscape-padding);
        --section-row-gap: 0px;
        --content-row-gap-min: var(--section-mobile-landscape-content-gap);
        --content-button-height: var(--content-button-height-mobile-landscape);
        --content-button-gap: var(--content-button-gap-mobile-landscape);
        --content-buttons-margin-top: var(--content-buttons-margin-top-mobile-landscape);
        --content-buttons-height: calc(var(--content-button-height) + var(--content-button-height) + var(--content-button-gap));
        --app-title-max-lines: var(--app-title-lines-mobile-landscape);
        --app-title-min-height: var(--app-title-height-mobile-landscape);
        --app-title-max-height: var(--app-title-height-mobile-landscape);
        --app-description-max-lines: var(--app-description-lines-mobile-landscape);
        --app-description-line-height: var(--app-description-line-height-mobile-landscape);
        --app-description-min-height: var(--app-description-height-mobile-landscape);
        --app-description-max-height: var(--app-description-height-mobile-landscape);
        --graphic-circle-size: 100%;
        --graphic-circle-base-scale: var(--graphic-circle-base-scale-mobile-landscape);
        --graphic-phone-size: 100%;
        --graphic-phone-base-scale: var(--graphic-phone-base-scale-mobile-landscape);

        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: minmax(0, 1fr);
        grid-template-areas: "content graphic";
        align-items: stretch;
        justify-items: stretch;
        column-gap: var(--section-mobile-landscape-column-gap);
        row-gap: var(--section-row-gap);
        height: var(--section-mobile-landscape-height);
        align-self: center;
        padding: var(--section-padding);

        &:nth-child(even) {
            --section-align: end;
            --section-text-align: end;

            grid-template-areas: "graphic content";
        }

        & .app-section__content {
            align-content: space-between;
            row-gap: var(--content-row-gap-min);
        }

        & .app-section__logo--desktop {
            display: block;
            width: var(--content-logo-size-mobile-landscape);
            height: var(--content-logo-size-mobile-landscape);
        }

        & .app-section__logo--mobile {
            display: none;
        }

        & .app-section__title {
            max-width: min(100%, 320px);
            font-size: var(--app-title-size-mobile-landscape);
            line-height: var(--app-title-line-height);
        }

        & .app-section__description {
            max-width: min(100%, 340px);
            font-size: var(--app-description-size-mobile-landscape);
            line-height: var(--app-description-line-height);
        }

        & .app-section__store-button {
            width: clamp(180px, 26vw, 260px);
        }

        & .app-section__graphic {
            --graphic-circle-size: 100%;
            --graphic-phone-size: 100%;

            align-self: center;
            justify-self: center;
            width: var(--graphic-size-mobile-landscape);
            height: auto;
            aspect-ratio: 1;
        }

        & .app-section__graphic-frame {
            width: 100%;
            height: 100%;
        }

        & .app-section__graphic-img {
            width: auto;
            max-width: 100%;
            max-height: 100%;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        animation: none;
        transition: opacity 0.2s ease;

        &.is-active-section {
            will-change: auto;
        }
    }
    }

@keyframes heroGraphicAnimator {
    0% { transform: rotate(0) scale(var(--graphic-phone-base-scale)); }
    50% { transform: rotate(1.5deg) scale(var(--graphic-phone-active-scale)); }
    100% { transform: rotate(0) scale(var(--graphic-phone-base-scale)); }
    }

@keyframes heroGraphicAnimatorReverse {
    0% { transform: rotate(0) scale(var(--graphic-phone-base-scale)); }
    50% { transform: rotate(-1.5deg) scale(var(--graphic-phone-active-scale)); }
    100% { transform: rotate(0) scale(var(--graphic-phone-base-scale)); }
    }

@keyframes heroGraphicAnimatorScale {
    0% { transform: scale(var(--graphic-phone-base-scale)); }
    50% { transform: scale(var(--graphic-phone-active-scale)); }
    100% { transform: scale(var(--graphic-phone-base-scale)); }
    }

@keyframes meshGradientA {
    0% { background-position: 0% 50%; }
    25% { background-position: 50% 0%; }
    50% { background-position: 100% 50%; }
    75% { background-position: 50% 100%; }
    100% { background-position: 0% 50%; }
    }

@keyframes meshGradientB {
    0% { background-position: 0% 0%; }
    33% { background-position: 100% 50%; }
    66% { background-position: 50% 100%; }
    100% { background-position: 0% 0%; }
    }

@keyframes meshGradientC {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
    }