/* LOCAL FONTS */

@font-face {
  font-family: "Helvetica Neue";
  src: url("../fonts/HelveticaNeue-Thin.otf") format("opentype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Helvetica Neue";
  src: url("../fonts/HelveticaNeue-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Helvetica Neue";
  src: url("../fonts/HelveticaNeue-Roman.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Helvetica Neue";
  src: url("../fonts/HelveticaNeue-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Helvetica Neue";
  src: url("../fonts/HelveticaNeue-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --purple: #7d3aec;
  --white: #f3f0eb;
  --radius-16: 16px;
  --black: #060608;
  --light-gray: #bcbebf;
}

/* GERAIS */

* {
  margin: 0;
  box-sizing: border-box;
  padding: 0;
  list-style: none;
  text-decoration: none;
  font-family: "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  color: var(--white);
  border: none;
  scrollbar-color: var(--purple);
  scrollbar-width: none;
}

html {
  scroll-behavior: smooth;
}

::selection {
  background-color: var(--purple);
  color: var(--black);
}

#smooth-content {
  background-color: var(--black);
}

body {
  background-color: var(--black);
}

nav.menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 1.5rem;
  min-height: 8rem;
}

section {
  width: 100%;
}

.btn {
  background-color: var(--purple);
  color: var(--white);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  font-weight: 700;
}

/* MENU */

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  color: var(--white);
  transition: color 0.4s ease;

  z-index: 9999;
}

.logo {
  padding: 1.5rem 1rem 1rem 1.5rem;
  border-radius: 0 0 var(--radius-16) 0;
  cursor: pointer;
}

/* Páginas de evento: antes do scroll a logo fica invisível (opacity:0 em
   header.php), só reaparecendo como logo-scrolled. pointer-events não sobe
   do filho pro pai — desligar só na .logo não basta, pois nav.menu/header
   têm a mesma geometria (nav preenche a largura toda) e continuam
   capturando o toque no ícone de ticket do featured-event, que fica por
   baixo nessa mesma área. Desligando o header inteiro (e reabilitando os
   controles reais em .menu-btns) o clique passa através até o conteúdo. */
header.header-event:not(.is-scrolled) {
  pointer-events: none;
}

header.header-event:not(.is-scrolled) .menu-btns {
  pointer-events: auto;
}

/* MENU SCROLLADO */
.logo-scrolled {
  display: none;
}

header.is-scrolled .logo {
  background-color: transparent;
}

header.is-scrolled .logo-default {
  display: none;
}

header.is-scrolled .logo-scrolled {
  display: block;
}

header.is-scrolled .logo-img {
  max-width: 15rem;
  width: auto;
  height: auto;
}

.logo-img {
  width: 7rem;
  height: 5rem;
}

.submenu {
  margin-right: 4rem;
}

/* Espaçador invisível que ocupa o lugar do antigo SVG hamburguer no layout do header */
.menu-icon-placeholder {
  width: 60px;
  height: 38px;
}

/* Botão Lottie fixo — posicionado acima do overlay (.submenu-mobile z-index: 999999999) */
.lottie-menu-btn {
  position: fixed;
  top: 0;
  right: 4rem;
  height: 8rem;
  display: flex;
  align-items: center;
  z-index: 9999999999;
  cursor: pointer;
}

#menu-lottie-canvas {
  width: 60px;
  height: 60px;
  filter: brightness(0) invert(1);
  /* transition: filter 0.3s ease; */
}

.menu-btns {
  display: flex;
  align-items: center;
  gap: 3.75rem;
  padding: 2rem 0;
}

.menu-btns p {
  font-size: 1.5rem;
}

.soundbar {
  display: flex;
  gap: 1.5rem;
  align-items: center;
}

.line {
  width: 7rem;
  height: 3px;
  border-radius: var(--radius-16);
  background-color: var(--white);

  transition: transform 0.1s ease;
  transform-origin: bottom;
}

/* MENU TABLET / MOBILE */
.submenu-mobile {
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
  padding: 0;

  display: flex;
  flex-direction: column;

  width: 100dvw;
  height: 100dvh;

  background-color: var(--black);

  z-index: 999999999;

  /* Estado inicial: recolhido no topo — GSAP controla abertura/fechamento */
  clip-path: ellipse(120% 0% at 50% 0%);
  pointer-events: none;
}

.submenu-mobile .btn {
  background-color: inherit;
}

.submenu-grid {
  display: flex;
  justify-content: space-between;
  height: 100%;
}

.submenu-gallery {
  grid-column: 1 / span 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  height: 100%;
  overflow: hidden;
  padding-left: 4rem;
}

.submenu-gallery img {
  width: 100%;
  max-width: 404px;
  max-height: 444px;
  aspect-ratio: 1 / 1;
}

.gallery-col {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  will-change: transform;
}

.gallery-col--2 {
  margin-top: 4rem;
}

.gallery-img {
  flex: 1;
  border-radius: var(--radius-16);
  overflow: hidden;
  filter: brightness(0.35) grayscale(1);
  transition: filter 0.4s ease;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* will-change: filter só enquanto o cursor está sobre a galeria (quando o filtro
   grayscale→cor realmente transita). Permanente, mantinha 6 imagens grandes (~11MB)
   presas numa camada filtrada o tempo todo — pressão de GPU à toa, já que o submenu
   fica escondido na maior parte do tempo. */
.submenu-gallery:hover .gallery-img {
  will-change: filter;
}

.gallery-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gallery-img.is-active {
  filter: none;
}

.submenu-nav {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  padding: 2rem 1rem 3rem 0;
}

.submenu-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding-right: 8rem;
}

.submenu-link {
  position: relative;
  display: inline-block;
}

.submenu-link a,
.submenu-link-text {
  font-size: 6rem;
  font-weight: 700;
  line-height: 1.05;
  color: var(--white);
  text-decoration: none;
  display: inline-block;
  transition: color 0.3s ease;
}

.submenu-link a:hover,
.submenu-link a:hover .btn-char,
.submenu-socials-list a:hover,
.submenu-socials-list a:hover .btn-char {
  color: var(--purple);
}

.submenu-socials-list a {
  transition: color 0.3s ease;
}

.submenu-link.is-current .submenu-link-text,
.submenu-link.is-disabled .submenu-link-text {
  color: var(--light-gray);
  cursor: default;
}

.submenu-line-lottie {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
}

.submenu-signature-lottie {
  opacity: 0;
}

.submenu-footer {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  padding-right: 8rem;
}

.submenu-signature-lottie {
  width: 20rem;
  height: auto;
  align-self: center;
  justify-self: center;
}

.submenu-socials {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
  align-self: center;
}

.submenu-socials p {
  color: var(--light-gray);
  font-size: 1rem;
  letter-spacing: 0.1em;
  font-weight: 700;
}

.submenu-socials-list {
  display: flex;
  gap: 1.25rem;
}

.submenu-socials-list a {
  font-size: 1.2rem;
  color: var(--white);
  text-decoration: none;
  font-weight: 700;
}

.social-icon {
  display: none;
}

@media (max-width: 768px) {
  .submenu-grid {
    grid-template-columns: 1fr;
  }
  .submenu-gallery {
    display: none;
  }
  .submenu-link a,
  .submenu-link-text {
    font-size: 3.5rem;
  }
}

/* HERO + IMPACT WRAPPER */

.hero-impact-wrapper {
  position: relative;
}

/* HERO */

.hero {
  position: relative;
  z-index: 1;
  height: calc(100dvh - 1.5rem);
  width: 100%;
  padding: 1.5rem 1.5rem 0 1.5rem;
}

.fixed-logo {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background-color: var(--black);
}

.hero .video-container {
  height: 100%;
  background-color: var(--black);
  border-radius: var(--radius-16);
  margin: 0;
  margin-bottom: 1.5rem;
}

.video-container {
  height: 100%;
  background-color: var(--black);
  margin: 1.5rem;
  border-radius: var(--radius-16);
}

.btn-hero-box {
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: var(--black);
  padding: 1rem 1.5rem 0 1rem;
  border-radius: var(--radius-16) var(--radius-16) var(--radius-16) 0;
}

.curved-border {
  width: 4rem;
  height: 4rem;
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 10;
}

.curved-border img {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

/* ── HERO: curvas do .fixed-logo ── */

/* Borda inferior do logo — lado esquerdo */
.fixed-logo .curved-border.superior-left {
  bottom: -58px;
  left: 18px;
  transform: rotate(180deg);
}

/* Borda direita do logo — lado superior */
.fixed-logo .curved-border.superior-rigth {
  top: 18px;
  right: -58px;
  transform: rotate(180deg);
}

/* ── HERO: curvas do .btn-hero-box ── */

/* Borda esquerda do box — lado inferior */
.btn-hero-box .curved-border.inferior-left {
  bottom: -6px;
  left: -58px;
}

/* Borda superior do box — lado direito */
.btn-hero-box .curved-border.inferior-rigth {
  top: -58px;
  right: 18px;
}

.hero-btn {
  width: 18.75rem;
  height: 4rem;
  border-radius: var(--radius-16);
  font-size: 1.5rem;
  font-weight: bold;
}

/* VIDEO HERO */

.video-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-16);
}

