@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=DM+Sans:wght@400;500;600;700;800&display=swap');
:root{--yellow:#f6cd28;--ink:#191c17;--cream:#fbf8ed;--mx:0;--my:0}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:84px}body{margin:0;color:var(--ink);background:var(--yellow);font-family:'DM Sans',Arial,sans-serif}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #008bb0;outline-offset:5px}.skip{position:fixed;left:10px;top:-80px;padding:15px;background:white;z-index:100}.skip:focus{top:10px}header{height:91px;display:flex;align-items:center;justify-content:space-between;padding:0 5%;border-bottom:1px solid #191c1728;background:var(--yellow);position:relative;z-index:10}.brand{font-size:37px;line-height:.7;font-weight:900;letter-spacing:-2.5px;position:relative;padding-right:35px}.brand span{display:block;font-size:12px;letter-spacing:0;margin:10px 0 0 3px}.brand i{position:absolute;right:0;top:0;font-style:normal;font-size:37px}nav{display:flex;gap:38px;font-size:14px;font-weight:600}nav sup{font-size:10px;margin-left:4px}.nav-active{border-bottom:2px solid;padding-bottom:7px}.sound{background:none;border:1px solid #191c1740;padding:12px 17px;border-radius:30px;font-size:12px;display:flex;gap:12px;align-items:center}.sound span{letter-spacing:2px}.sound b{font-weight:600}.hero{height:max(720px,calc(100svh - 91px));max-height:1050px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 58% 65%,#ffe677 0,transparent 49%)}.edition{display:flex;justify-content:space-between;position:absolute;top:24px;left:5%;right:5%;font-size:10px;font-weight:700;letter-spacing:1.6px}.hero-title{position:absolute;top:64px;left:0;width:100%;text-align:center;z-index:1}.hero-title p{font-size:11px;letter-spacing:3px;font-weight:600;margin:0 0 10px}.hero-title h1{font-family:'Barlow Condensed','Arial Narrow',Impact,sans-serif;text-transform:uppercase;font-size:clamp(85px,12.8vw,190px);line-height:.76;letter-spacing:-.04em;margin:0;font-weight:900}.hero-title h1>span{display:block;font-size:.55em;letter-spacing:-.02em;line-height:1.1}.hero-copy{position:absolute;left:7%;top:42%;width:245px;z-index:4}.eyebrow{font-size:10px;letter-spacing:1.5px;font-weight:800}.hero-copy h2{font-size:40px;line-height:1.04;font-weight:500;letter-spacing:-1.8px;margin:16px 0}.hero-copy h2 strong{font-weight:800}.hero-copy p{font-size:14px;line-height:1.7;max-width:230px}.primary{display:inline-flex;align-items:center;gap:22px;background:var(--ink);color:var(--cream);border-radius:40px;padding:16px 20px;margin-top:14px;font-size:12px;font-weight:700;transition:transform .25s}.primary:hover{transform:translateY(-4px)}.primary span{font-size:20px}.character-stage{position:absolute;left:30%;width:43%;height:73%;top:24%;z-index:3;pointer-events:none}.character-stage canvas{width:100%;height:100%;position:relative;z-index:2;opacity:0;transition:opacity .7s}.character-stage.ready canvas{opacity:1}.fallback-ziggy{position:absolute;inset:0 24%;background:url('../personagens/ZIGGY.png') 0 15.5%/760% auto no-repeat;mix-blend-mode:multiply;opacity:1}.ready .fallback-ziggy{opacity:0}.stage-shadow{position:absolute;bottom:4%;left:22%;width:58%;height:30px;border-radius:50%;background:#6448003b;filter:blur(14px)}.orbit{position:absolute;border:1px solid #79641540;border-radius:50%;left:31%;top:34%;width:44%;height:54%;transform:rotate(-22deg);pointer-events:none}.orbit-two{left:26%;top:42%;width:56%;height:36%;transform:rotate(24deg)}.spark{position:absolute;font-size:80px;line-height:1}.spark-one{left:32%;top:44%;transform:rotate(20deg) translate(calc(var(--mx)*-10px),calc(var(--my)*-10px))}.spark-two{right:15%;top:29%;font-size:45px}.ziggy-label{position:absolute;right:11%;top:48%;z-index:4;transform:rotate(-7deg)}.ziggy-label span{font-size:10px;letter-spacing:2px}.ziggy-label b{display:block;font-family:'Barlow Condensed',Impact,sans-serif;font-size:69px;letter-spacing:-2px;line-height:1.1}.ziggy-label small{font-size:12px}.sticker{position:absolute;right:7%;bottom:16%;background:var(--cream);padding:22px 30px 18px 20px;transform:rotate(8deg);box-shadow:4px 5px 0 #191c17;font-size:14px;line-height:1.3;z-index:4}.sticker strong{font-size:23px}.sticker span{position:absolute;right:12px;top:12px;font-size:24px}.hero-bottom{position:absolute;bottom:24px;left:5%;right:5%;display:flex;align-items:center;justify-content:space-between;z-index:5;font-size:10px;letter-spacing:1px}.hero-bottom>a{font-weight:700;display:flex;align-items:center;gap:16px}.hero-bottom>a span{font-size:25px}.mouse-hint{letter-spacing:0}.ticker{background:var(--ink);color:var(--yellow);overflow:hidden;padding:19px 0;font-family:'Barlow Condensed',Impact,sans-serif;font-size:28px;font-weight:700;letter-spacing:1px}.ticker>div{white-space:nowrap;width:max-content;animation:marquee 38s linear infinite}.ticker span{padding:0 40px}.crew{background:var(--cream);padding:85px 6% 0}.crew-heading{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:42px}.crew-heading h2{font-family:'Barlow Condensed',Impact,sans-serif;font-size:65px;line-height:.95;text-transform:uppercase;letter-spacing:-1px;margin:16px 0 0}.crew-heading em{font-style:normal;color:#7a7d70}.crew-heading p{font-size:13px;line-height:1.8;margin:0 0 4px}.crew-layout{display:grid;grid-template-columns:1fr 1.08fr;gap:45px}.roster{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;align-content:start}.character-button{position:relative;text-align:left;background:#eeeade;border:1px solid transparent;border-radius:4px;padding:0;overflow:hidden;transition:transform .25s,background .25s,border-color .25s;min-width:0}.character-button:hover{transform:translateY(-5px)}.character-button[aria-pressed=true]{background:var(--yellow);border-color:var(--ink)}.portrait{height:124px;background-repeat:no-repeat;mix-blend-mode:multiply;transition:transform .35s}.character-button:hover .portrait{transform:scale(1.06)}.character-button strong{display:block;font-size:12px;padding:13px 10px}.character-button .number{position:absolute;top:8px;left:8px;font-size:9px;z-index:2}.character-button:first-child{border-color:#b4a05c}.character-detail{display:grid;grid-template-columns:45% 55%;background:#ebe8dc;min-height:330px;border-radius:5px;overflow:hidden;align-self:start}.detail-art{position:relative;overflow:hidden;min-height:330px;background:#e1d9c6}.detail-portrait{position:absolute;inset:0;background-repeat:no-repeat;mix-blend-mode:multiply}.detail-number{position:absolute;bottom:4px;left:12px;font-family:'Barlow Condensed',Impact,sans-serif;font-size:90px;line-height:1;color:#191c1725}.detail-copy{padding:30px 23px;display:flex;flex-direction:column}.detail-copy h3{font-family:'Barlow Condensed',Impact,sans-serif;font-size:46px;line-height:1;text-transform:uppercase;margin:13px 0}.detail-copy p{font-size:13px;line-height:1.65;margin:0 0 18px}#detail-traits{display:flex;flex-wrap:wrap;gap:6px}#detail-traits span{font-size:10px;border:1px solid #191c1730;border-radius:20px;padding:5px 8px}.detail-controls{display:flex;gap:7px;align-items:center;margin-top:auto;padding-top:20px}.detail-controls span{font-size:10px;margin-right:auto}.detail-controls button{border:1px solid #191c1740;background:none;border-radius:50%;width:34px;height:34px}.detail-controls button:hover{background:var(--yellow)}footer{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #191c1725;margin-top:70px;padding:35px 0}footer .brand{font-size:28px}footer p{font-size:9px;letter-spacing:1.1px}footer>a:last-child{font-size:12px}@keyframes marquee{to{transform:translateX(-50%)}}@keyframes reveal{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}.hero-copy,.ziggy-label,.sticker{animation:reveal .9s .2s both}.character-detail.changing .detail-copy,.character-detail.changing .detail-portrait{animation:reveal .45s both}
@media(min-width:1600px){.hero-copy{left:12%;width:280px}.hero-copy h2{font-size:48px}.hero-copy p{font-size:16px;max-width:270px}.character-stage{left:32%;width:40%}}
@media(max-width:1000px){.hero-copy{left:5%;width:215px}.hero-copy h2{font-size:34px}.character-stage{left:29%;width:48%}.ziggy-label{right:6%}.sticker{right:5%}.crew-layout{gap:24px;grid-template-columns:1fr}.portrait{height:150px}.character-detail{min-height:330px}.detail-art{min-height:330px}.crew-heading h2{font-size:55px}.crew-heading p{max-width:230px}}
@media(max-width:600px){header{height:76px;padding:0 6%}.brand{font-size:30px}nav{gap:18px;font-size:12px}.sound{padding:10px}.sound b{display:none}.hero{height:870px;max-height:none}.edition{top:20px;font-size:8px;letter-spacing:1px}.edition span:last-child{display:none}.hero-title{top:60px}.hero-title p{font-size:8px;letter-spacing:1.6px}.hero-title h1{font-size:25vw;line-height:.85}.hero-title h1>span{font-size:.49em}.character-stage{top:21%;left:12%;width:76%;height:48%}.orbit-one{top:28%;left:14%;width:73%;height:30%}.orbit-two{top:32%;left:5%;width:91%;height:24%}.hero-copy{top:auto;bottom:75px;left:7%;width:68%}.hero-copy h2{font-size:30px;line-height:1; margin:8px 0}.hero-copy h2 br{display:none}.hero-copy h2 strong{white-space:nowrap}.hero-copy p{font-size:13px;line-height:1.55;max-width:280px;margin:10px 0}.hero-copy .eyebrow{font-size:8px}.primary{padding:12px 16px;font-size:11px;margin-top:4px;gap:18px}.ziggy-label{top:34%;right:5%}.ziggy-label b{font-size:38px}.ziggy-label small{font-size:9px;max-width:80px;display:block}.ziggy-label span{font-size:8px}.sticker{bottom:17%;right:5%;font-size:10px;padding:16px 12px;transform:rotate(9deg)}.sticker strong{font-size:16px}.sticker span{display:none}.spark-one{top:31%;left:8%;font-size:42px}.spark-two{top:22%;right:8%;font-size:28px}.hero-bottom{bottom:20px;font-size:8px}.hero-bottom .location{display:none}.hero-bottom a{gap:8px}.ticker{font-size:21px;padding:15px 0}.crew{padding:50px 6% 0}.crew-heading{display:block;margin-bottom:28px}.crew-heading h2{font-size:48px}.crew-heading p{margin-top:20px;font-size:12px;max-width:none}.roster{gap:8px}.portrait{height:86px}.character-button strong{font-size:9px;padding:10px 6px}.character-detail{grid-template-columns:40% 60%;min-height:340px}.detail-copy{padding:25px 17px}.detail-copy h3{font-size:39px}.detail-copy p{font-size:12px}.detail-copy .eyebrow{font-size:8px}.detail-art{min-height:340px}footer{margin-top:40px;gap:20px;flex-wrap:wrap}footer p{order:3;flex-basis:100%;font-size:8px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.mouse-hint{visibility:hidden}}

@media(min-width:1001px) and (max-height:800px){.hero{height:calc(100svh - 91px);min-height:620px}.hero-title{top:54px}.hero-title h1{font-size:11vw}.hero-copy{top:39%}.hero-copy h2{font-size:34px}.hero-copy p{font-size:13px}.character-stage{top:23%;height:72%}.hero-bottom{bottom:15px}}

.detail-portrait{inset:auto;left:50%;top:50%;width:min(68%,145px);height:auto;aspect-ratio:.46;transform:translate(-50%,-50%)}.character-detail.changing .detail-portrait{animation:art-enter .45s both}@keyframes art-enter{from{opacity:0;transform:translate(-50%,-46%)}to{opacity:1;transform:translate(-50%,-50%)}}

.portrait{height:auto;aspect-ratio:1}.hero-copy h2 strong:before{content:' '}.character-button:nth-child(3) .portrait{background-position:42% 45%!important}.character-button:nth-child(4) .portrait{background-position:42% 43.5%!important}.character-button:nth-child(5) .portrait,.character-button:nth-child(6) .portrait{background-position:42% 43.8%!important}.character-button:nth-child(7) .portrait{background-position:42% 41.2%!important}.character-button:nth-child(8) .portrait{background-position:42% 43.5%!important}@media(max-width:600px){.mouse-hint{display:none}.hero-bottom{justify-content:center}.hero-copy h2{font-size:28px}}

@media(max-width:600px){header nav .nav-active{display:none}header nav{white-space:nowrap;gap:0;margin-left:auto;margin-right:20px}.sound{width:48px;height:38px;justify-content:center;padding:0}.sound span{font-size:9px;letter-spacing:0;white-space:nowrap}.sticker{display:none}.hero-copy{width:85%}.hero-copy p{max-width:285px}}

.detail-copy{min-width:0}.detail-copy h3{overflow-wrap:anywhere}.detail-controls button{flex-shrink:0}.detail-portrait{clip-path:inset(0 0 6% 0)}
