/* Our Clients page - extra effects (loaded only on /our-clients/) */

/* ---- scroll reveal (only active when clients.js adds .cl-js) ---- */
.cl-js .clv:not(.clin){opacity:0}
.clin{animation:clrise .75s cubic-bezier(.2,.7,.2,1) var(--d,0ms) backwards}
@keyframes clrise{from{opacity:0;transform:translateY(28px) scale(.97)}to{opacity:1;transform:none}}

/* ---- animated heading underline ---- */
.cl-sec>h2:after,.cl-dark h2:after{content:"";display:block;width:64px;height:4px;border-radius:4px;margin-top:12px;background:var(--grad);transform-origin:left}
.cl-dark h2:after{background:linear-gradient(90deg,#55c8ff,#fff)}
.cl-js .clv:not(.clin):after{transform:scaleX(0)}
.clin:after{animation:clbar .8s .25s cubic-bezier(.2,.7,.2,1) backwards}
@keyframes clbar{from{transform:scaleX(0)}}

/* ---- banner pills ---- */
.cl-pills{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:22px 0 0;padding:0}
.cl-pills li{font:600 13px Sora,sans-serif;color:var(--brand);background:var(--surface);border:1px solid var(--line);padding:7px 14px;border-radius:999px;box-shadow:0 4px 12px rgba(0,68,127,.08);animation:clpill .6s calc(var(--k,0)*90ms + .25s) cubic-bezier(.2,.7,.2,1) backwards;transition:transform .2s,box-shadow .2s,border-color .2s}
.cl-pills li:hover{transform:translateY(-3px);border-color:var(--brand);box-shadow:0 10px 20px rgba(0,68,127,.16)}
@keyframes clpill{from{opacity:0;transform:translateY(14px) scale(.9)}}

/* ---- dark brands section: aurora orbs + dot grid ---- */
.cl-dark .wrap{position:relative;z-index:1}
.cl-dark:before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.12) 1px,transparent 1.2px);background-size:26px 26px;-webkit-mask-image:linear-gradient(180deg,#000,transparent 90%);mask-image:linear-gradient(180deg,#000,transparent 90%);pointer-events:none}
.cl-orb{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;animation:clorb 16s ease-in-out infinite alternate}
.cl-orb.o1{width:340px;height:340px;left:-80px;top:-40px;background:rgba(85,200,255,.35)}
.cl-orb.o2{width:420px;height:420px;right:-120px;bottom:-140px;background:rgba(43,143,208,.45);animation-delay:-6s}
.cl-orb.o3{width:220px;height:220px;left:48%;top:30%;background:rgba(255,255,255,.12);animation-delay:-3s}
@keyframes clorb{to{transform:translate3d(60px,40px,0) scale(1.15)}}

/* ---- brand tiles: tilt, float, shine ---- */
.bt-btn{transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .18s ease-out}
.bt.in{animation:clfloat 7s ease-in-out calc(var(--i,0)*-.9s) infinite}
.bt:hover{animation-play-state:paused}
@keyframes clfloat{50%{translate:0 -7px}}
.bt-front:after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,color-mix(in srgb,var(--c1,#2b8fd0) 30%,transparent),transparent);transform:skewX(-20deg);opacity:0;pointer-events:none}
.bt.in .bt-front:after{animation:clshine 6s ease-in-out calc(var(--i,0)*.7s + 1s) infinite}
@keyframes clshine{0%{left:-60%;opacity:0}8%{opacity:1}24%,100%{left:130%;opacity:0}}

/* ---- industries: spotlight + accent bar ---- */
.ind{position:relative;overflow:hidden}
.ind:before{content:"";position:absolute;inset:0;background:radial-gradient(240px circle at var(--mx,50%) var(--my,0%),rgba(43,143,208,.18),transparent 70%);opacity:0;transition:opacity .3s;pointer-events:none}
.ind:hover:before{opacity:1}
.ind:after{content:"";position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--grad);transition:width .45s cubic-bezier(.2,.7,.2,1)}
.ind:hover:after{width:100%}
.ind>*{position:relative}

/* ---- testimonials: quote mark, spotlight, star pop ---- */
.qcard{position:relative;overflow:hidden;transition:transform .25s,box-shadow .25s}
.qcard:before{content:"";position:absolute;inset:0;background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),rgba(43,143,208,.14),transparent 70%);opacity:0;transition:opacity .3s;pointer-events:none}
.qcard:hover:before{opacity:1}
.qcard:after{content:"\201C";position:absolute;right:18px;top:-6px;font:700 110px/1 Sora,Georgia,serif;color:var(--brand);opacity:.08;pointer-events:none}
.qcard>*{position:relative}
.qcard:hover{box-shadow:0 18px 38px rgba(0,68,127,.16)}
.qcard.clin .qstars svg{animation:clpop .5s cubic-bezier(.2,.9,.3,1.3) backwards}
.qcard.clin .qstars svg:nth-child(1){animation-delay:calc(var(--d,0ms) + .30s)}
.qcard.clin .qstars svg:nth-child(2){animation-delay:calc(var(--d,0ms) + .40s)}
.qcard.clin .qstars svg:nth-child(3){animation-delay:calc(var(--d,0ms) + .50s)}
.qcard.clin .qstars svg:nth-child(4){animation-delay:calc(var(--d,0ms) + .60s)}
.qcard.clin .qstars svg:nth-child(5){animation-delay:calc(var(--d,0ms) + .70s)}
@keyframes clpop{from{opacity:0;transform:scale(0) rotate(-40deg)}}
.qcard .av{transition:transform .25s}
.qcard:hover .av{transform:scale(1.1) rotate(-6deg)}

