/* ══════════════════════════════════════════
   EASTER EGG POPUP
══════════════════════════════════════════ */

#easter-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(8,5,16,0.92);
  backdrop-filter: blur(18px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.4s ease;
}
#easter-overlay.active {
  opacity: 1; pointer-events: all;
}
#easter-modal {
  position: relative;
  max-width: 520px; width: 90%;
  background: rgba(74,28,147,0.12);
  border: 1px solid rgba(65,201,166,0.2);
  border-radius: 24px;
  padding: 56px 48px;
  text-align: center;
  overflow: hidden;
  transform: translateY(32px);
  transition: transform 0.5s cubic-bezier(0.34,1.56,0.64,1);
}
#easter-overlay.active #easter-modal {
  transform: translateY(0);
}
.easter-glow {
  position: absolute;
  width: 400px; height: 300px;
  background: radial-gradient(ellipse, rgba(74,28,147,0.5) 0%, transparent 70%);
  top: 50%; left: 50%; transform: translate(-50%,-50%);
  pointer-events: none;
}
.easter-tag {
  font-size: 0.68rem; letter-spacing: 4px; text-transform: uppercase;
  color: var(--amarelo); margin-bottom: 20px;
}
.easter-title {
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 700; color: var(--branco);
  line-height: 1.1; margin-bottom: 20px;
}
.easter-title span { color: var(--menta); }
.easter-desc {
  font-size: 0.95rem; font-weight: 400;
  color: rgba(255,255,255,0.6); line-height: 1.8;
  margin-bottom: 36px;
}
.easter-btn {
  display: inline-block;
  padding: 16px 36px;
  background: var(--menta); color: var(--preto);
  font-family: 'Quicksand', sans-serif;
  font-size: 0.95rem; font-weight: 700;
  border-radius: 999px; text-decoration: none;
  position: relative; overflow: hidden;
  transition: transform 0.2s, box-shadow 0.3s;
  margin-bottom: 20px;
}
.easter-btn::before {
  content: ''; position: absolute; inset: 0;
  background: var(--amarelo);
  transform: translateX(-100%); transition: transform 0.4s;
}
.easter-btn:hover::before { transform: translateX(0); }
.easter-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(65,201,166,0.35); }
.easter-btn span { position: relative; z-index: 1; }
#easter-close {
  display: block; margin: 0 auto;
  background: transparent; border: none;
  font-family: 'Quicksand', sans-serif;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 2px;
  text-transform: uppercase; color: rgba(255,255,255,0.3);
  cursor: pointer; transition: color 0.3s;
}
#easter-close:hover { color: rgba(255,255,255,0.7); }

/* ══════════════════════════════════════════
   DAW TIMELINE — barra superior fixa
══════════════════════════════════════════ */

#daw-timeline {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 48px;
  background: rgba(8,5,16,0.95);
  border-bottom: 1px solid rgba(65,201,166,0.08);
  z-index: var(--z-timeline);
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 0;
  opacity: 0;
  pointer-events: none;
  backdrop-filter: blur(8px);
}

.daw-track {
  display: flex;
  align-items: center;
  position: relative;
  flex: 1;
  height: 100%;
}

.daw-marker {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 48px;
  cursor: pointer;
  position: relative;
  transition: color 0.3s ease;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  gap: 4px;
}

/* Somente Intro é clicável */
.daw-marker[data-index]:not([data-index="0"]) {
  cursor: default;
  pointer-events: none;
}

.daw-marker.active {
  color: var(--menta);
}
.daw-marker.passed {
  color: rgba(65,201,166,0.4);
}
/* Conserto: cor amarela quando ativo/passado */
.daw-marker[data-index="2"].active { color: var(--menta); }
.daw-marker[data-index="2"].passed { color: rgba(65,201,166,0.4); }

