/* =========================================================================
   Home / Hero — arte original exibida inteira, com proporção exata.
   A seção assume a proporção da arte (nunca distorce, nunca corta).
   Quando a tela é mais baixa que a arte, ela é contida e as laterais
   recebem uma extensão desfocada da própria arte.
   ========================================================================= */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

.home-hero {
  --ar: 1672 / 941;
  --p: 0;
  --mx: .8;
  --my: .12;
  position: relative;
  isolation: isolate;
  z-index: 1;
  width: 100%;
  aspect-ratio: var(--ar);
  max-height: max(calc(100svh - var(--header-h)), 360px);
  background: #0b3a9e;
}

.hh-clip { position: absolute; inset: 0; overflow: hidden; }

/* Extensão ambiente: a própria arte, minúscula e desfocada */
.hh-ambient { position: absolute; inset: -8%; background: #0b3a9e url("/assets/institucional/home-desktop-ambient.webp") center / cover no-repeat; filter: blur(30px) saturate(1.2) brightness(.92); transform: translate3d(0, calc(var(--p) * 18%), 0) scale(1.1); }

/* Palco e arte */
.hh-stage { position: absolute; inset: 0; perspective: 1400px; }
.hh-art { position: absolute; top: 0; left: 50%; height: 100%; aspect-ratio: var(--ar); max-width: 100%; transform: translate3d(-50%, calc(var(--p) * 10%), 0) scale(calc(1 + var(--p) * .035)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-origin: 50% 35%; transition: transform .7s cubic-bezier(.2, .8, .2, 1); will-change: transform; }
.hh-art-inner { position: relative; width: 100%; height: 100%; }
.hh-art picture, .hh-art img { display: block; width: 100%; height: 100%; }
.hh-art img { object-fit: contain; object-position: center; }
.home-hero.is-letterbox .hh-art-inner { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%); }

/* Luz: reflexo que percorre a arte + brilho dinâmico */
.hh-sheen { position: absolute; inset: 0; overflow: hidden; pointer-events: none; mix-blend-mode: soft-light; }
.hh-sheen::before { content: ""; position: absolute; top: -20%; bottom: -20%; left: -60%; width: 45%; background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, .0) 20%, rgba(255, 255, 255, .85) 50%, rgba(255, 255, 255, 0) 80%, transparent 100%); transform: skewX(-16deg); opacity: 0; }
.hh-glint { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; background: radial-gradient(38% 30% at calc(var(--mx) * 100%) calc(var(--my) * 100%), rgba(170, 220, 255, .2), transparent 70%); opacity: 0; }

/* Partículas de luz em primeiro plano (plano mais próximo) */
.hh-fx { position: absolute; inset: 0; pointer-events: none; transform: translate3d(0, calc(var(--p) * -22%), 0); }
.hh-fx i { position: absolute; bottom: -6%; width: var(--s, 10px); height: var(--s, 10px); border-radius: 50%; background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, .95), rgba(190, 228, 255, .45) 45%, rgba(190, 228, 255, 0) 70%); opacity: 0; animation: hh-bubble var(--d, 14s) linear infinite; animation-delay: var(--dl, 0s); animation-play-state: paused; }
.hh-fx i:nth-child(1) { left: 8%; --s: 8px; --d: 13s; --dl: -2s; }
.hh-fx i:nth-child(2) { left: 19%; --s: 14px; --d: 17s; --dl: -9s; }
.hh-fx i:nth-child(3) { left: 33%; --s: 6px; --d: 12s; --dl: -5s; }
.hh-fx i:nth-child(4) { left: 52%; --s: 10px; --d: 16s; --dl: -12s; }
.hh-fx i:nth-child(5) { left: 64%; --s: 18px; --d: 20s; --dl: -3s; }
.hh-fx i:nth-child(6) { left: 77%; --s: 7px; --d: 14s; --dl: -7s; }
.hh-fx i:nth-child(7) { left: 88%; --s: 12px; --d: 18s; --dl: -14s; }
.hh-fx i:nth-child(8) { left: 44%; --s: 5px; --d: 11s; --dl: -1s; }
@keyframes hh-bubble {
  0% { opacity: 0; transform: translate3d(0, 0, 0); }
  12% { opacity: .55; }
  60% { transform: translate3d(8px, -60vh, 0); opacity: .35; }
  100% { opacity: 0; transform: translate3d(-6px, -95vh, 0); }
}