/* ---- closing call-to-action: floating shapes + button shine ---- */
.cl .cta{position:relative;overflow:hidden;isolation:isolate}
.cl .cta:before,.cl .cta:after{content:"";position:absolute;border-radius:50%;z-index:-1;background:rgba(255,255,255,.14);animation:clorb 10s ease-in-out infinite alternate}
.cl .cta:before{width:220px;height:220px;right:-60px;top:-90px}
.cl .cta:after{width:140px;height:140px;left:30%;bottom:-70px;animation-delay:-4s}
.cl .cta .btn{position:relative;overflow:hidden;transition:transform .2s,box-shadow .2s}
.cl .cta .btn:after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(43,143,208,.35),transparent);transform:skewX(-20deg);animation:clshine 4.5s ease-in-out infinite}
.cl .cta .btn:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(0,0,0,.22)}

@media(prefers-reduced-motion:reduce){
  .cl-orb,.cl-pills li,.bt.in,.bt-front:after,.cl .cta:before,.cl .cta:after,.cl .cta .btn:after,.clin,.qcard.clin .qstars svg{animation:none!important}
  .bt-btn{transform:none!important}
}

/* ---- brand tiles v2: light glass cards so each client's own colours pop ---- */
.bt-front{
  color:var(--c2,#00447f);
  background:
    linear-gradient(90deg,var(--c1,#55c8ff),var(--c2,#2b8fd0)) top/100% 4px no-repeat,
    radial-gradient(150px circle at 100% 0,color-mix(in srgb,var(--c1,#55c8ff) 26%,transparent),transparent 70%),
    radial-gradient(130px circle at 0 100%,color-mix(in srgb,var(--c2,#2b8fd0) 16%,transparent),transparent 70%),
    linear-gradient(160deg,#fff,#f4f8fc);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 18px 36px -16px color-mix(in srgb,var(--c2,#00447f) 70%,transparent),0 2px 0 rgba(255,255,255,.9) inset;
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
.bt-front:before{background:radial-gradient(240px circle at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--c1,#55c8ff) 30%,transparent),transparent 65%)}
.bt-front svg{filter:drop-shadow(0 6px 10px color-mix(in srgb,var(--c2,#00447f) 22%,transparent))}
.bt:hover .bt-front svg{transform:scale(1.05)}
.bt-hint{color:color-mix(in srgb,var(--c2,#00447f) 60%,#fff);display:inline-flex;align-items:center;gap:7px}
.bt-hint:before{content:"";width:7px;height:7px;border-radius:50%;background:linear-gradient(135deg,var(--c1,#55c8ff),var(--c2,#2b8fd0));box-shadow:0 0 0 4px color-mix(in srgb,var(--c1,#55c8ff) 22%,transparent)}
.bt-back{
  background:radial-gradient(180px circle at 100% 0,rgba(255,255,255,.28),transparent 70%),linear-gradient(145deg,var(--c1,#55c8ff),var(--c2,#2b8fd0));
  color:#fff;border:1px solid rgba(255,255,255,.35);
  box-shadow:0 18px 36px -16px color-mix(in srgb,var(--c2,#00447f) 80%,transparent);
  text-shadow:0 1px 2px rgba(0,0,0,.18);
}
.bt-ind{opacity:.9}
.bt-chips i{background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.45);color:#fff}

/* ---- compact even grid: no oversized left tile ---- */
.bento{grid-template-columns:repeat(4,1fr);grid-auto-rows:170px;gap:14px}
.bt0,.bt5{grid-column:auto;grid-row:auto}
.bt0 .bt-front svg{width:min(100%,230px)}
.bt0 .bt-line{font-size:16px;max-width:none}
@media(max-width:900px){.bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px}.bt0 .bt-line{font-size:15px}}
@media(max-width:420px){.bt0 .bt-line{font-size:14px}}

/* ---- real client logos: 3x3 grid, one uniform logo box, no flip ---- */
.bento{grid-template-columns:repeat(3,1fr);grid-auto-rows:150px;gap:16px}
.bt .bt-in,.bt.flip .bt-in,.bt:hover .bt-in{transform:none!important}
.bt-btn{cursor:default}
.bt-logo{position:relative;display:block;width:min(100%,230px);height:72px;object-fit:contain;transition:transform .35s}
.bt:hover .bt-logo{transform:scale(1.06)}
@media(max-width:900px){.bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:130px}.bt:last-child{grid-column:span 2}.bt-logo{height:64px}}
@media(max-width:420px){.bento{gap:12px;grid-auto-rows:116px}.bt-face{padding:14px}.bt-logo{height:56px}}

/* logos are now uniform 480x160 canvases (3:1) */
.bt-logo{width:min(100%,255px);height:auto;aspect-ratio:3/1}
@media(max-width:900px){.bt-logo{width:min(100%,225px);height:auto}}
@media(max-width:420px){.bt-logo{width:min(100%,170px);height:auto}}

.bt-logo{width:min(100%,285px)}
@media(max-width:900px){.bt-logo{width:min(100%,250px)}}
@media(max-width:420px){.bt-logo{width:min(100%,175px)}}

/* white-artwork logo (Picsland Weddings): dark tile so the original white logo is visible */
.bt-dark .bt-front{
  color:#fff;
  background:
    linear-gradient(90deg,var(--c1,#4a4f66),var(--c2,#1b1d29)) top/100% 4px no-repeat,
    radial-gradient(150px circle at 100% 0,color-mix(in srgb,var(--c1,#4a4f66) 45%,transparent),transparent 70%),
    linear-gradient(160deg,#2b2f42,#14161f);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 18px 36px -16px rgba(20,22,31,.7),0 2px 0 rgba(255,255,255,.08) inset;
}

/* slightly smaller tiles and logos */
.bento{grid-auto-rows:124px;gap:14px}
.bt-logo{width:min(100%,238px)}
.bt-face{padding:14px}
@media(max-width:900px){.bento{grid-auto-rows:110px;gap:12px}.bt-logo{width:min(100%,210px)}}
@media(max-width:420px){.bento{grid-auto-rows:98px;gap:10px}.bt-face{padding:10px}.bt-logo{width:min(100%,148px)}}

/* logos a bit smaller inside the tiles */
.bt-logo{width:min(100%,200px)}
@media(max-width:900px){.bt-logo{width:min(100%,178px)}}
@media(max-width:420px){.bt-logo{width:min(100%,126px)}}