/* ============================================================
   HERO — Sistema de camadas (layers)
   Gplay — site da banda
   ============================================================

   Estrutura (do fundo pra frente):

     .hero            moldura da seção        (position: relative)
     .hero__bg          fundo (foto/vídeo)        z-index: 10
     .hero__overlay      gradiente de legibilidade  z-index: 20
     .hero__art          imagem solta/flutuante     z-index: 30 (padrão)
       .hero__logo         (mesma classe .hero__art, só um apelido)
     .hero__content      texto / CTA               z-index: 40

   Como reposicionar QUALQUER .hero__art (logo, integrante, o que for):
   edite só o atributo style="" no HTML — não precisa tocar aqui:

     style="--x:50%; --y:0%; --w:26%; --z:32;"

     --x   posição horizontal do CENTRO da imagem, em % da largura do .hero
     --y   distância da BASE do .hero até a BASE da imagem, em % da altura
     --w   largura da imagem, em % da largura do .hero (a altura acompanha
           sozinha, mantendo a proporção da imagem)
     --z   z-index — quem fica na frente de quem

   Pra espelhar uma imagem na horizontal (ex.: reaproveitar o mesmo GIF
   de fumaça dos dois lados), soma a classe .hero__espelhado no <img>:

     class="hero__art hero__espelhado"

   Ajuste fino pra TABLET e CELULAR: --x/--y/--w já são % e escalam
   sozinhos, mas às vezes isso não basta (ex.: 5 imagens lado a lado
   ficam pequenas demais num celular estreito). Pra esses casos, soma
   as variáveis "-tablet" e/ou "-mobile" — o que você não definir cai
   pro valor de cima sozinho (não precisa repetir tudo):

     style="--x:50%; --w:29%; --x-mobile:60%; --w-mobile:56%;"

   --x-tablet / --y-tablet / --w-tablet   valem até 991px
   --x-mobile / --y-mobile / --w-mobile   valem até 575px (celular)
                                           (se não tiver, usa o -tablet;
                                           se também não tiver, usa o normal)

   Parallax (opcional, em qualquer camada, inclusive .hero__bg):

     data-parallax="0.2"    positivo = mais lenta, sensação de "atrás"
     data-parallax="-0.15"  negativo = mais rápida, sensação de "na frente"
     sem o atributo         = camada fica parada, sem parallax

   O motor fica em js/hero-parallax.js — não precisa mexer no CSS pra
   ligar/desligar/ajustar velocidade de parallax de uma camada.
   ============================================================ */

.hero {
    position: relative;
    width: 100%;
    /* height (não min-height): precisa ser um valor definido pra que os
       "bottom: %" das .hero__art calculem certo lá embaixo. */
    height: clamp(480px, 100svh, 900px);
    overflow: hidden;
    background: #0a0a0a;
    isolation: isolate;
    /* trava os z-index das camadas dentro da seção, sem vazar pro resto da página */
}

/* ---------------------------------------------------------- FUNDO */
.hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 10;
    --py: 0px;
    /* scale(1.12) dá uma "folga" pra imagem não deixar borda vazia quando o parallax a move */
    transform: translateY(var(--py)) scale(1.22);
}

/* ---------------------------------------------------------- OVERLAY */
.hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 20;
    background:
        linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.35) 55%, rgba(0, 0, 0, 0.15) 100%);
    pointer-events: none;
}

/* ---------------------------------------------------------- CAMADAS SOLTAS */
.hero__art {
    --x: 50%;
    --y: 0%;
    --w: 30%;
    --z: 30;
    --py: 0px;
    position: absolute;
    left: var(--x);
    bottom: var(--y);
    width: var(--w);
    z-index: var(--z);
    transform: translateX(-50%) translateY(var(--py));
    max-width: none;
    height: auto;
    pointer-events: none;
    will-change: transform;
}

/* Camada de fumaça (smoke.gif): fundo preto do GIF "some" com screen,
   sobra só a fumaça branca. Use em qualquer GIF/imagem clara sobre fundo
   preto do mesmo jeito — troque a classe no <img> e pronto. */
.hero__smoke {
    mix-blend-mode: screen;
    opacity: 0.2;
}

/* Espelha a imagem na horizontal (útil pra reaproveitar o mesmo GIF/PNG
   dos dois lados, sem precisar de um arquivo espelhado à parte). Some
   com .hero__art normalmente — só soma essa classe no <img>. */
.hero__art.hero__espelhado {
    transform: translateX(-50%) translateY(var(--py)) scaleX(-1);
}

/* ---------------------------------------------------------- CONTEÚDO */
.hero__content {
    /* ancorado no centro-inferior do .hero — sai do fluxo (como as
       .hero__art) pra não empurrar a altura da seção. z-index 40 garante
       que fica acima de bg/overlay/art independente da ordem no HTML. */
    position: absolute;
    left: 50%;
    bottom: max(50px, 5%);
    transform: translateX(-50%);
    z-index: 40;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
    text-align: center;
    width: max-content;
    max-width: calc(100% - var(--sp-3) * 2);
}

.hero__content .carimbo {
    /* sobre fundo escuro do hero, não sobre papel — precisa do contraste */
    background: rgba(11, 11, 12, 0.5);
    /* maior que o padrão (11px) — aqui é destaque do hero, não eyebrow discreto */
    font-size: 22px;
}

/* ============================================================ RESPONSIVO
   --x / --y / --w já são % do próprio .hero, então escalam sozinhos com
   a largura da tela — a maioria das camadas não precisa de mais nada.
   Quando alguma precisar de um ajuste que vá além de "encolher junto",
   defina --x-tablet/--w-tablet/--y-tablet (≤991px) e/ou --x-mobile/
   --w-mobile/--y-mobile (≤575px) no próprio elemento (documentado lá em
   cima) — as regras abaixo são só o "encanamento" que faz esse fallback
   funcionar, não precisa mexer aqui pra cada imagem nova.
   ============================================================ */
@media (max-width: 991px) {
    .hero {
        height: clamp(460px, 100svh, 780px);
    }

    .hero__art {
        left: var(--x-tablet, var(--x));
        bottom: var(--y-tablet, var(--y));
        width: var(--w-tablet, var(--w));
    }
}

@media (max-width: 575px) {
    .hero {
        /* 30% mais baixo que o padrão mobile (420/700 * 0.7) */
        height: clamp(294px, 70svh, 490px);
        /* height: clamp(420px, 100svh, 700px); */
    }

    .hero__art {
        left: var(--x-mobile, var(--x-tablet, var(--x)));
        bottom: var(--y-mobile, var(--y-tablet, var(--y)));
        width: var(--w-mobile, var(--w-tablet, var(--w)));
    }

    .hero__content .carimbo {
        font-size: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .hero__bg,
    .hero__art {
        transform: none !important;
    }
}