/* =========================================================
   LIFE MEDIA — OUR CLIENTS V3
   18 logos / 3 moving rows
   ========================================================= */

.clients-section{
    position:relative;
    min-height:720px;
    padding:110px 6% 105px;
    background:
        radial-gradient(circle at 78% 42%,rgba(255,0,125,.055),transparent 28%),
        radial-gradient(circle at 58% 65%,rgba(0,210,255,.045),transparent 25%),
        #050609;
    overflow:hidden;
}

.clients-section::before{
    content:"";
    position:absolute;
    width:720px;
    height:720px;
    left:45%;
    top:-40px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(255,8,125,.055),rgba(167,44,255,.02) 28%,transparent 68%);
    filter:blur(45px);
    pointer-events:none;
}

.clients-inner{
    position:relative;
    z-index:2;
    max-width:1500px;
    margin:0 auto;
    display:grid;
    grid-template-columns:.78fr 1.22fr;
    align-items:center;
    gap:80px;
    direction:ltr;
}

.clients-heading{
    direction:rtl;
    text-align:right;
    max-width:520px;
    opacity:0;
    transform:translateY(34px);
    transition:opacity .85s ease,transform 1s cubic-bezier(.2,.7,.2,1);
}

.clients-section.is-visible .clients-heading{
    opacity:1;
    transform:translateY(0);
}

.clients-eyebrow{
    position:relative;
    display:inline-block;
    margin-bottom:25px;
    padding-left:48px;
    color:rgba(255,255,255,.52);
    font-size:13px;
    font-weight:700;
    letter-spacing:.24em;
    direction:ltr;
}

.clients-eyebrow::before{
    content:"";
    position:absolute;
    left:0;
    top:50%;
    width:34px;
    height:2px;
    transform:translateY(-50%);
    background:#ff087d;
    box-shadow:0 0 12px rgba(255,8,125,.55);
}

.clients-heading h2{
    margin:0;
    color:#fff;
    font-size:clamp(44px,5vw,88px);
    line-height:1.2;
    font-weight:800;
    letter-spacing:-.045em;
}

.clients-heading h2 span{
    display:inline-block;
    margin-top:12px;
    color:#ff087d;
}

.clients-heading p{
    margin:30px 0 34px;
    max-width:470px;
    color:rgba(255,255,255,.46);
    font-size:15px;
    line-height:1.95;
}

.clients-cta{
    display:inline-flex;
    align-items:center;
    gap:18px;
    color:#fff;
    text-decoration:none;
    direction:ltr;
    font-size:12px;
    font-weight:800;
    letter-spacing:.13em;
}

.clients-cta i{
    width:48px;
    height:48px;
    display:grid;
    place-items:center;
    border:1px solid rgba(255,255,255,.25);
    border-radius:50%;
    font-style:normal;
    font-size:20px;
    transition:.35s ease;
}

.clients-cta:hover i{
    transform:rotate(45deg);
    background:#ff087d;
    border-color:#ff087d;
    box-shadow:0 0 25px rgba(255,8,125,.3);
}


/* =========================================================
   THREE ROW CLIENT MARQUEE
   ========================================================= */

.clients-showcase.clients-marquee{
    position:relative;
    min-height:500px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:22px;
    overflow:hidden;

    mask-image:linear-gradient(
        90deg,
        transparent 0%,
        #000 8%,
        #000 92%,
        transparent 100%
    );

    -webkit-mask-image:linear-gradient(
        90deg,
        transparent 0%,
        #000 8%,
        #000 92%,
        transparent 100%
    );

    opacity:0;
    transform:translateY(38px);
    transition:opacity .9s ease .12s,transform 1.05s cubic-bezier(.2,.7,.2,1) .12s;
}

.clients-section.is-visible .clients-showcase.clients-marquee{
    opacity:1;
    transform:translateY(0);
}

.clients-marquee-row{
    position:relative;
    width:100%;
    overflow:hidden;
    padding:4px 0;
}

