/* ==================================================================
   DS 5.1 — Tipografia variável por contexto

   O peso e a largura dos títulos mudam conforme o gênero/contexto.
   Usa font-variation-settings para Archivo (que suporta wght e wdth).
   Cada gênero de conteúdo ganha uma "voz" tipográfica própria.
   ================================================================== */

/* Variações por gênero (aplicadas via data-genre no card ou na página) */
[data-genre="acao"],
[data-genre="action"] {
  --type-weight: 800;
  --type-width: 85;
  --type-transform: uppercase;
  --type-tracking: .02em;
}
[data-genre="romance"],
[data-genre="romance"] {
  --type-weight: 450;
  --type-width: 100;
  --type-transform: none;
  --type-tracking: .01em;
}
[data-genre="terror"],
[data-genre="horror"] {
  --type-weight: 900;
  --type-width: 75;
  --type-transform: uppercase;
  --type-tracking: .04em;
}
[data-genre="comedia"],
[data-genre="comedy"] {
  --type-weight: 600;
  --type-width: 100;
  --type-transform: none;
  --type-tracking: 0;
}
[data-genre="drama"] {
  --type-weight: 500;
  --type-width: 90;
  --type-transform: none;
  --type-tracking: .005em;
}
[data-genre="documentario"],
[data-genre="documentary"] {
  --type-weight: 650;
  --type-width: 95;
  --type-transform: none;
  --type-tracking: .015em;
}
[data-genre="animacao"],
[data-genre="animation"] {
  --type-weight: 700;
  --type-width: 100;
  --type-transform: none;
  --type-tracking: 0;
}
[data-genre="ficcao"],
[data-genre="sci-fi"] {
  --type-weight: 350;
  --type-width: 80;
  --type-transform: uppercase;
  --type-tracking: .06em;
}
[data-genre="suspense"],
[data-genre="thriller"] {
  --type-weight: 750;
  --type-width: 82;
  --type-transform: none;
  --type-tracking: .01em;
}

/* Aplicação nos títulos que usam as variações */
.type-variable {
  font-variation-settings:
    'wght' var(--type-weight, var(--display-weight, 700)),
    'wdth' var(--type-width, 100);
  text-transform: var(--type-transform, none);
  letter-spacing: var(--type-tracking, var(--display-track, 0));
  transition: font-variation-settings .4s var(--ease-out);
}

/* Classes para peso de contexto (não-gênero) */
.type-display {
  font-variation-settings: 'wght' var(--display-weight, 750), 'wdth' 95;
  letter-spacing: var(--display-track, -.005em);
  line-height: var(--display-leading, .96);
}
.type-detail {
  font-variation-settings: 'wght' 450, 'wdth' 100;
  letter-spacing: .005em;
}
.type-compact {
  font-variation-settings: 'wght' 600, 'wdth' 85;
  letter-spacing: .01em;
  text-transform: uppercase;
  font-size: var(--fs-xs);
}

/* Peso variável no hero conforme o gênero principal */
.cine-hero .hero-slide__title {
  font-variation-settings:
    'wght' var(--type-weight, var(--display-weight, 750)),
    'wdth' var(--type-width, 95);
  text-transform: var(--type-transform, none);
  letter-spacing: var(--type-tracking, var(--display-track, -.005em));
}

/* Reduced motion: sem transição de variação */
@media (prefers-reduced-motion: reduce) {
  .type-variable { transition: none; }
}