/* ============================================================
   OTTIS OTS — HOME (fase 2 do redesign — SPATIAL v2)
   Composição espacial: full-bleed nos clímax, grid assimétrico,
   HUD de broadcast nas margens, tipografia vazada como textura.
   - Consome os tokens de styles.css (var(--...))
   - Sem !important; z-index só na escala (0 texturas / 1 conteúdo)
   - Hero: pipeline de mídia (data-hero-media-state/mode) intocado;
     aqui só o LAYOUT do hero é recomposto
   ============================================================ */

/* ------------------------------------------------------------
   PRIMITIVOS ESPACIAIS DA HOME
   ------------------------------------------------------------ */
#home {
  /* respiro lateral das seções cinemáticas (hero, valley) */
  --home-edge: clamp(var(--space-4), 5vw, var(--space-24));
  /* goteira que alinha faixas full-bleed à medida do --container */
  --home-gutter: max(var(--space-6), calc((100% - var(--container)) / 2));
}

/* Rompe o container e vai de borda a borda (usar com propósito) */
.u-bleed {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

/* Tipografia display vazada como arquitetura (preenche o vazio
   com identidade, nunca compete com o conteúdo — fica atrás). */
.home-ghost {
  position: absolute;
  z-index: 0;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 780;
  font-variation-settings: 'wdth' 68;
  text-transform: uppercase;
  line-height: 0.78;
  letter-spacing: -0.02em;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

/* ------------------------------------------------------------
   HERO — grid assimétrico + HUD de broadcast nas margens
   O hero COMANDA o viewport: statement gigante ancorado à
   esquerda, mídia deslocada à direita, metadados mono nos cantos.
   ------------------------------------------------------------ */
.hero-section {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto minmax(0, 1fr) auto;
  column-gap: var(--space-6);
  row-gap: var(--space-6);
  align-items: stretch;
  padding: var(--space-8) var(--home-edge) var(--space-12);
}

/* Bloco de autoridade no topo do hero: ledger de prova social + a frase
   de assinatura logo abaixo, como um lockup único. */
.hero-top {
  grid-column: 1 / 10;
  /* Atravessa as rows como HUD ancorado ao topo: a row 1 colapsa e a
     composição de statement/CTA/obra mantém a geometria original. */
  grid-row: 1 / 3;
  align-self: start;
  justify-self: start;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.hero-proof {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: var(--space-6) var(--space-8);
  margin: 0;
}

/* Statement gigante ancorado embaixo-à-esquerda */
.artistic-statement {
  grid-column: 1 / 8;
  grid-row: 2;
  align-self: end;
  position: relative;
  z-index: 1; /* fica acima da mídia na costura das colunas */
  max-width: none;
  text-align: left;
}

.statement-text {
  font-size: clamp(2.1rem, 6vw, 5rem);
  line-height: 1;
  text-align: left;
}

/* Mídia hero deslocada para a direita, dominando o eixo vertical */
.hero-artwork {
  grid-column: 7 / 13;
  grid-row: 2;
  align-self: center;
  justify-self: center;
  flex: initial;
  width: 100%;
  max-width: none;
  margin: 0;
}

/* CTA ancorado embaixo-à-esquerda, sob o statement */
.statement-cta {
  grid-column: 1 / 6;
  grid-row: 3;
  align-self: center;
  justify-self: start;
  text-align: left;
}

/* Ledger de prova social: HUD tabular no rodapé-direita do hero.
   Equilibra o CTA (esquerda) e comunica consagração em 2s —
   views / exposições / ano de início:
   valores em --ink (legíveis), rótulos em --ink-dim. */
.hero-proof-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  text-align: left;
}

/* Hairline de broadcast separando cada métrica */
.hero-proof-item + .hero-proof-item {
  padding-inline-start: var(--space-8);
  border-inline-start: 1px solid var(--line);
}

.hero-proof-label {
  margin: 0;
  order: 1; /* rótulo pequeno acima do valor */
  font-size: var(--text-mono-sm);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.hero-proof-value {
  margin: 0;
  order: 2;
  font-size: clamp(1.15rem, 2.2vw, 1.6rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--ink);
}

/* Assinatura de autoridade: fecho do ledger, com destaque editorial —
   display condensado, tinta cheia e hairline violeta à esquerda. */
.hero-tagline {
  margin: 0;
  max-width: 34ch;
  padding-left: var(--space-4);
  border-left: 2px solid var(--violet-hot);
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.9vw, 1.65rem);
  font-weight: 650;
  font-variation-settings: 'wdth' 82;
  line-height: 1.25;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-wrap: balance;
}

/* Scroll hint: fora do fluxo do grid, ancorado ao canto inferior-direito */
.hero-scroll-hint {
  position: absolute;
  left: auto;
  right: var(--home-edge);
  bottom: var(--space-6);
  transform: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
  pointer-events: none;
}

/* ------------------------------------------------------------
   BASE DAS SEÇÕES DA HOME
   Ritmo vertical variado: valley é cinemática (100dvh); featured/
   collectors/exhibitions/press são faixas densas de informação.
   ------------------------------------------------------------ */
.home-block {
  position: relative;
  padding-block: var(--section-pad);
  /* Scrim sobre o glitch de fundo: abaixo do hero a prioridade é
     legibilidade (número dos 9B, cards, logos). */
  background: rgba(6, 0, 9, 0.68);
}

/* Última faixa antes do footer: encurta o respiro inferior para o
   CTA de press não flutuar num vão vazio. */
.home-press {
  padding-bottom: var(--space-12);
}

/* Primeiro bloco após o hero: entra em gradiente para não criar
   uma borda seca entre o hero (sem scrim) e o restante da página. */
.home-valley {
  background: linear-gradient(
    180deg,
    rgba(6, 0, 9, 0) 0,
    rgba(6, 0, 9, 0.68) clamp(80px, 14vh, 180px)
  );
}

.home-block-cta {
  margin-top: var(--space-12);
  text-align: center;
}

.home-block-cta--left {
  text-align: left;
}

/* ------------------------------------------------------------
   01 — PURPLE VALLEY / 9 BILLION  (clímax full-bleed)
   Roxo é LUZ: número monumental de borda a borda com glow radial;
   copy ancorada assimétrica; nada centralizado.
   ------------------------------------------------------------ */
.home-valley {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-content: center;
  row-gap: clamp(var(--space-6), 4vh, var(--space-16));
  padding-block: var(--section-pad);
  padding-inline: var(--space-4);
  overflow: hidden;
}

/* Glow radial (LUZ) atrás do número — nunca fill chapado */
.home-valley::before {
  content: '';
  position: absolute;
  inset: 8% 0;
  background: radial-gradient(
    ellipse 55% 42% at 50% 50%,
    rgba(147, 51, 234, 0.26) 0%,
    rgba(168, 85, 247, 0.09) 44%,
    transparent 74%
  );
  filter: blur(30px);
  pointer-events: none;
  z-index: 0;
}

.home-ghost--valley {
  bottom: 6%;
  left: -0.04em;
  /* "Purple Valley" (2 palavras): menor que o antigo "Valley" para caber
     em uma linha de borda a borda. */
  font-size: clamp(3rem, 10.5vw, 10rem);
  white-space: nowrap;
}

.valley-kicker {
  grid-column: 1 / 9;
  justify-self: start;
  position: relative;
  z-index: 1;
  color: var(--ink-dim);
  letter-spacing: 0.24em;
  margin: 0;
  max-width: none;
}

/* Número monumental — de borda a borda */
.valley-number {
  grid-column: 1 / 13;
  justify-self: center;
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 12.2vw, 14rem);
  font-weight: 800;
  font-variation-settings: 'wdth' 70;
  line-height: 0.9;
  letter-spacing: -0.03em;
  margin: 0;
  max-width: none;
  white-space: nowrap;
}

.valley-number .u-gradient-text {
  filter: drop-shadow(0 0 40px rgba(232, 121, 249, 0.4));
}

/* Copy ancorada à direita, sob o número (assimétrica) */
.valley-aside {
  grid-column: 7 / 13;
  justify-self: end;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  max-width: 46ch;
}

.valley-caption {
  color: var(--ink-dim);
  letter-spacing: 0.3em;
  margin: 0;
  max-width: none;
}

.valley-copy {
  margin: 0;
  color: var(--ink-dim);
  max-width: 46ch;
}

.home-valley .home-block-cta {
  margin-top: var(--space-2);
  text-align: left;
}

/* ------------------------------------------------------------
   02 — FEATURED WORKS  (grid assimétrico ousado + obra herói)
   ------------------------------------------------------------ */
.home-featured {
  overflow: hidden; /* clipa a palavra vazada de fundo */
}

.home-ghost--featured {
  top: var(--section-pad);
  right: calc(-1 * var(--space-8));
  font-size: clamp(4rem, 20vw, 17rem);
}

.home-featured .container {
  position: relative;
  z-index: 1;
}

.section-title--mono {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  font-weight: 700;
  font-variation-settings: normal;
  letter-spacing: 0.24em;
}

.featured-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-12) var(--space-8);
  align-items: start;
}