/* Linha de progresso que avança entre marcadores */
#timeline-progress-line {
  position: absolute;
  bottom: 0;
  height: 2px;
  width: 0;
  background: var(--menta);
  box-shadow: 0 0 6px rgba(65,201,166,0.55);
  pointer-events: none;
  will-change: left, width;
}

/* ── Playhead ── */
#playhead {
  position: absolute;
  top: 0; bottom: 0;
  width: 2px;
  background: var(--menta);
  box-shadow: 0 0 8px rgba(65,201,166,0.6);
  pointer-events: none;
  transition: none;
}
#playhead::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--menta);
}

/* ══════════════════════════════════════════
   TRANSITION ZONE — 30vh antes do pin
══════════════════════════════════════════ */

#transition-zone {
  height: 0;
}

/* ══════════════════════════════════════════
   PIN CONTAINER + HORIZONTAL SCROLL
══════════════════════════════════════════ */

#pin-container {
  /* Altura declarada em CSS antes do JS rodar → zero CLS.
     100vh = altura do #sticky-inner visível.
     500vw = distância de scroll (600vw total − 100vw viewport).
     #sticky-inner usa position:sticky nativo — sem pin spacer GSAP. */
  min-height: calc(100vh + 600vw);
}

#sticky-inner {
  position: sticky;
  top: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

#sections-wrapper {
  display: flex;
  width: 700vw;
  height: 100vh;
  will-change: transform;
}

/* ── Faixas genéricas ── */
.faixa {
  width: 100vw;
  height: 100vh;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: 80px 80px 60px;
}

/* ── Tag label ── */
.faixa-tag {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 20px;
  display: inline-block;
}

/* ── Número decorativo ── */
.faixa-num {
  position: absolute;
  font-size: 7rem;
  font-weight: 700;
  line-height: 1;
  color: rgba(74,28,147,0.2);
  user-select: none;
  pointer-events: none;
}

/* ══════════════════════════════════════════
   FAIXA 1 — INTRO
══════════════════════════════════════════ */

.faixa-1 {
  background: var(--preto);
}
.faixa-1 .inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 640px;
  z-index: 2;
}
.faixa-1 .faixa-tag { color: var(--menta); }
.faixa-1 h2 {
  font-size: clamp(2rem, 3.5vw, 3.6rem);
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 24px;
}
.faixa-1 .accent { color: var(--menta); }
.faixa-1 p {
  font-size: 1rem;
  font-weight: 300;
  color: rgba(255,255,255,0.5);
  line-height: 1.8;
  max-width: 460px;
}
/* Wave visual removida por design */
.faixa-1 .visual-side { display: none; }
.wave-visual { display: none; }
.wave-bar { display: none; }

/* ══════════════════════════════════════════
   FAIXA 2 — O PROBLEMA
══════════════════════════════════════════ */

.faixa-2 {
  background: linear-gradient(135deg, #0a0510, #120820, #0a0510);
}
.faixa-2 .inner {
  display: flex;
  flex-direction: column;
  max-width: 1060px;
  width: 100%;
  z-index: 2;
}
.faixa-2 h2 { max-width: 620px; }
.faixa-2 > .inner > p { max-width: 480px; }
.faixa-2 .faixa-tag { color: var(--vermelho); }
.faixa-2 h2 {
  font-size: clamp(2rem, 3.5vw, 3.8rem);
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 28px;
}
.faixa-2 p {
  font-size: 1rem;
  font-weight: 300;
  color: rgba(255,255,255,0.5);
  line-height: 1.8;
  max-width: 480px;
}
.faixa-2 .faixa-num { right: 80px; bottom: 40px; }

/* Ondas mortas */
.dead-waves {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 60px;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  padding: 0 40px;
  opacity: 0.15;
}
.dead-wave-bar {
  flex: 1;
  background: rgba(255,255,255,0.3);
  border-radius: 2px 2px 0 0;
  height: 3px;
}

/* ── Sintomas grid ── */
.sintomas-grid {
  display: flex;
  gap: 28px;
  margin-top: 44px;
  width: 100%;
}
.sintoma {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
}
.sintoma-icon {
  width: 72px; height: 72px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.3);
  display: flex; align-items: center; justify-content: center;
  font-size: 2.4rem; font-weight: 700;
  color: var(--vermelho);
  line-height: 1;
  flex-shrink: 0;
}
.sintoma-title {
  font-size: 0.95rem; font-weight: 700;
  color: var(--branco);
  letter-spacing: 0.5px;
}
.sintoma-desc {
  font-size: 0.82rem; font-weight: 300;
  color: rgba(255,255,255,0.5);
  line-height: 1.65;
}

