/* ==========================================================================
   Hero · Figma 1:516 (desktop 1920 × 865) · 1:885 (mobile 390 × 1150)
   Texto 642 + cards 474, gap 64. Os cards são uma composição posicionada
   (não imagem): toda medida interna usa --k = 1px do Figma na largura 445,
   então o mobile (316) é a mesma composição escalada, como no Figma.
   Entrada e flutuação em CSS (não dependem do GSAP, não piscam, não atrasam
   o LCP); parallax do mouse em js/modules/hero.js.
   ========================================================================== */

.cn-hero {
  position: relative; isolation: isolate; overflow: clip;
  padding-block: var(--hero-pad-top) var(--hero-pad-bottom);
  color: var(--text-on-dark);
}

/* ---------- Fundo ---------- */
.cn-hero__bg { position: absolute; inset: 0; z-index: -1; }
.cn-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; } /* centrado: em 1024–1440 as borboletas pequenas não caem sobre o texto (56:1839) */
@media (max-width: 767px) { .cn-hero__bg img { object-position: 50% 100%; } } /* fita e borboletas embaixo (57:1858) */

/* ---------- Layout ---------- */
.cn-hero__inner { display: flex; align-items: center; gap: var(--space-64); }
.cn-hero__text { flex: 0 1 var(--hero-text-w); min-width: 0; display: flex; flex-direction: column; gap: var(--space-24); }
.cn-hero__media { flex: none; width: var(--hero-media-w); }

/* ---------- Texto ---------- */
/* Logo 1:549: caixa 227 × 40; a marca visível tem 219 × 35 a 5px da esquerda */
.cn-hero__logo { width: 219px; height: auto; margin: 2px 0 3px 5px; }
.cn-hero__title { color: var(--white); }
/* o <em> em Fraunces tem ascendente maior: sem isso cada linha com itálico cresce ~1px */
.cn-hero__title em { line-height: 1; }
.cn-hero__lead { color: var(--white); }
.cn-hero__actions { display: flex; flex-direction: column; gap: var(--space-12); }
.cn-hero__buttons { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-16); }
.cn-hero__note { color: var(--white); }

/* ---------- Composição dos cards (1:579) ---------- */
.cn-hero__cards {
  container-type: inline-size;
  position: relative;
  width: var(--hero-cards-w);
  aspect-ratio: 445 / 596;
}
.cn-hero__cards * { --k: calc(100cqw / 445); }
.cn-hero__list { position: absolute; inset: 0; }

.cn-hero__card {
  position: absolute;
  width: calc(231 * var(--k)); height: calc(320 * var(--k));
  translate: calc(var(--px, 0) * var(--depth) * 1px) calc(var(--py, 0) * var(--depth) * 1px);
  transition: translate .9s var(--ease-out);
}
.cn-hero__card--lime   { left: 0;                     top: 0; }
.cn-hero__card--purple { left: calc(33 * var(--k));   top: calc(276 * var(--k)); }
.cn-hero__card--lilac  { left: calc(214 * var(--k));  top: calc(53 * var(--k)); }

.cn-hero__card-body {
  position: relative; width: 100%; height: 100%;
  border-radius: calc(15 * var(--k));
  overflow: hidden;
  background: var(--card-bg); color: var(--card-ink);
}
.cn-hero__card--lime   { --card-bg: var(--lime-500);   --card-ink: var(--purple-900); --card-shape: var(--lime-200);   --chip-bg: var(--lime-100);  --chip-ink: var(--lime-ink); }
.cn-hero__card--purple { --card-bg: var(--purple-700); --card-ink: var(--white);      --card-shape: var(--purple-600); --chip-bg: var(--lilac-200); --chip-ink: var(--lilac-ink); }
.cn-hero__card--lilac  { --card-bg: var(--lilac-350);  --card-ink: var(--purple-900); --card-shape: var(--lilac-200);  --chip-bg: var(--lilac-200); --chip-ink: var(--lilac-ink); }