.featured-card {
  position: relative;
  isolation: isolate; /* stacking context local p/ link/play */
}

/* Obra herói: maior, ancorada à esquerda */
.featured-card:nth-child(1) {
  grid-column: 1 / span 7;
}

.featured-card:nth-child(2) {
  grid-column: 9 / span 4;
  margin-top: var(--space-32);
}

.featured-card:nth-child(3) {
  grid-column: 2 / span 5;
  margin-top: var(--space-24);
}

.featured-card:nth-child(4) {
  grid-column: 8 / span 4;
  margin-top: var(--space-16);
}

.featured-media {
  position: relative;
  border: 1px solid var(--line);
  background: var(--surface);
  overflow: hidden;
  transition: border-color var(--dur-base) var(--ease-out);
}

.featured-media img,
.featured-media video {
  display: block;
  width: 100%;
  height: auto;
  transition:
    transform var(--dur-slow) var(--ease-out),
    filter var(--dur-slow) var(--ease-out);
}

/* Pixel art (Inscription 124010, 250px nativos): upscale nítido */
.featured-media--pixel img {
  image-rendering: pixelated;
}

@media (hover: hover) and (pointer: fine) {
  .featured-card:hover .featured-media {
    border-color: var(--line-strong);
  }
  .featured-card:hover .featured-media img,
  .featured-card:hover .featured-media video {
    transform: scale(1.02);
  }
  /* Broadcast corrompido: franja RGB pontual na mídia em hover */
  .featured-card:hover .featured-media img {
    filter: drop-shadow(2px 0 0 rgba(255, 59, 107, 0.35))
      drop-shadow(-2px 0 0 rgba(103, 232, 249, 0.35));
  }
}

