/* Fifth pass: mobile composition and compositor-only motion. */
:root{--spring-soft:cubic-bezier(.22,1,.36,1)}
.motion-word{display:inline-block}
.mobile-fold>summary{min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:16px;font-weight:700;list-style:none;border-block:1px solid var(--line);padding:12px 0}
.mobile-fold>summary::after{content:'+';font-size:24px}
.mobile-fold[open]>summary::after{content:'−'}
.mobile-fold>summary::-webkit-details-marker{display:none}
.rank-more{margin-top:16px;width:100%}
.wall{scrollbar-width:thin;scrollbar-color:var(--yellow) transparent}
.wall:focus-visible,.flavor-links:focus-visible{outline:3px solid var(--yellow);outline-offset:4px}
.flavor-links:focus-visible{outline-color:var(--blue)}
.carousel-hint{font-size:12px;margin-top:12px;color:inherit}
.sticky-challenge{display:none}
.button{position:relative;overflow:hidden;isolation:isolate}
.button::after{content:'';position:absolute;inset:-40% auto -40% -70%;width:40%;background:linear-gradient(90deg,transparent,#fff8e766,transparent);transform:skewX(-20deg);pointer-events:none}
.touch-ripple{position:absolute;width:100px;height:100px;margin:-50px;border-radius:50%;background:currentColor;opacity:0;pointer-events:none}
.rank-row{position:relative}
.rank-row.position-changed::before{content:'';position:absolute;inset:0;background:var(--yellow);opacity:0;pointer-events:none;animation:rank-flash 550ms var(--spring-soft)}
.small-crown{position:relative}
.podium-card.crown-landed::after{content:'✦';position:absolute;top:10px;right:24px;font-size:30px;color:var(--ink);pointer-events:none;animation:crown-spark 500ms var(--spring-soft) both}
.bar span,.derby-fill{transform-origin:left center}
.derby>div{flex:1;min-width:0}
.derby-track{height:5px;margin-top:8px;background:#fff8e733;overflow:hidden;border-radius:5px}
.derby-fill{display:block;height:100%;background:var(--yellow)}
.derby-caption{margin-top:22px;font-size:13px;font-weight:700}
.derby-caption+.derby{margin-top:8px}
.papel-picado{transform-origin:50% 0;animation:paper-sway 4s ease-in-out infinite}
.guayacan-drift{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.guayacan-drift i{position:absolute;top:0;left:18%;width:16px;height:16px;color:var(--yellow);opacity:0;animation:guayacan-drift 12s linear infinite}
.guayacan-drift i:nth-child(2){left:73%;animation-delay:6s}
.guayacan-drift i:nth-child(3){left:42%;animation-delay:3s}
.guayacan-drift i:nth-child(4){left:88%;animation-delay:9s}
.guayacan-drift svg{width:100%;height:100%}
#muro{position:relative}
.marquee-track{display:flex;width:max-content;animation:continuous-goool 22s linear infinite}
.marquee-track>span{padding-right:48px;white-space:nowrap;font-weight:700}
#narrator{animation:none}
.ticker:hover .marquee-track,.ticker:focus-within .marquee-track{animation-play-state:paused}
.equalizer{display:flex;align-items:center;gap:3px;height:24px;margin-left:auto}
.equalizer i{width:3px;height:22px;background:var(--blue);transform-origin:bottom;animation:equalize 550ms ease-in-out infinite alternate}
.equalizer i:nth-child(2n){animation-delay:-200ms}.equalizer i:nth-child(3n){animation-delay:-350ms}
.record{animation:vinyl-turn 9s linear infinite}
.record-sleeve{width:100%;aspect-ratio:1;border-radius:50%;overflow:hidden}
.motion-offscreen,.motion-offscreen *,.motion-offscreen::before,.motion-offscreen::after,
html.page-hidden *,html.page-hidden *::before,html.page-hidden *::after{animation-play-state:paused!important}
@keyframes rank-flash{0%,100%{opacity:0}30%{opacity:.3}}
@keyframes crown-spark{0%{transform:scale(.9) rotate(-20deg);opacity:0}40%{opacity:1}100%{transform:scale(1.2) rotate(20deg);opacity:0}}
@keyframes paper-sway{0%,100%{transform:rotate(-.35deg)}50%{transform:rotate(.35deg)}}
@keyframes guayacan-drift{0%,65%{transform:translate(0,-24px) rotate(0);opacity:0}70%{opacity:.7}98%{opacity:.7}100%{transform:translate(60px,430px) rotate(230deg);opacity:0}}
@keyframes continuous-goool{to{transform:translateX(-50%)}}
@keyframes equalize{from{transform:scaleY(.25)}to{transform:scaleY(1)}}
@keyframes vinyl-turn{to{transform:rotate(360deg)}}
@keyframes button-shine{to{transform:translateX(500%) skewX(-20deg)}}
@media(hover:hover) and (pointer:fine){
 .stamp,.song,.podium-card{transition:transform 220ms var(--spring-soft)}
 .stamp:hover,.song:hover,.podium-card:hover{transform:translateY(-4px)}
 .button:hover::after{animation:button-shine 550ms var(--spring-soft)}
}
@media(max-width:767px){
 .section{padding-block:32px}
 .section-head{gap:14px;margin-bottom:20px}
 .section-head h2,.local-flavors h2,.how h2,.faq-grid h2{font-size:32px}
 .section-head p{margin-top:12px}
 .board-toolbar{margin-top:20px;gap:12px}
 .daily-crown{padding:10px 14px}
 .podium{gap:6px;margin:20px 0}
 .podium-card{padding:12px!important;gap:2px 10px;grid-template-columns:40px 1fr auto}
 .podium-card .logo{width:36px;height:36px}
 .podium-card h3{font-size:18px}
 .podium-card .amount{font-size:20px}
 .podium-card.first .small-crown{display:block;position:absolute;right:13px;top:7px;width:20px;height:20px}
 .podium-card.first .rank{display:none}
 .ranking-layout{gap:20px}
 .filters{gap:8px;margin-bottom:16px}
 .rank-row{min-height:76px;grid-template-columns:20px 30px minmax(0,1fr) auto;gap:7px}
 .rank-row>.logo{width:30px;height:30px}
 .rank-row>.logo .motif{width:23px;height:23px}
 .business-name{font-size:14px}
 .business-meta{font-size:11px;line-height:1.3;margin-bottom:8px}
 .row-amount{font-size:17px}
 .rank-row.rank-overflow{display:none}
 .live-feed{padding:18px}
 .live-feed .feed-list{margin-block:16px}
 .feed-note{margin-bottom:10px}
 .wall{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:4px;padding:12px 4px 18px}
 .wall .stamp{flex:0 0 82%;min-width:0;min-height:255px;scroll-snap-align:start;transform:none}
 .flavor-links{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;margin-top:18px;padding:4px 4px 12px}
 .flavor-links a{flex:none;scroll-snap-align:start;min-height:48px;padding:12px 16px}
 #provincias{padding-block:32px}
 .atlas-heading{gap:14px;margin-bottom:20px}
 .atlas-heading h2{font-size:36px}
 .atlas-panel{padding:18px}
 .atlas-panel h3{margin-top:10px;font-size:32px}
 .atlas-total{margin:14px 0}
 .atlas-total strong{font-size:38px}
 .atlas-panel li{padding-block:10px}
 .atlas-panel ol{margin-bottom:16px}
 .atlas-key{margin-top:12px;padding-top:12px}
 .derby-caption,.derby-caption+.derby{margin-inline:20px}
 .solidarity{padding:20px;gap:14px}
 .solidarity h2{font-size:27px}
 .how-layout,.faq-grid{gap:16px}
 .how-title>.motif{display:none}
 .mobile-fold[open]>summary{margin-bottom:16px}
 .steps li{gap:12px;margin-bottom:16px;padding-bottom:16px}
 .steps h3{font-size:21px}
 .cta-band{padding-block:32px}
 .footer{padding-top:32px}
 body:has(.sticky-challenge){padding-bottom:calc(82px + env(safe-area-inset-bottom))}
 .sticky-challenge{display:flex;position:fixed;z-index:35;inset:auto 0 0;padding:10px 20px calc(10px + env(safe-area-inset-bottom));background:var(--cream);border-top:1px solid var(--ink);transform:translateY(110%);visibility:hidden;transition:transform 220ms var(--spring-soft)}
 .sticky-challenge.is-visible{transform:translateY(0);visibility:visible}
 .sticky-challenge .button{width:100%;background:var(--yellow);color:var(--ink);font-weight:700}
 html{scroll-padding-bottom:100px}
 .guayacan-drift i:nth-child(n+3),.petals span:nth-child(n+3){display:none}
 .music-hero{padding-block:30px;gap:24px}
 .music-hero h1{font-size:52px}
 .record-art{max-width:240px;margin:0 auto;width:100%;padding:24px}
 .song-grid{gap:24px}
 .song{display:grid;grid-template-columns:100px minmax(0,1fr);gap:14px;align-items:start}
 .cover{padding:10px;aspect-ratio:1;min-height:100px}
 .song .cover>b{font-size:14px;line-height:1.05;overflow-wrap:anywhere}
 .cover>span{font-size:9px}
 .cover>.motif{width:44px;height:44px;right:4px;top:22px;opacity:.6}
 .song-info{padding:0}
 .song-info h3{font-size:21px}
 .song .fake-player{margin-block:12px;flex-wrap:wrap;padding:8px;gap:7px}
 .song .fake-player>span:not(.equalizer){font-size:10px}
 .song .fake-player small{font-size:10px}
 .song .button{font-size:13px;padding-inline:10px}
 .song-status{min-height:0;margin-top:8px;font-size:12px}
 .profile-hero{padding-block:30px}
 .profile-stats #profile-province{font-size:18px;overflow-wrap:normal}
 .share-studio{gap:24px}
 .history{gap:24px}
}
@media(min-width:768px){.mobile-fold>summary,.rank-more,.carousel-hint{display:none}.mobile-fold:not([open])>:not(summary){display:block}}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
 .guayacan-drift,.touch-ripple,.marquee-track>[aria-hidden]{display:none}
 .marquee-track{width:auto}.marquee-track>span{white-space:normal;padding:0}
 .stamp:hover,.song:hover,.podium-card:hover,.button:hover,.button:active,button:active{transform:none}
}