/* ==========================================================
   TRUCOREAL CASE
   Base styles
========================================================== */

/* Убираем верхний padding body — navbar наложится на HERO */
body {
    padding-top: 0;
}

/* ==========================================================
    VARIABLES — scoped to .truco-page to prevent leaking into other pages
    when truco.css is loaded dynamically on Barba navigation.
    ========================================================== */

.truco-page {

    /* Colors */
    --black: #06070A;
    --dark: #0B1C2A;
    --dark-soft: #0D2535;

    --white: #FFFFFF;
    --gray-bg: #F5F5F5;

    --text-muted: rgba(6,7,10,.55);
    --text-light: rgba(255,255,255,.65);

    --border: rgba(6,7,10,.12);


    /* Container */

    --max-width: 1640px;

    --padding-x:
        clamp(20px, 5vw, 80px);

    --container:
        min(
            calc(100vw - (var(--padding-x) * 2)),
            var(--max-width)
        );


    /* Typography */

    --display:
        clamp(42px,5.2vw,84px);

    --h1:
        clamp(30px,3vw,30px);

    --h2:
        clamp(24px,2vw,30px);

    --h3:
        clamp(24px,2vw,42px);

    --body:
        clamp(24px,1.5vw,26px);

    --small:
        clamp(16px,1.2vw,22px);

    --label:
        14px;


    /* Spacing */

    --section-xl:
        clamp(120px,12vw,220px);

    --section-lg:
        clamp(80px,8vw,140px);

    --section-md:
        clamp(40px,5vw,80px);


    /* Radius */

    --radius:
        40px;


    /* Page background colors — centralized page-level background management */

    --page-bg-hero:    #051D2B;
    --page-bg-phones:  #121212;
    --page-bg-dark:    #0B1C2A;
    --page-bg-light:   #F5F5F5;
    --page-bg-frame:   #EDEDED;
    --page-bg-section: #FFFFFF;

}



/* ==========================================================
   RESET — handled by style.css, no need to duplicate here
   ========================================================== */



/* ==========================================================
   PAGE BACKGROUND — Centralized background color management
   for all top-level sections on the truco case page.
   ========================================================== */


.hero-frame {
    background:var(--page-bg-hero);
}


.phones-block {
    background:var(--page-bg-phones);
}


.image-block {
    background:var(--page-bg-light);
}

.userflow-showcase {
    background:var(--page-bg-dark);
}


.prototype-section {
    background:var(--page-bg-section);
}


.mobile-first-section,
.ui-section {
    background:var(--page-bg-section);
}


.about-project {
    background:var(--page-bg-section);
}

.prototype-section__frame,
.visual-card {
    background:var(--page-bg-frame);
}


img,
video {

    max-width:100%;
    display:block;

}



/* ==========================================================
   BARBA TRANSITION — задаётся в transition.css корня,
   здесь только переопределяем если нужно
========================================================== */



/* ==========================================================
   GLOBAL CONTAINER
========================================================== */


.container,
.hero,
.about-project-grid,
.prototype-section__inner,
.mobile-first-section__inner,
.ui-section__inner {

    width:var(--container);

    margin-inline:auto;

}



/* ==========================================================
   HERO
========================================================== */


.hero-frame {

    width:100%;

}



.hero {

    height:

    clamp(
        420px,
        45vw,
        720px
    );

    display:flex;

    align-items:center;

    overflow:hidden;

}


.hero-label {

    font-size:var(--h1);

    font-weight:500;

    margin-bottom:32px;

    color:white;

    letter-spacing:-0.02em;

}



.hero-title {

    font-size:var(--display);

    line-height:1;

    font-weight:500;

    letter-spacing:-0.04em;

    color:white;

    max-width:1460px;

}



/* ==========================================================
   PHONES BLOCK
========================================================== */


.phones-block {

    width:100vw;

    height:100vh;

    background-color: #0A1620;

    overflow:hidden;

    position:relative;

}