.clients-track{
    display:flex;
    align-items:center;
    gap:18px;
    width:max-content;
    will-change:transform;
    animation:clientsLeft 32s linear infinite;
}

.clients-track-right{
    animation-name:clientsRight;
    animation-duration:37s;
}

.clients-track-slow{
    animation-duration:35s;
}

.clients-marquee-row:hover .clients-track{
    animation-play-state:paused;
}


/* =========================================================
   CLIENT CARD
   ========================================================= */

.clients-marquee .client-logo{
    position:relative;
    inset:auto;
    top:auto;
    right:auto;
    bottom:auto;
    left:auto;

    flex:0 0 165px;
    width:165px;
    height:98px;

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

    border:1px solid rgba(255,255,255,.10);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.035),
            rgba(255,255,255,.012)
        );

    backdrop-filter:blur(8px);

    opacity:.58;

    transform:translateY(0);

    transition:
        opacity .4s ease,
        transform .4s cubic-bezier(.2,.8,.2,1),
        border-color .4s ease,
        background .4s ease,
        box-shadow .4s ease;
}

.clients-marquee .client-logo img{
    display:block;
    width:60%;
    height:80%;
    max-width:none;
    max-height:none;
    object-fit:cover;

    filter:grayscale(1);
    opacity:.72;

    transition:
        filter .45s ease,
        opacity .45s ease,
        transform .45s ease;
}

.clients-marquee .client-logo:hover{
    opacity:1;
    border-color:rgba(255,8,125,.45);

    background: #fff;

    box-shadow:
        0 0 35px rgba(255,8,125,.13),
        inset 0 0 25px rgba(255,8,125,.025);

    transform:translateY(-7px) scale(1.035);
    z-index:5;
}

.clients-marquee .client-logo:hover img{
    filter:grayscale(0);
    opacity:1;
    transform:scale(1.06);
}


/* =========================================================
   FLOATING RHYTHM
   ========================================================= */

.clients-section.is-visible .clients-marquee-row:nth-child(1) .client-logo:nth-child(3n){
    animation:logoFloat 6s ease-in-out infinite;
}

.clients-section.is-visible .clients-marquee-row:nth-child(2) .client-logo:nth-child(3n+1){
    animation:logoFloat 7s ease-in-out -2s infinite;
}

.clients-section.is-visible .clients-marquee-row:nth-child(3) .client-logo:nth-child(3n+2){
    animation:logoFloat 6.7s ease-in-out -3s infinite;
}

@keyframes logoFloat{
    0%,100%{margin-top:0}
    50%{margin-top:-5px}
}


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

@keyframes clientsLeft{
    from{transform:translateX(0)}
    to{transform:translateX(-50%)}
}

@keyframes clientsRight{
    from{transform:translateX(-50%)}
    to{transform:translateX(0)}
}


/* Ambient color behind the moving logos */

.clients-marquee::before{
    content:"";
    position:absolute;
    width:75%;
    height:180px;
    left:12.5%;
    top:50%;
    transform:translateY(-50%);

    background:
        radial-gradient(
            ellipse,
            rgba(255,8,125,.065),
            transparent 64%
        );

    filter:blur(35px);
    pointer-events:none;
}


/* =========================================================
   END LINE
   ========================================================= */

.clients-bottom-line{
    position:absolute;
    left:6%;
    right:6%;
    bottom:0;
    height:1px;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,8,125,.35),
        rgba(255,255,255,.14),
        rgba(0,210,255,.35),
        transparent
    );
}


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

@media(max-width:900px){
    .clients-section{
        padding:85px 7% 80px;
    }

    .clients-inner{
        grid-template-columns:1fr;
        gap:45px;
    }

    .clients-showcase.clients-marquee{
        min-height:390px;
    }

    .clients-marquee .client-logo{
        flex-basis:145px;
        width:145px;
        height:88px;
    }
}

