:root {
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --risco: repeating-linear-gradient(-45deg, #f4c430 0 14px, #17110c 14px 28px);
}

@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) { animation-duration: .18s; }

.placar {
  position: sticky;
  top: 0;
  z-index: 6;
  background: var(--noite);
}

.placar .fio {
  position: absolute;
  inset: auto 0 -1px;
  height: 3px;
  background: var(--legenda);
  transform: scaleX(0);
  transform-origin: left;
}

.placar .fraca { color: var(--regra); font-weight: 600; }

.olho .lente { position: relative; }

.olho .lente video,
.episodio .midia video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.olho .lente video {
  transform: scale(1.04);
  transition: transform .5s var(--ease-out);
}

.olho.votou .lente video { transform: scale(1.22); }

.olho .toc { display: inline-block; transition: color .12s ease-out; }

.olho .toc.aceso { color: var(--legenda); }

.tira video {
  width: 100%;
  height: auto;
  border-radius: 6px;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  scroll-snap-align: center;
  background: #000;
}

.episodio .midia { position: relative; }

.episodio .midia video { object-position: 50% 14%; opacity: .9; }

.episodio .novo {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  gap: 7px;
  align-items: center;
  padding: 4px 9px;
  border-radius: 3px;
  background: var(--regra);
  color: #fff;
  font: 400 .75rem/1.3 var(--display);
  text-transform: uppercase;
}

.episodio .novo i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
}

.fita-caixa { overflow: hidden; padding-block: 16px; }

.fita-gira {
  width: 108%;
  margin-left: -4%;
  transform: rotate(-1.6deg);
  background: var(--legenda);
  border-block: 5px solid transparent;
  border-image: var(--risco) 5;
}

.fita {
  display: flex;
  width: max-content;
  color: var(--noite);
  font: 400 .9375rem/1 var(--display);
  white-space: nowrap;
  padding-block: 8px;
}

.fita span { padding-right: 1.4em; }

.preco { text-shadow: 0 2px 26px rgb(244 196 48 / .42); }

.aguarda { opacity: 0; }

.regras li.aguarda,
.inventario li.aguarda,
.tira.aguarda { opacity: 1; }

.regras li.aguarda > *,
.inventario li.aguarda > *,
.tira.aguarda > * { opacity: 0; }