/* DESLIZAR */

.scroll-indicator {
  position: absolute;
  bottom: calc(130px + 1rem);
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  color: var(--white);
  z-index: 2;
}

.scroll-text {
  font-size: 1rem;
  letter-spacing: 0.15rem;
  text-transform: uppercase;
  margin: 0 0 1rem 0;
  pointer-events: none;
  font-weight: 600;
}

.scroll-line-wrap {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 0;
  overflow: hidden;
}

.scroll-line-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--white);
  transform-origin: 50% 0%;
  transform: scaleY(0);
}

/* SECTION 02 (IMPACT) REF DE ENTRADA LANDO NORRIS */

.impact {
  display: flex;
  flex-direction: column;
  justify-content: center;

  height: calc(100dvh);
  background-image: url(/assets/images/Section-02-bg-img.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  margin-top: 1.5rem;

  overflow: hidden;
}

/* TEM QUE VIR DA ESQUERDA PARA A DIREITA E AS LETRAS DEVEM TER EFEITO HORIZONTAL DE VAI E VEM AO SCROLLAR REF CHARLES LECLERC */
.impact h1 {
  text-align: center;
  font-size: 14rem;
  white-space: nowrap;
  font-weight: 700;
}

/* SECTION 03 (MANIFEST) REF DE ANIMAÇÃO LANDO NORRIS */
.manifest {
  padding: 8rem 1.5rem;
  position: relative;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8rem;
}

.logo-manifest {
  height: 8.125rem;
}

.manifest p {
  padding: 0 8rem 24rem 8rem;
  text-align: center;
  font-size: 8rem;
  font-weight: 700;
}

/* VERSUS + SCHEDULE WRAPPER — sobreposição em camada */
.versus-schedule-wrapper {
  position: relative;
}

/* VERSUS — pinado via GSAP (ScrollSmoother não suporta position:sticky) */
.versus {
  position: relative;
  z-index: 1;

  padding: 8rem 0 0 0;
  display: flex;
  justify-content: space-between;

  background-color: var(--white);
  overflow: hidden; /* impede scroll horizontal das imagens que entram de fora */
}

.versus h2 {
  font-weight: 700;
  display: inline;
}

.versus h2,
.versus p {
  color: var(--black);
}

.inverted {
  transform: scaleX(-1);
}

.double-txt-box-btn {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8.25rem;
  width: 100dvw;
  z-index: 1;
}

.txt-double-box {
  display: flex;
  justify-content: center;
  gap: 4.75rem;
  text-align: right;
}

.versus .txt-box {
  max-width: 26.75rem;
}

.txt-box h2 {
  font-size: 8rem;
}

.txt-box p {
  font-size: 2rem;
}

.right-align {
  text-align: right;
}

.left-align {
  text-align: left;
}

.versus .btn {
  width: 28.125rem;
  padding: 1rem;
  border-radius: var(--radius-16);
  font-size: 1.5rem;
}

.double-txt-box-btn {
  max-width: 100%;
}

/* ASSINATURA COM TEXTO */

.schedule {
  position: relative;
  z-index: 5; /* > .sponsors (3) para a box-shadow inferior pintar à frente e selar o seam */
  background-color: var(--black); /* cobre a .versus ao deslizar por cima */
  box-shadow: 0 1px 0 0 var(--black); /* sela seam subpixel do ScrollSmoother com .schedule-visor */

  padding: 8rem 1.5rem;
  /* border-bottom-left-radius: 60% 10%;
  border-bottom-right-radius: 60% 10%; */
}

.schedule .cta-box {
  grid-template-columns: 1.25fr 1fr 1fr;
  gap: 8rem;
}

.schedule .cta-box .btn {
  height: 4rem;
  border-radius: 1rem;
  font-size: 1.5rem;
  font-weight: 700;
  align-self: center;
}

a.btn-icons {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

a.btn-icons path {
  fill: var(--light-gray);
  transition: fill 0.3s ease;
}

a.btn-icons:hover path,
a.btn-icons.is-copied path {
  fill: var(--purple);
}

.text-signature {
  position: relative;
  line-height: 0.9;
  text-align: center;
  margin-top: 3rem;
}

.next-event .text-signature i {
  font-style: normal;
  color: var(--light-gray);
  margin-right: 0.4em;
}

.next-event .text-signature span {
  display: inline;
  color: inherit;
}

.text-signature h1 {
  font-size: 8rem;
  font-weight: 800;
}

.next-event h2 {
  font-size: 8rem;
  font-weight: 700;
}

.text-signature span {
  display: block;
  color: var(--light-gray);
}

/* O "O " interno deve seguir a linha "O PRÓXIMO AGORA", não virar bloco próprio */
.text-signature h1 span .hide-mobile {
  display: inline;
}

.text-signature .signature {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-height: 500px;
  z-index: 1;
  width: 100%;
  height: 500px;
}

/* AGENDA */

.timer-txt {
  display: grid;
  grid-template-columns: 5fr 9fr;
  column-gap: 1.5rem;

  margin-top: 10rem;
}

.timer {
  text-align: right;
  display: flex;
  justify-content: end;
  align-items: center;
}

.timer h2 {
  font-size: 4rem;
  color: var(--purple);
}

.timer-txt .timer p {
  color: var(--purple);
  font-size: 7rem;
  font-weight: 900;
  display: inline-block;
}

.timer-txt .timer p span {
  color: inherit;
}

.timer-txt .timer p i {
  font-style: normal;
  color: inherit;
  margin-right: 0.4em;
}

.timer-txt .timer p i:last-child {
  margin-right: 0;
}

.timer-txt p {
  font-size: 3rem;
}

.schedule-list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 3rem;
  margin-top: 8rem;
}

.schedule-list-column {
  display: grid;
  grid-template-columns: 2.5fr 2.2fr 2.8fr 2fr 0.5fr 0.5fr;
  gap: 1rem;
  width: 100%;
}

.schedule-list-column p {
  color: var(--light-gray);
}

.schedule-item {
  display: grid;
  grid-template-columns: 2.5fr 2.2fr 2.8fr 2fr 0.5fr 0.5fr;
  text-align: left;
  width: 100%;
  gap: 1rem;

  padding-bottom: 3rem;
  border-bottom: 2px solid var(--light-gray);
}

.schedule .block-reveal-wrap {
  width: 100%;
}

.schedule-item p {
  font-size: 2.4rem;
  font-weight: 500;
  display: flex;
  justify-content: start;
  align-items: center;
}

.schedule-item .btn-icons {
  align-self: center;
}

.schedule-item .btn {
  border-radius: var(--radius-16);
  font-size: 1.5rem;
  font-weight: 700;
  height: 48px;
  align-self: center;
}

/* Ícone de ingresso — visível apenas em tablet/mobile (ver responsive.css) */
.schedule-item .btn-ticket .ticket-icon {
  display: none;
}

/* No desktop os links não formam célula própria: os filhos participam
   diretamente do grid de 6 colunas (ver .schedule-links no responsive.css). */
.schedule-links {
  display: contents;
}

/* Variante curta de célula — usada só em tablet/mobile (ver responsive.css) */
.schedule-item .cell-short {
  display: none;
}

/* Cabeçalho: "INGRESSOS" (desktop) vs "LINKS" (tablet/mobile).
   Dois <p> separados p/ não confundir a animação de reveal, que
   concatena o textContent de um único elemento. */
.schedule-list-column .col-compact {
  display: none;
}

/* Cadeado de evento privado — visível só em tablet/mobile (ver responsive.css) */
.schedule-item .evento-privado-label .lock-icon {
  display: none;
}

.schedule-item .evento-privado-label {
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  grid-column: span 3;
  position: relative;
}

.line-lottie-privado {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.cta {
  margin-top: 16rem;
}

.cta-box {
  display: grid;
  grid-template-columns: 3.5fr 6.5fr;
  column-gap: 5rem;
}

.cta-box p {
  font-size: 3rem;
  color: var(--purple);
}

.cta-btns {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cta-btns .btn {
  width: 100%;
  max-width: 28.125rem;
  border-radius: var(--radius-16);
  font-size: 1.5rem;
  padding: 1rem 1.5rem;
}

/* PATROCINADORES */

.sponsors {
  position: relative;
  z-index: 3; /* deve ser > .versus (z-index:1) para aparecer sobre o pin ao subir */
  background-color: var(--white);
  box-shadow: 0 1px 0 0 var(--white); /* sela seam subpixel do ScrollSmoother com .reveal */
  padding: 19rem 1.5rem;
  overflow: hidden;
}

.sponsors-signature-bg {
  position: absolute;
  top: 40%;
  right: 0%;
  transform: translate(-50%, -50%);
  width: 70%;
  pointer-events: none;
  opacity: 1;
  z-index: 0;
}

.sponsors-header {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 8fr 4fr;
  justify-content: center;
  align-items: center;
}

.sponsors-h2 {
  font-size: 8rem;
  font-weight: 900;
  line-height: 0.9;
  color: var(--purple);
}

.sponsors-h2 span {
  display: block;
  color: var(--purple);
}

.sponsors-desc {
  justify-self: center;
  padding-top: 1rem;
}

.sponsors-desc p {
  font-size: 2rem;
  color: var(--black);
}

.sponsors-marquee {
  position: relative;
  z-index: 1;
  overflow: hidden;
  margin-top: 8rem;
  padding: 3rem 0;
}

.sponsors-track {
  display: flex;
  gap: 6rem;
  align-items: center;
  width: max-content;
}

.sponsors-track img {
  height: 10rem;
  width: auto;
  flex-shrink: 0;
}

.sponsor-sep {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--black);
  flex-shrink: 0;
}

/* REVEAL + SOUNDCLOUD — wrapper de profundidade */
.reveal-sc-wrapper {
  position: relative;
}

/* REVEAL - pinado via GSAP (ScrollSmoother não suporta position:sticky) */
.reveal {
  position: relative;
  z-index: 5; /* > .featured-event (z-index:3) e .schedule-visor (z-index:4) */
  height: 100dvh;
  background: transparent; /* transparent: deixa o .soundcloud aparecer por trás */
  overflow: hidden;
}

/* PNG cobre o viewport inteiro: áreas brancas = overlay branco, buraco transparente = soundcloud visível */
.reveal img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  object-fit: cover;
  transform-origin: center center;
  will-change: transform;
}

/* O overlay vazado virou um <svg> inline (.logo-reveal). A regra .reveal img acima
   NÃO casava com <svg>, então o SVG renderizava no tamanho default (minúsculo) e o
   efeito "mal aparecia". Aqui ele cobre o viewport inteiro ANTES do zoom.
   IMPORTANTE: no desktop NÃO promovemos a camada de GPU — assim o browser
   re-rasteriza o vetor a cada frame e o zoom fica NÍTIDO. A promoção (que deixa
   pixelado, mas evita travar) é aplicada só no touch (ver responsive.css). */
.reveal svg.logo-reveal {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform-origin: center center;
}

/* SOUNDCLOUD — começa atrás da .reveal, sobe enquanto a logo cresce */
.soundcloud {
  position: relative;
  z-index: 1;
  margin-top: 20dvh;
}

/* SOUNDCLOUD */
.soundcloud {
  padding: 8rem 1.5rem;
  background-color: var(--black);
}

.soundcloud-header {
  display: flex;
  gap: 3.75rem;
  justify-content: start;
  align-items: center;
}

.soundcloud-header-txt {
  width: 100%;
  text-align: left;

  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.soundcloud-header-txt p {
  font-size: 2rem;
  color: var(--light-gray);
}

.soundcloud-header-txt .tracks-count {
  display: flex;
  gap: 1.5rem;
  align-items: center;
}

.soundcloud-header-txt .tracks-count p {
  font-size: 1.5rem;
}

.soundcloud-header-txt h2 {
  font-size: 8rem;
  font-weight: 700;
  line-height: 0.9;
}

.soundcloud-header-txt img {
  max-width: max-content;
}

/* SOUNDCLOUD LIST */

.soundcloud-list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 3rem;
  margin-top: 8rem;
}

.soundcloud-list-column {
  display: grid;
  grid-template-columns: 0.5fr 5fr 2fr 3fr;
  gap: 1rem;
  width: 100%;
}

.block-reveal-wrap {
  width: 100%;
}

.soundcloud-list-column p {
  color: var(--light-gray);
  font-size: 1.5rem;
}

.soundcloud-item {
  display: grid;
  grid-template-columns: 0.5fr 5fr 2fr 3fr;
  text-align: left;
  width: 100%;
  gap: 1rem;

  padding-bottom: 3rem;
  border-bottom: 2px solid var(--light-gray);
}

.soundcloud-item p {
  font-size: 2.5rem;
  font-weight: 500;
  display: flex;
  justify-content: start;
  align-items: center;
}

.soundcloud-item .soundcloud-cta {
  align-self: center;
  width: 100%;
}

.soundcloud-item .soundcloud-cta-text {
  border-radius: var(--radius-16);
  font-size: 1.5rem;
  font-weight: 700;
  height: 3.75rem;
  width: 100%;
}

.soundcloud-cta .soundcloud-play-icon {
  display: none;
}

.soundcloud .cta-btns {
  display: flex;
  justify-content: end;
  align-items: center;
}

.soundcloud .cta {
  margin-top: 8rem;
}

.soundcloud .cta-box p {
  color: var(--purple);
}

.soundcloud .soundcloud-track {
  display: flex;
  gap: 1.5rem;
}

.soundcloud .soundcloud-image {
  width: 8.375rem;
  border-radius: 1rem;
  display: flex;
  align-items: center;
}

.soundcloud .soundcloud-image img {
  width: 8.375rem;
  height: 8.375rem;
  border-radius: var(--radius-16);
}

.soundcloud .soundcloud-track-text {
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
}

.soundcloud .soundcloud-track-text span {
  font-size: 1.5rem;
  color: var(--light-gray);
}

.soundcloud .cta-box {
  grid-template-columns: 1fr 1fr;
}

.soundcloud .cta-box .btn {
  width: 100%;
  max-width: 32.563rem;
}

/* RODAPÉ */

.footer {
  position: relative;
  padding: 3rem 1.5rem 1.5rem 1.5rem;
}

.footer-container {
  position: relative;
  background-color: var(--white);
  border-radius: var(--radius-16);
  height: calc(100dvh);
  padding-top: 7rem;
  overflow: hidden;
}

#footer-mercury-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}

.footer-copy-policy {
  display: flex;
  justify-content: space-between;
  position: absolute;
  bottom: 0;
  width: 100%;
}

.footer-copy-policy .copy-short {
  display: none;
}

.footer-copy-policy p {
  position: relative;
  padding: 0.5rem 1rem;
  background-color: var(--black);
  border-radius: 0 var(--radius-16) 0 0;

  width: 29.5rem;
}

.footer-copy-policy .curved-border.superior-left {
  top: -58px;
  left: -6px;
  transform: rotate(90deg);
}

.footer-copy-policy .curved-border.superior-right {
  top: -58px;
  right: -6px;
}

.footer-copy-policy a {
  position: relative;
  padding: 0.5rem 1rem;
  background-color: var(--black);
  border-radius: var(--radius-16) 0 0 0;
  width: 29.5rem;
  text-align: right;
}

.today-front-side {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0);

  z-index: 9;
}

