/* v15 — continuous motion, real social covers, client ribbon and dog characters */

/* Vinyl: the disc stays dimensional while the label copy rotates inside it. */
.hero:after{content:none}
.hero-orbit{
  isolation:isolate;
  display:grid;
  place-items:center;
  width:430px;
  height:430px;
  right:-112px;
  background:
    radial-gradient(circle at 50% 50%,transparent 0 19%,#0e0e0e 19.3% 20%,transparent 20.4% 25%,#242424 25.4% 26%,transparent 26.4% 33%,#080808 33.4% 34%,transparent 34.4% 43%,#252525 43.4% 44%,transparent 44.4% 49%),
    repeating-radial-gradient(circle at center,#151515 0 3px,#202020 4px 6px,#0d0d0d 7px 10px);
  border:7px solid #111;
  box-shadow:0 34px 70px #5d0a0e88,inset 0 0 0 2px #fff1;
  opacity:1;
  animation:vinylHover 6s ease-in-out infinite;
}
.hero-orbit:before{
  content:"";
  position:absolute;
  inset:4%;
  z-index:0;
  border-radius:50%;
  background:conic-gradient(from 20deg,transparent 0 14%,#fff2 18%,transparent 24% 68%,#fff1 72%,transparent 80%);
  mix-blend-mode:screen;
}
.hero-orbit:after{
  content:"";
  position:absolute;
  width:12px;
  height:12px;
  left:50%;
  top:50%;
  z-index:3;
  border-radius:50%;
  background:var(--cream);
  box-shadow:0 0 0 4px var(--black);
  transform:translate(-50%,-50%);
}
.vinyl-label{position:relative;z-index:2;width:49%;height:49%;overflow:visible;animation:vinylSpin 14s linear infinite}
.vinyl-label>circle:first-of-type{fill:var(--red);stroke:var(--cream);stroke-width:2}
.vinyl-label text{fill:var(--cream);font:700 10px var(--body);letter-spacing:2.4px}
.vinyl-label .vinyl-logo{font:48px var(--anton);letter-spacing:-2px}
.vinyl-label .vinyl-hole{fill:var(--black)}
@keyframes vinylSpin{to{transform:rotate(360deg)}}
@keyframes vinylHover{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-16px) rotate(2deg)}}

/* Hover in section two must never alter the line box or push the copy down. */
.statement .mega em,.statement .mega em:hover{padding-inline:0}
.statement .mega em:hover{color:var(--red);background:transparent;transform:translateY(-4px) rotate(-1deg) scale(1.025);text-shadow:0 0 12px #c1272d99,0 0 32px #c1272d55,0 0 70px #c1272d2e}
.method-stickers .sticker-eye{animation-duration:5.3s}

/* Moving client portrait ribbon, placed between methodology and the system. */
.brand-marquee{padding:58px 0 48px;overflow:hidden;border-top:1px solid #14141426;border-bottom:1px solid #14141426;scroll-margin-top:76px}
.brand-marquee-head{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:0 5vw 36px}
.brand-marquee-head p{margin:0}.brand-marquee-head>span{font:clamp(25px,3vw,46px)/1 var(--script);color:var(--red);transform:rotate(-2deg)}
.brand-window{overflow:hidden}
.brand-track{display:flex;width:max-content;animation:brandRiver 31s linear infinite;will-change:transform}
.brand-group{display:flex;flex:none;align-items:center;gap:clamp(32px,4vw,72px);padding-right:clamp(32px,4vw,72px)}
.brand-group figure{position:relative;width:clamp(150px,14vw,220px);margin:0;text-align:center;flex:none}
.brand-group figure:nth-child(even){transform:translateY(12px)}
.brand-group img{width:clamp(115px,11vw,170px);height:clamp(115px,11vw,170px);margin:auto;object-fit:cover;border-radius:50%;border:7px solid var(--black);box-shadow:10px 10px 0 var(--red);transition:transform .35s,filter .35s;filter:saturate(.78)}
.brand-group figure:hover img{transform:scale(1.08) rotate(-3deg);filter:saturate(1.05)}
.brand-group figcaption{position:relative;display:inline-block;margin-top:17px;padding:7px 10px;background:var(--black);color:var(--cream);font:12px/1 var(--anton);letter-spacing:.08em;transform:rotate(-2deg)}
@keyframes brandRiver{to{transform:translateX(-50%)}}

/* Exact two-group ticker: no empty stretch after RESULTADOS. */
.system-line{padding-inline:0}
.system-line-track{display:flex;align-items:center;gap:0;width:max-content;padding-left:0;animation:systemTapeV7 18s linear infinite;will-change:transform}
.system-tape-group{display:flex;align-items:center;flex:none;gap:44px;padding-right:44px}
.system-tape-group i{font-style:normal;flex:none}
@keyframes systemTapeV7{to{transform:translateX(-33.333333%)}}

/* Results river: real local covers, large visit count, uninterrupted hover. */
.ig-marquee{padding-block:30px 72px}
.ig-track{animation-duration:118s;will-change:transform}
.ig-marquee:hover .ig-track{animation-play-state:running}
.cover-card{width:300px;height:535px;border-width:7px;border-radius:25px;box-shadow:0 20px 45px #14141430}
.cover-card>img{object-position:center}
.cover-card:after{height:56%;background:linear-gradient(transparent,#141414f5)}
.cover-card>div{left:18px;bottom:20px}
.cover-card>div strong{font-size:58px;text-shadow:0 3px 18px #0008}
.cover-card>div span{font-size:11px;letter-spacing:.24em;color:var(--cream)}
.cover-card>b{display:grid;place-items:center;width:39px;height:39px;right:17px;bottom:18px;border:1px solid #f8f8f2;border-radius:50%;font-size:18px;transition:background .3s,color .3s}
.cover-card:hover>b{background:var(--cream);color:var(--black)}
.cover-card:hover{transform:translateY(-12px) rotate(0) scale(1.025)!important}
.metric-note{font-size:14px;color:#1414149a}

/* Bowsi takes the camera's place and points into the process. */
.process-sticker.process-dog{width:210px;right:-4%;top:4%;transform:rotate(8deg);filter:drop-shadow(13px 20px 15px #5c0c0f77);animation:dogPoint 4.3s ease-in-out infinite}
@keyframes dogPoint{0%,100%{transform:translateY(0) rotate(8deg)}50%{transform:translateY(-13px) rotate(4deg)}}

/* Case studies feel like editorial chapters, not a flat list. */
.client-slide{isolation:isolate}
.client-slide:after{content:attr(data-sector);position:absolute;z-index:-1;left:2vw;bottom:-.15em;color:transparent;-webkit-text-stroke:1px #c1272d1f;font:clamp(105px,17vw,275px)/.75 var(--anton);white-space:nowrap;transform:rotate(-3deg);pointer-events:none}
.client-slide:nth-child(even):after{left:auto;right:-3vw;transform:rotate(3deg)}
.client-copy h3{position:relative}
.client-copy h3:after{content:"↘";display:inline-block;margin-left:.16em;color:var(--red);font-size:.48em;vertical-align:top;transform:rotate(-12deg)}
.client-copy dl div{overflow:hidden}
.client-copy dl div:after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 36%,#fff3 48%,transparent 60%);transform:translateX(-120%);transition:transform .7s;pointer-events:none}
.client-copy dl div:hover:after{transform:translateX(120%)}
.client-shot img{clip-path:polygon(4% 0,96% 2%,100% 96%,7% 100%);border-radius:24px;transform:rotate(1.5deg)}
.client-slide:nth-child(even) .client-shot img{transform:rotate(-1.5deg)}
.client-slide.in-view .client-shot img{animation:caseArrival .9s .12s both cubic-bezier(.2,.8,.2,1)}
@keyframes caseArrival{from{clip-path:polygon(48% 0,52% 0,52% 100%,48% 100%);filter:grayscale(1)}to{clip-path:polygon(4% 0,96% 2%,100% 96%,7% 100%);filter:grayscale(0)}}

/* Mario joins the team section, away from the opening three sections. */
.about-copy{position:relative}
.about-mario{position:absolute;width:170px;right:-3vw;bottom:-45px;z-index:4;filter:drop-shadow(13px 18px 13px #14141440);transform:rotate(7deg);animation:marioHello 4.8s ease-in-out infinite}
@keyframes marioHello{0%,100%{transform:translateY(0) rotate(7deg)}50%{transform:translateY(-12px) rotate(2deg)}}

/* The closer becomes a moving editorial collage, not three parked stickers. */
.footer{min-height:112vh;padding-top:145px;isolation:isolate;background:linear-gradient(165deg,#c1272d 0 68%,#141414 68% 100%)}
.footer>*:not(.footer-scene){z-index:5}
.footer-scene{overflow:hidden}
.footer-scene:before{width:620px;height:620px;left:-250px;top:-190px;box-shadow:none;background:var(--cream);opacity:.08}
.footer-scene:after{width:500px;height:500px;right:-110px;bottom:-170px;box-shadow:none;background:var(--black);opacity:.32}
.footer-paper{position:absolute;border:2px solid var(--cream);opacity:.25}
.footer-paper-a{width:42vw;height:54vh;left:-7vw;top:13%;transform:rotate(13deg);background:#f8f8f210}
.footer-paper-b{width:36vw;height:48vh;right:-5vw;top:6%;transform:rotate(-11deg);background:#14141418}
.footer-orbit{position:absolute;width:410px;height:410px;right:-100px;top:6%;display:grid;place-items:center;border:1px solid #f8f8f255;border-radius:50%;font:13px var(--anton);letter-spacing:.26em;color:#f8f8f299;animation:vinylSpin 28s linear infinite}
.footer-orbit:before,.footer-orbit:after{content:"";position:absolute;border:1px solid #f8f8f228;border-radius:50%;inset:55px}.footer-orbit:after{inset:115px}
.footer-people{position:absolute;width:min(47vw,720px);right:-2vw;bottom:-10%;opacity:.31;filter:grayscale(1) contrast(1.35) drop-shadow(-25px 10px 0 #141414);transform:translate3d(0,var(--footer-shift,0),0) rotate(2deg);transition:transform .08s linear}
.footer-bowsi,.footer-mario{position:absolute;z-index:3;filter:drop-shadow(14px 20px 15px #5c0c0f99)}
.footer-bowsi{width:clamp(145px,17vw,260px);left:3vw;bottom:10%;animation:footerDogA 5s ease-in-out infinite}
.footer-mario{width:clamp(120px,14vw,210px);right:3vw;bottom:5%;animation:footerDogB 5.6s -2s ease-in-out infinite}
.footer-note{position:absolute;left:6vw;top:19%;padding:16px 19px;background:var(--cream);color:var(--black);box-shadow:10px 10px 0 var(--black);font:clamp(15px,1.5vw,23px)/.95 var(--anton);letter-spacing:.05em;transform:rotate(-7deg);animation:noteFloat 4.7s ease-in-out infinite}
@keyframes footerDogA{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-18px) rotate(-3deg)}}
@keyframes footerDogB{0%,100%{transform:translateY(0) rotate(7deg)}50%{transform:translateY(-14px) rotate(2deg)}}
@keyframes noteFloat{0%,100%{transform:translateY(0) rotate(-7deg)}50%{transform:translateY(-12px) rotate(-4deg)}}
.footer>.script{text-shadow:0 0 16px #f8f8f277,0 0 42px #f8f8f244}
.footer h2{max-width:1320px;margin-inline:auto;text-shadow:0 8px 35px #650d1166}
.footer .pill{background:#14141426;backdrop-filter:blur(5px)}
.footer .pill:hover{background:var(--cream)}
.footer-bottom{width:100%;color:var(--cream)}

@media(max-width:900px){
  .hero-orbit{width:310px;height:310px;right:-175px}
  .brand-marquee-head{align-items:flex-start;flex-direction:column}.brand-marquee-head>span{font-size:32px}
  .brand-group figure{width:160px}.brand-group img{width:125px;height:125px}
  .process-sticker.process-dog{width:155px;right:0;top:0}
  .about-mario{width:125px;right:0;bottom:-80px}
  .footer-people{width:72vw;right:-18vw;opacity:.23}.footer-note{left:3vw;top:14%}
}

@media(max-width:560px){
  .hero-orbit{display:grid;width:230px;height:230px;right:-148px;top:23%}.vinyl-label{width:53%;height:53%}.vinyl-label .vinyl-logo{font-size:42px}
  .brand-marquee{padding-block:44px 38px}.brand-marquee-head{padding-inline:22px}.brand-marquee-head>span{font-size:26px}
  .brand-group{gap:28px;padding-right:28px}.brand-group figure{width:135px}.brand-group img{width:108px;height:108px;border-width:5px;box-shadow:7px 7px 0 var(--red)}.brand-group figcaption{font-size:10px}
  .system-tape-group{gap:28px;padding-right:28px}
  .cover-card{width:265px;height:478px}.cover-card>div strong{font-size:50px}
  .process-sticker.process-dog{width:120px;right:-14px;top:7%}
  .client-slide:after{font-size:31vw;bottom:2%}.client-copy h3:after{font-size:.36em}
  .about-mario{width:104px;right:-8px;bottom:-72px}
  .footer{min-height:100svh;padding-top:115px;background:linear-gradient(165deg,#c1272d 0 76%,#141414 76%)}
  .footer-people{width:105vw;right:-39vw;bottom:4%;opacity:.18}.footer-bowsi{width:130px;left:-22px;bottom:12%}.footer-mario{width:112px;right:-18px;bottom:6%}
  .footer-note{left:15px;top:4%;font-size:14px;padding:11px 13px}.footer-orbit{width:250px;height:250px;right:-125px;top:0;font-size:9px}
  .footer h2{font-size:16vw}.footer>.script{font-size:50px}
}

@media(prefers-reduced-motion:reduce){.hero-orbit,.vinyl-label,.brand-track,.system-line-track,.process-sticker.process-dog,.about-mario,.footer-orbit,.footer-bowsi,.footer-mario,.footer-note{animation:none}}