/* ============================================================
   Elmar Distribuidora — bloco visual do hero da home
   Colagens soltas sobre o fundo, com halo, sementes e rotação
   Destino: Content/css/elmar-hero-colagem.css
   Escopo: tudo dentro de .elmar-hc — sem JavaScript
   ============================================================ */

.elmar-hc {
  /* tema escuro (padrão do hero atual) */
  --hc-halo-1: rgba(34, 161, 131, .42);
  --hc-halo-2: rgba(20, 90, 78, .22);
  --hc-halo-3: rgba(18, 33, 30, 0);
  --hc-glow-gold: rgba(232, 169, 63, .16);
  --hc-shadow: rgba(0, 0, 0, .55);
  --hc-seed-1: #E8A93F;
  --hc-seed-2: #C9A05A;
  --hc-seed-3: #8FD68A;

  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* o hero do site e' flex, nao grid: sem largura explicita o bloco colapsa
     (todo o conteudo e' absoluto ou percentual, logo a largura intrinseca e' 0)
     e as colagens somem, sobrando so' as barras e as sementes. */
  width: 100%;
  min-width: 0;
  min-height: 560px;
  isolation: isolate;
}

/* tema claro — aponte o seletor para o hook real do site
   (ex.: html[data-theme="light"], body.light-mode, .theme-light …) */
/* O site marca o tema em html[data-theme], com TRES valores: light, dark e
   auto (o padrao — segue o sistema operacional). O handoff so' previa
   light/dark, entao no modo auto com SO claro o bloco ficaria escuro dentro
   de uma pagina clara. Por isso a paleta clara vale nos dois casos. */
html[data-theme="light"] .elmar-hc {
  --hc-halo-1: rgba(34, 161, 131, .26);
  --hc-halo-2: rgba(232, 169, 63, .16);
  --hc-halo-3: rgba(251, 245, 234, 0);
  --hc-glow-gold: rgba(232, 169, 63, .22);
  --hc-shadow: rgba(60, 45, 20, .28);
  --hc-seed-1: #C78A26;
  --hc-seed-2: #A9683A;
  --hc-seed-3: #0E7A6E;
}

@media (prefers-color-scheme: light) {
  html[data-theme="auto"] .elmar-hc {
  --hc-halo-1: rgba(34, 161, 131, .26);
  --hc-halo-2: rgba(232, 169, 63, .16);
  --hc-halo-3: rgba(251, 245, 234, 0);
  --hc-glow-gold: rgba(232, 169, 63, .22);
  --hc-shadow: rgba(60, 45, 20, .28);
  --hc-seed-1: #C78A26;
  --hc-seed-2: #A9683A;
  --hc-seed-3: #0E7A6E;
}
}

.elmar-hc *,
.elmar-hc *::before,
.elmar-hc *::after { box-sizing: border-box; }

/* ---------- halos ---------- */

.elmar-hc__halo,
.elmar-hc__halo--gold {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.elmar-hc__halo {
  width: 520px;
  height: 520px;
  max-width: 90%;
  aspect-ratio: 1 / 1;
  background: radial-gradient(circle, var(--hc-halo-1) 0%, var(--hc-halo-2) 45%, var(--hc-halo-3) 70%);
  filter: blur(6px);
  animation: elmar-hc-halo 9s ease-in-out infinite;
}

.elmar-hc__halo--gold {
  width: 300px;
  height: 300px;
  max-width: 55%;
  background: radial-gradient(circle, var(--hc-glow-gold), var(--hc-halo-3) 70%);
  animation: none;
  filter: none;
}

/* ---------- sementes ---------- */

.elmar-hc__seed {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  animation: elmar-hc-seed 8s linear infinite;
}

/* nth-of-type, nao nth-child: os dois halos sao os filhos 1 e 2 do bloco,
   entao :nth-child(1..5) nao casava com semente nenhuma — elas ficavam sem
   left/top/tamanho, ou seja 0x0. Era esse o motivo de quase nao aparecerem.
   Como as sementes sao os unicos <span> aqui, nth-of-type conta 1..5 certo. */
.elmar-hc__seed:nth-of-type(1) { left: 12%; top: 14%; width: 9px; height: 9px; background: var(--hc-seed-1); animation-duration: 7s; }
.elmar-hc__seed:nth-of-type(2) { left: 28%; top: 8%;  width: 7px; height: 7px; background: var(--hc-seed-2); animation-duration: 9s; animation-delay: 1.4s; }
.elmar-hc__seed:nth-of-type(3) { left: 63%; top: 11%; width: 8px; height: 8px; background: var(--hc-seed-1); animation-duration: 8s; animation-delay: 2.6s; }
.elmar-hc__seed:nth-of-type(4) { left: 80%; top: 18%; width: 7px; height: 7px; background: var(--hc-seed-3); animation-duration: 10s; animation-delay: .8s; }
.elmar-hc__seed:nth-of-type(5) { left: 45%; top: 6%;  width: 6px; height: 6px; background: var(--hc-seed-2); animation-duration: 11s; animation-delay: 3.6s; }

/* ---------- palco das colagens ---------- */

.elmar-hc__stage {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 620px;
  aspect-ratio: 1 / 1;
  animation: elmar-hc-drift 11s ease-in-out infinite;
}

.elmar-hc__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 34px 46px var(--hc-shadow));
  /* uma arte so', sorteada no servidor: nao ha ciclo, so' a entrada suave.
     Nao e' infinite e nao volta pra opacity 0 — termina em 1 e fica. */
  animation: elmar-hc-entra .9s ease-out both;
}

