/* ==========================================================
   VISUALATIN MOTION LAYER V3
   ========================================================== */

body{
    overflow-x:hidden;
}

header{
    transition:
        padding .35s ease,
        background .35s ease,
        backdrop-filter .35s ease;
}

header.scrolled{
    padding:17px 0;
    background:rgba(9,9,9,.55);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    mix-blend-mode:normal;
}

/* HERO VIDEO */

.hero{
    position:relative;
    overflow:hidden;
    isolation:isolate;
}

.hero-media{
    position:absolute;
    inset:0;
    z-index:-3;
    overflow:hidden;
}

.hero-media video{
    width:100%;
    height:100%;
    object-fit:cover;
    transform:scale(1.06);
    filter:saturate(.55) contrast(1.12) brightness(.55);
}

.hero-media:after{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            180deg,
            rgba(9,9,9,.20) 0%,
            rgba(9,9,9,.40) 38%,
            rgba(9,9,9,.92) 100%
        );
}

.hero h1,
.hero .eyebrow,
.hero-bottom{
    position:relative;
    z-index:2;
}

.hero h1{
    text-shadow:0 1px 20px rgba(0,0,0,.10);
}

/* REVEALS */

[data-reveal]{
    opacity:0;
    transform:translateY(48px);
    transition:
        opacity .85s cubic-bezier(.2,.7,.2,1),
        transform .85s cubic-bezier(.2,.7,.2,1);
}

[data-reveal].is-visible{
    opacity:1;
    transform:none;
}

[data-reveal="slow"]{
    transition-duration:1.15s;
}

/* PROJECT MEDIA */

.project{
    isolation:isolate;
    background:#111;
}

.project-media{
    position:absolute;
    inset:0;
    z-index:-2;
    overflow:hidden;
}

.project-media img,
.project-media video{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:
        transform 1.25s cubic-bezier(.2,.7,.2,1),
        filter .8s ease;
}

.project:after{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.16),
            rgba(0,0,0,.12) 40%,
            rgba(0,0,0,.72)
        );
}

.project{
    color:#fff !important;
}

.project:hover .project-media img,
.project:hover .project-media video{
    transform:scale(1.055);
}

.project:hover .project-media img{
    filter:saturate(1.08);
}

.project-no,
.project-copy{
    position:relative;
    z-index:3;
}

/* LARGE VISUAL BREAK */

.visual-break{
    min-height:85vh;
    position:relative;
    overflow:hidden;
    background:#111;
}

.visual-break img{
    position:absolute;
    inset:-8%;
    width:116%;
    height:116%;
    object-fit:cover;
    filter:saturate(.62) contrast(1.08);
    will-change:transform;
}

.visual-break:after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        180deg,
        rgba(0,0,0,.06),
        rgba(0,0,0,.30)
    );
}

.visual-break-copy{
    position:absolute;
    left:3vw;
    right:3vw;
    bottom:4vw;
    z-index:2;
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    color:white;
}

.visual-break-copy span{
    font-size:12px;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.visual-break-copy strong{
    max-width:740px;
    font-size:clamp(45px,6vw,105px);
    line-height:.9;
    letter-spacing:-.06em;
    font-weight:500;
}

/* MOTION STRIP */

.motion-strip{
    position:relative;
    min-height:72vh;
    overflow:hidden;
    background:#000;
}

.motion-strip video{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    filter:saturate(.5) contrast(1.16) brightness(.72);
}

.motion-strip:after{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.55),
            rgba(0,0,0,.08) 60%,
            rgba(0,0,0,.20)
        );
}

.motion-copy{
    position:relative;
    z-index:2;
    min-height:72vh;
    display:flex;
    align-items:flex-end;
    padding:80px 0;
}

.motion-copy h2{
    max-width:960px;
    font-size:clamp(52px,7vw,120px);
    line-height:.88;
    letter-spacing:-.065em;
    font-weight:500;
}

