/* =====================================================================
   Banner principal da página inicial (templates/Site/index.php)
   Foto de fundo (webroot/img/banners/fundo/) + formas em CSS + animação.
   Script: webroot/js/banner.js
   As coordenadas das formas são as mesmas dos banners originais
   (arte de 1920 x 800), convertidas em porcentagem.
   ===================================================================== */
.hb{
  --verde:#84be64; --azul:#1b1e3a; --vidro:rgba(255,255,255,.4);
  --ease:cubic-bezier(.22,.8,.24,1);
  position:relative; overflow:hidden; background:var(--azul);
  font-family:"nunito-sans","Nunito Sans",Calibri,sans-serif;
}
.hb h2, .hb p, .hb ol{margin:0}
.hb-trilho{position:relative; aspect-ratio:1920/800}
.hb-slide{position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity .9s ease, visibility 0s .9s}
.hb-slide.is-ativo{opacity:1; visibility:visible; transition:opacity .9s ease, visibility 0s}

.hb-foto{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}

.hb-formas, .hb-formas span{position:absolute; inset:0; display:block}
.hb-espelho .hb-formas{transform:scaleX(-1)}

/* Cores por banner (1 e 2: painel verde | 3: painel azul) */
.hb-slide{--c-painel:var(--verde); --c-destaque:var(--azul); --c-canto:var(--verde)}
.hb-s3{--c-painel:var(--azul); --c-destaque:var(--verde); --c-canto:var(--azul)}

/* Formas sólidas (cobrem as áreas que estavam sob as formas originais) */
.hb-painel{background:var(--c-painel); clip-path:polygon(0 0, 32.4% 0, 20.15% 33.7%, 31.75% 60.5%, 12.55% 100%, 0 100%)}
/* destaque: começa na cor do painel (a área já fica coberta) e "dobra" por cima na entrada */
.hb-destaque{background:var(--c-destaque); clip-path:polygon(5.83% 0, 32.4% 0, 20.15% 33.7%)}
.hb-canto{background:var(--c-canto); clip-path:polygon(84.9% 0, 100% 0, 100% 36.8%)}

/* Formas translúcidas (sobre a foto) */
.hb-vidro{background:var(--vidro)}
.hb-vidro-1{clip-path:polygon(12.4% 100%, 31.51% 60.5%, 48.02% 100%)}
.hb-vidro-2{clip-path:polygon(83.23% 0, 85.21% 0, 100% 36.4%, 100% 49%)}

/* Brilho que atravessa o painel na entrada */
.hb-brilho{clip-path:polygon(0 0, 32.4% 0, 20.15% 33.7%, 31.75% 60.5%, 12.55% 100%, 0 100%);
  background:linear-gradient(115deg, transparent 35%, rgba(255,255,255,.22) 50%, transparent 65%) no-repeat;
  background-size:250% 100%; background-position:120% 0; opacity:0}

/* ---------- Animação de entrada de cada slide ---------- */
.hb-slide.is-ativo .hb-destaque{animation:hb-dobra .9s .35s var(--ease) both}
@keyframes hb-dobra{from{clip-path:polygon(5.83% 0, 5.83% 0, 5.83% 0)}to{clip-path:polygon(5.83% 0, 32.4% 0, 20.15% 33.7%)}}

.hb-slide.is-ativo .hb-vidro-1{animation:hb-vidro1 1s .55s var(--ease) both}
@keyframes hb-vidro1{from{clip-path:polygon(12.4% 100%, 12.4% 100%, 12.4% 100%)}to{clip-path:polygon(12.4% 100%, 31.51% 60.5%, 48.02% 100%)}}

/* a faixa translúcida do canto fica fixa: ela esconde a emenda da foto nessa região */

.hb-slide.is-ativo .hb-brilho{animation:hb-brilho 1.6s .9s ease-out both}
@keyframes hb-brilho{0%{opacity:1;background-position:120% 0}100%{opacity:1;background-position:-40% 0}}