@media(max-width:600px){
    .clients-section{
        min-height:auto;
        padding:70px 6% 75px;
    }

    .clients-heading h2{
        font-size:clamp(46px,14vw,68px);
    }

    .clients-showcase.clients-marquee{
        min-height:300px;
        gap:13px;
    }

    .clients-track{
        gap:13px;
    }

    .clients-marquee .client-logo{
        flex-basis:115px;
        width:115px;
        height:70px;
    }

    .clients-marquee .client-logo img{
        max-width:68%;
        max-height:55%;
    }
}

@media(prefers-reduced-motion:reduce){
    .clients-track,
    .clients-marquee .client-logo{
        animation:none !important;
    }

    .clients-heading,
    .clients-showcase.clients-marquee,
    .clients-marquee .client-logo,
    .clients-cta i{
        transition:none;
    }
}


/* =========================================================
   CLIENTS → OUR WORK — LIVING TRANSITION
   Removes the dead black gap and creates a visual handoff.
   ========================================================= */

.clients-section {
    min-height: 0;
    padding-bottom: 28px;
}

/* Atmospheric light sitting directly above the boundary */
.clients-section::after {
    content: "";
    position: absolute;
    z-index: 0;
    left: 7%;
    right: 7%;
    bottom: -28px;
    height: 120px;
    pointer-events: none;

    background:
        radial-gradient(
            ellipse at 18% 55%,
            rgba(242,11,120,.18),
            transparent 31%
        ),
        radial-gradient(
            ellipse at 50% 48%,
            rgba(73,200,242,.12),
            transparent 34%
        ),
        radial-gradient(
            ellipse at 82% 55%,
            rgba(246,233,0,.065),
            transparent 27%
        );

    filter: blur(28px);
    opacity: .9;
}

/* Replace the static bottom line with a moving neon boundary */
.clients-bottom-line {
    z-index: 4;
    left: 5%;
    right: 5%;
    bottom: 0;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(242,11,120,.10) 10%,
            rgba(242,11,120,.82) 28%,
            rgba(73,200,242,.76) 50%,
            rgba(246,233,0,.52) 70%,
            transparent 90%
        );

    background-size: 180% 100%;
    animation: clientsWorkBoundaryFlow 7s linear infinite;

    box-shadow:
        0 0 8px rgba(242,11,120,.30),
        0 0 22px rgba(73,200,242,.16),
        0 0 42px rgba(246,233,0,.07);
}

@keyframes clientsWorkBoundaryFlow {
    0% {
        background-position: 100% 0;
        opacity: .55;
    }

    50% {
        background-position: 0% 0;
        opacity: 1;
    }

    100% {
        background-position: -100% 0;
        opacity: .55;
    }
}

/* Keep the transition tight on smaller screens */
@media (max-width: 900px) {
    .clients-section {
        padding-bottom: 24px;
    }

    .clients-section::after {
        left: 5%;
        right: 5%;
        bottom: -24px;
        height: 105px;
    }
}

@media (max-width: 600px) {
    .clients-section {
        padding-bottom: 20px;
    }

    .clients-section::after {
        bottom: -20px;
        height: 90px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .clients-bottom-line {
        animation: none !important;
    }
}


/* =========================================================
   OUR WORK → OUR CLIENTS — RECEIVING EDGE
   Clients is BELOW Work.
   ========================================================= */

.clients-section {
    margin-top: -1px;
    padding-top: 52px;
}

/* Soft light entering from the section above */
.clients-section::before {
    top: -48px;
    left: 7%;
    width: 86%;
    height: 125px;

    background:
        radial-gradient(
            ellipse at 18% 52%,
            rgba(242,11,120,.16),
            transparent 31%
        ),
        radial-gradient(
            ellipse at 50% 48%,
            rgba(73,200,242,.11),
            transparent 34%
        ),
        radial-gradient(
            ellipse at 82% 52%,
            rgba(246,233,0,.055),
            transparent 27%
        );

    filter: blur(30px);
    opacity: .85;
}

/* Do not create a second boundary at the bottom of Clients here */
.clients-bottom-line {
    bottom: 0;
}

@media (max-width: 900px) {
    .clients-section {
        padding-top: 42px;
    }
}

@media (max-width: 600px) {
    .clients-section {
        padding-top: 34px;
    }
}