/* CURSOR-LIKE HOVER FEEL */

.arrow,
.contact-link{
    transition:
        opacity .3s ease,
        transform .3s ease;
}

.arrow:hover{
    transform:translateY(5px);
}

.contact-link:hover{
    opacity:.65;
}

/* ABOUT IMAGE DETAIL */

.about-visual{
    margin-top:100px;
    width:100%;
    height:min(65vw,780px);
    overflow:hidden;
}

.about-visual img{
    width:100%;
    height:115%;
    object-fit:cover;
    filter:saturate(.65);
    will-change:transform;
}

/* MOBILE */

@media(max-width:800px){

    .hero-media video{
        transform:scale(1.12);
    }

    .visual-break{
        min-height:68vh;
    }

    .visual-break-copy{
        flex-direction:column;
        align-items:flex-start;
        gap:20px;
        bottom:28px;
    }

    .motion-strip,
    .motion-copy{
        min-height:65vh;
    }

    .motion-copy{
        padding:45px 0;
    }

    .about-visual{
        height:90vw;
        margin-top:60px;
    }
}

/* ACCESSIBILITY */

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

    html{
        scroll-behavior:auto;
    }

    *,
    *:before,
    *:after{
        transition-duration:.01ms !important;
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
    }

    [data-reveal]{
        opacity:1;
        transform:none;
    }
}


/* ==========================================================
   VISUALATIN · SHOWREEL HERO V4
   ========================================================== */

.hero{
    min-height:100svh;
    position:relative;
    overflow:hidden;
    background:#050505;
}

.hero-showreel{
    position:absolute;
    inset:0;
    overflow:hidden;
    z-index:-3;
    background:#050505;
}

/*
   Vimeo iframe behaves like object-fit: cover.
   Oversizing avoids black bars across desktop ratios.
*/

.hero-showreel iframe{
    position:absolute;
    top:50%;
    left:50%;

    width:177.77777778vh;
    min-width:100%;
    height:56.25vw;
    min-height:100%;

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

    pointer-events:none;
}

/* cinematic treatment */

.hero-showreel:before{
    content:"";
    position:absolute;
    inset:0;
    z-index:2;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.44) 0%,
            rgba(0,0,0,.18) 47%,
            rgba(0,0,0,.10) 100%
        );

    pointer-events:none;
}

.hero-showreel:after{
    content:"";
    position:absolute;
    inset:0;
    z-index:3;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.18) 0%,
            rgba(0,0,0,.02) 40%,
            rgba(0,0,0,.68) 100%
        );

    pointer-events:none;
}

/* Hero copy */

.hero-inner{
    position:relative;
    z-index:10;
}

.hero h1{
    color:#fff;
}

.hero .eyebrow{
    color:rgba(255,255,255,.78);
}

.hero-bottom{
    border-color:rgba(255,255,255,.38);
}

.hero-bottom p{
    color:#fff;
}


/* tiny showreel indicator */

.showreel-tag{
    position:absolute;

    right:3vw;
    top:110px;

    z-index:20;

    display:flex;
    align-items:center;
    gap:9px;

    font-size:10px;
    letter-spacing:.13em;
    text-transform:uppercase;

    color:rgba(255,255,255,.75);
}

.showreel-dot{
    width:7px;
    height:7px;
    border-radius:50%;
    background:#fff;

    animation:visualatinPulse 1.8s ease-in-out infinite;
}

@keyframes visualatinPulse{

    0%,100%{
        opacity:.35;
        transform:scale(.75);
    }

    50%{
        opacity:1;
        transform:scale(1);
    }
}


@media(max-width:800px){

    .hero-showreel iframe{
        width:177.77777778vh;
        min-width:100%;
        height:56.25vw;
        min-height:100%;
        transform:translate(-50%,-50%) scale(1.08);
    }

    .showreel-tag{
        top:80px;
        right:4vw;
    }

}


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

    .showreel-dot{
        animation:none;
    }

}