.phones-block img {

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center;

}



/* ==========================================================
   ABOUT PROJECT
========================================================== */


.about-project {

    color:var(--black);

    padding:

    var(--section-xl)

    0;

}



.about-project-grid {

    display:grid;

    grid-template-columns:

    minmax(220px,420px)

    1fr;

    gap:60px;

}



.about-project-grid--second {

    margin-top:120px;

}



.about-project-label {

    font-size:var(--h3);

    font-weight:600;

    letter-spacing:-0.03em;

}



.about-project-content {

    font-size:var(--h2);

    line-height:1.6;

    letter-spacing:-0.02em;

    max-width:1110px;
    font-weight: 500;

}



.about-project-content--body {

    font-size:var(--body);

    line-height:1.6;

    font-weight: 400;

}



/* ==========================================================
   FULL IMAGE BLOCK
========================================================== */


.image-block {

    width:100%;

    overflow:hidden;

}



.image-block__frame {

    width:100%;

    aspect-ratio:16 / 9;

}



.image-block__frame img {

    width:100%;

    height:100%;

    object-fit:cover;

}

/* ==========================================================
   PROTOTYPE SECTIONS
========================================================== */


.prototype-section {

    color:var(--black);

}



.prototype-section__inner {

    padding:

    var(--section-xl)

    0

    var(--section-lg);

}



.prototype-section__title {

    font-size:var(--display);

    font-weight:600;

    line-height:1.05;

    letter-spacing:-0.04em;

    max-width:1100px;

    margin-bottom:60px;

}



.prototype-section__divider {

    width:100%;

    height:0px;

    background:var(--border);

    margin-bottom:20px;

}



.prototype-section__grid {

   /* display:grid;

    grid-template-columns:

    minmax(220px,420px)

    1fr;

    gap:60px; */

}



.prototype-section__label {

    font-size:var(--label);

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:.08em;

    color:rgba(6,7,10,.45);

    line-height:1.5;

}



.prototype-section__body {

    font-size:var(--body);

    line-height:1.65;

    letter-spacing:-0.02em;

    max-width:1110px;

}



.prototype-section__body p {

    margin-bottom:24px;

}



.prototype-section__body p:last-child {

    margin-bottom:0;

}



/* ==========================================================
   LARGE IMAGE FRAME
========================================================== */


.prototype-section__frame {

    width:var(--container);

    margin-inline:auto;

    height:

     clamp(
        420px,
        65vw,
        1040px
    );

    border-radius:var(--radius);

    overflow:hidden;

    display:flex;

    justify-content:center;

    align-items:center;

}



.prototype-section__frame-img {

    width: 80%;

    height: auto;

    object-fit: contain;

}



/* ==========================================================
   VISUAL DIRECTION GRID
========================================================== */


.visual-grid {

    width:var(--container);

    margin-inline:auto;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:24px;


}



.visual-card {

    border-radius:var(--radius);

    overflow:hidden;

}



.visual-card--small {

    height:

    clamp(
        400px,
        55vw,
        980px
    );

}



.visual-card--wide {

    grid-column:span 2;

    height:

    clamp(
        400px,
        60vw,
        1040px
    );

}


/* Parallax image inside visual card */

.visual-card img {

    width:100% !important;

    height:100% !important;

    object-fit:contain !important;

    object-position:center;

    will-change:transform;

}



/* ==========================================================
   CONCEPT CARDS
========================================================== */


.concept-grid {

    width:var(--container);

    margin-inline:auto;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:40px;

}



.concept-card {

    overflow:hidden;

    border-radius:var(--radius);

}



.concept-card--top {

    min-height:800px;

}



.concept-card--bottom {

    grid-column:span 2;

    min-height:900px;

}



.concept-card--dark {

    background:#0B1C2A;

}



