/**
 * Refino visual — camada final, aditiva.
 * Entra DEPOIS de responsive.css. Não reescreve o sistema: afina.
 * Eixos: tipografia óptica · alinhamento · assimetria · matéria (grão/luz) · movimento.
 */

/* ───────────────────────── 1. TOKENS DE REFINO ───────────────────────── */
:root {
  /* Curvas com massa: entrada pesada, saída macia. */
  --ease-silk: cubic-bezier(.32, .72, 0, 1);
  --ease-press: cubic-bezier(.34, 1.56, .64, 1);
  --dur-reveal: .82s;

  /* Sombras de luz difusa, somadas às sólidas já existentes. */
  --lift-1: 0 2px 6px rgb(23 19 16 / 4%), 0 12px 28px rgb(23 19 16 / 7%);
  --lift-2: 0 4px 12px rgb(23 19 16 / 6%), 0 26px 60px rgb(23 19 16 / 12%);
  --lift-dark: 0 4px 14px rgb(0 0 0 / 22%), 0 30px 70px rgb(0 0 0 / 38%);
}

/* ───────────────────── 2. TIPOGRAFIA ÓPTICA ─────────────────────
   Bricolage é variável (peso 200–800, largura 75–100%). Tratamos tamanho
   como eixo: quanto maior o tipo, mais fechado o tracking e mais estreita
   a largura — é assim que display de revista respira. */
h1, h2, h3, h4, .brand-wordmark, .footer-brand {
  font-optical-sizing: auto;
  font-synthesis: none;
}

/* Display gigante: fecha o tracking e estreita um grau. */
.hero-copy h1,
.product-section__copy h2,
.artist-copy h2,
.corporate-copy h2,
.final-contact h2 {
  font-stretch: 84%;
  letter-spacing: -.052em;
  line-height: .92;
}

/* Alinhamento óptico: tipo com tracking negativo recua da margem.
   O side-bearing do 'O'/'C' deixa um vão à esquerda — puxamos de volta
   para o texto casar com a eyebrow e com a coluna. */
.hero-copy h1,
.product-section__copy h2,
.artist-copy h2,
.corporate-copy h2,
.final-contact h2,
.section-heading h2 {
  margin-left: -.035em;
}

/* Parágrafo: mata viúva e melhora o rio do texto. */
p, .hero-lead, .lead, .section-heading > p:last-child {
  text-wrap: pretty;
}

/* Eyebrow: versalete espaçado precisa de compensação à esquerda, senão
   o tracking joga o bloco para a direita e desalinha do título. */
.eyebrow {
  margin-left: .08em;
  font-variant-numeric: tabular-nums;
}

/* Números que vivem em coluna (datas, horas, preços) têm que ser tabulares,
   senão a coluna "balança" de linha para linha. */
.event-date time,
.event-time,
.event-date time strong,
.product-price,
.status-pill {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* ───────────────────── 3. MATÉRIA: GRÃO E LUZ ─────────────────────
   Grão de papel: fixo, sem eventos, fora do fluxo de rolagem (não repinta). */
body::after {
  content: "";
  position: fixed;
  z-index: 9;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  opacity: .028;
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* Seções escuras: o grão multiplicado some; inverte para clarear. */
.home-hero::after,
.characters-section::after,
.site-footer::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n2)' opacity='.5'/%3E%3C/svg%3E");
  opacity: .05;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* ───────────────────── 4. MOVIMENTO DE ENTRADA ─────────────────────
   Revelação com massa: sobe, desfoca e assenta. Só transform/opacity/filter. */
.motion-reveal.is-revealed {
  animation: reveal-silk var(--dur-reveal) var(--ease-silk) both;
}

@keyframes reveal-silk {
  from { opacity: 0; transform: translate3d(0, 26px, 0); filter: blur(7px); }
  60%  { filter: blur(0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); }
}

/* Cascata: filhos entram em sequência, não em bloco. O índice vem do JS,
   e a animação só dispara quando o bloco entra na viewport. */
[data-stagger].is-staggered > * {
  animation: reveal-silk .7s var(--ease-silk) both;
  animation-delay: calc(var(--i, 0) * 78ms);
}

/* ───────────────────── 5. BOTÕES: FÍSICA DE TOQUE ─────────────────────
   O sistema já usa sombra sólida deslocada (assinatura da marca). Mantida.
   O que entra: curva com mola, pressão real e brilho que varre. */
.button {
  position: relative;
  overflow: hidden;
  transition:
    transform .34s var(--ease-press),
    box-shadow .34s var(--ease-silk),
    background-color .3s var(--ease-silk);
}

/* Varredura de luz no hover — só transform, roda na GPU. */
.button::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgb(255 255 255 / 48%) 50%, transparent 62%);
  transform: translateX(-130%);
  transition: transform .72s var(--ease-silk);
  pointer-events: none;
}