/* ==========================================================
   VISUALATIN · HERO SCROLL TRANSITION V6
   fullscreen → framed showreel → work
   ========================================================== */

.hero{
    --hero-progress:0;

    /*
       Gives us scroll distance while the visual remains
       pinned to the viewport.
    */
    height:155vh;
    min-height:155vh;

    position:relative;
    overflow:visible;

    background:#090909;

    /*
       Override original flex hero behavior.
    */
    display:block;
    padding:0;
}


/* ----------------------------------------------------------
   SHOWREEL
   Starts EXACTLY fullscreen.
   ---------------------------------------------------------- */

.hero .hero-media{
    position:sticky;
    top:0;

    width:100%;
    height:100vh;

    inset:auto;

    z-index:0;

    overflow:hidden;

    transform-origin:center center;

    /*
       progress 0:
       translate 0
       scale 1

       progress 1:
       slightly smaller, centered inside black canvas
    */
    transform:
        translate3d(
            0,
            calc(var(--hero-progress) * 2.2vh),
            0
        )
        scale(
            calc(1 - (var(--hero-progress) * .105))
        );

    border-radius:
        calc(var(--hero-progress) * 30px);

    will-change:transform,border-radius;
}


/*
   Important:
   iframe keeps covering the full video frame.
*/

.hero .hero-showreel iframe{
    position:absolute;

    top:50%;
    left:50%;

    width:177.77777778vh;
    min-width:100%;

    height:56.25vw;
    min-height:100%;

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

    pointer-events:none;
}


/* ----------------------------------------------------------
   HERO COPY

   Absolute overlay restores the original V4 composition.
   It does NOT participate in layout, so it cannot push
   the headline down.
   ---------------------------------------------------------- */

.hero .hero-inner{
    position:absolute;

    top:0;
    left:50%;

    width:min(94vw,1600px);
    height:100vh;

    transform:
        translate3d(
            -50%,
            calc(var(--hero-progress) * -4vh),
            0
        );

    display:flex;
    flex-direction:column;

    /*
       This gives us deliberate positioning instead of
       throwing everything against the bottom edge.
    */
    justify-content:center;

    padding-top:13vh;
    padding-bottom:5vh;

    z-index:10;

    opacity:
        calc(1 - (var(--hero-progress) * 1.18));

    pointer-events:none;

    will-change:transform,opacity;
}


/*
   Re-enable links inside hero.
*/

.hero .hero-inner a{
    pointer-events:auto;
}


/*
   Bring headline slightly higher than the problematic V5.
*/

.hero .eyebrow{
    margin-bottom:28px;
}


.hero h1{
    margin:0;

    /*
       Same visual scale as the starter,
       but capped slightly so the 3 Spanish lines breathe.
    */
    font-size:clamp(72px,9.6vw,172px);

    line-height:.84;
}


/*
   Keep supporting copy below headline instead of
   pinning whole composition to bottom of viewport.
*/

.hero .hero-bottom{
    margin-top:46px;
    padding-top:22px;
}


/* ----------------------------------------------------------
   SHOWREEL TAG
   ---------------------------------------------------------- */

.hero .showreel-tag{
    position:absolute;

    top:110px;
    right:3vw;

    z-index:20;

    opacity:
        calc(1 - (var(--hero-progress) * 1.35));

    transform:
        translateY(
            calc(var(--hero-progress) * -15px)
        );

    will-change:opacity,transform;
}


/* ----------------------------------------------------------
   BLACK FRAME
   Because video scales down over the black hero canvas,
   the black margin appears naturally.
   ---------------------------------------------------------- */

.hero:after{
    content:"";

    position:absolute;
    inset:0;

    z-index:-1;

    background:#090909;

    pointer-events:none;
}


/* ----------------------------------------------------------
   WORK HANDOFF
   ---------------------------------------------------------- */