/* ══════════════════════════════════════════
   FAIXA 3 — O CONSERTO
══════════════════════════════════════════ */

.faixa-3 {
  background: linear-gradient(160deg, #06030e, #0f0628, #06030e);
  flex-direction: column;
  align-items: flex-start;
}
.faixa-3 .inner {
  display: flex;
  flex-direction: column;
  max-width: 1060px;
  width: 100%;
  z-index: 2;
}
.faixa-3 .faixa-tag { color: var(--amarelo); }
.conserto-quote {
  font-size: clamp(1.35rem, 2.2vw, 2rem);
  font-weight: 700;
  line-height: 1.4;
  color: var(--branco);
  border-left: 4px solid var(--amarelo);
  padding-left: 28px;
  margin: 0 0 20px;
  font-style: normal;
  max-width: 700px;
}
.conserto-quote em {
  color: var(--amarelo);
  font-style: normal;
}
.conserto-source {
  font-size: 0.82rem;
  font-weight: 300;
  color: rgba(255,255,255,0.38);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 44px;
  padding-left: 32px;
  max-width: 700px;
}

/* Stats na faixa-3: distribuição igual como os sintomas */
.faixa-3 .stats-row {
  width: 100%;
  gap: 0;
  margin-bottom: 0;
}
.faixa-3 .stat {
  flex: 1;
  align-items: center;
  text-align: center;
}
.faixa-3 .stat-label { max-width: none; }

/* ══════════════════════════════════════════
   FAIXA 4 — P.A.N.C.A.D.A.
══════════════════════════════════════════ */

.faixa-4 {
  background: var(--preto);
  flex-direction: column;
  gap: 0;
  align-items: flex-start;
  padding-top: 100px;
}
.faixa-4 .inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  z-index: 2;
}
.faixa-4 .faixa-tag { color: var(--menta); }
.faixa-4 h2 {
  font-size: clamp(3rem, 6vw, 6rem);
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}
.faixa-4 .faixa-sub {
  font-size: 0.9rem;
  font-weight: 300;
  color: rgba(255,255,255,0.4);
  margin-bottom: 40px;
  letter-spacing: 1px;
}

/* ── Stats do método ── */
.stats-row {
  display: flex;
  gap: 36px;
  margin-bottom: 36px;
}
.stat { display: flex; flex-direction: column; }
.stat-num {
  font-size: clamp(3.2rem, 5.5vw, 6rem);
  font-weight: 700;
  color: var(--branco);
  line-height: 1;
  letter-spacing: -2px;
}
.stat-label {
  font-size: 0.78rem; font-weight: 300;
  color: rgba(255,255,255,0.45);
  margin-top: 6px;
  max-width: 150px;
  line-height: 1.5;
}

