/* Superfícies e camadas da direção cinética. */
.surface-grid{position:relative;isolation:isolate;overflow:clip;--grid-size:72px;--grid-line:8 8 8;--grid-opacity:.065;--glow-a:#ffb98540;--glow-b:#b5a3ff2e}
.surface-grid::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(rgb(var(--grid-line)/var(--grid-opacity)) 1px,transparent 1px),linear-gradient(90deg,rgb(var(--grid-line)/var(--grid-opacity)) 1px,transparent 1px),conic-gradient(from 90deg,rgb(var(--grid-line)/.025) 25%,transparent 0 50%,rgb(var(--grid-line)/.015) 0 75%,transparent 0);background-size:var(--grid-size) var(--grid-size),var(--grid-size) var(--grid-size),calc(var(--grid-size)*2) calc(var(--grid-size)*2);mask-image:linear-gradient(115deg,#000c,#0004 55%,#000b)}
.surface-glow{position:absolute;inset:-60px;z-index:-2;pointer-events:none;background:radial-gradient(ellipse at 90% 20%,var(--glow-a),transparent 60%),radial-gradient(ellipse at 8% 85%,var(--glow-b),transparent 58%)}
.hero-stage{background:#fffaf6;--grid-size:64px;--grid-opacity:.075;--glow-a:#ffad7359;--glow-b:#c2adff33}
.hero{grid-template-columns:1.12fr 1fr;padding-block:70px 32px;gap:28px;min-height:760px}
.hero-copy{position:relative;z-index:2;padding-block:0}
.hero h1{font-size:clamp(64px,7.7vw,111px);line-height:.98;letter-spacing:-.075em;margin-left:-5px}
.word-mask{display:block;overflow:hidden;padding:0 12px 12px 5px;margin-bottom:-6px}
.hero-word{display:block;transform-origin:0 100%}
.hero-kicker{margin-bottom:29px;font-size:14px;max-width:300px;line-height:1.5}
.hero-copy>.hero-description{font-size:18px;max-width:430px;margin-top:27px;color:#4e4b49}
.hero-actions{gap:18px;margin-top:28px;max-width:530px}
.hero-actions .button{border-radius:50px;padding:17px 25px;gap:16px}
.hero-art{height:620px;border-radius:180px 28px 100px 28px;background:radial-gradient(ellipse at 15% 15%,#ffce91,transparent 65%),linear-gradient(140deg,#ff8f42,#ff671d 60%,#f24d1c);overflow:hidden}
.hero-art:before,.hero-art:after{display:none}
.art-grid{position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(#08080815 1px,transparent 1px),linear-gradient(90deg,#08080815 1px,transparent 1px),conic-gradient(from 90deg,#fff1 25%,transparent 0 50%,#08080805 0 75%,transparent 0);background-size:60px 60px,60px 60px,120px 120px;mask-image:linear-gradient(#000c,#0004)}
.hero-orbit{position:absolute;width:86%;aspect-ratio:1;top:13%;left:7%;border:1px solid #08080865;border-radius:50%;pointer-events:none;z-index:1;transform:rotate(-18deg)}
.hero-orbit:after{content:'';position:absolute;inset:20px;border:1px dashed #08080838;border-radius:50%}
.orbit-spark{position:absolute;left:calc(50% - 40px);top:-45px;font:90px/1 DM;color:#080808}
.orbit-dot{position:absolute;right:calc(50% - 10px);bottom:-10px;width:20px;height:20px;border-radius:50%;background:#080808}
.art-type{position:absolute;bottom:22px;right:-15px;font:600 clamp(130px,13vw,190px)/1 Lexend;letter-spacing:-.09em;color:transparent;-webkit-text-stroke:1px #08080850;pointer-events:none;z-index:0}
.hero-parallax{width:100%;height:590px;position:relative;z-index:2;pointer-events:none}
.hero-float{width:100%;height:100%}
.hero-photo{width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(10px 16px 16px #a23c1b26)}
.hero-sticker{z-index:4;bottom:53px;left:20px;border-radius:0 17px 17px 17px;padding:19px 22px;font-size:22px;transform:rotate(-6deg);box-shadow:5px 6px 0 #fff8;pointer-events:none}
.idea-chip{position:absolute;top:54px;right:24px;z-index:4;background:#fffaf1;color:#080808;padding:12px 16px;border:1px solid #080808;border-radius:100px;font-size:14px;box-shadow:4px 4px 0 #080808;transform:rotate(6deg);pointer-events:none}
.idea-chip span{font-size:22px;vertical-align:middle;margin-right:8px}
.motion-toolbar{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-block:12px 30px}
.motion-toolbar p{font-size:13px;color:#56504d}




.scroll-progress{height:3px;position:absolute;bottom:-1px;left:0;right:0;background:var(--orange);transform:scaleX(0);transform-origin:left;pointer-events:none}
.intro-strip{background:#080808;color:white;border:0;padding:28px 0}
.intro-strip p{color:#bbb}
.specialties{font-size:20px;gap:32px}
.specialties span+span:before{color:#ff9c64;font-size:23px}
.services-section{background:#fff;--grid-size:80px;--grid-opacity:.055;--glow-a:#ffd4ac52;--glow-b:#ddd2ff3b}
.services-section .section-heading{gap:100px}
.service{background:#ffffffb3;border-color:#c7bdb6;transition:background .2s}
.service[open]{background:#fff7f0}
.service summary{padding-inline:15px}
.service-content{padding-left:71px;padding-right:22px}
.services{gap:0 45px}
.agency{background:#f2f0f5;--grid-size:88px;--grid-opacity:.075;--glow-a:#c6b4ff40;--glow-b:#ffb98a44}
.agency-visual{padding-top:0;aspect-ratio:1.13;border-radius:100px 25px 100px 25px;isolation:isolate}
.agency-visual:before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 90% 10%,#c7602e50,transparent 65%),linear-gradient(#ffffff0b 1px,transparent 1px),linear-gradient(90deg,#ffffff0b 1px,transparent 1px);background-size:auto,48px 48px,48px 48px}
.agency-visual img{height:100%;width:100%;object-position:center bottom}
.clients{background:#080808;--grid-line:255 255 255;--grid-opacity:.065;--grid-size:96px;--glow-a:#ba542c2b;--glow-b:#74638724}
.clients .surface-glow{inset:-30px}
.client-card img{transition:none}
.client-card:hover img{transform:none}
.client-grid{gap:48px 24px}
.client-card{padding:0 5px}
.client-footer{border-color:#ffffff30}
.contact{background:linear-gradient(125deg,#ffab65 0%,#ff7d36 48%,#ff671d 100%);--grid-size:80px;--grid-opacity:.09;--glow-a:#ffe9ac55;--glow-b:#ffdfcd55}
.contact:before{mask-image:linear-gradient(90deg,#0005,#000)}
.contact h2{font-size:clamp(45px,5.5vw,79px)}
.contact-actions .button{border-radius:50px;padding:19px 28px}
.button .arrow{display:inline-block}.button .arrow,.service-icon,.client-card img{transform:translateY(0px) rotate(0deg) scale(1)}


html:not([data-motion]) .scroll-progress{display:none}
@media(min-width:1600px){.hero{padding-top:80px;padding-bottom:30px}}
@media(max-width:1100px){.hero{min-height:660px;gap:28px;padding-top:50px}.hero h1{font-size:clamp(65px,8.4vw,94px)}.hero-art{height:550px;border-top-left-radius:135px}.hero-parallax{height:510px}.hero-copy>.hero-description{font-size:17px}.hero-sticker{font-size:18px;bottom:38px;left:15px}.idea-chip{font-size:12px;right:18px;top:48px;padding:10px 13px}.orbit-spark{font-size:72px;top:-36px;left:calc(50% - 32px)}.services-section .section-heading{gap:45px}.services{column-gap:25px}.service summary{font-size:20px}.service-content{padding-left:22px}.agency-grid{gap:45px}.agency-visual{aspect-ratio:1}.agency-visual img{height:100%}}
@media(max-width:760px){.header-cta .arrow{display:none}.surface-grid{--grid-size:56px}.hero{grid-template-columns:1fr;padding-top:35px;gap:36px;min-height:0}.hero h1{font-size:clamp(56px,13.6vw,92px);line-height:.99;letter-spacing:-.07em}.word-mask{padding-bottom:10px;margin-bottom:-4px}.hero-kicker{margin-bottom:23px;font-size:13px;max-width:none}.hero-copy>.hero-description{max-width:41ch;margin-top:22px}.hero-actions{margin-top:25px;gap:19px}.hero-actions .button{min-height:54px;padding:16px 21px;font-size:15px}.hero-art{height:470px;width:100%;max-width:520px;border-radius:110px 24px 85px 24px}.hero-parallax{height:440px}.hero-sticker{font-size:19px;bottom:38px;left:18px}.hero-orbit{top:16%;width:88%;left:6%}.idea-chip{top:40px;right:17px;font-size:12px}.art-type{font-size:150px}.motion-toolbar{padding-top:0;padding-bottom:25px;gap:8px}.motion-toolbar p{font-size:11px;max-width:150px}.intro-strip{padding:26px 0}.specialties{font-size:17px;gap:16px}.specialties span+span:before{margin-right:16px;font-size:19px}.services-section .section-heading{gap:22px}.service summary{font-size:19px;padding-inline:9px}.service-content{padding-inline:16px}.agency-visual{aspect-ratio:1.1;max-width:500px;border-radius:80px 20px 80px 20px}.client-grid{gap:34px 14px}.client-card{padding:0}.contact h2{font-size:clamp(43px,11.8vw,65px)}}
@media(max-width:360px){.header-cta{padding-inline:10px}.hero h1{font-size:clamp(51px,14.7vw,56px)}.hero-art{height:400px;border-top-left-radius:90px}.hero-parallax{height:370px}.hero-sticker{font-size:16px;left:15px;padding:15px;bottom:26px}.idea-chip{font-size:10px;padding:9px 11px;right:13px}.idea-chip span{font-size:18px;margin-right:4px}.hero-kicker{font-size:12px}.hero-actions .button{font-size:14px;gap:12px}.motion-toolbar{flex-wrap:wrap}.motion-toolbar p{max-width:120px}.specialties{font-size:14px;gap:12px}.specialties span+span:before{margin-right:12px}.service summary{font-size:17px}}
@media(prefers-reduced-motion:reduce){[data-motion],[data-reveal]{opacity:1!important;transform:none!important}.scroll-progress{opacity:0!important}}

/* Macceddo Films: um capítulo cinematográfico no portfólio da W5. */
.project-stage{background:#100e17;color:#fff;--grid-line:223 206 255;--grid-opacity:.055;--grid-size:96px;--glow-a:#f7834b35;--glow-b:#7247de38;padding-block:100px 72px}
.project-stage::before{mask-image:linear-gradient(120deg,#0008,transparent 50%,#0006)}
.project-stage:after{content:'';height:1px;position:absolute;inset:0 0 auto;background:linear-gradient(90deg,transparent,#ffac74,#ae87f4,transparent);pointer-events:none}
.project-stage>.surface-glow{background:radial-gradient(ellipse at 95% 3%,#ff8c4f38,transparent 44%),radial-gradient(ellipse at 0 65%,#7953db40,transparent 50%)}
.project-beam{position:absolute;pointer-events:none;z-index:-1;top:8%;left:12%;width:75%;height:360px;border-radius:50%;background:linear-gradient(90deg,transparent,#e39eff0c,#ff974e17,transparent);filter:blur(35px);transform:rotate(-18deg)}
.project-heading{display:grid;grid-template-columns:1.1fr 1fr;align-items:end;gap:90px;margin-bottom:58px}
.project-brand{display:flex;gap:18px;align-items:center;margin-bottom:26px}
.project-brand img{width:64px;height:64px;border-radius:50%;border:1px solid #ffffff30}
.project-brand p{font-size:14px;font-weight:650;color:#ffd7bc;line-height:1.5}
.project-brand p span{display:block;font-size:12px;font-weight:400;color:#c4bccf;margin-top:3px}
.project-heading h2{font-size:clamp(52px,6vw,86px);line-height:.98;letter-spacing:-.065em}
.project-intro blockquote{font:400 clamp(21px,2vw,27px)/1.45 Lexend;margin:0 0 22px;letter-spacing:-.025em}
.project-intro>p{font-size:16px;color:#c4bccf;margin-bottom:26px;max-width:47ch}
.project-button{background:#fff0e5;color:#100e17;border-radius:50px;font-size:15px;gap:20px;padding-inline:22px}
.project-button:hover{background:#ffd6b9}
.project-gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;align-items:start}
.project-card{min-width:0}
.project-card:nth-child(even){padding-top:36px}
.project-shot{display:block;position:relative;background:#080808;border:1px solid #ffffff25;border-radius:14px;overflow:hidden;text-decoration:none}
.project-shot:before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;border:1px solid #ffffff15;border-radius:inherit}
.project-media img{width:100%;height:auto;aspect-ratio:600/1067;object-fit:contain}
.project-open{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:50px;padding:13px 15px;font-size:12px;background:#1c1825;color:#f1e9ff;border-top:1px solid #ffffff1a}
.project-open .arrow{font-size:22px;display:inline-block;transform:translateY(0px) rotate(0deg) scale(1)}
.project-shot:hover .project-open{background:#352642}
.project-card figcaption{padding:17px 4px 0;font-size:16px;line-height:1.4}
.project-card figcaption small{display:block;color:#b6acbf;font-size:12px;margin-top:5px}
.project-footer{display:flex;justify-content:space-between;align-items:center;gap:20px;border-top:1px solid #ffffff25;padding-top:30px;margin-top:44px;font-size:14px}
.project-footer p{color:#c4bccf}.project-footer a{color:#ffd7bc}
.project-stage :focus-visible{outline-color:#e4bcff}
@media(max-width:1100px){.project-heading{gap:40px}.project-gallery{gap:16px}.project-open{font-size:11px;padding-inline:10px}.project-card figcaption{font-size:14px}}
@media(max-width:760px){.project-stage{padding-block:70px 50px}.project-heading{grid-template-columns:1fr;gap:30px;margin-bottom:35px}.project-heading h2{font-size:clamp(52px,14vw,76px)}.project-brand{margin-bottom:22px}.project-brand img{width:56px;height:56px}.project-intro blockquote{font-size:22px;max-width:25ch}.project-intro>p{font-size:16px}.project-button{font-size:14px;padding-inline:20px;gap:15px}.project-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 14px}.project-card:nth-child(even){padding-top:25px}.project-open{padding:11px 10px;font-size:11px;line-height:1.4}.project-card figcaption{font-size:14px;padding-top:12px}.project-card figcaption small{font-size:11px}.project-footer{align-items:flex-start;flex-direction:column;gap:12px;margin-top:32px}.project-beam{height:280px;left:0;top:20%;width:100%}}
@media(max-width:360px){.project-gallery{gap:24px 10px}.project-open{font-size:10px;padding:10px 8px}.project-card figcaption{font-size:13px}.project-intro blockquote{font-size:20px}.project-button{font-size:13px;padding-inline:16px}}

.project-media{display:block;position:relative;overflow:hidden;isolation:isolate;aspect-ratio:600/1067}.project-media img{transform:scale(1);transform-origin:center}.project-open{position:relative;z-index:2}.project-decor{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}.cinema-icon{position:absolute;width:130px;height:130px;fill:none;stroke:#dfa8ff55;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}.cinema-camera{top:24px;left:46%;stroke:#ffbb805e}.cinema-clapper{top:24%;right:1%;width:100px;height:100px}.cinema-play{top:52%;left:1%;width:92px;height:92px;stroke:#ffb58455}.cinema-reel{bottom:13px;left:44%;width:110px;height:110px}.cinema-frames{top:4%;right:4%;width:92px;height:92px;stroke:#ffbe8c3d}
@media(max-width:760px){.cinema-camera{left:auto;right:9%;top:145px;width:110px;height:110px}.cinema-clapper{top:26%;right:-15px;width:90px;height:90px}.cinema-play{left:-24px;top:56%}.cinema-reel{left:auto;right:4%;bottom:30px;width:85px;height:85px}.cinema-frames{top:8px;right:2%;width:80px;height:80px}}