.footer-links-box {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50dvw;
  margin-top: 4rem;
}

.footer-container .btn {
  position: absolute;
  bottom: 5rem;
  width: 28.125rem;
  height: 4rem;
  left: 50%;
  z-index: 100;
  font-weight: 700;
  border-radius: 1rem;
  font-size: 1.5rem;
  transform: translateX(-50%);
}

.footer-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 3;
}

.footer-links p {
  color: var(--light-gray);
  font-size: 1.5rem;
  text-align: center;
}

.footer-links a {
  color: var(--black);
  font-size: 3rem;
  text-align: center;
  font-weight: 900;
  cursor: pointer;
  line-height: 1.2;
  font-kerning: none;
  position: relative;
  overflow: hidden;
  display: block;
}

/* Página atual no rodapé: cinza, sem clique, com line.lottie por cima */
.footer-links .footer-link-current a.is-current,
.footer-links .footer-link-current a.is-current:hover,
.footer-links .footer-link-current a.is-current:hover .btn-char,
.footer-links .footer-link-disabled a.is-current,
.footer-links .footer-link-disabled a.is-current:hover,
.footer-links .footer-link-disabled a.is-current:hover .btn-char {
  color: var(--black);
  cursor: default;
  pointer-events: none;
}

.footer-line-lottie {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
}