.button:hover::after { transform: translateX(130%); }
.button > * { position: relative; z-index: 1; }
.button:active { transform: translate(2px, 2px) scale(.985); }

/* Seta em cápsula própria (nunca solta ao lado do texto), com tensão interna. */
.button--arrow { padding-right: .5rem; }

.button--arrow .button__icon {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 50%;
  background: rgb(23 19 16 / 9%);
  transition: transform .34s var(--ease-press), background-color .3s ease;
}

.button--arrow:hover .button__icon {
  background: rgb(23 19 16 / 15%);
  transform: translate(2px, -2px) scale(1.06);
}

.button--dark .button__icon,
.button--dark:hover .button__icon { background: rgb(255 255 255 / 16%); }

/* Link de texto: sublinhado que cresce da esquerda, não pisca. */
.text-link {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 2px;
  text-decoration: none;
  transition: background-size .38s var(--ease-silk);
}

.text-link:hover { background-size: 100% 2px; }

/* ───────────────────── 6. CARDS: PROFUNDIDADE ─────────────────────
   Bezel duplo: casca externa + miolo, com raio concêntrico. */
.character-card {
  transition: transform .55s var(--ease-silk), box-shadow .55s var(--ease-silk);
  will-change: transform;
}

.character-card:is(:hover, :focus-within) {
  transform: translate3d(0, -6px, 0);
  box-shadow: var(--lift-dark);
}

/* Brilho de borda superior — a luz que bate na quina do objeto. */
.character-card::after {
  content: "";
  position: absolute;
  z-index: 5;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 18%);
  pointer-events: none;
}

.event-row {
  transition: background-color .3s var(--ease-silk), transform .3s var(--ease-silk);
}

.event-row:hover, .event-row:focus-within { transform: translateX(5px); }

/* A data ganha peso físico ao aproximar. */
.event-row:hover .event-date {
  box-shadow: var(--lift-1);
  transform: scale(1.03);
  transition: transform .34s var(--ease-press), box-shadow .34s var(--ease-silk);
}

/* ───────────────────── 7. MARQUEE: BORDAS QUE SOMEM ─────────────────────
   Faixa cortada na borda parece bug; com máscara, parece intenção. */
.character-marquee {
  mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}

/* ───────────────────── 8. VITRINE DE PRODUTOS (ASSIMÉTRICA) ─────────────────────
   Dois produtos, pesos diferentes: o principal domina, o segundo entra
   deslocado e girado — a quebra de grade é o que tira o ar de template. */
/* Com dois produtos a coluna de texto cede espaço para a vitrine. */
.product-section__layout--duo {
  grid-template-columns: minmax(270px, .62fr) minmax(0, 1.38fr);
}

.product-showcase {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(210px, .8fr);
  align-items: center;
  gap: clamp(1rem, 2.6vw, 2.5rem);
}

/* O principal mantém a altura de palco; o secundário flutua ao lado. */
.product-showcase__main {
  position: relative;
  height: min(72svh, 640px);
}

.product-showcase__main .product-photo { height: 100%; }

.product-showcase__aside {
  position: relative;
  align-self: end;
  margin-bottom: clamp(1rem, 4vw, 3.5rem);
  transform: rotate(-1.6deg);
  transition: transform .6s var(--ease-silk);
}

.product-showcase__aside:hover { transform: rotate(0) translate3d(0, -6px, 0); }

/* Cartão do produto secundário: casca + miolo concêntrico. */
.product-card {
  position: relative;
  display: block;
  padding: .5rem;
  color: inherit;
  background: rgb(23 19 16 / 7%);
  border: 1px solid rgb(23 19 16 / 12%);
  border-radius: calc(var(--radius-lg) + .5rem);
  text-decoration: none;
  box-shadow: var(--lift-1);
  transition: box-shadow .5s var(--ease-silk);
}