.concept-card--text {

    background:#C9935D;

    padding:

    clamp(40px,5vw,100px);

    display:flex;

    flex-direction:column;

    justify-content:center;

}



.concept-card__title {

    font-size:

    clamp(
        42px,
        5vw,
        80px
    );

    line-height:1.05;

    font-weight:700;

    letter-spacing:-0.04em;

    color:white;

    margin-bottom:40px;

}



.concept-card__body {

    font-size:

    clamp(
        18px,
        2vw,
        32px
    );

    line-height:1.5;

    color:white;

    max-width:700px;

}



.concept-card__img {

    width:100%;

    height:100%;

    object-fit:cover;

}



/* ==========================================================
   MOBILE FIRST SECTION
========================================================== */


.mobile-first-section {

}



.mobile-first-section__inner {

    padding:

    var(--section-xl)

    0

    var(--section-lg);

}



.mobile-first-section__title {

    font-size:var(--display);

    font-weight:600;

    line-height:1.05;

    letter-spacing:-0.04em;

    margin-bottom:60px;

}



.mobile-first-section__grid {

    display:grid;

    grid-template-columns:

    minmax(220px,420px)

    1fr;

    gap:60px;

}



.mobile-first-section__body {

    font-size:var(--body);

    line-height:1.65;

    letter-spacing:-0.02em;

}

/* ==========================================================
   VIDEO SHOWCASE
========================================================== */


.video-showcase {

    width:100%;

    display:flex;

    align-items:flex-start;

    gap:

    clamp(
        40px,
        8vw,
        120px
    );

    margin-left:

    calc(
        (100vw - var(--container)) / 2
    );

    overflow:hidden;


}



.video-mob,
.video-desk {

    background:#000;

    overflow:hidden;

    border-radius:32px;

    box-shadow:0 0 0 12px rgba(0,0,0,.3);

    position:relative;

}



.video-mob {

    flex:

    0 0 auto;

    width:

    clamp(
        280px,
        22vw,
        371px
    );

    height:

    clamp(
        560px,
        50vw,
        808px
    );

}



.video-desk {

    flex:

    0 0 auto;

    width:

    clamp(
        700px,
        65vw,
        1183px
    );

    height:

    clamp(
        400px,
        45vw,
        808px
    );

    margin-top:120px;

}



.video-mob video,
.video-desk video {

    width:100%;

    height:100%;

    object-fit:cover;

}



/* ==========================================================
   UI SECTION
========================================================== */


.ui-section {

    color:var(--black);

}



.ui-section__inner {

    padding:

    var(--section-xl)

    0

    var(--section-lg);

}



.ui-section__title {

    font-size:var(--display);

    font-weight:600;

    line-height:1.05;

    letter-spacing:-0.04em;

    margin-bottom:60px;

}



.ui-section__divider {

    width:100%;

    height:1px;

    background:var(--border);

    margin-bottom:50px;

}



.ui-section__grid {

    display:grid;

    grid-template-columns:

    minmax(220px,420px)

    1fr;

    gap:60px;

}



.ui-section__label {

    font-size:var(--label);

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:.08em;

    color:rgba(6,7,10,.45);

}



.ui-section__body {

    font-size:var(--body);

    line-height:1.65;

    max-width:1100px;

    letter-spacing:-0.02em;

}



/* ==========================================================
   FINAL UI IMAGE
========================================================== */


.ui-section__showcase {

    width:100vw;

    calc(
        (var(--container) - 100vw) / 2
    );

    overflow:hidden;

}



.ui-section__img {

    width:100%;

    height:auto;

}



/* ==========================================================
   USERFLOW / DARK BLOCKS (если появятся)
========================================================== */


.userflow-showcase {

    width:100%;

    padding:

    var(--section-xl)

    0;

    overflow:hidden;

}



.userflow-copy {

    width:var(--container);

    margin:auto;

    color:white;

}



.userflow-copy .note-title {

    color:white;

}