.btn--no-events {
  background-color: transparent;
  color: var(--white);
  cursor: default;
  pointer-events: none;
}

.weekly-download-line-lottie {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.made-by {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  text-align: center;

  padding: 1rem;
  background-color: var(--white);
  border-radius: var(--radius-16) var(--radius-16) 0 0;
  font-weight: 600;
  z-index: 4;
  width: 38rem;
}

.made-by .curved-border.inferior-left {
  max-height: 2.5rem;
  max-width: 2.5rem;
  bottom: -2px;
  left: -35px;
}

.made-by .curved-border.inferior-rigth {
  max-height: 2.5rem;
  max-width: 2.5rem;
  bottom: -2px;
  right: -35px;
  transform: rotate(90deg);
}

.made-by p {
  color: var(--light-gray);
}

.made-by a {
  color: darkgray;
}

.footer .text-signature {
  position: relative;
  line-height: 0.9;
  text-align: center;
}

.footer .text-signature h1 {
  font-size: 8rem;
  font-weight: 900;
  color: var(--black);
}

.footer .text-signature span {
  display: block;
  color: var(--black);
}

/* PÁGINA DA AGENDA */

.schedule.hero-schedule {
  padding: 0 1.5rem;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.timer-txt.hero-timer {
  width: 100%;
}

.timer-txt.hero-timer p {
  display: flex;
  align-items: center;
}

.cta.hero-cta {
  /* margin-top: 8rem; */
  padding: 0 1.5rem 8rem 1.5rem;
}

.cta.hero-cta.different {
  margin-top: 0;
}

.cta.hero-cta .cta-box {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
}

.cta.hero-cta .cta-box p {
  max-width: 600px;
  text-align: right;
  color: var(--purple);
}

.cta.hero-cta .cta-box a.btn {
  width: fit-content;
  padding: 0 1.5rem;
  height: 64px;
  border-radius: var(--radius-16);
  align-self: center;
}

.cta.hero-cta .cta-box a {
  font-size: 1.5rem;
  font-weight: 700;
}

.cta.hero-cta .txt-reveal-wrap {
  max-width: fit-content;
}

/* EVENTO EM DESTAQUE */

.featured-event-sponsors-wrapper {
  position: relative;
}

.featured-event-sponsors-wrapper .featured-event {
  z-index: 3; /* .reveal tem z-index:5 e fica acima — featured-event só precisa ser > sponsors anterior */
  margin-bottom: 1.5rem;
}

.featured-event-sponsors-wrapper .sponsors {
  position: relative;
  z-index: 4; /* > featured-event (z-index:3) para deslizar por cima corretamente */
}

.featured-event {
  position: relative;
  z-index: 5; /* > .sponsors (3) para o pseudo-elemento abaixo pintar à frente e selar o seam com .schedule-visor */
  height: calc(100dvh - 3rem);
  width: 100%;
  background-color: var(--black);
  margin-bottom: 1.5rem;
}

/* Sela o seam subpixel do ScrollSmoother entre .featured-event e .schedule-visor:
   pinta uma faixa preta cobrindo a margem inferior + 1px dentro do visor,
   evitando que o branco da .sponsors (z:3) vaze sob o visor clipado. */
.featured-event::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: calc(1.5rem + 1px);
  background-color: var(--black);
  pointer-events: none;
}

.featured-event.mg5 {
  margin-bottom: 5rem;
}

.featured-event.mg5::after {
  height: calc(5rem + 1px);
}

.featured-event::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1;
  pointer-events: none;
}

