/* ================================================================
   BUTTERFLY — HERO
   5 planos de profundidade sobre foto real. Muito espaço negativo.
   Regra de transform: elementos com data-parallax são posicionados
   por offsets (nunca por translate) — o JS controla o transform do
   WRAPPER; o GSAP controla o transform da IMAGEM interna (.bf-anim).
   CSS anima só OPACITY nas entradas (para não brigar com o GSAP).
   ================================================================ */

/* ---------- HEADER ---------- */
.bf-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: clamp(16px, 2.4vw, 30px) clamp(20px, 4vw, 56px);
    transition: background-color 0.4s var(--bf-ease),
                backdrop-filter 0.4s var(--bf-ease),
                padding 0.4s var(--bf-ease),
                box-shadow 0.4s var(--bf-ease);
}
.bf-header--scrolled {
    background: rgba(255, 249, 250, 0.68);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 1px 0 rgba(41, 35, 41, 0.06);
    padding-top: clamp(12px, 1.6vw, 18px);
    padding-bottom: clamp(12px, 1.6vw, 18px);
}
.bf-header__logo {
    display: flex;
    align-items: center;
    line-height: 1;
    text-decoration: none;
    opacity: 0;
    animation: bfFade 0.9s var(--bf-ease) 0.2s forwards;
}
.bf-header__logo-img {
    height: clamp(26px, 3.6vw, 42px);
    width: auto;
    max-width: 200px;
    display: block;
    /* leve sombra p/ legibilidade do dourado sobre o fundo claro */
    filter: drop-shadow(0 1px 2px rgba(41, 35, 41, 0.16));
}

/* ---------- CTA (pill pink) ---------- */
.bf-cta {
    font-family: var(--bf-font-sans);
    font-size: clamp(12px, 1vw, 14px);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fff;
    background: var(--bf-pink);
    border: 0;
    border-radius: 50px;
    padding: 14px clamp(24px, 2.4vw, 34px);
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    display: inline-block;
    box-shadow: 0 8px 24px rgba(231, 46, 114, 0.26);
    transition: transform 0.3s var(--bf-ease),
                box-shadow 0.3s var(--bf-ease),
                filter 0.3s var(--bf-ease);
}
.bf-cta:hover,
.bf-cta:focus-visible {
    transform: translateY(-2px);
    filter: brightness(1.06);
    box-shadow: 0 14px 38px rgba(231, 46, 114, 0.4);
    outline: none;
}

/* ---------- SKIN CHAMPAGNE GOLD — CTAs de COMPRA ----------
   Regra da página: ROSA = identidade · DOURADO = ação.
   Standalone: aplica sobre .bf-cta e sobre .bf-sticky__btn. */
/* seletor duplo: .bf-cta.bf-cta--gold vence as sombras rosa das
   variantes (.bfc__cta, .bf-header__cta) que vêm depois no cascade */