/* ---------- animações ---------- */

@keyframes elmar-hc-entra {
  from { opacity: 0; transform: scale(.985); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes elmar-hc-drift {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-.4deg); }
  50%      { transform: translate3d(0, -18px, 0) rotate(.4deg); }
}

@keyframes elmar-hc-halo {
  0%, 100% { opacity: .55; transform: scale(1); }
  50%      { opacity: .8; transform: scale(1.06); }
}

@keyframes elmar-hc-seed {
  0%   { transform: translateY(-10px) scale(.9); opacity: 0; }
  15%  { opacity: .95; }
  100% { transform: translateY(240px) scale(1.05); opacity: 0; }
}

/* ---------- responsivo ---------- */

@media (max-width: 1000px) {
  .elmar-hc { min-height: 440px; }
  .elmar-hc__stage { max-width: 480px; }
  .elmar-hc__halo { width: 420px; height: 420px; }
}

@media (max-width: 720px) {
  .elmar-hc { min-height: 340px; }
  .elmar-hc__stage { max-width: 340px; }
  .elmar-hc__halo { width: 300px; height: 300px; }
  .elmar-hc__halo--gold { width: 190px; height: 190px; }
}

/* ---------- acessibilidade ----------
   Com "reduzir movimento": nada se mexe e fica so' a colagem sorteada
   no servidor, parada. */

@media (prefers-reduced-motion: reduce) {
  .elmar-hc__stage,
  .elmar-hc__halo,
  .elmar-hc__seed,
  .elmar-hc__art { animation: none !important; }

  .elmar-hc__seed { display: none; }
  /* a arte ja' nasce opaca: com o animation desligado ela fica visivel
     sozinha, sem precisar de regra de opacity aqui. */
}

/* ---------- stop motion (Scripts/Home/HeroStopMotion.js) ----------
   O JS monta os pedacos dentro de .elmar-hc__stage e marca o bloco com
   .elmar-hc--sm. Todas as medidas sao em --hc-u (1% do lado do palco,
   gravado pelo JS a cada redimensionamento) — o mesmo "cqmin" do prototipo,
   sem depender de container queries. Cores dos cards e do CTA sao fixas
   (verde + dourado da marca) e valem nos dois temas; so' o logo e a sombra
   trocam com o tema, pelas mesmas regras html[data-theme] la' de cima. */

.elmar-hc__stage { --hc-u: 5px; }

.elmar-hc--sm .elmar-hc__art { display: none; }
/* o tremor quadro a quadro ja' e' o movimento: sem o drift por cima */
.elmar-hc--sm .elmar-hc__stage { animation: none; }

.elmar-hc__sm {
  position: absolute;
  inset: 0;
  overflow: hidden;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 700;
}

.elmar-hc__tile {
  position: absolute;
  display: none;
  will-change: transform;
  pointer-events: none;
}
.elmar-hc__tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 calc(var(--hc-u) * .7) calc(var(--hc-u) * 1.1) var(--hc-shadow));
}