.featured-event-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% - 1.5rem);
  height: 100%;
  z-index: 2;

  display: grid;
  grid-template-columns: 1fr 3fr 4.5fr 1fr 2.5fr;
  column-gap: 1.5rem;
}

.featured-event-overlay .house-name {
  position: relative;
  padding: 1.5rem;
  background-color: var(--black);
  border-radius: var(--radius-16) 0 var(--radius-16) 0;
  height: fit-content;
}

.featured-event-overlay .house-name h2 {
  writing-mode: vertical-rl;
  transform: rotate(180deg);

  font-size: clamp(3rem, 8vw, 6rem);
  color: var(--purple);
  font-weight: 700;
  white-space: nowrap;
}

.featured-event-overlay .when {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding-top: 1.5rem;
}

.featured-event-overlay .when p {
  font-size: 1.5rem;
}

.featured-event-overlay .when h2 {
  font-size: 5rem;
  font-weight: 600;
}

.featured-event-overlay .event-local {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding-top: 1.5rem;
}

.featured-event-overlay .event-local p {
  font-size: 1.5rem;
}

.featured-event-overlay .event-local h2 {
  font-size: 3rem;
  font-weight: 600;
}

.featured-event-overlay .overlay-btn {
  position: relative;
  padding: 1rem 1rem 0 1rem;
  align-self: flex-end;
  background-color: var(--black);
  border-radius: var(--radius-16) 0 0 0;
}

.featured-event-overlay .overlay-btn a {
  padding: 1rem;
  border-radius: var(--radius-16);
  font-size: 1.5rem;
  font-weight: 700;
}

/* ── FEATURED EVENT: curvas do .house-name ── */

/* Borda inferior do house-name — lado esquerdo */
.house-name .curved-border.superior-left {
  bottom: -58px;
  left: 18px;
  transform: rotate(180deg);
}

/* Borda direita do house-name — lado superior */
.house-name .curved-border.superior-rigth {
  top: -6px;
  right: -58px;
  transform: rotate(180deg);
}

/* ── FEATURED EVENT: curvas do .overlay-btn ── */

/* Borda esquerda do overlay-btn — lado inferior */
.overlay-btn .curved-border.inferior-left {
  bottom: -6px;
  left: -58px;
}

/* Borda superior do overlay-btn — lado direito */
.overlay-btn .curved-border.inferior-rigth {
  top: -58px;
  right: -6px;
}

.featured-event-overlay .share-btns {
  align-self: flex-end;
  display: flex;
  justify-content: space-around;
  padding-bottom: 0.5rem;
}

/* Curvas do .share-btns — exclusivas de mobile/tablet, escondidas no desktop */
.share-btns .curved-border {
  display: none;
}

.featured-event-overlay .bi {
  width: 3rem;
}

.featured-event-overlay .share-btns a {
  color: var(--white);
  transition:
    color 0.25s ease,
    transform 0.25s ease;
  cursor: pointer;
}

.featured-event-overlay .share-btns a svg {
  fill: var(--white);
  transition: fill 0.25s ease;
}

.featured-event-overlay .share-btns a:hover {
  color: var(--purple);
}

.featured-event-overlay .share-btns a:hover svg {
  fill: var(--purple);
  transition: fill 0.25s ease;
}

.featured-share-btn {
  position: relative;
}

/* Ícone de ingresso no overlay — visível apenas em tablet/mobile (ver responsive.css) */
.featured-event-overlay .featured-ticket-btn {
  display: none;
}

.share-copy-toast {
  position: absolute;
  right: calc(100% + 0.75rem);
  top: 50%;
  transform: translateY(-50%);
  background: var(--purple);
  color: var(--white);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  padding: 0.35rem 0.75rem;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
}

.share-copy-toast.--above {
  right: auto;
  top: auto;
  bottom: calc(100% + 0.5rem);
  left: 50%;
  transform: translateX(-50%);
}

.featured-event-overlay .when .schedule-list-2 {
  margin-top: 0;
}

.schedule-list-2 .schedule-item {
  padding: 3rem 0;
}

/* DARK SPONSORS */

.sponsors.dark {
  background-color: var(--black);
  box-shadow: none;
}

.sponsors.dark .sponsors-desc p {
  color: var(--white);
}

/* TIMER PRÓXIMO EVENTO */
.next-event {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 9rem;

  padding: 8rem 1.5rem 14rem 1.5rem;
}

.next-event .text-signature {
  width: 100%;
}

.next-event p {
  font-size: 2rem;
  color: var(--light-gray);
}

.next-event h1 {
  font-size: clamp(2rem, 10vw, 12.5rem);
  font-weight: 700;
  white-space: nowrap;
}

.next-event i {
  color: var(--light-gray);
  margin-right: 2rem;
}

.next-event h1 .reveal-line {
  display: inline-block;
  border: none;
}

/* PÁGINA DO EVENTO ATIVO */

.share {
  padding: 8rem 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 3rem;
  overflow: hidden;
}

.share .share-txt {
  text-align: center;
}

.share .share-txt h1 {
  font-size: 5rem;
}

.share .share-txt h2 {
  font-size: 5rem;
  color: var(--purple);
  font-style: italic;
}

.share .share-txt-btn {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  justify-content: center;
  align-items: center;
}

.share .share-txt-btn p {
  font-size: 2rem;
}

.share .share-txt-btn a {
  max-width: 18.75rem;
  width: 18.75rem;
  font-size: 1.5rem;
  padding: 1rem;
  border-radius: var(--radius-16);
  font-weight: 700;
}

/* ── Fan Cards ─────────────────────────────────────── */

.fan-cards {
  position: relative;
  width: 100%;
  height: 42rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* margin-left = width / 2 | margin-top = height / 2 */
.fan-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18.75rem;
  margin-left: -9.375rem;
  margin-top: -16.625rem;
  cursor: pointer;
  will-change: transform;
}

.fan-card__face {
  height: 33.25rem;
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.5),
    0 2px 8px rgba(0, 0, 0, 0.3);
  transition: box-shadow 0.4s ease;
}

.fan-card.is-active .fan-card__face {
  box-shadow:
    0 24px 64px rgba(125, 58, 236, 0.45),
    0 4px 16px rgba(0, 0, 0, 0.4);
}

/* quando trocar placeholder por imagem */
.fan-card__face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- PÁGINA DO DJ TODAY --- */

/* HERO */
.hero-today h1 {
  opacity: 1;
  transform: scaleX(20px);
  transition: all ease 0.2s;
  line-height: 0.9;
}

.hero-today-content {
  display: grid;
  grid-template-columns: 4fr 8fr;
  min-height: 100dvh;
  width: 100%;
  padding: 1.5rem 1.5rem 0 0;
}