.userflow-copy .note-body {

    color:
    rgba(255,255,255,.7);

}



.userflow-ribbon {

    margin-top:80px;

    overflow:hidden;

}



.userflow-img {

    width:100%;

    display:block;

}

/* ==========================================================
   RESPONSIVE
========================================================== */


/* -------------------------
   TABLET
------------------------- */

@media (max-width: 960px) {


    .truco-page {

        --padding-x:24px;

    }



    .hero {

        height:auto;

        min-height:500px;

        padding:

        80px 0;

    }



    .hero-title {

        max-width:100%;

    }



    .about-project-grid,
    .prototype-section__grid,
    .mobile-first-section__grid,
    .ui-section__grid {

        grid-template-columns:1fr;

        gap:32px;

    }



    .about-project-grid--second {

        margin-top:80px;

    }



    .prototype-section__title,
    .mobile-first-section__title,
    .ui-section__title {

        margin-bottom:40px;

    }



    .prototype-section__frame {

        border-radius:24px;

    }



    .visual-grid {

        grid-template-columns:1fr;

        gap:24px;

    }



    .visual-card--wide {

        grid-column:auto;

    }



    .concept-grid {

        grid-template-columns:1fr;

    }



    .concept-card--bottom {

        grid-column:auto;

    }



    .video-showcase {

        margin-left:0;

        width:100%;

        flex-direction:column;

        padding-inline:var(--padding-x);

    }



    .video-mob,
    .video-desk {

        width:100%;

        height:auto;

        aspect-ratio:16/9;

        margin-top:0;

    }



    .video-mob {

        aspect-ratio:9/16;

        max-width:370px;

    }



}



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


@media (max-width:600px) {


    .truco-page {

        --padding-x:16px;

    }



    .hero {

        min-height:420px;

        padding:

        60px 0;


    }



    .hero-label {

        margin-bottom:20px;

    }



    .hero-title {

        font-size:

        clamp(
            40px,
            11vw,
            56px
        );

    }



    .phones-block {
    }



    .about-project {

        padding:

        80px 0;

    }



    .about-project-content {

        font-size:20px;

    }



    .prototype-section__inner,
    .mobile-first-section__inner,
    .ui-section__inner {

        padding-top:80px;

        padding-bottom:60px;

    }



    .prototype-section__title,
    .mobile-first-section__title,
    .ui-section__title {

        font-size:

        clamp(
            38px,
            10vw,
            52px
        );

    }



    .prototype-section__body,
    .mobile-first-section__body,
    .ui-section__body {

        font-size:18px;

    }



    .prototype-section__frame {

        height:auto;

        aspect-ratio:4/5;

        border-radius:20px;

    }



    .visual-card--small,
    .visual-card--wide {

        height:420px;

        border-radius:20px;

    }



    .concept-card {

        border-radius:24px;

    }



    .concept-card--top {

        min-height:500px;

    }



    .concept-card--bottom {

        min-height:500px;

    }



    .concept-card__title {

        font-size:42px;

    }



    .concept-card__body {

        font-size:20px;

    }



    .ui-section__showcase {

        width:100%;

        margin-left:0;

    }



}



/* ==========================================================
   ACCESSIBILITY / PERFORMANCE
========================================================== */



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


    *,
    *::before,
    *::after {

        animation:none!important;

        transition:none!important;

        scroll-behavior:auto!important;

    }


}

/* ==========================================================
   GSAP INITIAL STATES
========================================================== */

/* will-change не нужен здесь как постоянный стиль —
   GSAP управляет им автоматически через gsap.set() во время анимации */

/* Скрываем заголовки до split — предотвращает мигание */
h1, h2, h3, .hero-label {
    opacity: 0;
}

[data-split="true"] {
    opacity: 1;
}

.truco-page {
    width: 100%;
    min-height: 100vh;
    background: var(--page-bg-section);
    overflow: hidden;
}