/* Para quem é: cada ponto de partida com o ganho e um visual curto que anima. */
.aud-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.1rem;
}

.aud-card {
  display: flex;
  flex-direction: column;
  padding: 0.75rem 0.75rem 1.4rem;
  border-radius: var(--r-card);
  background: var(--ferro);
  box-shadow: var(--depth-card);
}

.aud-who {
  margin-top: 1.1rem;
  padding-inline: 0.5rem;
  color: var(--nevoa);
  font-size: var(--text-sm);
}

.aud-card h3 {
  margin-top: 0.35rem;
  padding-inline: 0.5rem;
  font-size: var(--text-lg);
  font-weight: 700;
  font-stretch: 108%;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

/* A telinha de cada card: sempre escura, como as dos filmes */
.aud-visual {
  position: relative;
  display: grid;
  align-content: center;
  gap: 0.55rem;
  height: 9.5rem;
  padding: 1rem;
  overflow: hidden;
  border-radius: 14px;
  background:
    radial-gradient(90% 80% at 50% 120%, rgb(255 91 31 / 0.2), transparent 65%),
    #0d0e10;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.06);
  color: #ececee;
  font-size: 0.8rem;
}

/* 1. Ideia parada que vira site no ar */
.aud-visual--launch {
  justify-items: start;
}

.av-chip {
  padding: 0.3rem 0.7rem;
  border-radius: 99px;
  background: #24262b;
  color: #8b8e96;
}

.av-track {
  width: 100%;
  height: 6px;
  overflow: hidden;
  border-radius: 3px;
  background: #24262b;
}

.av-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ffc56b, #ff5b1f);
  transform-origin: left;
}

.av-live {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.75rem;
  border-radius: 99px;
  background: #fff;
  color: #121316;
  font-weight: 650;
}

.av-live i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgb(34 197 94 / 0.25);
}

/* 2. A operação do dia, feita */
.av-row {
  display: grid;
  grid-template-columns: 2.8rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.55rem;
  border-radius: 8px;
  background: #17181c;
  white-space: nowrap;
}

.av-row time {
  color: #8b8e96;
  font-family: var(--mono);
  font-size: 0.68rem;
}

.av-row em {
  padding: 0.1rem 0.45rem;
  border-radius: 99px;
  background: rgb(34 197 94 / 0.16);
  color: #4ade80;
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 650;
}

/* 3. Antes e depois, em tempo */
.av-bar {
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr) 3.6rem;
  align-items: center;
  gap: 0.5rem;
}

.av-bar small {
  color: #8b8e96;
}

.av-bar i {
  height: 10px;
  border-radius: 5px;
  background: #3a3d44;
  transform-origin: left;
}

.av-bar--after i {
  width: 8%;
  background: #ff5b1f;
  box-shadow: 0 0 12px rgb(255 91 31 / 0.6);
}

.av-bar b {
  font-weight: 650;
  text-align: right;
  white-space: nowrap;
}

.av-bar--after b {
  color: #ffc56b;
}

/* 4. O erro que vira correção */
.aud-visual--fix code {
  display: block;
  padding: 0.5rem 0.65rem;
  overflow: hidden;
  border-radius: 8px;
  font-family: var(--mono);
  font-size: 0.68rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.av-err {
  background: rgb(239 68 68 / 0.12);
  color: #f87171;
  text-decoration: line-through rgb(248 113 113 / 0.6);
}

.av-ok {
  background: rgb(34 197 94 / 0.12);
  color: #4ade80;
}

.av-ok::before {
  content: '✓ ';
}

/* Não é para você se: a expectativa riscada e, embaixo, o que a turma é de verdade */
.aud-not {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
  align-items: center;
  gap: 1.5rem 2.5rem;
  margin-top: 1.25rem;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  border-radius: var(--r-card);
  background:
    repeating-linear-gradient(135deg, rgb(255 255 255 / 0.018) 0 10px, transparent 10px 20px),
    var(--ferro);
  box-shadow: inset 0 0 0 1px var(--aco);
}

.aud-not__head h3 {
  font-size: var(--text-xl);
  font-weight: 800;
  font-stretch: 115%;
  letter-spacing: -0.025em;
}

.aud-not__head p {
  margin-top: 0.35rem;
  color: var(--nevoa);
  font-size: var(--text-sm);
}

.aud-not__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.aud-not__list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: start;
  gap: 0.6rem 0.7rem;
  padding: 1rem;
  border-radius: var(--r-control);
  background: var(--noite);
  box-shadow: inset 0 0 0 1px var(--aco);
}

.aud-not__x {
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: rgb(239 68 68 / 0.14);
  color: #ef4444;
}