.hero-today-content-txt {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.hero-today-content-txt-block {
  max-width: 70%;
  align-self: flex-end;
  margin-right: calc(10vw);

  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.hero-today-content h1 {
  font-size: 22rem;
  font-weight: 700;
}

.hero-today-content h2 {
  font-weight: 700;
  font-size: 3rem;
  color: var(--purple);
}

.hero-today-content P {
  font-size: 2rem;
}

.hero-today-content a {
  font-size: 1.5rem;
  font-weight: 700;
}

.hero-today-content a.btn {
  max-width: 30rem;
  border-radius: var(--radius-16);
  padding: 1rem;
}

/* INTERATIVE OVERLAY SHARE */
.share-interaive-box {
  position: fixed;
  inset: 0;
  z-index: 99999998;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}

#overlay-close-btn {
  position: fixed;
  top: 0;
  right: 4rem;
  z-index: 100000000;
  width: 60px;
  height: 8rem;
  background: transparent;
  border: none;
  cursor: pointer;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.3s ease,
    color 0.3s ease;
}

#overlay-close-btn.is-visible {
  opacity: 1;
  pointer-events: all;
}

#overlay-close-btn:hover {
  color: var(--purple);
}

.share.interative {
  /* Suas medidas originais */
  width: calc(100dvw - 3rem);
  height: calc(100dvh - 3rem);
  border-radius: var(--radius-16);

  /* 1. Fundo branco quase invisível (10% de opacidade) apenas para dar o brilho do vidro */
  background-color: rgba(255, 255, 255, 0.1);

  /* 2. O desfoque que distorce o que está atrás */
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  /* 3. Borda detalhada: mais clara em cima/esquerda para simular a luz batendo no vidro */
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  border-left: 1px solid rgba(255, 255, 255, 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  border-right: 1px solid rgba(255, 255, 255, 0.1);

  /* 4. Sombra bem suave para dar profundidade */
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);

  /* 5. clip-path aqui — mesmo elemento do backdrop-filter, evita conflito de compositing */
  clip-path: circle(0% at 50% 0%);
}

.share.interative {
  padding: 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 3rem;
  overflow: hidden;
}

.share.interative .share-txt h1,
.share.interative .share-txt h2 {
  font-size: 4rem;
}

.share.interative .share-txt-btn p {
  font-size: 1.5rem;
}

.share.interative .fan-cards {
  height: 30rem;
}

/* 9:16 — padrão story Instagram: width 13rem → height 23.1rem */
.share.interative .fan-card {
  width: 13rem;
  margin-left: -6.5rem;
  margin-top: -11.55rem;
}

.share.interative .fan-card__face {
  height: 23.1rem;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}

/* OVERLAY DE DOWNLOAD NOS CARDS */
.fan-card__download {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 2rem 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;

  background: linear-gradient(
    to top,
    rgba(7, 2, 18, 0.92) 0%,
    rgba(30, 0, 60, 0.55) 55%,
    transparent 100%
  );

  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 0.32s ease,
    transform 0.32s ease;
}

.fan-card:hover .fan-card__download,
.fan-card.is-active .fan-card__download {
  opacity: 1;
  transform: translateY(0);
}

.fan-card__download svg {
  color: var(--purple);
  filter: drop-shadow(0 0 6px rgba(125, 58, 236, 0.7));
}

.fan-card__download span {
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.18rem;
  color: var(--white);
}

/* ── Fan Card — Skeleton + Imagem Gerada ────────────── */

.fan-card__skeleton {
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, #1a1a2e 30%, #2d2d4e 50%, #1a1a2e 70%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s infinite;
  border-radius: inherit;
}

@keyframes skeleton-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

.fan-card__generated {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  z-index: 0;
}

.fan-card__download {
  z-index: 2;
}

/* ── Card Generator — Off-screen 1080×1920px ─────────── */

#card-generator {
  position: fixed;
  top: 0;
  left: 0;
  width: 1080px;
  height: 1920px;
  overflow: hidden;
  pointer-events: none;
  z-index: -9999;
}

.gen-story {
  position: absolute;
  top: 0;
  left: 0;
  width: 1080px;
  height: 1920px;
  padding: 1.5rem;
  flex-direction: column;
  overflow: hidden;
  display: none;
}

.gen-story__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.gen-story__overlay {
  position: absolute;
  inset: 0;
}

.gen-story__overlay--light {
  background: rgba(6, 6, 8, 0.3);
}
.gen-story__overlay--dark {
  background: rgba(6, 6, 8, 0.62);
}

.gen-today-logo {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  width: 11.25rem;
  height: 8rem;
  object-fit: contain;
  z-index: 1;
}

.gen-logo-house {
  position: absolute;
  bottom: 1.5rem;
  right: 1.5rem;
  max-width: 200px;
  height: auto;
  z-index: 1;
}

