/* Hero V2 — carrossel de colecionáveis (ref.: motionsites.ai/?prompt=3d-collectible-hero)
   Fontes e cores: tokens aprovados de styles.css (Space Grotesk, DM Sans, DM Mono; --ink, --paper, candy-*). */
@property --hv2-glow {
  syntax: "<color>";
  inherits: true;
  initial-value: #f17b48;
}

.hero-v2 {
  --hv2-ease: cubic-bezier(.4, 0, .2, 1);
  --hv2-dur: 650ms;
  --hv2-copy-h: 260px; /* medido pelo JS: altura do bloco de texto + margem inferior */
  position: relative;
  isolation: isolate;
  width: 100%;
  height: calc(100svh - 76px);
  min-height: 620px;
  overflow: hidden;
  color: var(--paper);
  /* Degradê do hero aprovado (ink → #474e89 → #7c6fae) + cor validada do slide (--hv2-glow)
     no canto superior direito e atrás da peça. Canto inferior esquerdo sempre ink: contraste do texto. */
  background:
    radial-gradient(ellipse 46% 52% at 50% 84%, color-mix(in srgb, var(--hv2-glow) 45%, transparent) 0%, transparent 100%),
    radial-gradient(ellipse 85% 75% at 100% 0%, color-mix(in srgb, var(--hv2-glow) 62%, transparent) 0%, transparent 72%),
    linear-gradient(20deg, var(--ink) 0%, #474e89 50%, #7c6fae 100%);
  transition: --hv2-glow var(--hv2-dur) var(--hv2-ease);
}

/* Textura: grão leve + linhas de camada (impressão 3D, "feito camada por camada") */
.hv2-grain {
  position: absolute; inset: 0; z-index: 50; pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.1'/%3E%3C/svg%3E"),
    repeating-linear-gradient(0deg, rgba(247, 244, 238, .035) 0 1px, transparent 1px 5px);
  background-size: 200px 200px, auto;
  opacity: .55;
}

/* Título grande ao fundo */
.hv2-title {
  position: absolute; inset-inline: 0; top: 5%; z-index: 2; margin: 0;
  text-align: center;
  /* "GANHAM FORMA" mede 6,9em: 13,2vw ocupa ~92% da largura */
  font: 700 clamp(40px, 13.2vw, 250px)/.84 "Space Grotesk", sans-serif;
  letter-spacing: -.07em; text-transform: uppercase; white-space: nowrap;
  pointer-events: none; user-select: none;
}
.hv2-title span { display: block; }
.hv2-title em { font-style: normal; color: var(--candy-yellow); }

/* Palco e papéis */
.hv2-stage { position: absolute; inset: 0; z-index: 3; margin: 0; padding: 0; list-style: none; }
.hv2-item {
  position: absolute;
  aspect-ratio: var(--ar, 9 / 16);
  transform: translateX(-50%);
  transition: left var(--hv2-dur) var(--hv2-ease), bottom var(--hv2-dur) var(--hv2-ease),
    height var(--hv2-dur) var(--hv2-ease), filter var(--hv2-dur) var(--hv2-ease),
    opacity var(--hv2-dur) var(--hv2-ease);
  will-change: left, height, filter, opacity;
}
.hv2-item video { width: 100%; height: 100%; display: block; object-fit: contain; object-position: bottom center; }
/* Peça central: altura e base calculadas pelo JS por peça (--cx-h, --cx-b) para cortar no joelho;
   centrada no espaço livre entre o texto e o link (--cx-left). */
.hv2-item[data-role="center"] { left: var(--cx-left, 50%); bottom: var(--cx-b, 0px); height: var(--cx-h, 86%); z-index: 20; opacity: 1; filter: none; }
.hv2-item[data-role="left"]   { left: 17%; bottom: calc(var(--hv2-copy-h) + 16px); height: 24%; z-index: 10; opacity: .8; filter: blur(2px); }
.hv2-item[data-role="right"]  { left: 93%; bottom: calc(var(--hv2-copy-h) + 16px); height: 24%; z-index: 10; opacity: .8; filter: blur(2px); }
.hv2-item[data-role="back"]   { left: 50%; bottom: 16%; height: 22%; z-index: 5; opacity: 1; filter: blur(4px); }
.hv2-item[data-role="hidden"] { left: 50%; bottom: 16%; height: 22%; z-index: 4; opacity: 0; filter: blur(4px); }

/* Bloco inferior esquerdo — altura estável entre slides */
.hv2-copy { position: absolute; left: clamp(16px, 6vw, 96px); bottom: clamp(24px, 8vh, 72px); z-index: 60; width: min(360px, calc(100% - 32px)); }
.hv2-copy .eyebrow { margin: 0 0 10px; color: var(--candy-yellow); }
.hv2-support { margin: 0 0 10px; font: 600 clamp(20px, 1.9vw, 26px)/1.1 "Space Grotesk", sans-serif; letter-spacing: -.04em; }
.hv2-lede { margin: 0 0 10px; color: #d2d7e1; font-size: 15px; line-height: 1.5; }
.hv2-caption {
  margin: 0 0 20px; color: #d2d7e1; font: 500 12px/1.6 "DM Mono", monospace; letter-spacing: .02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hv2-nav { display: flex; gap: 12px; }
.hv2-nav button {
  display: grid; place-items: center; width: 60px; height: 60px; padding: 0;
  border: 1.5px solid var(--paper); border-radius: 50%; background: transparent; color: var(--paper); cursor: pointer;
  transition: transform 150ms, background-color 150ms, color 150ms;
}
.hv2-nav button:hover { transform: scale(1.06); background: var(--paper); color: var(--ink); }
.hv2-nav svg { width: 24px; height: 24px; }
.hero-v2 :focus-visible { outline: 3px solid var(--candy-yellow); outline-offset: 4px; }

/* Link inferior direito — mesmo padrão do .header-cta */
.hv2-discover {
  position: absolute; right: clamp(16px, 5vw, 72px); bottom: clamp(24px, 8vh, 72px); z-index: 60;
  display: inline-flex; align-items: center; gap: 10px; padding: 14px 18px;
  color: var(--paper); border: 1px solid var(--paper); border-radius: var(--pill-radius);
  background: rgba(24, 39, 70, .55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font: 600 13px "DM Sans", sans-serif; letter-spacing: .04em; text-transform: uppercase;
  transition: background-color 150ms, color 150ms;
}
.hv2-discover:hover { background: var(--paper); color: var(--ink); }
.hv2-discover svg { width: 18px; height: 18px; }

/* Empilhado: peças acima do bloco de texto, sem sobreposição (usa a altura medida) */
@media (max-width: 1023px) {
  /* Como a referência no mobile: figura inteira, sem degradê, pés um pouco atrás do texto */
  .hv2-item[data-role="left"]   { left: 11%; bottom: calc(var(--hv2-copy-h) + 24px); height: 16%; }
  .hv2-item[data-role="right"]  { left: 89%; bottom: calc(var(--hv2-copy-h) + 24px); height: 16%; }
  .hv2-item[data-role="back"], .hv2-item[data-role="hidden"] { bottom: calc(var(--hv2-copy-h) + 24px); height: 13%; }
  .hv2-copy { bottom: 24px; }
  .hv2-discover { bottom: 34px; }
}

@media (max-width: 760px) {
  .hero-v2 { height: calc(100svh - 66px); } /* header mobile do styles.css: 66px */
}

@media (max-width: 639px) {
  .hv2-title { top: 5%; }
  .hv2-lede { display: none; }
  .hv2-caption { margin-bottom: 14px; }
  .hv2-nav button { width: 48px; height: 48px; }
  .hv2-discover { bottom: 30px; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-v2 { --hv2-dur: 0ms; }
}

/* Protótipo A: foto de produtos (hero da versão sem vídeo) no bloco do manifesto */
.manifesto-visual--produtos { background-image: url("./assets/hero-produtos.webp"); background-position: center; }