.product-card:hover { box-shadow: var(--lift-2); }

/* São <span> dentro do <a> (HTML válido em link): precisam virar bloco,
   senão o fundo não pinta e o miolo do cartão não existe. */
.product-card__inner {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 70%);
}

/* Fundo branco casa com a foto do produto, que vem recortada em branco. */
.product-card__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--white);
}

.product-card__media img { display: block; }

.product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform .7s var(--ease-silk);
}

.product-card:hover .product-card__media img { transform: scale(1.045); }

.product-card__body {
  display: grid;
  gap: .3rem;
  padding: 1rem 1.15rem 1.15rem;
}

.product-card__tag {
  display: block;
  width: fit-content;
  padding: .26rem .6rem;
  color: var(--white);
  background: var(--red);
  border-radius: var(--radius-pill);
  font-size: .62rem;
  font-weight: 850;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.product-card__name {
  display: block;
  margin: .15rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.1rem + .9vw, 1.85rem);
  font-stretch: 86%;
  font-weight: 760;
  line-height: .98;
  letter-spacing: -.04em;
}

.product-card__meta {
  display: block;
  margin: 0;
  color: var(--muted-ink);
  font-size: .82rem;
  line-height: 1.4;
}

.product-card__price {
  display: flex;
  align-items: baseline;
  gap: .32rem;
  margin: .35rem 0 0;
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 780;
  letter-spacing: -.03em;
}

.product-card__price small {
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 700;
  opacity: .62;
}

.product-card__cue {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: .5rem;
  font-size: .8rem;
  font-weight: 800;
}

.product-card__cue span {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  background: rgb(23 19 16 / 9%);
  border-radius: 50%;
  transition: transform .34s var(--ease-press), background-color .3s ease;
}

.product-card:hover .product-card__cue span {
  background: var(--ink);
  color: var(--sun);
  transform: translate(2px, -2px);
}

/* ───────────────────── 8b. PARALAXE DE ROLAGEM ─────────────────────
   A foto desliza um pouco mais devagar que a página: dá profundidade sem
   que ninguém perceba o truque. Deslocamento vem do JS, só em transform. */
[data-drift],
.artist-photo,
.corporate-photo {
  transform: translate3d(0, var(--drift-y, 0), 0);
  will-change: transform;
}

/* A foto precisa sobrar um pouco do quadro, senão a deriva mostra o fundo. */
.artist-photo, .corporate-photo { scale: 1.08; }

/* ───────────────────── 9. CABEÇALHO ─────────────────────
   Compactação com curva de seda em vez de corte seco. */
.site-header {
  transition:
    height .42s var(--ease-silk),
    background-color .42s var(--ease-silk),
    border-color .3s ease,
    box-shadow .42s var(--ease-silk);
}

.site-header.is-compact { background: rgb(245 239 230 / 82%); }

/* Sublinhado do menu cresce com massa, do centro. */
.site-menu a::after {
  transform-origin: center;
  transition: transform .34s var(--ease-silk);
}

/* ───────────────────── 10. MOBILE ─────────────────────
   Assimetria vira empilhamento; toque ganha área; tipo respira. */
@media (max-width: 1180px) {
  .product-section__layout--duo { grid-template-columns: minmax(240px, .58fr) minmax(0, 1.42fr); }
  .product-showcase { grid-template-columns: minmax(0, 1.2fr) minmax(190px, .85fr); }
}