.featured-title {
  font-size: var(--text-h3);
  font-weight: 740;
  font-variation-settings: 'wdth' 76;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin: var(--space-4) 0 var(--space-2);
}

.featured-card .u-ledger {
  margin: 0;
  color: var(--ink-dim);
  max-width: none;
}

/* Link esticado — card inteiro navega p/ /works (z 1, abaixo do play) */
.featured-link {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Botão de play (vídeos pesados = click-to-play, nunca autoplay) */
.featured-play {
  position: absolute;
  bottom: var(--space-3);
  left: var(--space-3);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  color: var(--ink);
  background: rgba(6, 0, 9, 0.72);
  border: 1px solid var(--line-strong);
  border-radius: 0;
  cursor: pointer;
  transition:
    border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    opacity var(--dur-base) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .featured-play:hover {
    border-color: var(--violet-hot);
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.35);
  }
}

.featured-play-icon--pause {
  display: none;
}

.featured-card.is-playing .featured-play-icon--play {
  display: none;
}

.featured-card.is-playing .featured-play-icon--pause {
  display: block;
}

.featured-card.is-playing .featured-play {
  opacity: 0.55;
}

.featured-card.is-playing .featured-play:hover,
.featured-play:focus-visible {
  opacity: 1;
}

/* Badge AVAILABLE sobre a mídia (usa .badge--available do styles.css) */
.featured-media .badge {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 2;
}

/* ------------------------------------------------------------
   03 — COLLECTED BY  (marquee TextLoop, full-bleed)
   ------------------------------------------------------------ */
.home-collectors {
  padding-block: var(--space-24);
}