.cn-hero__photo {
  position: absolute; left: calc(var(--photo-x) * var(--k)); top: calc(var(--photo-y) * var(--k));
  width: calc(142 * var(--k)); height: calc(169 * var(--k));
  border-radius: calc(15 * var(--k));
  object-fit: cover;
}
.cn-hero__card--lime   { --photo-x: 20; --photo-y: 24; --text-x: 20; }
.cn-hero__card--purple { --photo-x: 13; --photo-y: 20; --text-x: 16; }
.cn-hero__card--lilac  { --photo-x: 16; --photo-y: 24; --text-x: 16; }

.cn-hero__silhouette {
  /* frame 1:586 (197 × 172 em @115,189); o SVG já traz o vetor deslocado dentro do frame */
  position: absolute; left: calc(115 * var(--k)); top: calc(189 * var(--k));
  width: calc(197 * var(--k)); height: calc(172 * var(--k));
  color: var(--card-shape);
}
.cn-hero__chip {
  position: absolute; left: calc(var(--text-x) * var(--k)); top: calc(207 * var(--k));
  padding: calc(4 * var(--k)) calc(10 * var(--k));
  border-radius: var(--radius-pill);
  background: var(--chip-bg); color: var(--chip-ink);
  font: var(--fw-regular) calc(8 * var(--k))/1.5 var(--font-sans);
  text-transform: uppercase;
}
.cn-hero__name {
  position: absolute; left: calc(var(--text-x) * var(--k)); top: calc(232 * var(--k));
  width: calc(199 * var(--k));
  font: var(--fw-semibold) calc(24 * var(--k))/1.08 var(--font-sans);
}
.cn-hero__card--lime .cn-hero__name { top: calc(236 * var(--k)); }

/* Selo do Laboratório (1:610): círculo 147 com vidro fosco */
.cn-hero__seal {
  position: absolute; left: calc(281 * var(--k)); top: calc(390 * var(--k));
  width: calc(147 * var(--k)); aspect-ratio: 1;
  translate: calc(var(--px, 0) * var(--depth) * 1px) calc(var(--py, 0) * var(--depth) * 1px);
  transition: translate .9s var(--ease-out);
}
.cn-hero__seal-body {
  position: relative; width: 100%; height: 100%;
  border-radius: 50%;
  background: var(--grad-seal);
  border: calc(4 * var(--k)) solid var(--lilac-175);
  backdrop-filter: blur(var(--blur-seal));
}
/* anel interno 1:614 (133px, traço fino) */
.cn-hero__seal-body::before {
  content: ""; position: absolute; inset: calc(3 * var(--k));
  border-radius: 50%; border: .5px solid var(--lilac-400);
}
.cn-hero__seal-img { position: absolute; left: calc(13 * var(--k)); top: calc(7 * var(--k)); width: calc(113 * var(--k)); height: auto; }
.cn-hero__seal-logo { position: absolute; left: calc(49 * var(--k)); top: calc(110 * var(--k)); width: calc(42 * var(--k)); height: auto; }

/* ---------- Movimento (CSS; desligado em reduced-motion) ----------
   Fundo assenta de 1.06 → 1; texto sobe em sequência (o título não começa
   invisível: só desloca, para não atrasar o LCP); cards saem empilhados do
   centro e abrem em leque; depois flutuam defasados. */