@media (max-width: 980px) {
  /* Assimetria desmonta: empilha, sem rotação (rotação em coluna estreita
     cria alvo de toque torto e estoura a margem). */
  .product-section__layout--duo { grid-template-columns: 1fr; }

  .product-showcase {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .product-showcase__main { height: min(48svh, 420px); }

  .product-showcase__aside {
    width: min(100%, 440px);
    margin-bottom: 0;
    justify-self: center;
    transform: none;
  }

  .product-showcase__aside:hover { transform: none; }
}

@media (max-width: 760px) {
  /* Display mobile: tracking menos agressivo — em tela pequena o tipo
     muito fechado vira mancha. */
  .hero-copy h1 {
    font-stretch: 88%;
    letter-spacing: -.042em;
  }

  .product-section__copy h2,
  .artist-copy h2,
  .corporate-copy h2,
  .final-contact h2 {
    letter-spacing: -.044em;
  }

  /* Alvo de toque: mínimo confortável no cartão inteiro. */
  .product-card__body { padding: .9rem 1rem 1.05rem; }
  .product-card__media { aspect-ratio: 3 / 2; }

  /* Grão mais discreto no celular (tela densa já tem textura). */
  body::after { opacity: .02; }

  /* Sem hover no toque: o deslocamento lateral da agenda só atrapalha. */
  .event-row:hover, .event-row:focus-within { transform: none; }

  /* Reveal mais curto — rolagem no celular é mais rápida. */
  :root { --dur-reveal: .6s; }
  [data-stagger].is-staggered > * { animation-delay: calc(var(--i, 0) * 54ms); }
}

/* ───────────────────── 11. MOVIMENTO REDUZIDO ─────────────────────
   Quem pediu menos movimento recebe o layout inteiro, parado. */
@media (prefers-reduced-motion: reduce) {
  .motion-reveal.is-revealed,
  [data-stagger].is-staggered > * { animation: none; }

  .button::after { display: none; }

  .product-showcase__aside,
  .product-showcase__aside:hover,
  .character-card:is(:hover, :focus-within),
  .event-row:hover,
  .event-row:focus-within { transform: none; }

  .product-card:hover .product-card__media img { transform: none; }
}

/* ═══════════════════ RODADA 2 ═══════════════════ */

/* ───────── 12. CTA DE SEÇÃO: CÁPSULA SEM MEXER NO MARKUP ─────────
   O botão já é inline-flex; o ::before entra como item e `order` joga
   para o fim. Assim todo CTA principal fica igual ao de produtos. */
.final-contact__action .button--dark::before,
.corporate-copy .button--dark::before,
.about-booking__action .button--dark::before {
  content: "\2197";
  display: grid;
  order: 1;
  width: 28px;
  height: 28px;
  margin-right: -.42rem;
  place-items: center;
  background: rgb(255 255 255 / 16%);
  border-radius: 50%;
  font-size: .82rem;
  line-height: 1;
  transition: transform .34s var(--ease-press), background-color .3s ease;
}

.final-contact__action .button--dark:hover::before,
.corporate-copy .button--dark:hover::before,
.about-booking__action .button--dark:hover::before {
  background: rgb(255 255 255 / 26%);
  transform: translate(2px, -2px) scale(1.06);
}

/* ───────── 13. RODAPÉ: QUEBRA E RITMO ─────────
   `overflow-wrap: anywhere` parte telefone no meio e deixa "9000" órfão.
   Dar mais largura à coluna de contatos resolve sem cortar palavra. */
.footer-stage { grid-template-columns: 1.15fr .72fr 1.28fr; }

.footer-contact a,
.footer-nav a,
.footer-social a {
  overflow-wrap: break-word;
  hyphens: none;
}

/* Telefone e e-mail não se quebram: são unidades de leitura. */
.footer-contact a { text-wrap: nowrap; }

@supports not (text-wrap: nowrap) {
  .footer-contact a { white-space: nowrap; }
}

/* Link do rodapé: sublinhado que cresce, como no resto do site. */
.footer-nav a, .footer-contact a, .footer-social a {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  transition: background-size .38s var(--ease-silk), color .25s ease;
}

.footer-nav a:hover, .footer-contact a:hover, .footer-social a:hover {
  color: var(--sun);
  background-size: 100% 1px;
}

.footer-label { font-variant-numeric: tabular-nums; }

/* ───────── 14. CORPORATIVO: ASSIMETRIA MAIS FRANCA ─────────
   As três fotos tinham alturas quase iguais. Escalonar de verdade cria
   ritmo — e o cartão central puxa o olho para o meio da composição. */
.corporate-rotator__scene { align-items: end; }
.corporate-photo-card--1 { height: 78%; }
.corporate-photo-card--2 { height: 100%; }
.corporate-photo-card--3 { height: 86%; transform: translateY(-4%); }

.corporate-photo-card {
  transition: transform .6s var(--ease-silk), box-shadow .6s var(--ease-silk);
}

.corporate-photo-card:hover {
  box-shadow: 0 26px 54px rgb(23 19 16 / 26%);
  transform: translateY(-8px);
}

.corporate-photo-card--3:hover { transform: translateY(calc(-4% - 8px)); }

/* ───────── 15. AGENDA: HIERARQUIA DA LINHA ─────────
   A data é o dado que se procura; o local é contexto. Reforçar esse
   contraste faz a lista ser lida em diagonal, não palavra a palavra. */
.event-date {
  box-shadow: 0 1px 0 rgb(255 255 255 / 14%) inset;
  transition: transform .34s var(--ease-press), box-shadow .34s var(--ease-silk);
}

.event-main h3 { transition: color .25s ease; }
.event-row:hover .event-main h3 { color: var(--red); }

/* Linha inteira responde ao teclado, não só o link. */
.event-row:focus-within { outline: 2px solid var(--teal); outline-offset: -2px; }

/* ───────── 16. CABEÇALHO: PESO QUE APARECE AO ROLAR ───────── */
.site-header.is-compact .brand-logo { transform: scale(.94); }
.brand-logo { transition: transform .42s var(--ease-silk); }

/* ───────── 17. SEÇÃO: TÍTULO E OLHO NA MESMA VERTICAL ─────────
   A eyebrow tem tracking .16em, que empurra o bloco; o título tem
   tracking negativo, que puxa. Sem compensar, um nunca casa com o outro. */
.section-heading .eyebrow { margin-left: .1em; }
.section-heading h2 { margin-left: -.035em; }

/* ───────── 18. FOCO VISÍVEL COERENTE ─────────
   Em fundo escuro o laranja some; troca para o dourado da marca. */
.characters-section :focus-visible,
.site-footer :focus-visible,
.home-hero :focus-visible { outline-color: var(--sun); }

/* ───────── 19. MOBILE DA RODADA 2 ───────── */
@media (max-width: 980px) {
  .footer-stage { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  /* Telefone pode quebrar no celular — a coluna é estreita demais. */
  .footer-contact a { text-wrap: wrap; white-space: normal; overflow-wrap: break-word; }

  /* Sem escalonamento de altura em coluna única. */
  .corporate-photo-card--1,
  .corporate-photo-card--2,
  .corporate-photo-card--3 { height: 100%; transform: none; }

  .corporate-photo-card:hover,
  .corporate-photo-card--3:hover { transform: none; }

  /* O CTA ocupa a linha: cápsula encosta na borda direita. */
  .final-contact__action .button--dark::before,
  .corporate-copy .button--dark::before { margin-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .corporate-photo-card,
  .corporate-photo-card:hover,
  .corporate-photo-card--3:hover,
  .site-header.is-compact .brand-logo { transform: none; }

  .final-contact__action .button--dark:hover::before,
  .corporate-copy .button--dark:hover::before { transform: none; }
}

/* ═══════════════════ RODADA 3 — ALVO DE TOQUE (MOBILE) ═══════════════════
   Medido em 390px: 16 links com menos de 30px de altura, todos de navegação
   ou ação (nenhum inline em texto corrido). O pior é "Ingressos", que é o
   CTA de venda. Aumentamos a ÁREA sem mexer no desenho. */

@media (pointer: coarse), (max-width: 760px) {
  /* Área de toque por pseudo-elemento: cresce o alvo, o layout não muda.
     Usado onde o link é isolado na linha e não há vizinho para colidir. */
  .text-link { position: relative; }

  .text-link::after {
    content: "";
    position: absolute;
    inset: -11px -10px;
  }

  /* No rodapé os links são empilhados e próximos: expandir por cima
     sobreporia as áreas e o dedo acertaria o link errado. Aqui cresce
     a própria linha — o rodapé ganha respiro, que em celular é bem-vindo. */
  .footer-nav a,
  .footer-contact a,
  .footer-social a,
  .footer-bottom a {
    display: flex;
    min-height: 44px;
    align-items: center;
  }

  .footer-nav, .footer-contact, .footer-social { gap: .15rem; }

  .footer-credit { min-height: 44px; }
}

/* Crédito do jogo: mesmo tratamento de alvo (link isolado, sem vizinho). */
@media (pointer: coarse), (max-width: 760px) {
  .cris-game-brand { position: relative; }

  .cris-game-brand::after {
    content: "";
    position: absolute;
    inset: -10px -10px;
  }
}