/* ── Beats ── */
.beats-row {
  display: flex;
  gap: 12px;
  margin-bottom: 32px;
}
.beat-block {
  width: 76px; height: 76px;
  border-radius: 10px;
  background: rgba(15,12,26,0.8);
  border: 1px solid rgba(74,28,147,0.4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.beat-block::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 40%;
  background: radial-gradient(ellipse at center bottom, rgba(65,201,166,0.25), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.beat-block:hover::before,
.beat-block.active::before { opacity: 1; }
.beat-block:hover,
.beat-block.active {
  background: var(--roxo);
  border-color: var(--menta);
  box-shadow: 0 0 20px rgba(65,201,166,0.2), 0 0 40px rgba(74,28,147,0.3);
  transform: scale(1.08) translateY(-4px);
}
.beat-letter {
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--menta);
  line-height: 1;
}
.beat-word {
  font-size: 0.42rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255,255,255,0.4);
}

/* ── Painel de descrição ── */
.beat-panel {
  min-height: 140px;   /* pré-aloca espaço → sem pulo ao revelar */
  padding: 20px 24px;
  background: rgba(74,28,147,0.08);
  border-left: 3px solid var(--menta);
  border-radius: 0 8px 8px 0;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  max-width: 620px;
}
.beat-panel.visible {
  opacity: 1;
  transform: translateY(0);
}
.beat-panel-title {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--menta);
  margin-bottom: 8px;
}
.beat-panel-text {
  font-size: 0.9rem;
  font-weight: 300;
  color: rgba(255,255,255,0.6);
  line-height: 1.7;
}

/* ══════════════════════════════════════════
   FAIXA 5 — CASES
══════════════════════════════════════════ */

.faixa-5 {
  background: linear-gradient(135deg, #0d0520, #1a0840, #0d0520);
}
.faixa-5 .inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 900px;
  z-index: 2;
}
.faixa-5 .faixa-tag { color: var(--amarelo); }
.faixa-5 h2 {
  font-size: clamp(1.6rem, 2.8vw, 2.8rem);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 48px;
  max-width: 560px;
}

.cases-grid {
  display: flex;
  gap: 24px;
}
.case-card {
  flex: 1;
  padding: 28px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px;
  transition: border-color 0.3s ease, transform 0.2s ease;
}
.case-card:hover {
  border-color: rgba(65,201,166,0.2);
  transform: translateY(-4px);
}
.case-segment {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.25);
  margin-bottom: 8px;
}
.case-name {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 16px;
}
.case-waveform {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 40px;
  margin-bottom: 20px;
}
.case-wave-bar {
  flex: 1;
  border-radius: 2px;
  height: 32px;
  transform-origin: bottom center;
  transform: scaleY(0.125);
  animation: waveAnim 0.8s ease-in-out infinite alternate;
}
.case-wave-bar:nth-child(odd)  { animation-delay: 0.1s; }
.case-wave-bar:nth-child(3n)   { animation-delay: 0.25s; }
@keyframes waveAnim {
  from { transform: scaleY(0.125); }
  to   { transform: scaleY(1); }
}
.case-card-1 .case-wave-bar { background: var(--menta); }
.case-card-2 .case-wave-bar { background: var(--amarelo); }

.btn-ouvir {
  padding: 10px 20px;
  background: transparent;
  font-family: var(--font);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 999px;
  color: rgba(255,255,255,0.5);
  cursor: pointer;
  transition: border-color 0.3s, color 0.3s;
}
.btn-ouvir:hover { border-color: var(--menta); color: var(--menta); }

/* ── CTA discoteca completa ── */
.btn-discoteca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 36px;
  align-self: center;
  padding: 13px 28px;
  background: transparent;
  border: 1px solid rgba(65,201,166,0.35);
  border-radius: 999px;
  font-family: var(--font);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--menta);
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
.btn-discoteca::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(65,201,166,0.08);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.btn-discoteca:hover {
  border-color: var(--menta);
  box-shadow: 0 0 24px rgba(65,201,166,0.18);
}
.btn-discoteca:hover::before { opacity: 1; }
.btn-discoteca svg {
  flex-shrink: 0;
  transition: transform 0.3s ease;
}
.btn-discoteca:hover svg { transform: translateX(4px); }

/* ══════════════════════════════════════════
   FAIXA 6 — PROVA SOCIAL
══════════════════════════════════════════ */