.home-collectors .section-head {
  margin-bottom: var(--space-8);
  border-bottom: none;
  padding-bottom: 0;
}

/* Faixa de borda a borda (o #collectorsTextLoop é preenchido pelo JS) */
.home-collectors-loop {
  border-block: 1px solid var(--line);
  padding-block: var(--space-8);
}

/* ------------------------------------------------------------
   04 — EXHIBITIONS TEASER  (linhas editoriais de borda a borda)
   Ano grande na margem; nome ocupa o centro; cidade à direita.
   ------------------------------------------------------------ */
.exh-teaser {
  list-style: none;
  margin: 0;
  padding: 0;
}

.exh-row {
  display: grid;
  grid-template-columns: minmax(4.5rem, 0.8fr) minmax(0, 2.2fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-6);
  min-height: 44px;
  padding-block: var(--space-6);
  padding-inline: var(--home-gutter);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  transition: border-color var(--dur-base) var(--ease-out);
}

.exh-teaser li:first-child .exh-row {
  border-top: 1px solid var(--line);
}

/* Ano monumental na margem esquerda */
.exh-year {
  color: var(--ink-dim);
  font-size: clamp(1.3rem, 4.6vw, 3.6rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
}

.exh-name {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 3.4vw, 2.8rem);
  font-weight: 760;
  font-variation-settings: 'wdth' 74;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.05;
  transition: color var(--dur-base) var(--ease-out);
}

.exh-city {
  color: var(--ink-dim);
  justify-self: end;
  text-align: right;
  white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
  .exh-row:hover {
    border-color: var(--line-strong);
    color: var(--ink);
  }
  /* RGB-split no título da linha (reusa o keyframe do styles.css) */
  .exh-row:hover .exh-name {
    animation: fx-split-flicker 0.12s steps(2) 1;
    text-shadow:
      2px 0 var(--glitch-red),
      -2px 0 var(--signal);
  }
}

/* ------------------------------------------------------------
   05 — PRESS STRIP  (pull-quote monumental + logos full-bleed)
   ------------------------------------------------------------ */
/* A citação subiu para o hero (.hero-tagline); a lede vira só o
   contador 9B ancorado à direita, acima da faixa de logos. */
.press-lede {
  display: flex;
  justify-content: flex-end;
}


/* Estatística vazada como HUD à direita da citação */
.press-stat {
  margin: 0;
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
  color: var(--ink-dim);
  letter-spacing: 0.24em;
}

.press-stat-num {
  font-family: var(--font-display);
  font-size: clamp(3rem, 9vw, 7rem);
  font-weight: 800;
  font-variation-settings: 'wdth' 72;
  line-height: 0.9;
  letter-spacing: -0.02em;
}

/* Faixa de logos de borda a borda, alinhada à goteira do container */
.press-logos {
  list-style: none;
  margin: var(--space-16) 0 0;
  padding-block: var(--space-8);
  padding-inline: var(--home-gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8) var(--space-12);
  border-block: 1px solid var(--line);
}

.press-logos img {
  height: clamp(26px, 4vw, 40px);
  width: auto;
  filter: grayscale(1) brightness(1.6);
  opacity: 0.55;
  transition:
    opacity var(--dur-base) var(--ease-out),
    filter var(--dur-base) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .press-logos img:hover {
    opacity: 1;
    filter: grayscale(1) brightness(1.8)
      drop-shadow(0 0 14px rgba(168, 85, 247, 0.55));
  }
}

/* ============================================================
   RESPONSIVO
   ============================================================ */

