/* MAIS TUNER 24.40 — "Anthemz por ano" (P8) e "Anthems by year" (SLAM!) no app.
   Tela cheia nas cores de cada marca. Ao deslizar: o fundo esquenta, caem
   estrelinhas, discos e o selo da marca, o ano grande desfoca e o ano fica
   preso numa barrinha no topo.
   P8: azul-marinho, ciano e o selo "8". SLAM!: lavanda, marinho e rosa. */

.mt-ay[hidden],.ay-teaser[hidden]{display:none!important}
.mt-ay{position:fixed;inset:0;z-index:1300;overflow:hidden;color:var(--ay-ink);font-family:"NRK Sans","Reddit Sans",sans-serif;
  transform:translateY(100%);transition:transform .42s cubic-bezier(.22,1,.36,1);
  --ay-p:0;--ay-dir:0;
  --ay-ink:#fff;--ay-muted:rgba(214,238,255,.72);--ay-accent:#55e3ff;--ay-accent-ink:#041323;--ay-line:rgba(255,255,255,.12);--ay-card:rgba(255,255,255,.07);
  --ay-base:linear-gradient(172deg,#041323 0%,#06264a 52%,#08467a 100%);--ay-hot:linear-gradient(172deg,#073a6e 0%,#0a78bd 50%,#1fc4f2 100%);
  --ay-solid:#05203f;--ay-fall-a:#ffffff;--ay-fall-b:#55e3ff;--ay-hole:#062a52;
  --ay-year:linear-gradient(180deg,#ffffff 20%,#8ff0ff 100%)}
.mt-ay[data-brand="slam"]{
  --ay-ink:#1b2f64;--ay-muted:rgba(27,47,100,.66);--ay-accent:#fa0266;--ay-accent-ink:#fff;--ay-line:rgba(27,47,100,.13);--ay-card:rgba(255,255,255,.58);
  --ay-base:linear-gradient(172deg,#f1f4ff 0%,#dbe3ff 52%,#c9d6ff 100%);--ay-hot:linear-gradient(172deg,#c9d6ff 0%,#b8b8ff 48%,#ffa4cb 100%);
  --ay-solid:#dfe6ff;--ay-fall-a:#1b2f64;--ay-fall-b:#fa0266;--ay-hole:#dbe3ff;
  --ay-year:linear-gradient(180deg,#1b2f64 30%,#4b3fa8 100%)}
.mt-ay.show{transform:none}
html.mt-ay-open{overflow:hidden}
.mt-ay button,.mt-ay a{font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}
.mt-ay :is(h2,h3,p,span,strong,small,b,button,a){font-family:"NRK Sans","Reddit Sans",sans-serif!important}
.mt-ay svg{display:block}
.mt-ay :is(button,a):focus-visible{outline:3px solid var(--ay-accent);outline-offset:3px}

/* ================================================================ fundo e efeito */
.ay-bg{position:absolute;inset:0;z-index:0;background:var(--ay-base);pointer-events:none}
.ay-bg-hot{position:absolute;inset:0;background:var(--ay-hot);opacity:calc(var(--ay-p) * .95);transition:opacity .25s linear}
.ay-sky{position:absolute;inset:0;overflow:hidden;opacity:0;transition:opacity .6s ease}
.mt-ay.is-deep .ay-sky{opacity:1}
.ay-fall{position:absolute;top:-48px;display:block;width:var(--sz,14px);height:var(--sz,14px);color:var(--ay-fall-a);opacity:.75;transform:rotate(var(--rot,0deg))}
.ay-fall.is-alt{color:var(--ay-fall-b)}
.ay-fall svg{width:100%;height:100%;fill:currentColor}
.ay-fall.is-vinyl{opacity:.32}
.ay-fall.is-vinyl .h{fill:var(--ay-hole)}
.ay-fall.is-badge{opacity:.3}
.ay-fall.is-badge img{display:block;width:100%;height:100%;object-fit:contain}
.mt-ay.ay-motion.is-deep .ay-fall{animation:ayFall var(--dur,12s) linear var(--delay,0s) infinite}
@keyframes ayFall{from{transform:translateY(0) rotate(var(--rot,0deg))}to{transform:translateY(calc(100vh + 96px)) rotate(calc(var(--rot,0deg) + 220deg))}}

.ay-scroll{position:absolute;inset:0;z-index:1;overflow:hidden auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding-bottom:calc(28px + env(safe-area-inset-bottom))}

/* ================================================================ topo */
.ay-top{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:10px;padding:calc(14px + env(safe-area-inset-top)) 16px 0}
.ay-close{display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--ay-line);border-radius:50%;background:var(--ay-card);cursor:pointer}
.ay-close svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.ay-close:active{transform:scale(.92)}
.ay-logo{justify-self:center;height:36px;width:auto;max-width:150px;object-fit:contain}
.ay-live{display:inline-flex;align-items:center;gap:6px;min-width:44px;padding:6px 10px;border-radius:999px;background:var(--ay-card);border:1px solid var(--ay-line);font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.ay-live i{width:7px;height:7px;border-radius:50%;background:var(--ay-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--ay-accent) 25%,transparent)}
.ay-live[hidden]{display:block;visibility:hidden}

/* faixa deslizante */
.ay-ticker{margin:14px 0 0;overflow:hidden;border-block:1px solid var(--ay-line);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.ay-ticker-track{display:flex;align-items:center;gap:16px;width:max-content;padding:9px 0;color:var(--ay-accent);font-size:11.5px;font-weight:900;letter-spacing:.22em;white-space:nowrap}
.mt-ay.ay-motion .ay-ticker-track{animation:ayTicker 36s linear infinite}
.ay-ticker-track .ay-tk-span{color:var(--ay-ink);opacity:.82}
.ay-tk-badge{display:block;width:18px;height:18px;object-fit:contain}
.ay-tk-spark{display:block;width:12px;height:12px;color:var(--ay-accent)}
.ay-tk-spark svg{width:100%;height:100%;fill:currentColor}
@keyframes ayTicker{to{transform:translateX(-50%)}}

/* ano grande */
.ay-hero{padding:20px 16px 4px;text-align:center;touch-action:pan-y}
.ay-kicker{display:block;color:var(--ay-muted);font-size:11.5px;font-weight:900;letter-spacing:.2em;text-transform:uppercase}
.ay-title{margin:4px 0 0;font-size:26px;font-weight:900;letter-spacing:-.03em;line-height:1.05;color:var(--ay-ink)}
.ay-yearbox{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:4px;margin-top:6px;
  filter:blur(calc(var(--ay-p) * 9px));opacity:calc(1 - var(--ay-p) * .6);transform:scale(calc(1 - var(--ay-p) * .12));transform-origin:50% 100%}
.ay-year{display:block;font-size:clamp(84px,26vw,124px);font-weight:900;line-height:.92;letter-spacing:-.065em;font-variant-numeric:tabular-nums;
  background:var(--ay-year);-webkit-background-clip:text;background-clip:text;color:transparent;padding:0 .04em}
.ay-arrow{display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--ay-line);border-radius:50%;background:var(--ay-card);cursor:pointer}
.ay-arrow svg,.ay-dock-arrow svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.ay-arrow:active,.ay-dock-arrow:active{transform:scale(.9)}
.ay-sub{margin:8px 0 0;color:var(--ay-muted);font-size:14px;font-weight:700}

/* régua de anos */
.ay-ruler{margin:14px 0 0;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;padding:6px calc(50% - 31px) 10px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent)}
.ay-ruler::-webkit-scrollbar{display:none}
.ay-ruler-track{display:flex;width:max-content}
.ay-tick{position:relative;flex:none;width:62px;height:56px;padding:0;border:0;background:none;cursor:pointer;scroll-snap-align:center;color:var(--ay-muted)}
.ay-tick::before{content:'';position:absolute;left:50%;top:4px;width:2px;height:12px;border-radius:2px;background:currentColor;opacity:.55;transform:translateX(-50%)}
.ay-tick::after{content:'';position:absolute;left:0;right:0;top:9px;height:2px;background:repeating-linear-gradient(90deg,currentColor 0 1px,transparent 1px 12.4px);opacity:.28}
.ay-tick b{position:absolute;left:0;right:0;bottom:6px;font-size:13px;font-weight:800;font-variant-numeric:tabular-nums;transition:transform .25s ease,color .25s ease}
.ay-tick.is-on{color:var(--ay-ink)}
.ay-tick.is-on::before{height:20px;top:0;width:3px;background:var(--ay-accent);opacity:1}
.ay-tick.is-on b{display:inline-block;left:50%;right:auto;padding:3px 9px;border-radius:999px;background:var(--ay-accent);color:var(--ay-accent-ink);font-weight:900;transform:translateX(-50%)}

.ay-status{margin:10px 16px 0;color:var(--ay-muted);font-size:14px;font-weight:700;text-align:center}
.ay-status:empty{display:none}

/* ================================================================ Nº 1 */
.ay-no1{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:132px minmax(0,1fr);gap:14px;align-items:center;margin:16px 16px 0;padding:14px;
  border:1px solid var(--ay-line);border-radius:26px;background:var(--ay-card);-webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%)}
.ay-no1:empty{display:none}
.ay-no1-glow{position:absolute;inset:-30px;z-index:-1;background-image:var(--ay-no1-art,none);background-size:cover;background-position:center;filter:blur(38px) saturate(1.5);opacity:.42}
.mt-ay[data-brand="slam"] .ay-no1-glow{opacity:.3}
.ay-art{position:relative;display:grid;place-items:center;aspect-ratio:1;border-radius:14px;overflow:hidden;background:color-mix(in srgb,var(--ay-ink) 12%,transparent)}
.ay-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s ease}
.ay-art.has-img img{opacity:1}
.ay-art b{color:var(--ay-accent);font-size:22px}
.ay-art.has-img b{display:none}
.ay-art.is-big{border-radius:18px;box-shadow:0 22px 34px -22px rgba(0,0,0,.85)}
.ay-art.is-big b{font-size:44px}
.ay-no1-copy{min-width:0}
.ay-no1-tag{display:inline-block;padding:4px 10px;border-radius:999px;background:var(--ay-accent);color:var(--ay-accent-ink);font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.ay-no1 h3{margin:9px 0 0;font-size:22px;font-weight:900;line-height:1.08;letter-spacing:-.025em;color:var(--ay-ink);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ay-no1 p{margin:4px 0 0;color:var(--ay-muted);font-size:15px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ay-no1-actions{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px}
.ay-pv{position:relative;display:grid;place-items:center;flex:none;width:42px;height:42px;padding:0;border:0;border-radius:50%;background:var(--ay-accent);color:var(--ay-accent-ink);cursor:pointer;box-shadow:0 10px 20px -12px color-mix(in srgb,var(--ay-accent) 80%,#000)}
.ay-pv svg{width:18px;height:18px;fill:currentColor}
.ay-pv .s,.is-playing .ay-pv .p{display:none}
.is-playing .ay-pv .s{display:inline}
.ay-pv:active{transform:scale(.94)}
.ay-pv.is-wide{display:inline-flex;justify-content:center;gap:9px;width:auto;height:50px;padding:0 18px;border-radius:999px;overflow:hidden;font-size:16px;font-weight:900}
.ay-bar{position:absolute;left:0;bottom:0;height:4px;width:100%;background:var(--ay-accent-ink);opacity:.5;transform-origin:left;transform:scaleX(0)}
.is-playing .ay-bar{animation:ayBar 10s linear forwards}
@keyframes ayBar{to{transform:scaleX(1)}}
.ay-open{display:inline-flex;align-items:center;gap:8px;height:50px;padding:0 16px;border:1.5px solid var(--ay-line);border-radius:999px;background:var(--ay-card);font-size:15px;font-weight:850;text-decoration:none}
.ay-open svg,.ay-row-open svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.ay-meta:not(:has(*:not(:empty))){display:none}
.ay-meta{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:7px}
.ay-chip{padding:2px 7px;border-radius:6px;background:color-mix(in srgb,var(--ay-ink) 10%,transparent);color:var(--ay-ink);font-size:10px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
.ay-chip:empty{display:none}
.ay-chip.is-local{background:var(--ay-accent);color:var(--ay-accent-ink)}
.ay-rel{color:var(--ay-muted);font-size:11.5px;font-weight:700}
.ay-rel:empty{display:none}

/* ================================================================ 2 a 8 */
.ay-list{margin:12px 16px 0;padding:6px 12px;list-style:none;border:1px solid var(--ay-line);border-radius:24px;background:var(--ay-card);-webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%)}
.ay-list:empty{display:none}
.ay-row{display:grid;grid-template-columns:26px 58px minmax(0,1fr) 42px 30px;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--ay-line)}
.ay-row:last-child{border-bottom:0}
.ay-rank{color:var(--ay-muted);font-size:15px;font-weight:900;font-variant-numeric:tabular-nums;text-align:center}
.ay-row .ay-art{border-radius:12px}
.ay-row-copy{min-width:0}
.ay-row-copy strong{display:block;font-size:15px;font-weight:900;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ay-ink)}
.ay-row-copy small{display:block;margin-top:2px;color:var(--ay-muted);font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ay-row .ay-meta{margin-top:5px}
.ay-row-open{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;color:var(--ay-muted)}
.ay-row.is-playing .ay-rank{color:var(--ay-accent)}
/* anel de 10 s em volta do play */
@property --ay-deg{syntax:'<angle>';inherits:false;initial-value:0deg}
.ay-ring{position:absolute;inset:-4px;border-radius:50%;pointer-events:none;opacity:0;
  background:conic-gradient(var(--ay-accent) var(--ay-deg),color-mix(in srgb,var(--ay-accent) 18%,transparent) 0);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2.5px));mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2.5px))}
.ay-row.is-playing .ay-ring{opacity:1;animation:ayRing 10s linear forwards}
@keyframes ayRing{from{--ay-deg:0deg}to{--ay-deg:360deg}}

.ay-foot{display:grid;justify-items:center;gap:12px;margin:20px 16px 0;text-align:center}
.ay-tune{min-height:48px;padding:0 22px;border:2px solid var(--ay-ink);border-radius:999px;background:transparent;font-size:15px;font-weight:900;cursor:pointer}
.ay-tune[hidden]{display:none}
.ay-note{margin:0;max-width:34ch;color:var(--ay-muted);font-size:12.5px;font-weight:700;line-height:1.45}

/* ================================================================ barrinha do ano (presa no topo) */
.ay-dock{position:absolute;left:0;right:0;top:0;z-index:2;display:grid;grid-template-columns:44px auto 44px;justify-content:center;align-items:center;gap:14px;
  padding:calc(12px + env(safe-area-inset-top)) 16px 10px;background:var(--ay-solid);border-bottom:3px solid var(--ay-accent);
  transform:translateY(-110%);transition:transform .3s cubic-bezier(.22,1,.36,1);box-shadow:0 12px 26px -18px rgba(0,0,0,.8)}
.mt-ay.dock-on .ay-dock{transform:none}
.ay-dock-year{font-size:26px;font-weight:900;letter-spacing:-.03em;font-variant-numeric:tabular-nums;min-width:3.2ch;text-align:center}
.ay-dock-arrow{display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid var(--ay-line);border-radius:50%;background:var(--ay-card);cursor:pointer}

/* ================================================================ troca de ano */
.mt-ay.is-swap .ay-year{animation:ayYearIn .45s cubic-bezier(.22,1,.36,1)}
.mt-ay.is-swap .ay-no1{animation:ayCardIn .5s cubic-bezier(.22,1,.36,1)}
.mt-ay.is-swap .ay-row{animation:ayRowIn .45s cubic-bezier(.22,1,.36,1) calc(var(--i,0) * 35ms + 60ms) both}
@keyframes ayYearIn{from{opacity:0;transform:translateX(calc(var(--ay-dir) * 46px))}to{opacity:1;transform:none}}
@keyframes ayCardIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
@keyframes ayRowIn{from{opacity:0;transform:translateX(calc(var(--ay-dir) * 22px + 0px)) translateY(6px)}to{opacity:1;transform:none}}

/* ================================================================ cartão no Início do app */
.ay-teaser{position:relative;isolation:isolate;display:block;width:100%;margin:0 0 18px;padding:0;overflow:hidden;border:0;border-radius:24px;text-align:left;cursor:pointer;
  color:#fff;background:linear-gradient(140deg,#041323 0%,#06305c 55%,#0a78bd 100%);box-shadow:0 22px 40px -28px rgba(10,120,189,.9);font-family:"NRK Sans","Reddit Sans",sans-serif;-webkit-tap-highlight-color:transparent;
  --ayt-accent:#55e3ff;--ayt-muted:rgba(214,238,255,.75)}
.ay-teaser[data-brand="slam"]{color:#1b2f64;background:linear-gradient(140deg,#f1f4ff 0%,#d3dcff 55%,#ffb3d3 100%);box-shadow:0 22px 40px -28px rgba(250,2,102,.6);--ayt-accent:#fa0266;--ayt-muted:rgba(27,47,100,.7)}
.ay-teaser:active{transform:scale(.985)}
.ay-teaser :is(span,strong,small){font-family:"NRK Sans","Reddit Sans",sans-serif!important}
.ay-teaser-ticker{display:block;overflow:hidden;border-bottom:1px solid color-mix(in srgb,currentColor 14%,transparent)}
.ay-teaser-track{display:flex;align-items:center;gap:12px;width:max-content;padding:7px 0;color:var(--ayt-accent);font-size:10px;font-weight:900;letter-spacing:.22em;white-space:nowrap}
html:not(.anim-none) .ay-teaser-track{animation:ayTicker 30s linear infinite}
.ay-teaser-track img{display:block;width:14px;height:14px;object-fit:contain}
.ay-teaser-track i{display:block;width:10px;height:10px}
.ay-teaser-track svg{display:block;width:100%;height:100%;fill:currentColor}
.ay-teaser-body{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;padding:14px 16px 16px}
.ay-teaser-copy{min-width:0}
.ay-teaser-copy small{display:block;color:var(--ayt-muted);font-size:11px;font-weight:900;letter-spacing:.16em;text-transform:uppercase}
.ay-teaser-copy strong{display:block;margin-top:3px;font-size:23px;font-weight:900;letter-spacing:-.03em;line-height:1.05}
.ay-teaser-span{display:block;margin-top:5px;color:var(--ayt-muted);font-size:13px;font-weight:750}
.ay-teaser-covers{position:relative;display:block;width:112px;height:76px}
.ay-teaser-covers i{position:absolute;top:8px;width:58px;height:58px;border-radius:12px;background:color-mix(in srgb,currentColor 16%,transparent) center/cover no-repeat;box-shadow:0 12px 22px -12px rgba(0,0,0,.8),0 0 0 2px color-mix(in srgb,currentColor 22%,transparent)}
.ay-teaser-covers i:nth-child(1){left:0;transform:rotate(-9deg)}
.ay-teaser-covers i:nth-child(2){left:27px;top:2px;z-index:1;transform:rotate(2deg)}
.ay-teaser-covers i:nth-child(3){left:54px;transform:rotate(10deg)}

/* ================================================================ sem animação */
html.anim-none .mt-ay *,html.anim-none .mt-ay{animation:none!important;transition:none!important}
html.anim-none .ay-yearbox{filter:none;transform:none;opacity:1}
@media (prefers-reduced-motion:reduce){
  .mt-ay,.mt-ay *{animation:none!important;transition:none!important}
  .ay-yearbox{filter:none;transform:none;opacity:1}
  .ay-teaser-track{animation:none!important}
}