@media (prefers-reduced-motion: no-preference) {
  .cn-hero__bg img { animation: cn-hero-bg 1.8s var(--ease-out) both; }
  .cn-hero__logo  { animation: cn-hero-up .9s var(--ease-out) .15s both; }
  .cn-hero__title { animation: cn-hero-rise 1s var(--ease-out) .2s both; }
  .cn-hero__title em { display: inline; animation: cn-hero-focus 1s var(--ease-out) .55s both; }
  .cn-hero__lead  { animation: cn-hero-up .9s var(--ease-out) .4s both; }
  .cn-hero__meta > * { animation: cn-hero-up .8s var(--ease-out) both; }
  .cn-hero__meta > :nth-child(1) { animation-delay: .5s; }
  .cn-hero__meta > :nth-child(2) { animation-delay: .57s; }
  .cn-hero__meta > :nth-child(3) { animation-delay: .64s; }
  .cn-hero__actions { animation: cn-hero-up .9s var(--ease-out) .72s both; }

  .cn-hero__card { animation: cn-hero-fan 1.2s var(--ease-out) calc(.45s + var(--d)) both; }
  .cn-hero__seal { animation: cn-hero-seal 1.1s var(--ease-out) .85s both; }
  .cn-hero__card-body { animation: cn-hero-float 6s ease-in-out calc(1.8s + var(--d) * 8) infinite alternate; }
  .cn-hero__seal-body { animation: cn-hero-float 7s ease-in-out 2.2s infinite alternate-reverse; }
  .cn-hero.is-offscreen .cn-hero__card-body,
  .cn-hero.is-offscreen .cn-hero__seal-body { animation-play-state: paused; }
}
@keyframes cn-hero-bg    { from { transform: scale(1.06); } }
@keyframes cn-hero-up    { from { opacity: 0; transform: translateY(24px); } }
@keyframes cn-hero-rise  { from { transform: translateY(28px); } }
@keyframes cn-hero-focus { from { filter: blur(8px); opacity: .35; } }
@keyframes cn-hero-fan {
  from { opacity: 0; transform: translate(calc(var(--fx) * var(--k)), calc(var(--fy) * var(--k))) rotate(var(--fr)) scale(.9); }
}
@keyframes cn-hero-seal  { from { opacity: 0; transform: scale(.6) rotate(-25deg); } }
@keyframes cn-hero-float { to { transform: translateY(-8px) rotate(var(--float-r, .8deg)); } }
.cn-hero__card--purple { --float-r: -.8deg; }
.cn-hero__card--lilac  { --float-r: 1.2deg; }

/* ---------- 1024–1279: mesma grade, gap menor e cards proporcionais ---------- */
@media (max-width: 1279px) {
  .cn-hero__inner { gap: var(--space-48); }
  .cn-hero__media { width: clamp(340px, 37vw, var(--hero-media-w)); }
  .cn-hero__cards { width: calc(100% * 445 / 474); }
}
/* 1024–1279: a coluna de texto (≈550) é mais estreita que os dados (633) → quebram sem divisória */
@media (min-width: 1024px) and (max-width: 1279px) {
  .cn-hero__meta { column-gap: var(--space-16); }
  .cn-hero__meta .cn-meta__item { padding-inline: 0; }
  .cn-hero__meta .cn-meta__item + .cn-meta__item { border-left: 0; }
}

/* ---------- ≤1023: empilhado (texto, depois cards) ---------- */
@media (max-width: 1023px) {
  .cn-hero { padding-block: calc(var(--header-top) + var(--header-h) + var(--space-48)) var(--space-64); }
  .cn-hero__inner { flex-direction: column; align-items: stretch; gap: var(--space-64); }
  .cn-hero__text { flex: none; max-width: var(--hero-text-w); }
  .cn-hero__media { width: auto; }
  .cn-hero__cards { width: min(100%, var(--hero-cards-w)); margin-inline: auto; }
}

/* ---------- ≤767: mobile (1:885) ---------- */
@media (max-width: 767px) {
  .cn-hero { padding-block: calc(var(--header-top) + var(--header-h) + var(--space-32)) var(--space-64); }
  /* 1:888: caixa 184 × 32, marca visível 177 × 29 */
  .cn-hero__logo { width: 177px; margin: 2px 0 1px 4px; }
  .cn-hero__lead { max-width: 315px; }
  /* Dados: quebram em 2 linhas sem divisória (o Figma corta "Juazeiro do Norte") */
  .cn-hero__meta { column-gap: var(--space-16); }
  .cn-hero__meta .cn-meta__item { padding-inline: 0; }
  .cn-hero__buttons { flex-direction: column; }
  /* Figma: composição 8px para dentro do container (x 31); some quando não cabe (360) */
  .cn-hero__cards { width: min(100%, var(--hero-cards-w-m)); margin-inline: clamp(0px, calc(100% - var(--hero-cards-w-m)), var(--space-8)) 0; }
}