/* ---------- Texto ---------- */
.hb-texto{position:absolute; left:3.6%; top:44%; width:22%; color:#fff}
/* banner 2: texto um pouco mais à direita e mais baixo, onde o triângulo é mais largo */
.hb-espelho .hb-texto{left:75.8%; right:auto; top:49%; width:21.5%}
.hb-texto h2{margin:0; font-size:clamp(1.05rem,1.95vw,2.5rem); font-weight:900; letter-spacing:.01em; line-height:1.1; font-style:italic; text-transform:uppercase}
.hb-texto p{margin:.7em 0 0; font-size:clamp(.85rem,1.3vw,1.6rem); line-height:1.35; font-style:italic; font-weight:500}
.hb-s1 .hb-texto, .hb-s2 .hb-texto{color:#fff; text-shadow:0 1px 2px rgba(27,30,58,.18)}
.hb-slide.is-ativo .hb-texto h2{animation:hb-sobe .8s .6s var(--ease) both}
.hb-slide.is-ativo .hb-texto p{animation:hb-sobe .8s .75s var(--ease) both}
@keyframes hb-sobe{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ---------- Controles ---------- */
/* Setas e indicadores num grupo só, centralizado na horizontal */
.hb-controles{position:absolute; left:50%; bottom:12px; z-index:3; transform:translateX(-50%); display:flex; align-items:center; gap:14px}
.hb-seta{width:34px; height:34px; border:0; border-radius:50%; padding:0; flex:none;
  background:rgba(27,30,58,.5); color:#fff; display:grid; place-items:center; cursor:pointer; transition:background-color .2s}
.hb-seta:hover{background:rgba(27,30,58,.85)}
.hb-seta i{font-size:1rem; line-height:1; display:block}
/* o ícone do Bootstrap vem com vertical-align:-.125em, que joga a seta para baixo */
.hb-seta i::before{display:block; vertical-align:0}
.hb-pontos{display:flex; align-items:center; gap:8px; margin:0; padding:0; list-style:none}
.hb-pontos li{display:flex}
.hb-pontos button{width:28px; height:6px; border:0; border-radius:999px; background:rgba(255,255,255,.5); box-shadow:0 0 0 1px rgba(27,30,58,.25), 0 1px 6px rgba(27,30,58,.35); cursor:pointer; padding:0; position:relative; overflow:hidden; transition:width .3s var(--ease), background-color .3s}
.hb-pontos button[aria-current="true"]{width:56px; background:rgba(255,255,255,.35)}
.hb-pontos button{display:block}
.hb-pontos .hb-barra{position:absolute; inset:0; background:#fff; transform-origin:left; transform:scaleX(0); pointer-events:none}
.hb-pontos button[aria-current="true"] .hb-barra{animation:hb-tempo var(--tempo,7s) linear both}
.hb.is-pausado .hb-pontos .hb-barra{animation-play-state:paused}
.hb.sem-autoplay .hb-pontos .hb-barra{display:none}
@keyframes hb-tempo{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hb :focus-visible{outline:3px solid #fff; outline-offset:3px}

/* ---------- Celular: outra composição, painel embaixo ---------- */
@media (max-width:767.98px){
  .hb-trilho{aspect-ratio:auto; height:min(150vw,620px)}
  .hb-foto{object-position:var(--pos-mobile) 30%}
  .hb-espelho .hb-formas{transform:none}
  .hb-painel, .hb-brilho{clip-path:polygon(0 40%, 92% 80%, 64% 100%, 0 100%)}
  .hb-destaque{clip-path:polygon(0 0, 28% 0, 0 21%)}
  .hb-formas .hb-canto, .hb-formas .hb-vidro-2{display:none}
  .hb-vidro-1{clip-path:polygon(64% 100%, 92% 80%, 100% 86%, 100% 100%)}
  @keyframes hb-dobra{from{clip-path:polygon(0 0, 0 0, 0 0)}to{clip-path:polygon(0 0, 28% 0, 0 21%)}}
  @keyframes hb-vidro1{from{clip-path:polygon(64% 100%, 64% 100%, 64% 100%, 64% 100%)}to{clip-path:polygon(64% 100%, 92% 80%, 100% 86%, 100% 100%)}}
  .hb-texto, .hb-espelho .hb-texto{left:6%; right:auto; top:auto; bottom:12%; width:62%}
  .hb-texto h2{font-size:1.45rem}
  .hb-texto p{font-size:1rem}
}

@media (prefers-reduced-motion:reduce){
  .hb *, .hb *::before, .hb *::after{animation-duration:.01ms!important; animation-delay:0s!important; transition-duration:.01ms!important}
}