@media (max-width: 759px) {
  .barra {
    transition: transform .28s var(--ease-out);
  }

  .barra.oculta,
  .barra.antes {
    display: flex;
    transform: translateY(110%);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .apagao {
    position: fixed;
    inset: 0;
    z-index: 30;
    background: #000;
    pointer-events: none;
    animation: apagao .8s linear both;
  }

  .chuvisco {
    position: fixed;
    inset: -120px;
    z-index: 20;
    pointer-events: none;
    opacity: .075;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
    animation: chuvisco .5s steps(5) infinite;
  }

  .palco { position: relative; overflow: hidden; }

  .palco .abertura { position: relative; z-index: 1; }

  .luz {
    position: absolute;
    top: -140px;
    left: 50%;
    width: 620px;
    height: 620px;
    margin-left: -310px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgb(244 196 48 / .17), transparent);
    animation: varre 7s ease-in-out infinite alternate, tremula 5s linear infinite;
  }

  .placar .ponto { animation: pisca 1.6s steps(2, jump-none) infinite; }

  .episodio .novo i { animation: pisca 1s steps(2, jump-none) infinite; }

  .pal {
    display: inline-block;
    animation: soco .3s var(--ease-out) both;
    animation-delay: calc(var(--atraso, .05s) + var(--n) * 75ms);
  }

  .abertura .sub,
  .comprar-bloco {
    animation: sobe .4s var(--ease-out) both;
    animation-delay: calc(var(--atraso, .05s) + .5s);
  }

  .botao { position: relative; overflow: hidden; }

  .botao:active { transform: scale(.97); }

  .botao:not(.vazado)::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 40%;
    background: linear-gradient(100deg, transparent, rgb(255 255 255 / .6), transparent);
    transform: translateX(-160%) skewX(-18deg);
    animation: brilho 3.8s linear infinite;
    pointer-events: none;
  }

  .fita { animation: esteira 26s linear infinite; }

  .ondas {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 3px solid rgb(244 196 48 / .75);
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
    pointer-events: none;
  }

  .olho .lente-caixa { position: relative; width: min(62vw, 260px); margin-inline: auto; }

  .olho .clarao {
    position: fixed;
    inset: 0;
    z-index: 25;
    background: #fff;
    opacity: 0;
    pointer-events: none;
  }

  .surge { animation: acende .42s linear both; }

  .regras li.surge,
  .inventario li.surge,
  .tira.surge { animation: none; }

  .regras li.surge .tag { animation: carimbo .3s var(--ease-out) both; }

  .regras li.surge strong,
  .regras li.surge p { animation: sobe .4s var(--ease-out) .16s both; }

  .inventario li.surge .item { animation: digita .5s steps(20) both; }

  .inventario li.surge p { animation: sobe .36s var(--ease-out) .3s both; }

  .tira.surge > * {
    animation: recorte .5s var(--ease-out) both;
    animation-delay: calc(var(--n) * 80ms);
  }

  .preco.surge { animation: acende .55s linear both, respira 2.4s ease-in-out .6s infinite; }

  .bio .perfil,
  .bio .episodio,
  .bio .curso { animation: acende .42s linear both; }

  .bio .episodio { animation-delay: calc(var(--atraso, 0s) + .14s); }

  .bio .curso { animation-delay: calc(var(--atraso, 0s) + .28s); }
}

@media (prefers-reduced-motion: reduce) {
  .aguarda,
  .regras li.aguarda > *,
  .inventario li.aguarda > *,
  .tira.aguarda > * { opacity: 1; }
}

@keyframes apagao {
  0%, 26% { opacity: 1; }
  28%, 33% { opacity: .18; }
  35%, 56% { opacity: 1; }
  58%, 63% { opacity: .3; }
  65%, 72% { opacity: .85; }
  100% { opacity: 0; }
}

@keyframes chuvisco {
  to { transform: translate(90px, -60px); }
}

@keyframes varre {
  from { transform: translateX(-130px); }
  to { transform: translateX(130px); }
}

@keyframes tremula {
  0%, 41%, 45%, 78%, 81%, 100% { opacity: 1; }
  43% { opacity: .35; }
  80% { opacity: .55; }
}

@keyframes pisca {
  from { opacity: 1; }
  to { opacity: .2; }
}

@keyframes soco {
  from { opacity: 0; transform: scale(1.35); }
  65% { opacity: 1; transform: scale(.97); }
  to { opacity: 1; transform: none; }
}

@keyframes sobe {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

@keyframes brilho {
  0%, 64% { transform: translateX(-160%) skewX(-18deg); }
  100% { transform: translateX(340%) skewX(-18deg); }
}

@keyframes esteira {
  to { transform: translateX(-50%); }
}

@keyframes acende {
  0% { opacity: 0; }
  20% { opacity: .9; }
  28% { opacity: .1; }
  45% { opacity: 1; }
  52% { opacity: .35; }
  100% { opacity: 1; }
}

@keyframes carimbo {
  from { opacity: 0; transform: scale(2.1) rotate(-8deg); }
  70% { opacity: 1; transform: scale(.94) rotate(1deg); }
  to { opacity: 1; transform: none; }
}

@keyframes digita {
  from { opacity: 1; clip-path: inset(0 100% 0 0); }
  to { opacity: 1; clip-path: inset(0); }
}

@keyframes recorte {
  from { opacity: 1; clip-path: inset(100% 0 0); }
  to { opacity: 1; clip-path: inset(0); }
}

@keyframes respira {
  50% { opacity: .78; }
}