/* ============================================================
   ABERTO DO MADEIRA 2027 — Banners e anúncios (backend/banners.php)
   ------------------------------------------------------------
   Faixa de banner de patrocinador nas áreas home_a, home_b, topo
   (logo abaixo do page-hero) e fim (antes do rodapé).
   • Arte 6:1 no computador; 2:1 abaixo de 760px quando há arte de celular.
   • Raio 34px (cartão do sistema), sombra neutra + aresta de luz no escuro.
   • Movimento só com transform/opacity; pausa fora da tela (.is-fora,
     posto pelo banners.js) e some com prefers-reduced-motion.
   Carregar DEPOIS de v3-2027.css (e de home-2027.css na home).
   ============================================================ */

.bnr{
  --bnr-raio:34px;
  --bnr-ease:cubic-bezier(.22,1,.36,1);
  --bnr-fundo:#0A110C;
  position:relative;
  padding-block:var(--bnr-pt, clamp(28px,4vw,56px)) var(--bnr-pb, clamp(28px,4vw,56px));
}

/* Topo das páginas internas: sobe por cima da régua do page-hero, como os
   atalhos da home sobem por cima do hero. O conteúdo seguinte ganha respiro. */
.bnr--topo{
  z-index:3;
  margin-top:calc(clamp(30px,3.6vw,52px) * -1);
  padding-block:0 var(--bnr-pb, clamp(32px,4.4vw,64px));
}
.bnr--fim{
  padding-block:var(--bnr-pt, clamp(40px,5.5vw,88px)) var(--bnr-pb, clamp(40px,5.5vw,88px));
}

/* ---------- O palco: proporção fixa, cantos de pedra de rio ---------- */
.bnr-palco{
  position:relative;
  aspect-ratio:6 / 1;
  border-radius:var(--bnr-raio);
  overflow:hidden;
  isolation:isolate;
  background:var(--bnr-fundo);
  box-shadow:0 2px 6px rgba(0,0,0,.35), 0 26px 52px -26px rgba(0,0,0,.7);
  transform:translateZ(0);
  transition:transform .45s var(--bnr-ease), box-shadow .45s var(--bnr-ease);
}
/* aresta de luz de 1px no topo (lei 2 do DESIGN.md), por cima da arte */
.bnr-palco::after{
  content:"";
  position:absolute; inset:0; z-index:6;
  border-radius:inherit;
  box-shadow:inset 0 1px 0 rgba(255,235,205,.16), inset 0 0 0 1px rgba(232,214,185,.08);
  pointer-events:none;
}
.bnr-palco:hover{
  transform:translateY(-6px);
  box-shadow:0 4px 12px rgba(0,0,0,.4), 0 38px 70px -30px rgba(0,0,0,.78);
}

/* Slides empilhados na mesma célula da grade (sem position:absolute: assim
   a 1ª arte fica no fluxo e o lazy nativo funciona — ver DESIGN.md). */