.faixa-6 {
  background: var(--preto);
  gap: 36px;
  justify-content: center;
  align-items: center;
}
.faixa-6 .inner {
  display: flex;
  flex-direction: column;
  max-width: 760px;
  gap: 40px;
  z-index: 2;
  flex: 1;
}
.faixa-6 .faixa-tag { color: rgba(255,255,255,0.25); }

/* ── Strip de logos — rolagem vertical infinita ── */
/* scrollLogoV removida — animação controlada por logos.js (rAF) */

.logos-side {
  flex-shrink: 0;
  width: 180px;
  height: 62vh;
  overflow: hidden;
  position: relative;
  border-right: 1px solid rgba(65,201,166,0.08);
  padding-right: 20px;
}

/* Fade top e bottom */
.logos-side::before,
.logos-side::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 72px;
  z-index: 2;
  pointer-events: none;
}
.logos-side::before {
  top: 0;
  background: linear-gradient(to bottom, var(--preto), transparent);
}
.logos-side::after {
  bottom: 0;
  background: linear-gradient(to top, var(--preto), transparent);
}

.logos-track {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
  will-change: transform;
}

.logo-item {
  width: 150px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0.3;
  filter: grayscale(1) brightness(1.6);
  transition: opacity 0.35s ease, filter 0.35s ease;
  cursor: default;
}
.logo-item:hover {
  opacity: 0.75;
  filter: grayscale(0) brightness(1);
}
.logo-item img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}
/* Fallback texto enquanto não há imagem */
.logo-item span {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.9);
  text-align: center;
  line-height: 1.4;
}
.faixa-6 h2 {
  font-size: clamp(1.6rem, 2.8vw, 2.8rem);
  font-weight: 700;
  margin-bottom: 8px;
}

.depoimento {
  padding: 28px 32px;
  border-left: 3px solid var(--menta);
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.depoimento.visible {
  opacity: 1;
  transform: translateX(0);
}
.depoimento-text {
  font-size: 1rem;
  font-weight: 300;
  color: rgba(255,255,255,0.7);
  line-height: 1.8;
  font-style: italic;
  margin-bottom: 16px;
}
.depoimento-autor {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
}
.depoimento-autor span { color: var(--menta); }

/* ══════════════════════════════════════════
   FAIXA 7 — CTA FINAL
══════════════════════════════════════════ */

.faixa-7 {
  background: radial-gradient(ellipse at center, rgba(74,28,147,0.4) 0%, var(--preto) 70%);
  flex-direction: column;
  gap: 0;
}
.faixa-7 .inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  z-index: 2;
  padding-bottom: 44px; /* clearance for fixed footer */
}
.faixa-7 .pre-text {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.2);
  margin-bottom: 28px;
}
.faixa-7 h2 {
  font-size: clamp(2.4rem, 5vw, 5rem);
  font-weight: 700;
  line-height: 1.05;
  margin-bottom: 20px;
}
.faixa-7 .accent { color: var(--menta); }
.faixa-7 .sub-cta {
  font-size: 1rem;
  font-weight: 300;
  color: rgba(255,255,255,0.4);
  max-width: 400px;
  line-height: 1.7;
  margin-bottom: 48px;
}
.faixa-7 .eq-final {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 60px;
  margin-bottom: 48px;
}
.faixa-7 .eq-bar-final {
  width: 5px;
  border-radius: 999px;
  background: linear-gradient(to top, var(--roxo), var(--menta));
}
.btn-cta-final {
  padding: 20px 56px;
  background: var(--menta);
  color: var(--preto);
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  border-radius: 999px;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.3s ease;
  cursor: pointer;
}
.btn-cta-final::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--amarelo);
  transform: translateX(-100%);
  transition: transform 0.4s ease;
  z-index: 0;
}
.btn-cta-final:hover::before { transform: translateX(0); }
.btn-cta-final:hover { transform: translateY(-3px); box-shadow: 0 16px 50px rgba(65,201,166,0.35); }
.btn-cta-final span { position: relative; z-index: 1; }