/* --- Tablet / desktop pequeno (<=1024px) --- */
@media (max-width: 1024px) {
  /* HERO: empilha mantendo alinhamento à esquerda e HUD no topo */
  .hero-section {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto minmax(0, 1fr) auto auto;
    row-gap: var(--space-8);
    padding-bottom: var(--space-16);
  }
  .hero-top {
    grid-column: 1;
    grid-row: 1;
  }
  .artistic-statement {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
  }
  .hero-artwork {
    grid-column: 1;
    grid-row: 3;
  }
  .statement-cta {
    grid-column: 1;
    grid-row: 4;
  }

  /* FEATURED: colapsa para 2 colunas com escalonamento suave */
  .featured-card:nth-child(1) {
    grid-column: 1 / span 7;
  }
  .featured-card:nth-child(2) {
    grid-column: 6 / span 7;
    margin-top: var(--space-16);
  }
  .featured-card:nth-child(3) {
    grid-column: 1 / span 7;
    margin-top: var(--space-8);
  }
  .featured-card:nth-child(4) {
    grid-column: 7 / span 6;
    margin-top: var(--space-8);
  }

  /* VALLEY: copy volta a alinhar mais ao centro-esquerda */
  .valley-aside {
    grid-column: 2 / 12;
    justify-self: start;
  }
}

/* --- Mobile (<=767px) --- */
@media (max-width: 767px) {
  /* HERO */
  .statement-text {
    font-size: clamp(2rem, 8.5vw, 3rem);
  }
  /* Marquee de colecionadores: 6rem por lado é respiro de desktop —
     no telefone a faixa é um momento de passagem, não uma seção cheia */
  .home-collectors {
    padding-block: var(--space-16);
  }
  /* Ledger de prova social: mantém as 3 métricas numa faixa compacta */
  .hero-proof {
    gap: var(--space-4) var(--space-4);
  }
  .hero-proof-item + .hero-proof-item {
    padding-inline-start: var(--space-4);
  }

  /* VALLEY: número não pode estourar a largura */
  .home-valley {
    padding-inline: var(--space-2);
    /* svh estável quando a barra do Safari colapsa (evita salto de layout) */
    min-height: 100svh;
  }
  .valley-number {
    /* teto rem trava o número no topo da faixa mobile (~747px+) */
    font-size: min(13.5vw, 6.5rem);
    letter-spacing: -0.045em;
  }
  .valley-aside,
  .home-ghost--valley {
    grid-column: 1 / 13;
  }
  .home-ghost--valley {
    font-size: min(30vw, 14rem);
  }

  /* FEATURED: 1 coluna, sem offsets */
  .featured-grid {
    grid-template-columns: 1fr;
    gap: var(--space-12);
  }
  .featured-card:nth-child(1),
  .featured-card:nth-child(2),
  .featured-card:nth-child(3),
  .featured-card:nth-child(4) {
    grid-column: auto;
    margin-top: 0;
  }
  .home-ghost--featured {
    font-size: min(34vw, 15rem);
    right: calc(-1 * var(--space-4));
  }

  /* EXHIBITIONS: colapsa cidade p/ segunda linha */
  .exh-row {
    grid-template-columns: minmax(3.5rem, auto) minmax(0, 1fr);
    gap: var(--space-2) var(--space-4);
  }
  .exh-city {
    grid-column: 2;
    justify-self: start;
    text-align: left;
  }

  /* PRESS: stat alinhada à esquerda, logos em fluxo */
  .press-lede {
    justify-content: flex-start;
  }
  .press-stat {
    align-items: flex-start;
    text-align: left;
  }
  .press-logos {
    justify-content: flex-start;
    gap: var(--space-6) var(--space-8);
  }
}

/* ============================================================
   MOVIMENTO — reduced-motion respeitado em tudo que é novo
   (o glow do clímax é estático — luz, sem pulso; ver §7 do
    design system: nada > 500ms exceto count-up/marquee)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  /* Indicador decorativo — some quando o usuário reduz movimento */
  .hero-scroll-hint {
    display: none;
  }
}

/* ============================================================
   HERO — complementos herdados (scroll hint) mantidos
   ============================================================ */
.hero-scroll-label {
  font-family: var(--font-mono);
  font-size: var(--text-mono-sm);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.hero-scroll-line {
  display: block;
  width: 1px;
  height: 40px;
  background: linear-gradient(180deg, var(--violet-hot), transparent);
  transform-origin: top;
  animation: hero-scroll-pulse 2s var(--ease-out) infinite;
}

@keyframes hero-scroll-pulse {
  0% {
    transform: scaleY(0);
    opacity: 0;
  }
  35% {
    transform: scaleY(1);
    opacity: 1;
  }
  100% {
    transform: scaleY(1);
    opacity: 0;
  }
}