.bf-cta--gold,
.bf-cta.bf-cta--gold {
    position: relative; overflow: hidden;
    color: var(--bf-gold-ink);
    background: linear-gradient(135deg, var(--bf-gold-light), #E5B84F);
    box-shadow: 0 8px 26px rgba(196, 147, 47, 0.22),
                inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
/* light sweep — contínuo e autônomo: a faixa atravessa o botão
   sozinha a cada ciclo (travessia rápida + longa pausa fora do botão),
   independente de interação. Só transform: barato. */
.bf-cta--gold::before {
    content: ""; position: absolute; top: -20%; bottom: -20%; left: 0;
    width: 36%; pointer-events: none;
    background: linear-gradient(105deg,
        rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.45) 50%, rgba(255, 255, 255, 0) 100%);
    transform: translateX(-160%) skewX(-18deg);
    animation: none;
}
.bf-cta--gold:hover::before,
.bf-cta--gold:focus-visible::before { animation: bfCtaSweep 0.9s ease-in-out 1; }
@keyframes bfCtaSweep {
    0%   { transform: translateX(-160%) skewX(-18deg); }
    20%  { transform: translateX(340%) skewX(-18deg); }
    100% { transform: translateX(340%) skewX(-18deg); }
}
.bf-cta--gold:hover,
.bf-cta--gold:focus-visible,
.bf-cta.bf-cta--gold:hover,
.bf-cta.bf-cta--gold:focus-visible {
    filter: none;
    box-shadow: 0 14px 34px rgba(196, 147, 47, 0.32),
                inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.bf-header__cta {
    opacity: 0;
    animation: bfFade 0.9s var(--bf-ease) 0.3s forwards;
    padding: 12px clamp(22px, 2.2vw, 30px);
    box-shadow: 0 6px 18px rgba(231, 46, 114, 0.24);
}

/* ---------- HERO ---------- */
.bf-hero {
    position: relative;
    width: 100%;
    min-height: 100svh;
    overflow: hidden;
    isolation: isolate;
}

/* PLANO 0 — atmosfera base (CSS) sob o background real, cobre bordas */
.bf-hero__atmosphere {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(115% 85% at 80% 16%, rgba(189, 228, 245, 0.5) 0%, rgba(189, 228, 245, 0) 44%),
        radial-gradient(95% 80% at 20% 92%, rgba(251, 228, 236, 0.9) 0%, rgba(251, 228, 236, 0) 58%),
        radial-gradient(150% 130% at 50% 38%, #ffffff 0%, var(--bf-pearl) 46%, var(--bf-blush) 100%);
    opacity: 0;
    animation: bfFade 1.1s var(--bf-ease) 0s forwards;
}

/* PLANO 0b — BACKGROUND real (foto). Fica por cima da atmosfera. */
.bf-hero__bg-image {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image: url('../assets/butterfly/hero-background.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
    opacity: 0;
    animation: bfFade 1.3s var(--bf-ease) 0.05s forwards;
}

/* Nuvens rosadas (faixa inferior, parallax leve) */
.bf-hero__clouds {
    position: absolute;
    left: -6%; right: -6%; bottom: -8%;
    width: 112%;
    height: auto;
    z-index: 2;
    pointer-events: none;
    mix-blend-mode: screen;
    opacity: 0;
    /* teto de opacidade menor: no modo screen o branco lavava o azul/rosa da direita */
    animation: bfCloudsIn 1.6s var(--bf-ease) 0.35s forwards;
}

/* Light-burst real — halo que recorta o produto (GSAP só faz pulsar opacity) */
.bf-hero__burst {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: min(82vw, 1040px);
    height: auto;
    z-index: 3;
    pointer-events: none;
    mix-blend-mode: screen;
    opacity: 0;                 /* GSAP faz o fade-in + respiração */
}

/* ---------- Elementos animados (imagem interna que o GSAP move) ---------- */
.bf-anim { display: block; width: 100%; height: auto; transform-origin: center; }

/* Wrapper de FX (parallax no wrapper; posicionado por offsets, sem translate) */
.bf-hero__fx {
    position: absolute;
    pointer-events: none;
    opacity: 0;                 /* entrada CSS só de opacity */
    animation: bfFade 1.3s var(--bf-ease) 1.1s forwards;
}

/* PLANO 1 — borboleta distante (menor, atrás do produto) */
.bf-hero__fx--bfly3 {
    left: 59%; top: 15%;
    width: clamp(46px, 5.4vw, 78px);
    z-index: 4;
    filter: blur(0.6px);
    opacity: 0;
    animation: bfFade 1.4s var(--bf-ease) 1.3s forwards;
}
.bf-hero__fx--bfly3 .bf-anim { opacity: 0.85; }

/* Pétalas nítidas (plano intermediário) */
.bf-hero__fx--petal1 { left: 43%; top: 71%; width: clamp(38px, 4.6vw, 66px); z-index: 4; }
.bf-hero__fx--petal2 { left: 55%; top: 23%; width: clamp(40px, 4.8vw, 66px); z-index: 4; }
.bf-hero__fx--petal3 { left: 64%; top: 65%; width: clamp(42px, 5.2vw, 72px); z-index: 4; }

/* PLANO 1b — brilhos (GSAP controla opacity+scale; sem parallax) */
.bf-hero__spark {
    position: absolute;
    height: auto;
    z-index: 4;
    pointer-events: none;
    mix-blend-mode: screen;
    opacity: 0;                 /* GSAP faz aparecer e pulsar */
    transform-origin: center;
}
.bf-hero__spark--a { left: 57%; top: 43%; width: clamp(40px, 4.6vw, 64px); z-index: 7; }
.bf-hero__spark--b { left: 43%; top: 39%; width: clamp(26px, 3vw, 44px); }
.bf-hero__spark--c { left: 64%; top: 57%; width: clamp(20px, 2.4vw, 34px); z-index: 7; }
.bf-hero__spark--d { left: 49%; top: 66%; width: clamp(26px, 3vw, 44px); }
.bf-hero__spark--e { left: 51%; top: 29%; width: clamp(30px, 3.4vw, 50px); }

/* PLANO 2 — PRODUTO (protagonista, imagem real com brilho) */
.bf-hero__product-shadow {
    position: absolute;
    left: 50%; top: calc(52% + clamp(164px, 29svh, 326px));
    transform: translateX(-50%);
    width: clamp(200px, 23vw, 338px);
    height: 38px;
    z-index: 5;
    pointer-events: none;
    background: radial-gradient(ellipse at center, rgba(180, 90, 120, 0.22) 0%, transparent 70%);
    filter: blur(7px);
    opacity: 0;
    animation: bfFade 1.2s var(--bf-ease) 0.7s forwards;
}
.bf-hero__product-wrap {
    position: absolute;
    left: 50%; top: 52%;
    transform: translate(-50%, -50%);
    z-index: 6;
    opacity: 0;
    animation: bfProductIn 1.3s var(--bf-ease) 0.45s forwards;
}
.bf-hero__product {
    display: block;
    height: clamp(372px, 61svh, 700px);
    width: auto;
    filter: drop-shadow(0 26px 46px rgba(224, 120, 150, 0.3));
}

/* PLANO 3 — borboletas assinatura (à frente do produto, à direita) */
.bf-hero__fx--bfly1 { left: 64%; top: 30%; width: clamp(92px, 11vw, 152px); z-index: 7; }
.bf-hero__fx--bfly2 { left: 83%; top: 55%; width: clamp(62px, 7vw, 100px); z-index: 7; }

/* PLANO 4 — foreground borrado (recorte, profundidade máxima) */
.bf-hero__fg {
    position: absolute;
    pointer-events: none;
    z-index: 8;
    opacity: 0;
    animation: bfFade 1.4s var(--bf-ease) 1.4s forwards;
}
.bf-hero__fg .bf-anim { filter: blur(3px); }
.bf-hero__fg--bfly4  { left: 72%; bottom: -6%;  width: clamp(150px, 19vw, 262px); }
.bf-hero__fg--bfly4 .bf-anim { opacity: 0.88; }
.bf-hero__fg--petal6 { left: -5%; bottom: -6%;  width: clamp(150px, 18vw, 244px); }
.bf-hero__fg--petal7 { right: -3%; top: 3%;     width: clamp(120px, 14vw, 200px); }
.bf-hero__fg--petal7 .bf-anim { filter: blur(2.4px); opacity: 0.82; }

/* ---------- COPY (esquerda no desktop) ---------- */
.bf-hero__copy {
    position: absolute;
    left: clamp(24px, 6vw, 100px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 9;
    max-width: clamp(300px, 33vw, 440px);
}
.bf-hero__eyebrow {
    display: block;
    font-family: var(--bf-font-sans);
    font-size: clamp(10px, 0.9vw, 12px);
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--bf-rose);
    margin-bottom: 16px;
    opacity: 0;
    animation: bfRise 0.9s var(--bf-ease) 0.7s forwards;
}
.bf-hero__title {
    font-family: var(--bf-font-serif);
    font-size: clamp(56px, 7vw, 104px);
    font-weight: 500;
    line-height: 0.95;
    letter-spacing: 0.01em;
    color: var(--bf-ink);
    margin: 0 0 18px;
    opacity: 0;
    animation: bfRise 1s var(--bf-ease) 0.8s forwards;
}
.bf-hero__headline {
    font-family: var(--bf-font-sans);
    font-size: clamp(15px, 1.5vw, 20px);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.3;
    color: var(--bf-ink);
    margin: 0 0 16px;
    opacity: 0;
    animation: bfRise 0.9s var(--bf-ease) 0.95s forwards;
}
.bf-hero__supporting {
    font-family: var(--bf-font-serif);
    font-size: clamp(17px, 1.5vw, 21px);
    font-style: italic;
    line-height: 1.5;
    color: var(--bf-ink-soft);
    margin: 0 0 30px;
    max-width: 380px;
    opacity: 0;
    animation: bfRise 0.9s var(--bf-ease) 1.1s forwards;
}
.bf-hero__cta {
    opacity: 0;
    animation: bfRise 0.9s var(--bf-ease) 1.25s forwards;
    padding: 16px clamp(30px, 3vw, 44px);
    letter-spacing: 0.14em;
}

/* ---------- INDICADOR DE SCROLL ---------- */
.bf-hero__scroll {
    position: absolute;
    left: 50%; bottom: clamp(22px, 3.5svh, 40px);
    transform: translateX(-50%);
    z-index: 9;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none; border: 0; padding: 10px;
    cursor: pointer;
    color: var(--bf-rose);
    opacity: 0;
    animation: bfFade 0.9s var(--bf-ease) 1.5s forwards;
}
.bf-hero__scroll svg {
    width: 26px; height: 16px;
    animation: bfChevron 2s ease-in-out infinite;
    animation-play-state: paused;
}
.bf-hero.is-motion-active .bf-hero__scroll svg { animation-play-state: running; }
.bf-hero__scroll:focus-visible { outline: 1px solid var(--bf-rose); outline-offset: 4px; border-radius: 4px; }

/* ---------- PLACEHOLDER da próxima seção (só p/ testar scroll/handoff) ---------- */
.bf-next {
    position: relative;
    min-height: 100svh;
    background: linear-gradient(180deg, var(--bf-blush) 0%, var(--bf-pearl) 40%);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ================================================================
   INTERMEDIÁRIO (769–1180) — mantém o layout desktop, mas evita que
   o produto (agora maior) encoste no titulo/copy em telas estreitas.
   ================================================================ */
@media (min-width: 769px) and (max-width: 1340px) {
    .bf-hero__copy { max-width: clamp(240px, 27vw, 360px); }
    .bf-hero__title { font-size: clamp(46px, 5.4vw, 78px); }
    .bf-hero__supporting { max-width: 320px; }
}

/* ================================================================
   MOBILE (≤768) — composição própria (não é o desktop reduzido)
   Menos elementos: 1 borboleta principal + 1 secundária + 2 pétalas
   ================================================================ */
@media (max-width: 768px) {
    .bf-hero {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: calc(env(safe-area-inset-top) + 82px) 22px
                 calc(env(safe-area-inset-bottom) + 30px);
    }
    .bf-hero__bg-image {
        background-image: url('../assets/butterfly/hero-background-mobile.webp');
    }

    /* Ordem mobile: título → eyebrow → produto → headline → apoio → CTA → seta.
       display:contents deixa os filhos participarem do flex do hero; como
       passam a ser itens estáticos, precisam de position:relative + z-index
       para ficarem ACIMA do background posicionado (senão a foto os cobre). */
    .bf-hero__copy { position: static; transform: none; max-width: 100%; left: auto; top: auto; display: contents; }
    .bf-hero__title, .bf-hero__eyebrow, .bf-hero__headline,
    .bf-hero__supporting, .bf-hero__cta {
        position: relative;
        z-index: 9;
    }
    .bf-hero__title   { order: 1; font-size: clamp(46px, 15vw, 66px); margin-bottom: 4px; }
    .bf-hero__eyebrow { order: 2; margin: 2px 0 0; color: var(--bf-ink-faint); }

    .bf-hero__product-wrap {
        position: relative;
        left: auto; top: auto;
        z-index: 6;
        transform: none;
        order: 3;
        /* menos respiro embaixo p/ aproximar produto → headline (continuidade vertical) */
        margin: clamp(8px, 1.6vh, 18px) 0 clamp(4px, 1vh, 12px);
        opacity: 0;
        animation: bfProductInM 1.3s var(--bf-ease) 0.45s forwards;
    }
    .bf-hero__product { height: clamp(296px, 47svh, 448px); }
    .bf-hero__product-shadow { display: none; }

    .bf-hero__headline   { order: 4; font-size: clamp(14px, 3.6vw, 17px); }
    .bf-hero__supporting { order: 5; margin-left: auto; margin-right: auto; font-size: clamp(16px, 4.2vw, 19px); max-width: 340px; }
    .bf-hero__cta        { order: 6; }
    .bf-hero__scroll     { order: 7; position: relative; left: auto; bottom: auto; z-index: 9; transform: none; margin-top: 14px; }

    /* Camadas decorativas voltam a ser absolutas (fundo da composição) */
    .bf-hero__atmosphere, .bf-hero__bg-image, .bf-hero__clouds, .bf-hero__burst,
    .bf-hero__product-shadow, .bf-hero__fx, .bf-hero__fg, .bf-hero__spark {
        position: absolute;
    }

    /* Enxugar a cena no mobile: manter só o essencial */
    .bf-hero__fx--petal1, .bf-hero__fx--petal3,
    .bf-hero__fg--petal7,
    .bf-hero__spark--b, .bf-hero__spark--c, .bf-hero__spark--d {
        display: none;
    }

    /* Reposicionar o que permanece para não colidir com o texto */
    .bf-hero__burst    { top: 46%; width: min(120vw, 640px); }
    .bf-hero__fx--bfly1 { left: 62%; top: 20%; width: clamp(70px, 20vw, 110px); }
    .bf-hero__fx--bfly2 { left: 8%;  top: 24%; width: clamp(52px, 15vw, 82px); }
    .bf-hero__fx--bfly3 { left: 78%; top: 60%; width: clamp(40px, 12vw, 62px); }
    .bf-hero__fx--petal2 { left: 12%; top: 62%; width: clamp(34px, 9vw, 52px); }
    .bf-hero__fg--bfly4 { left: 64%; bottom: 4%; width: clamp(120px, 40vw, 190px); }
    .bf-hero__fg--petal6 { left: -8%; bottom: 2%; width: clamp(120px, 38vw, 180px); }
    .bf-hero__spark--a  { left: 60%; top: 40%; width: clamp(34px, 9vw, 52px); }
    .bf-hero__spark--e  { left: 20%; top: 44%; width: clamp(28px, 8vw, 44px); }
}

/* ================================================================
   ANIMAÇÕES (entradas — só opacity/translate próprios; loops são GSAP)
   ================================================================ */
@keyframes bfFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes bfRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes bfProductIn { from { opacity: 0; transform: translate(-50%, -42%); } to { opacity: 1; transform: translate(-50%, -50%); } }
@keyframes bfProductInM { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes bfChevron { 0%,100% { transform: translateY(0); opacity: 0.85; } 50% { transform: translateY(5px); opacity: 0.5; } }
@keyframes bfCloudsIn { from { opacity: 0; } to { opacity: 0.66; } }

/* ================================================================
   ACESSIBILIDADE — sem movimento
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
    .bf-header__logo, .bf-header__cta, .bf-hero__atmosphere, .bf-hero__bg-image,
    .bf-hero__clouds, .bf-hero__burst, .bf-hero__fx, .bf-hero__fg, .bf-hero__spark,
    .bf-hero__product-wrap, .bf-hero__product, .bf-hero__product-shadow,
    .bf-hero__eyebrow, .bf-hero__title, .bf-hero__headline, .bf-hero__supporting,
    .bf-hero__cta, .bf-hero__scroll, .bf-hero__scroll svg {
        animation: none !important;
    }
    /* Estados finais visíveis sem depender do GSAP */
    .bf-header__logo, .bf-header__cta, .bf-hero__atmosphere, .bf-hero__bg-image,
    .bf-hero__fx, .bf-hero__fg, .bf-hero__product-wrap,
    .bf-hero__product-shadow, .bf-hero__eyebrow, .bf-hero__title, .bf-hero__headline,
    .bf-hero__supporting, .bf-hero__cta, .bf-hero__scroll {
        opacity: 1 !important;
    }
    .bf-hero__clouds { opacity: 0.66 !important; }
    .bf-hero__burst { opacity: 0.5 !important; }
    .bf-hero__spark { opacity: 0.7 !important; }
    .bf-hero__product-wrap { transform: translate(-50%, -50%) !important; }
    .bf-hero__clouds, .bf-hero__fx, .bf-hero__fg { transform: none !important; }
    @media (max-width: 768px) {
        .bf-hero__product-wrap { transform: none !important; }
    }
}