.aud-not svg {
  width: 0.85rem;
  height: 0.85rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.aud-not__myth {
  align-self: center;
  color: var(--nevoa);
  font-weight: 600;
  line-height: 1.35;
}

/* O risco é um fundo por linha (clone), para atravessar cada linha do texto */
.aud-not__myth s {
  text-decoration: none;
  background: linear-gradient(#ef4444, #ef4444) no-repeat 0 58% / 100% 1.5px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.aud-not__truth {
  display: flex;
  grid-column: 1 / -1;
  align-items: flex-start;
  gap: 0.5rem;
  padding-top: 0.6rem;
  border-top: 1px dashed var(--aco-claro);
  color: var(--giz);
  font-size: var(--text-sm);
  line-height: 1.4;
}

.aud-not__truth svg {
  margin-top: 0.2rem;
  color: #22c55e;
}

/* O risco atravessa a expectativa e a verdade aparece embaixo */
.motion .audience.is-in .aud-not__myth s {
  animation: aud-strike 0.7s var(--ease-out) both;
  animation-delay: calc(0.7s + var(--n) * 0.25s);
}

.motion .audience.is-in .aud-not__truth {
  animation: aud-truth 0.6s var(--ease-out) both;
  animation-delay: calc(1.1s + var(--n) * 0.25s);
}

@keyframes aud-strike {
  from {
    background-size: 0 1.5px;
    color: var(--giz);
  }
}

@keyframes aud-truth {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

/* ── Movimento: os cards sobem em sequência e cada visual roda em ciclo ── */
.motion .audience:not(.is-in) .aud-card {
  opacity: 0;
  transform: translateY(24px);
}

.motion .audience.is-in .aud-card {
  animation: aud-in 0.7s var(--ease-out) both;
  animation-delay: calc(var(--i) * 0.12s);
}

@keyframes aud-in {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
}

.motion .audience.is-in .aud-visual * {
  animation-duration: 6s;
  animation-iteration-count: infinite;
  animation-timing-function: var(--ease-out);
  animation-delay: calc(var(--i) * 0.12s + 0.4s);
}

.motion .audience.is-in .av-track i { animation-name: av-fill; }
.motion .audience.is-in .av-live { animation-name: av-pop; }
.motion .audience.is-in .av-chip { animation-name: av-dim; }

@keyframes av-fill {
  0% { transform: scaleX(0); }
  35%, 100% { transform: scaleX(1); }
}

@keyframes av-pop {
  0%, 35% { opacity: 0; transform: scale(0.8); }
  42%, 92% { opacity: 1; transform: none; }
  100% { opacity: 0; }
}

@keyframes av-dim {
  0%, 30% { opacity: 1; }
  40%, 92% { opacity: 0.45; }
  100% { opacity: 1; }
}

.motion .audience.is-in .av-row {
  animation-name: av-row;
  animation-delay: calc(var(--i) * 0.12s + 0.4s + var(--r) * 0.5s);
}

.motion .audience.is-in .av-row em {
  animation-name: av-done;
  animation-delay: calc(var(--i) * 0.12s + 0.8s + var(--r) * 0.5s);
}

@keyframes av-row {
  0% { opacity: 0; transform: translateX(-10px); }
  10%, 90% { opacity: 1; transform: none; }
  100% { opacity: 0; }
}

@keyframes av-done {
  0%, 8% { opacity: 0; transform: scale(0.6); }
  14%, 100% { opacity: 1; transform: none; }
}

.motion .audience.is-in .av-bar--before i { animation-name: av-slow; }
.motion .audience.is-in .av-bar--after i { animation-name: av-fast; }

@keyframes av-slow {
  0% { transform: scaleX(0); }
  70%, 100% { transform: scaleX(1); }
}

@keyframes av-fast {
  0% { transform: scaleX(0); }
  8%, 100% { transform: scaleX(1); }
}

.motion .audience.is-in .av-err { animation-name: av-err; }
.motion .audience.is-in .av-ok { animation-name: av-ok; }

@keyframes av-err {
  0%, 25% { text-decoration-color: transparent; transform: none; }
  27% { transform: translateX(-4px); }
  29% { transform: translateX(4px); }
  31% { transform: none; }
  40%, 100% { text-decoration-color: rgb(248 113 113 / 0.6); }
}

@keyframes av-ok {
  0%, 40% { opacity: 0; transform: translateY(6px); }
  48%, 92% { opacity: 1; transform: none; }
  100% { opacity: 0; }
}

@media (max-width: 1100px) {
  .aud-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .aud-not {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .aud-not__list {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 560px) {
  .aud-grid {
    grid-template-columns: minmax(0, 1fr);
  }


}