.gen-txt-house {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.gen-txt-house h2 {
  font-size: 7.5rem;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  color: #f3f0eb;
}

.gen-txt-house p {
  font-size: 5rem;
  color: #f3f0eb;
}

.gen-txt-house i,
.gen-house {
  font-size: 2.5rem;
  font-style: italic;
  color: #f3f0eb;
}

/* Card 1 — texto na base */
.gen-story--casa {
  justify-content: flex-end;
}

/* Card 2 — borda + centralizado */
.gen-story--fa {
  border: 1.5rem solid #060608;
  justify-content: center;
}

.gen-story--fa .gen-today-logo {
  top: 0;
  right: 0;
  background-color: #060608;
  padding: 0 0 24px 24px;
  border-radius: 0 0 0 16px;
  height: auto;
}

.gen-story--fa .gen-txt-house {
  text-align: center;
  align-items: center;
}

.gen-fake-btn {
  position: absolute;
  left: 0;
  bottom: 0;
  background-color: #060608;
  padding: 1.5rem 1.5rem 0 0;
  border-radius: 0 16px 0 0;
  z-index: 1;
}

.gen-fake-btn__inner {
  padding: 1rem;
  background-color: #7d3aec;
  border-radius: 16px;
}

.gen-fake-btn__inner p {
  font-size: 2.25rem;
  font-weight: 800;
  text-transform: uppercase;
  color: #f3f0eb;
}

/* Card 3 — centralizado */
.gen-story--djtoday {
  justify-content: center;
}

.gen-story--djtoday .gen-txt-house {
  text-align: center;
  align-items: center;
}

.gen-house--bottom {
  position: absolute;
  bottom: 5rem;
  left: 3rem;
  z-index: 1;
}

/* STYLES */
.styles {
  position: relative;
  height: 220dvh;
  width: 100%;
  overflow: hidden;
  margin-top: 20rem;
}

/* ESFERA — centralizada no centro EXATO da seção (110dvh), que é onde o pin do
   GSAP trava (start center center) e onde as .styles-box aparecem. Sem top/left
   a bola ficava ancorada no canto superior (centro em 50dvw), e o desvio vertical
   110dvh−50dvw dependia da proporção da tela: imperceptível no desktop widescreen,
   mas "fugia" para cima no notebook. Centralizamos via margens negativas (metade
   da largura/altura), igual a tablet/mobile — NÃO usar transform: a base .sphere
   tem `animation: orbit` (rotate infinito) que sobrescreve transforms estáticos. */
.styles .sphere {
  position: absolute;
  width: 100dvw;
  height: 100dvw;
  left: 50%;
  top: 50%;
  margin-left: -50dvw;
  margin-top: -50dvw;
  pointer-events: none;
  z-index: 0;
}

.styles-box {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 1.5rem;
  opacity: 0;
}

.styles-box h2 {
  font-size: 8rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  background-color: var(--purple);
  color: var(--black);
  padding: 0 1rem;
}

.styles-box p {
  font-size: 2rem;
  max-width: 77.5rem;
  text-align: center;
}

/* COMMIT — Word Scroll com Brighten por View */
.commit-impact-wrapper {
  position: relative;
}

.commit {
  width: 100%;
  background-color: var(--black);
  z-index: 1;
}

.commit.is-sticky {
  position: sticky;
  /* top é definido inline pelo JS com o valor exato no momento do trigger */
}

.commit .txt-scroll-box {
  display: flex;
  justify-content: center;
  gap: 3rem;
  line-height: 1.25;
}

.commit .txt-scroll-box .txt-to-sticky {
  padding-block: calc(50vh - 0.5lh);
}

/* Label — pinado via GSAP (ScrollSmoother não suporta position:sticky) */
.commit .txt-scroll-box .txt-to-sticky p {
  height: fit-content;
  font-size: 5rem;
  font-weight: 700;
  white-space: nowrap;
}

/* Label do commit: versão curta só no mobile (ver responsive.css ≤600) */
.commit-label-short {
  display: none;
}

/* Padding empurra primeiro e último item para o centro do viewport */
.commit .txt-to-scroll {
  padding-block: calc(50vh - 0.5lh);
}

.commit .txt-to-scroll p {
  font-size: 5rem;
  font-weight: 700;
  line-height: 1.25;
}

.commit .txt-to-scroll p:not(:last-of-type) {
  color: var(--purple);
}

.commit .txt-to-scroll p:last-of-type {
  color: var(--purple);
}

@supports (animation-timeline: scroll()) and (animation-range: 0% 100%) {
  .commit[data-animate="true"] .txt-to-scroll p {
    opacity: 0.2;
    animation-name: commit-brighten;
    animation-fill-mode: both;
    animation-timing-function: linear;
    animation-range: cover calc(50% - 1lh) calc(50% + 1lh);
    animation-timeline: view();
  }

  .commit[data-animate="true"] .txt-to-scroll p:first-of-type {
    --start-opacity: 1;
  }

  .commit[data-animate="true"] .txt-to-scroll p:last-of-type {
    --brightness: 1;
    --end-opacity: 1;
  }

  @keyframes commit-brighten {
    0% {
      opacity: var(--start-opacity, 0.2);
    }
    50% {
      opacity: 1;
      filter: brightness(var(--brightness, 1.2));
    }
    100% {
      opacity: var(--end-opacity, 0.2);
    }
  }
}

/* ÁREA DE TESTES */

.soundbar {
  cursor: pointer;
  position: relative;
}

#sound-wave {
  width: 200px;
  height: 40px;
  display: block;
}

/* CTA BEFORE SCHEDULE */
.schedule-cta {
  padding: 8rem 1.5rem;
}

.schedule-cta .timer-txt {
  display: grid;
  grid-template-columns: 4fr 7fr;
  gap: 5rem;
}

.schedule-cta .timer-txt p {
  color: var(--purple);
}

.schedule-cta .cta {
  display: flex;
  align-items: center;
  margin: 0;
}

.schedule-cta .cta-btns {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* =============================================
   EFEITO 2 — TEXT REVEAL LINHA POR LINHA
   ============================================= */

/* ── Variável de cor compartilhada pelos dois sistemas de reveal ── */
.txt-reveal-wrap,
.txt-reveal-wrap-v,
.block-reveal-wrap {
  --reveal-color: var(--purple);
}

/* Modificadores de cor — adicione ao wrapper para trocar a cor da máscara */
.reveal--white {
  --reveal-color: var(--white);
}
.reveal--black {
  --reveal-color: var(--black);
}
.reveal--gray {
  --reveal-color: darkgray;
}

/* ── Text Reveal ── */

/* Wrapper: referência para ScrollTrigger.
   SEM overflow: a animação do reveal não translada texto — a máscara é
   position:absolute; inset:0, então já fica contida na própria caixa. O
   overflow:hidden aqui só servia de barreira extra e decepava o acento (´ ` ~ ^)
   da 1ª linha (o .manifest p não tem padding no topo, então ela encosta aqui).
   No Safari/iOS isso cortava o acento (ex.: HÁ → HA). */
.txt-reveal-wrap {
  position: relative;
  display: block;
  width: 100%; /* impede que flex com align-items:center colapse a largura */
}

/* Garante que h1/h2/p dentro do wrapper sejam block
   (necessário p.ex. para .versus h2 que tem display:inline) */
.txt-reveal-wrap h1,
.txt-reveal-wrap h2,
.txt-reveal-wrap p {
  display: inline-block;
}

/* Cada linha gerada pelo JS. Sem overflow: nada é clipado no topo, então os
   acentos (´ ` ~ ^) das maiúsculas nunca são cortados — nem com line-height
   apertado (mobile: 1.05, 1.02, 0.9). */
.reveal-line {
  position: relative;
  display: block;
  line-height: inherit;
}

/* Wrapper inline-block — encolhe até a largura real do texto (a máscara é
   inset:0, então já fica limitada a essa largura sem precisar de overflow). */
.reveal-line-inner {
  display: inline-block;
  position: relative;
  vertical-align: top;
}

/* Máscara que varre da esquerda para a direita */
.reveal-line-mask {
  position: absolute;
  inset: 0;
  background: var(--reveal-color);
  transform-origin: left center;
  transform: scaleX(0);
  z-index: 2;
  pointer-events: none;
}

.reveal-line-text {
  display: block;
  position: relative;
  z-index: 1;
  opacity: 0; /* oculto antes do JS rodar — sem deslocamento vertical */
}

/* ── Vertical Text Reveal — mesmo efeito horizontal, sem split de linhas ── */

.txt-reveal-wrap-v {
  position: relative;
  display: block;
  overflow: hidden;
}

.txt-reveal-wrap-v h1,
.txt-reveal-wrap-v h2,
.txt-reveal-wrap-v p {
  display: inline-block;
}

/* ── Block Reveal ── */

.block-reveal-wrap {
  position: relative;
  overflow: hidden; /* clip da máscara */
}

/* Máscara de bloco — inserida via JS */
.reveal-block-mask {
  position: absolute;
  inset: 0;
  background: var(--reveal-color);
  transform: scaleX(0);
  transform-origin: left center;
  z-index: 10;
  pointer-events: none;
}

/* =============================================
   EFEITO 3 — IMPACT: LAYER SLIDE + PIN + ITÁLICO
   ============================================= */

/* Impact sobe POR CIMA do hero/commit como camada.
   z-index > 100 porque GSAP aplica z-index:100 no pinSpacer do .commit. */
.impact {
  background-color: var(--black);
  position: relative;
  z-index: 200;
}

.impact h1 {
  will-change: transform;
}

/* =============================================
   BOTÕES — CHAR-BY-CHAR HOVER (LANDO NORRIS)
   ============================================= */

/* Texto invisível que mantém as dimensões do botão */
.btn-sr {
  visibility: hidden;
  white-space: nowrap;
}

/* Wrapper que clipa os chars na altura do texto — evita aparição no padding */
.btn-chars-clip {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  overflow: clip;
  contain: paint;
  pointer-events: none;
  color: inherit; /* garante que o * { color: white } global não quebre a herança do pai */
}

/* Cada linha de chars fica sobreposta dentro do clip */
.btn-chars {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  white-space: nowrap;
  color: inherit;
}

/* Cada caractere é animável individualmente */
.btn-char {
  display: inline-block;
  color: inherit;
}

/* will-change só durante o hover. Antes ficava permanente em CADA caractere de
   CADA botão da página → uma camada de compositing por char o tempo todo
   (memória de GPU + jank). O hint agora liga apenas quando o botão é hoverado. */
.btn:hover .btn-char,
.hover:hover .btn-char,
.footer-links a:hover .btn-char {
  will-change: transform;
}

/* ── Compensação óptica do rótulo (iOS/WebKit) ──
   No WebKit do iOS a Helvetica Neue renderiza o texto ~0.08em ACIMA do centro da
   caixa de linha: o rótulo do botão fica colado no topo e sobra espaço embaixo.
   No Chromium (emulador) o texto já centraliza — por isso o empurrão vai SÓ no iOS
   (classe .is-ios, setada via JS por navigator.platform) e SÓ no rótulo, sem alterar
   a altura do botão. O .btn-lbl é criado em JS (initButtonHover / attachCopyToast). */
.btn-lbl {
  display: inline-block;
}
.is-ios .btn-lbl {
  transform: translateY(0.08em);
}

/* Mesmo desvio óptico do iOS no título das .styles-box, que ganhou fundo --purple.
   Aqui o fundo está no PRÓPRIO h2, então mover o h2 moveria texto+fundo juntos (sem
   efeito). Movemos o <span> INTERNO, deslocando o texto dentro do fundo — igual ao
   .btn-lbl. O span é estático no template (today.php). */
/* O span herda a cor do h2 (senão o "* { color: var(--white) }" global o pintaria
   de branco, sobrepondo o --black do h2). Incondicional — vale em todo device. */
.styles-box h2 > span {
  color: inherit;
}
.is-ios .styles-box h2 > span {
  display: inline-block;
  transform: translateY(0.08em);
}

/* EFEITO 8 */
header.is-light-bg #sound-wave {
  filter: invert(1) brightness(0);
}