.bnr-trilho{display:grid; width:100%; height:100%;}
.bnr-slide{
  grid-area:1 / 1;
  position:relative;
  display:block;
  width:100%; height:100%;
  overflow:hidden;
  color:inherit;
  text-decoration:none;
  opacity:0;
  visibility:hidden;
  transition:opacity .9s var(--bnr-ease), visibility 0s linear .9s;
}
.bnr-slide.is-ativo{
  opacity:1;
  visibility:visible;
  z-index:1;
  transition:opacity .9s var(--bnr-ease), visibility 0s;
}
.bnr-slide:focus-visible{outline:none;}
.bnr-palco:has(.bnr-slide:focus-visible){outline:3px solid var(--v3-neon, #FF6A00); outline-offset:4px;}

.bnr-arte, .bnr-arte img{display:block; width:100%; height:100%;}
.bnr-arte img{object-fit:cover; transform-origin:50% 50%;}

/* Vídeo por cima da arte: só aparece quando começa a tocar (a arte é a capa). */
.bnr-video{
  position:absolute; inset:0; z-index:2;
  width:100%; height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity .6s var(--bnr-ease);
  pointer-events:none;
}
.bnr-video.is-tocando{opacity:1;}

/* Etiqueta de transparência (CONAR): o anúncio se identifica como tal. */
.bnr-selo{
  position:absolute; top:12px; right:14px; z-index:5;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(6,10,7,.62);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  color:#E8D6B9;
  font-family:var(--font-head, 'Archivo', sans-serif);
  font-size:11.5px; font-weight:700; line-height:1.2;
  letter-spacing:.14em; text-transform:uppercase;
  box-shadow:inset 0 1px 0 rgba(255,235,205,.14);
  pointer-events:none;
}

/* ---------- Pontos do carrossel ---------- */
.bnr-pontos{
  position:absolute; left:50%; bottom:8px; z-index:5;
  display:flex; gap:2px;
  padding:2px 6px;
  border-radius:999px;
  background:rgba(6,10,7,.5);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  transform:translateX(-50%);
}
.bnr-ponto{
  display:grid; place-items:center;
  width:26px; height:26px;            /* alvo de toque maior que o ponto */
  padding:0; border:0; background:none; cursor:pointer;
  border-radius:999px;
}
.bnr-ponto span{
  display:block; width:8px; height:8px; border-radius:999px;
  background:rgba(232,214,185,.55);
  transition:transform .45s var(--bnr-ease), background-color .3s ease;
}
.bnr-ponto:hover span{background:#E8D6B9;}
.bnr-ponto.is-ativo span{background:#FF6A00; transform:scaleX(2.2);}
.bnr-ponto:focus-visible{outline:2px solid #FF6A00; outline-offset:1px;}

/* ============================================================
   EFEITOS DE MOVIMENTO (banner só com imagem)
   Só transform/opacity. Pausados fora da tela e no hover não.
   ============================================================ */

/* Zoom lento (Ken Burns) */
.bnr-ef--kenburns .bnr-arte img{animation:bnr-kenburns 18s ease-in-out infinite alternate both;}
@keyframes bnr-kenburns{
  from{transform:scale(1) translate3d(0,0,0);}
  to{transform:scale(1.09) translate3d(-1.6%,-2%,0);}
}

/* Brilho que atravessa */
.bnr-brilho{
  position:absolute; top:-20%; bottom:-20%; left:0; z-index:3;
  width:22%;
  background:linear-gradient(100deg, transparent 0%, rgba(255,240,220,0) 20%, rgba(255,240,220,.38) 50%, rgba(255,240,220,0) 80%, transparent 100%);
  transform:translate3d(-130%,0,0) skewX(-18deg);
  pointer-events:none;
  animation:bnr-brilho 6.5s var(--bnr-ease) 1.2s infinite both;
  mix-blend-mode:screen;
}
@keyframes bnr-brilho{
  0%{transform:translate3d(-130%,0,0) skewX(-18deg); opacity:0;}
  8%{opacity:1;}
  42%{transform:translate3d(560%,0,0) skewX(-18deg); opacity:1;}
  50%,100%{transform:translate3d(560%,0,0) skewX(-18deg); opacity:0;}
}

/* Paralaxe suave: deriva lenta em laço; onde o navegador tem animação
   ligada à rolagem (animation-timeline), vira paralaxe de verdade. */
.bnr-ef--paralaxe .bnr-arte img{
  transform:scale(1.12);
  animation:bnr-deriva 14s ease-in-out infinite alternate both;
}
@keyframes bnr-deriva{
  from{transform:scale(1.12) translate3d(0,-3.5%,0);}
  to{transform:scale(1.12) translate3d(0,3.5%,0);}
}
@supports (animation-timeline:view()){
  .bnr-ef--paralaxe .bnr-arte img{
    animation:bnr-paralaxe linear both;
    animation-timeline:view();
    animation-range:cover 0% cover 100%;
  }
  @keyframes bnr-paralaxe{
    from{transform:scale(1.14) translate3d(0,-5%,0);}
    to{transform:scale(1.14) translate3d(0,5%,0);}
  }
}

/* Entrada em cortina: uma lâmina verde-mata corre e revela a arte.
   A lâmina só cobre a arte depois que o observador de visibilidade
   respondeu (.bnr--io, posto pelo banners.js) e enquanto o banner não
   apareceu (.is-visto). Sem JS, ou se o observador nunca responder, a
   arte fica à mostra. Repete a cada giro do carrossel. */
.bnr-cortina{
  position:absolute; inset:0; z-index:3;
  background:linear-gradient(100deg,#072814 0%,#0A110C 70%,#C57F3F 100%);
  transform:translate3d(101%,0,0);
  pointer-events:none;
}
.bnr--io .bnr-ef--cortina .bnr-cortina{transform:translate3d(0,0,0);}
.bnr--io.is-visto .bnr-ef--cortina.is-ativo .bnr-cortina{animation:bnr-cortina 1.25s var(--bnr-ease) .15s both;}
.bnr--io.is-visto .bnr-ef--cortina.is-ativo .bnr-arte img{animation:bnr-cortina-arte 1.6s var(--bnr-ease) .15s both;}
@keyframes bnr-cortina{
  from{transform:translate3d(0,0,0);}
  to{transform:translate3d(101%,0,0);}
}
@keyframes bnr-cortina-arte{
  from{transform:scale(1.07); opacity:.6;}
  to{transform:scale(1); opacity:1;}
}

/* Fora da tela (ou slide escondido): tudo parado. */
.bnr.is-fora .bnr-arte img,
.bnr.is-fora .bnr-brilho,
.bnr.is-fora .bnr-cortina,
.bnr-slide:not(.is-ativo) .bnr-arte img,
.bnr-slide:not(.is-ativo) .bnr-brilho{animation-play-state:paused;}

/* ---------- Celular ---------- */
@media (max-width:759px){
  .bnr{--bnr-raio:24px;}
  .bnr-palco--cel{aspect-ratio:2 / 1;}
  .bnr-palco:not(.bnr-palco--cel){--bnr-raio:16px;} /* faixa 6:1 fica baixa: raio menor para não virar pílula */
  .bnr-selo{top:8px; right:10px; padding:3px 8px; letter-spacing:.1em;}
  .bnr-palco:not(.bnr-palco--cel) .bnr-selo{top:5px; right:8px; padding:2px 7px;}
  .bnr-palco:not(.bnr-palco--cel) .bnr-pontos{bottom:2px;}
  .bnr-palco:not(.bnr-palco--cel) .bnr-ponto{width:22px; height:20px;}
  .bnr-palco:hover{transform:none;}
}

/* ---------- Menos movimento: arte parada, sem giro, sem vídeo ---------- */
@media (prefers-reduced-motion:reduce){
  .bnr-palco, .bnr-slide, .bnr-video, .bnr-ponto span{transition:none !important;}
  .bnr-palco:hover{transform:none;}
  .bnr-ef .bnr-arte img,
  .bnr-brilho,
  .bnr-cortina,
  .bnr--io.is-visto .bnr-ef--cortina.is-ativo .bnr-cortina,
  .bnr--io.is-visto .bnr-ef--cortina.is-ativo .bnr-arte img{animation:none !important;}
  .bnr-ef .bnr-arte img{transform:none !important; opacity:1 !important;}
  .bnr-brilho, .bnr-cortina, .bnr--io .bnr-ef--cortina .bnr-cortina{display:none;}
  .bnr-video{display:none;}
}

/* Impressão: só a arte, sem vídeo nem efeitos */
@media print{
  .bnr-video, .bnr-brilho, .bnr-cortina, .bnr-pontos{display:none !important;}
  .bnr-palco{box-shadow:none; transform:none;}
}