/* Transições: header → hero → próxima seção */
.hh-topshade { position: absolute; left: 0; right: 0; top: 0; height: 28px; background: linear-gradient(180deg, rgba(3, 19, 52, .42), rgba(3, 19, 52, 0)); pointer-events: none; }
.hh-horizon { position: absolute; left: 0; right: 0; bottom: 0; height: 9%; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .06) 40%, rgba(247, 251, 255, .55) 78%, #fff 100%); pointer-events: none; }
.hh-veil { position: absolute; inset: 0; background: radial-gradient(80% 60% at 50% 40%, #0b3a9e, #031334); opacity: 0; pointer-events: none; }

/* Chamada para a próxima seção, sobre a linha de transição */
.hh-cue { position: absolute; left: 50%; bottom: 0; z-index: 3; display: inline-flex; align-items: center; gap: .6rem; min-height: 48px; padding: 0 .5rem 0 1.15rem; border: 1px solid rgba(255, 255, 255, .9); border-radius: 999px; background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(236, 244, 255, .94)); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--navy-deep); font-size: .84rem; font-weight: 850; letter-spacing: -.01em; text-decoration: none; white-space: nowrap; box-shadow: inset 0 1px 0 #fff, 0 14px 30px -12px rgba(3, 19, 52, .55), 0 0 0 6px rgba(255, 255, 255, .35); transform: translate(-50%, 50%); transition: box-shadow .3s, transform .3s var(--ease-out); }
.hh-cue i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(145deg, var(--royal), var(--navy)); color: #fff; font-size: 1rem; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 6px 12px -6px rgba(7, 91, 232, .9); }
.hh-cue i svg { animation: hh-nudge 2.4s ease-in-out infinite; }
.hh-cue:hover { transform: translate(-50%, calc(50% - 2px)); }
.hh-cue:active { transform: translate(-50%, 50%) scale(.97); }
@keyframes hh-nudge { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(3px); } }

/* Seção seguinte abre espaço para a chamada flutuante */
.home-hero + .category-section { padding-top: 4.4rem; }

/* ---------- Entrada cinematográfica (somente com JS e sem movimento reduzido) ---------- */
.js .hh-art-inner { opacity: 0; transform: scale(1.05); }
.js .hh-veil { opacity: 1; }
.js .hh-ambient { opacity: 0; }
.js .hh-cue { visibility: hidden; }
.js .home-hero.is-ready .hh-art-inner { animation: hh-art-in 1.25s cubic-bezier(.16, .84, .24, 1) forwards; }
.js .home-hero.is-ready .hh-veil { animation: hh-veil-out 1s cubic-bezier(.4, 0, .2, 1) forwards; }
.js .home-hero.is-ready .hh-ambient { animation: hh-fade-in 1.1s ease .15s forwards; }
.js .home-hero.is-ready .hh-sheen::before { animation: hh-sweep 1.3s cubic-bezier(.45, .05, .25, 1) .45s forwards, hh-sweep-idle 11s cubic-bezier(.45, .05, .25, 1) 6s infinite; }
.js .home-hero.is-ready .hh-glint { animation: hh-glint-in 1.2s ease .6s forwards, hh-breathe 7s ease-in-out 2s infinite; }
.js .home-hero.is-ready .hh-fx i { animation-play-state: running; }
.js .home-hero.is-ready .hh-cue { visibility: visible; animation: hh-cue-in .7s cubic-bezier(.2, .9, .3, 1.15) .85s both; }
@keyframes hh-art-in { 0% { opacity: 0; transform: scale(1.05); } 45% { opacity: 1; } 100% { opacity: 1; transform: scale(1); } }
@keyframes hh-veil-out { to { opacity: 0; } }
@keyframes hh-fade-in { to { opacity: 1; } }
@keyframes hh-sweep { 0% { left: -60%; opacity: 0; } 15% { opacity: .9; } 85% { opacity: .9; } 100% { left: 125%; opacity: 0; } }
@keyframes hh-sweep-idle { 0%, 82% { left: -60%; opacity: 0; } 86% { opacity: .45; } 97% { opacity: .45; } 100% { left: 125%; opacity: 0; } }
@keyframes hh-glint-in { to { opacity: 1; } }
@keyframes hh-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes hh-cue-in { from { opacity: 0; transform: translate(-50%, calc(50% + 14px)); } to { opacity: 1; transform: translate(-50%, 50%); } }

@media (max-width: 760px) {
  .hh-cue { min-height: 46px; font-size: .8rem; }
  .home-hero + .category-section { padding-top: 3.9rem; }
  .hh-horizon { height: 7%; }
}

/* Mobile: a mesma arte desktop, ampliada na proporção exata e ancorada à esquerda.
   Largura da arte = 122.8vw; o título da arte (5.1% da largura) fica a 10px da borda
   e a borda direita cai logo após o galão Casa Limpa (~84% da arte). */
@media (max-width: 640px) {
  .home-hero { aspect-ratio: auto; height: calc(122.8vw / 1.7768); max-height: none; }
  .hh-art { left: calc(10px + 55.14vw); width: 122.8vw; max-width: none; aspect-ratio: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .js .hh-art-inner, .js .hh-ambient, .js .hh-cue { opacity: 1; transform: none; visibility: visible; }
  .js .hh-veil { opacity: 0; }
  .hh-art, .hh-ambient, .hh-fx { transform: none !important; }
  .hh-art { transform: translateX(-50%) !important; }
  .hh-fx, .hh-sheen, .hh-glint { display: none; }
  .hh-cue { opacity: 1; transform: translate(-50%, 50%); }
}