header.is-light-bg .soundbar p {
  color: var(--black);
}

/* Força preto nas seções claras — igual ao soundbar */
header.is-light-bg + .lottie-menu-btn #menu-lottie-canvas {
  filter: brightness(0);
}

/* Quando o submenu está aberto, força branco independente do is-light-bg (ID eleva especificidade para 2,1,0 > 1,2,1) */
#lottie-menu-btn.is-menu-open #menu-lottie-canvas {
  filter: brightness(0) invert(1);
}

/* EFEITO 9 — VISOR ESFÉRICO */

.schedule-visor {
  width: 100%;
  height: 200px;
  background-color: var(--black);
  /* box-shadow: 0 1px 0 0 var(--black); */
  clip-path: ellipse(70% 0% at 50% 0%);
  position: relative;
  z-index: 4; /* > .sponsors (z-index:3) para a esfera preta aparecer sobre o fundo branco */
  pointer-events: none;
  margin-bottom: -200px;
}

.schedule-visor + .sponsors {
  padding-top: calc(19rem + 20rem);
}

/* EFEITO DA ESFERA */

.sphere {
  width: 540px;
  height: 540px;
  animation: orbit 12s linear infinite;
  background: #000;
  border-radius: 50%;
}

@keyframes orbit {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* ESFERA DE .MANIFEST */

.manifest .sphere {
  width: 1920px;
  height: auto;

  position: absolute;
  bottom: -50%;
}

/* PRIVACY POLICY */

.privacy-hero {
  padding: 12rem 1.5rem 6rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2rem;
}

.privacy-hero .text-signature h1 {
  font-size: 7rem;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.privacy-hero .text-signature h1 span {
  display: block;
  color: var(--purple);
}

.privacy-hero-sub {
  text-align: center;
}

.privacy-hero-sub p {
  font-size: 1.8rem;
  color: var(--light-gray);
}

.privacy-content {
  padding: 4rem 1.5rem 8rem;
  display: flex;
  flex-direction: column;
  max-width: 1200px;
  margin: 0 auto;
  gap: 0;
}

.privacy-section {
  padding: 4rem 0;
  border-top: 1px solid rgba(125, 58, 236, 0.2);
}

.privacy-section--last {
  border-bottom: 1px solid rgba(125, 58, 236, 0.2);
}

.privacy-section h2 {
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--purple);
  margin-bottom: 2rem;
}

.privacy-section p {
  font-size: 1.6rem;
  line-height: 1.7;
  color: var(--white);
  margin-bottom: 1.5rem;
}

.privacy-section p:last-child {
  margin-bottom: 0;
}

.privacy-section strong {
  color: var(--white);
  font-weight: 700;
}

.privacy-section a {
  color: var(--purple);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.privacy-list {
  margin: 1.5rem 0 1.5rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.privacy-list li p {
  font-size: 1.6rem;
  line-height: 1.7;
  color: var(--light-gray);
  margin-bottom: 0;
}

.privacy-list li::before {
  content: "—";
  color: var(--purple);
  margin-right: 0.8rem;
}

.privacy-list li {
  display: flex;
  align-items: flex-start;
}

.privacy-update p {
  margin-top: 2rem;
  font-size: 1.3rem;
  color: var(--light-gray);
}

@media (max-width: 1024px) {
  .privacy-hero {
    padding: 8rem 1rem 4rem;
    align-self: center;
  }
  .privacy-hero .text-signature h1 {
    font-size: 4rem;
  }
}

@media (max-width: 600px) {
  .privacy-hero {
    align-items: start;
    padding: 10rem 1rem 0;
  }

  .privacy-section {
    padding: 1.5rem 0;
  }

  .privacy-section h2 {
    margin-bottom: 1.5rem;
  }

  .privacy-hero .text-signature h1 {
    font-size: 2.5rem;
    text-align: left;
  }

  .privacy-hero-sub p {
    font-size: 1rem;
    text-align: left;
  }

  .privacy-content {
    padding: 3rem 1.5rem 6rem;
  }

  .privacy-section p {
    font-size: 0.8rem;
  }

  .privacy-list li p {
    font-size: 0.8rem;
  }

  .privacy-section h2 {
    font-size: 1rem;
  }
}

/* ─── Loading Screen ─────────────────────────────────────────────────────── */

#loading-screen {
  position: fixed;
  inset: 0;
  z-index: 2000000000; /* dentro do limite de 32 bits; acima de todo o resto */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: all;
}

#loader-evt1 {
  position: absolute;
  width: 100px;
  height: 100px;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  transform: scale(0);
  transform-box: fill-box;
  transform-origin: 30% 50%;
  will-change: transform;
  pointer-events: none;
  display: block;
}

#loader-svg-fundo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
  pointer-events: none;
}

#loader-lottie-container {
  position: absolute;
  display: none;
  width: 150px;
  height: 150px;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  pointer-events: none;
}

.made-by-amor {
  color: var(--light-gray);
}

.btn--no-events {
  font-size: 1.5rem;
}

.privacy.privacy-hero .text-signature {
  margin: 0;
}