.elmar-hc__card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--hc-u) * 78);
  min-height: calc(var(--hc-u) * 33);
  padding: calc(var(--hc-u) * 5.3) calc(var(--hc-u) * 4.4);
  background: #0f6a56;
  border-radius: calc(var(--hc-u) * 3.1);
  box-shadow: 0 calc(var(--hc-u) * 2) calc(var(--hc-u) * 4.4) var(--hc-shadow);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--hc-u) * 2);
  text-align: center;
  pointer-events: none;
}
.elmar-hc__card-k {
  font-size: calc(var(--hc-u) * 2.4);
  letter-spacing: .28em;
  color: #a6d389;
}
.elmar-hc__card-t {
  font-size: calc(var(--hc-u) * 10.7);
  line-height: 1.05;
  color: #d9b56d;
  text-wrap: balance;
  max-width: 92%;
}
.elmar-hc__card-t--longo { font-size: calc(var(--hc-u) * 7.8); }

/* card dourado da frase (ATENDIMENTO): alinhado a esquerda, aspas gigantes
   sangrando no canto. As palavras ganham visibility/transform pelo JS. */
.elmar-hc__quote {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--hc-u) * 78);
  min-height: calc(var(--hc-u) * 36);
  padding: calc(var(--hc-u) * 5.3) calc(var(--hc-u) * 6.2);
  background: #d9b56d;
  border-radius: calc(var(--hc-u) * 3.1);
  box-shadow: 0 calc(var(--hc-u) * 2) calc(var(--hc-u) * 4.4) var(--hc-shadow);
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: calc(var(--hc-u) * 1.6);
  overflow: hidden;
  pointer-events: none;
}
.elmar-hc__quote-qm {
  position: absolute;
  right: calc(var(--hc-u) * 3);
  top: calc(var(--hc-u) * -4.4);
  font-family: Georgia, serif;
  font-size: calc(var(--hc-u) * 29);
  line-height: 1;
  color: #0f6a56;
  opacity: .28;
}
.elmar-hc__quote-k {
  position: relative;
  font-size: calc(var(--hc-u) * 2.2);
  letter-spacing: .28em;
  color: #0b3d31;
  opacity: .7;
}
.elmar-hc__quote-w {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 0 calc(var(--hc-u) * 2.4);
}
.elmar-hc__quote-w span {
  display: inline-block;
  font-size: calc(var(--hc-u) * 9.3);
  line-height: 1.05;
  color: #0b3d31;
}

.elmar-hc__end {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1%;
}
.elmar-hc__logo {
  display: block;
  width: calc(var(--hc-u) * 58);
  filter: drop-shadow(0 calc(var(--hc-u) * .9) calc(var(--hc-u) * 2.7) var(--hc-shadow));
}
.elmar-hc__logo img { width: 100%; height: auto; }

/* logo por tema: dourado no escuro (padrao), verde no claro.
   O display fica SO' nestas classes — uma regra ".elmar-hc__logo img"
   com display ganharia delas por especificidade e os dois apareceriam. */
.elmar-hc__logo-ouro  { display: block; }
.elmar-hc__logo-verde { display: none; }
html[data-theme="light"] .elmar-hc__logo-verde { display: block; }
html[data-theme="light"] .elmar-hc__logo-ouro  { display: none; }
@media (prefers-color-scheme: light) {
  html[data-theme="auto"] .elmar-hc__logo-verde { display: block; }
  html[data-theme="auto"] .elmar-hc__logo-ouro  { display: none; }
}

.elmar-hc__cta,
.elmar-hc__cta:hover,
.elmar-hc__cta:focus {
  display: inline-block;
  margin-top: calc(var(--hc-u) * 6);
  padding: calc(var(--hc-u) * 2.7) calc(var(--hc-u) * 5.3);
  border-radius: 999px;
  background: linear-gradient(90deg, #d9b56d, #c9a25b);
  color: #1a1a1a;
  font-size: calc(var(--hc-u) * 2.9);
  letter-spacing: .08em;
  white-space: nowrap;
  text-decoration: none;
  pointer-events: auto;
}
.elmar-hc__cta:hover { filter: brightness(1.06); }