.work{
    position:relative;
    z-index:5;

    /*
       Pull it upward into the final framed-video moment.
    */
    margin-top:-9vh;

    border-radius:30px 30px 0 0;

    overflow:hidden;
}


/*
   No forced opacity on first project.
   It should already exist naturally as Work enters.
*/

.projects .project:first-child{
    opacity:1;
    transform:none;
}


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

@media(max-width:800px){

    .hero{
        height:140vh;
        min-height:140vh;
    }

    .hero .hero-inner{
        width:92vw;

        justify-content:center;

        padding-top:10vh;
        padding-bottom:4vh;
    }

    .hero h1{
        font-size:16vw;
        line-height:.86;
    }

    .hero .hero-bottom{
        margin-top:34px;
    }

    .hero .hero-media{
        transform:
            translate3d(
                0,
                calc(var(--hero-progress) * 1.5vh),
                0
            )
            scale(
                calc(1 - (var(--hero-progress) * .065))
            );

        border-radius:
            calc(var(--hero-progress) * 20px);
    }

    .hero .showreel-tag{
        top:78px;
        right:4vw;
    }

    .work{
        margin-top:-5vh;
        border-radius:20px 20px 0 0;
    }
}


/* ----------------------------------------------------------
   REDUCED MOTION
   ---------------------------------------------------------- */

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

    .hero{
        height:100vh;
        min-height:100vh;
    }

    .hero .hero-media{
        position:absolute;
        top:0;

        transform:none !important;
        border-radius:0 !important;
    }

    .hero .hero-inner,
    .hero .showreel-tag{
        opacity:1 !important;
    }

    .hero .hero-inner{
        transform:translateX(-50%) !important;
    }

    .work{
        margin-top:0;
        border-radius:0;
    }
}

/* ==========================================================
   VISUALATIN · HOME POLISH V7
   ========================================================== */

/* ----------------------------------------------------------
   SECTION ENTRY
   ---------------------------------------------------------- */

.section-label,
.section-head h2,
.cap,
.about-copy,
.about-meta,
.contact h2,
.contact-link{
    transition:
        opacity .8s cubic-bezier(.2,.7,.2,1),
        transform .8s cubic-bezier(.2,.7,.2,1);
}

.v7-hidden{
    opacity:0;
    transform:translateY(34px);
}

.v7-visible{
    opacity:1;
    transform:none;
}


/* ----------------------------------------------------------
   WORK ENTRY
   ---------------------------------------------------------- */

.work{
    transition:
        transform .9s cubic-bezier(.2,.7,.2,1),
        opacity .9s cubic-bezier(.2,.7,.2,1);
}

.work.v7-work-hidden{
    opacity:.82;
    transform:translateY(28px);
}

.work.v7-work-visible{
    opacity:1;
    transform:none;
}


/* ----------------------------------------------------------
   PROJECT CARDS
   ---------------------------------------------------------- */

.project{
    transition:
        transform .65s cubic-bezier(.2,.7,.2,1),
        box-shadow .65s cubic-bezier(.2,.7,.2,1);
}

.project:hover{
    transform:translateY(-8px);
    box-shadow:0 28px 60px rgba(0,0,0,.14);
}

.project:after{
    transition:background .6s ease;
}

.project:hover:after{
    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.08),
            rgba(0,0,0,.10) 40%,
            rgba(0,0,0,.58)
        );
}

.project-copy{
    transition:
        transform .65s cubic-bezier(.2,.7,.2,1);
}

.project:hover .project-copy{
    transform:translateY(-6px);
}

.project-no{
    transition:
        opacity .45s ease,
        letter-spacing .45s ease;
}

.project:hover .project-no{
    opacity:.75;
    letter-spacing:.04em;
}


/* ----------------------------------------------------------
   CAPABILITIES
   ---------------------------------------------------------- */

.cap{
    transition:
        opacity .8s cubic-bezier(.2,.7,.2,1),
        transform .8s cubic-bezier(.2,.7,.2,1),
        padding-left .45s ease;
}

.cap:hover{
    padding-left:12px;
}


/* ----------------------------------------------------------
   CONTACT
   ---------------------------------------------------------- */

.contact-link span:last-child{
    transition:transform .35s ease;
}

.contact-link:hover span:last-child{
    transform:translate(5px,-5px);
}


/* ----------------------------------------------------------
   SUBTLE PAGE RHYTHM
   ---------------------------------------------------------- */

.statement h2,
.process h2{
    transition:
        letter-spacing .5s ease,
        transform .5s ease;
}

.statement:hover h2,
.process:hover h2{
    letter-spacing:-.06em;
}


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

@media(max-width:800px){

    .project:hover{
        transform:none;
        box-shadow:none;
    }

    .cap:hover{
        padding-left:0;
    }

}


/* ----------------------------------------------------------
   REDUCED MOTION
   ---------------------------------------------------------- */

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

    .v7-hidden,
    .v7-work-hidden{
        opacity:1 !important;
        transform:none !important;
    }

    .project,
    .project-copy,
    .cap,
    .contact-link span:last-child{
        transition:none !important;
    }

}


/* ==========================================================
   VISUALATIN · REAL CASES V8
   ========================================================== */

.project-afs .project-media img{
    object-position:center center;
}

.project-mma .project-media video{
    object-position:center center;
}

.project-rfp .project-media img{
    object-position:center center;
}

/*
   Give each project its own visual character.
*/

.project-afs:after{
    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.12),
            rgba(0,0,0,.10) 45%,
            rgba(0,0,0,.68)
        );
}

.project-mma:after{
    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.12),
            rgba(0,0,0,.20) 40%,
            rgba(0,0,0,.78)
        );
}

.project-rfp:after{
    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.05),
            rgba(0,0,0,.12) 45%,
            rgba(0,0,0,.66)
        );
}


/*
       Same lower-half framing as the case-study hero.
    */
    object-position:center 100%;

    transform:scale(1.16);
    transform-origin:center bottom;

    transition:
        transform 1.25s cubic-bezier(.2,.7,.2,1);
}

.project-rfp:hover .rfp-card-video{
    transform:scale(1.21);
}

@media(max-width:800px){

    .project-rfp .rfp-card-video{
        object-position:center 100%;
        transform:scale(1.24);
    }

}




/* ==========================================================
   VISUALATIN · RFP-08 HOME CARD
   ========================================================== */

.project-rfp .project-media{
    overflow:hidden;
}

.project-rfp .rfp-card-video{
    display:block;

    width:100%;
    height:100%;

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

    transform:none;

    transition:
        transform 1.2s cubic-bezier(.2,.7,.2,1);
}

.project-rfp:hover .rfp-card-video{
    transform:scale(1.025);
}


/* ==========================================================
   VISUALATIN · HERO H1 SAFE MARGIN
   ========================================================== */

.hero h1{
    padding-left:2.5vw;
    padding-right:2.5vw;
}

.hero .eyebrow{
    padding-left:2.5vw;
    padding-right:2.5vw;
}

.hero .hero-bottom{
    margin-left:2.5vw;
    margin-right:2.5vw;
}

@media(max-width:800px){

    .hero h1,
    .hero .eyebrow{
        padding-left:4vw;
        padding-right:4vw;
    }

    .hero .hero-bottom{
        margin-left:4vw;
        margin-right:4vw;
    }
}

/* ==========================================================
   VISUALATIN · LOCAL MAIN SHOWREEL V0
   ========================================================== */

.hero-showreel .visualatin-main-showreel{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

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

    transform:scale(1.025);

    pointer-events:none;
}

/*
   The existing hero-media container continues to handle
   fullscreen → framed scroll behavior.
*/

@media(max-width:800px){

    .hero-showreel .visualatin-main-showreel{
        object-position:center center;
        transform:scale(1.04);
    }

}