/* ================================================================
   BUTTERFLY — SEÇÃO 02 · "UMA FRAGRÂNCIA. QUATRO SENSAÇÕES."
   Editorial de perfumaria. Cena ÚNICA: céu (CSS) branco predominante +
   FRASCO herói fixo. Só a atmosfera/ingrediente muda por nota.
   HANDOFF: hero pinado (z:1) + seção subindo por cima (z:5); a nuvem
   .bfx-divider (z:8) ancorada no topo da seção mascara a emenda.
   ================================================================ */

/* hero fica ATRÁS da seção durante o handoff (hero.css intocado) */
body.butterfly .bf-hero { z-index: 1; }

/* fundo transparente: quem pinta é o .bfx-stage (mascarado no topo);
   um bg aqui criaria linha dura na emenda durante o handoff.
   overflow-x: clip → a nuvem (>100vw) não expande o layout viewport
   no mobile (senão o header fixo estica e o CTA sai da tela);
   o transbordo VERTICAL dela continua visível */
.bfx { position: relative; z-index: 5; overflow-x: clip; }

/* ---------- NUVEM DIVISÓRIA · borda atmosférica da seção ---------- */
.bfx-divider {
    /* offset vertical vem SÓ do tween (yPercent) — não colocar transform aqui,
       senão o GSAP soma os dois e a nuvem invade o hero em repouso */
    position: absolute; top: 0; left: -10vw;
    width: 120vw; max-width: none; height: auto;
    z-index: 8; pointer-events: none;
    filter: blur(3px);
}

.bfx-stage {
    position: relative; width: 100%; overflow: hidden; isolation: isolate;
    /* topo casa com o fim do Hero (~rgb 252,228,236) → sem corte */
    background: linear-gradient(180deg, rgb(252,229,237) 0%, #fff7fb 28%, #faf7f8 100%);
    /* borda superior esfumada: onde a nuvem é rala, a emenda não vira linha */
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 64px);
    mask-image: linear-gradient(180deg, transparent 0, #000 64px);
}
.bfx--live .bfx-stage { height: 100svh; }

/* ---------- PLANO 1 · céu etéreo CSS (fallback) + BACKGROUND definitivo ----------
   Profundidade: sky 1 < bg 2 < warm 3 < nuvens 4 < reflexo 5 < PITAYA 8 <
   halo 10 < FRASCO 12 < foreground 16 < copy 24 */
.bfx-sky {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
        radial-gradient(120% 84% at 50% 42%, #ffffff 0%, rgba(255,255,255,0) 48%),
        radial-gradient(66% 60% at 84% 15%, rgba(189,228,245,0.34) 0%, rgba(189,228,245,0) 56%),
        radial-gradient(64% 58% at 14% 78%, rgba(247,175,200,0.20) 0%, rgba(247,175,200,0) 58%),
        linear-gradient(180deg, #fffafc 0%, #fdf3f7 60%, #faf6f7 100%);
}
/* cenário fotográfico da cena (sem produto/texto) — cover, estável no pin */
.bfx-bg {
    position: absolute; inset: 0; z-index: 2; pointer-events: none;
    width: 100%; height: 100%; object-fit: cover;
}
/* luz quente (Baunilha) — só temperatura, nunca dourar a página */
.bfx-warm {
    position: absolute; left: 50%; top: 52%; transform: translate(-50%,-50%);
    width: min(70vw, 900px); height: min(70vw, 900px); z-index: 3; pointer-events: none;
    /* blend normal: soft-light sobre fundo branco não rende temperatura */
    background: radial-gradient(circle, rgba(255,196,128,0.4) 0%, rgba(255,206,150,0.18) 38%, rgba(255,206,150,0) 68%);
}

/* ---------- PLANO 2 · moldura inferior de nuvens + reflexo ---------- */
.bfx-cloudfoot {
    position: absolute; z-index: 4; pointer-events: none; height: auto;
    filter: blur(2px);
}
.bfx-cloudfoot--l { left: -7%; bottom: -6%; width: clamp(280px, 27vw, 440px); opacity: 0.55; }
.bfx-cloudfoot--r { right: -5%; bottom: -4%; width: clamp(240px, 23vw, 390px); opacity: 0.5; }
.bfx-ground {
    position: absolute; left: 50%; bottom: 10%; transform: translateX(-50%);
    width: min(60vw, 780px); height: 110px; z-index: 5; pointer-events: none;
    background: radial-gradient(50% 100% at 50% 100%, rgba(255,255,255,0.7) 0%, rgba(255,224,238,0.28) 52%, rgba(255,224,238,0) 78%);
    filter: blur(8px);
}

/* halo — grande e difuso, ENTRE a pitaya e o frasco (integra o produto) */
.bfx-halo {
    position: absolute; left: 51%; top: 50%; transform: translate(-50%,-50%);
    width: min(62vw, 780px); height: min(62vw, 780px); z-index: 10; pointer-events: none;
    background: radial-gradient(circle, rgba(255,255,255,0.78) 0%, rgba(255,236,245,0.38) 34%, rgba(255,236,245,0) 64%);
}

/* ---------- PLANO 3 · FRASCO herói (autoridade visual) ---------- */
.bfx-flask-wrap {
    position: absolute; left: 51%; top: 52%;
    transform: translate(-50%, -50%);
    z-index: 12; pointer-events: none;
}
.bfx-flask {
    display: block; height: 57vh; width: auto;
    filter: drop-shadow(0 26px 52px rgba(206, 112, 150, 0.3));
    animation: bfxFloat 7.5s ease-in-out infinite;
    animation-play-state: paused;
}
.bfx.is-motion-active .bfx-flask { animation-play-state: running; }
@keyframes bfxFloat {
    0%,100% { transform: translateY(0); }
    50%     { transform: translateY(-4px); }
}

/* ---------- notas (decor/ingrediente; atrás do frasco) ---------- */
.bfx-note { position: absolute; inset: 0; z-index: 8; pointer-events: none; }
.bfx-anim { transform-origin: center; }

/* ingrediente de apoio — sempre pequeno, parcial, nunca protagonista */
.bfx-ing {
    position: absolute; height: auto; z-index: 8;
    filter: drop-shadow(0 12px 26px rgba(190, 90, 130, 0.22));
}
/* 01 PITAYA — GRANDE, entrando pela direita, quase encostada no frasco,
   parcialmente atrás dele e cortada pela viewport (fotografia conjunta).
   Asset em alta com recorte transparente real — sem máscara. */
.bfx-note--pitaya .bfx-ing {
    left: 61%; bottom: 3%;
    width: clamp(400px, 36vw, 560px);
    filter: drop-shadow(-16px 24px 40px rgba(180, 60, 110, 0.28));
}
.bfx-ing-petal { position: absolute; left: 40%; top: 28%; width: clamp(34px, 3.4vw, 52px); z-index: 8; }

/* 02 PEÔNIA — mesma lógica da Fase 1: grande, junto ao frasco, atrás dele,
   cortada pela direita (asset horizontal → um pouco mais largo que a pitaya) */
.bfx-ing--peonia {
    left: 56%; bottom: 7%; width: clamp(480px, 46vw, 720px);
    filter: drop-shadow(-16px 24px 40px rgba(190, 70, 120, 0.28));
}
.bfx-peo-petal { position: absolute; z-index: 8; }
.bfx-peo-petal--a { left: 40%; top: 24%; width: clamp(30px, 3.4vw, 50px); }
.bfx-peo-petal--b { left: 20%; bottom: 13%; width: clamp(24px, 2.8vw, 42px); }
.bfx-peo-bfly { position: absolute; left: 46%; top: 12%; width: clamp(36px, 3.8vw, 58px); z-index: 8; opacity: 0.8; }

/* 03 FRANGIPANI — grande junto ao frasco, um pouco mais alta (fase aérea) */
.bfx-ing--frangipani {
    left: 57%; bottom: 11%; width: clamp(460px, 44vw, 700px);
    filter: drop-shadow(-16px 24px 40px rgba(200, 60, 100, 0.26));
}
.bfx-fra-mini { position: absolute; left: 40%; top: 25%; width: clamp(34px, 3.6vw, 54px); z-index: 8; opacity: 0.85; }

/* 04 BAUNILHA — composição grande junto ao frasco + gema âmbar */
.bfx-ing--baunilha {
    left: 57%; bottom: 5%; width: clamp(460px, 44vw, 700px);
    filter: drop-shadow(-16px 24px 40px rgba(196, 138, 62, 0.3));
}
.bfx-bau-gema { position: absolute; left: 40%; top: 26%; width: clamp(26px, 2.6vw, 40px); z-index: 8; }

/* ---------- PLANO 4 · foreground (1 pétala sutil, base-esquerda) ---------- */
.bfx-fg { position: absolute; inset: 0; z-index: 16; pointer-events: none; }
.bfx-fg__petal { position: absolute; left: 20%; bottom: 9%; width: clamp(52px, 5.4vw, 84px); filter: blur(2px); opacity: 0.65; transform: rotate(-14deg); }

/* ---------- COPY ---------- */
.bfx-copy { position: absolute; z-index: 24; }
.bfx-copy::before {
    content: ""; position: absolute; inset: -20px -38px; z-index: -1; pointer-events: none;
    background: radial-gradient(62% 66% at 34% 50%, rgba(255,254,255,0.6) 0%, rgba(255,254,255,0) 74%);
}
.bfx-eyebrow {
    display: block; font-family: var(--bf-font-sans);
    font-size: clamp(12px, 1.05vw, 15px); font-weight: 600; letter-spacing: 0.22em;
    text-transform: uppercase; color: var(--bf-pink); margin-bottom: clamp(18px, 2.6vh, 26px);
}
/* linha-intro (ex-tela de intro, agora dentro da Fase 01) */
.bfx-tagline {
    display: block; font-family: var(--bf-font-sans);
    font-size: clamp(11px, 0.9vw, 13px); font-weight: 600; letter-spacing: 0.22em;
    text-transform: uppercase; color: rgba(41, 35, 41, 0.72); margin-bottom: 14px;
}
/* posição compartilhada das copies de nota (01–04): coluna esquerda,
   ancorada no terço superior (como na referência) */
.bfx-copy--note {
    left: clamp(28px, 6vw, 104px); top: 31%;
    max-width: clamp(360px, 32vw, 470px);
}
.bfx-name {
    font-family: var(--bf-font-serif); font-size: clamp(44px, 4.1vw, 76px);
    font-weight: 500; line-height: 1.03; color: var(--bf-ink);
    margin: 0 0 clamp(20px, 3vh, 30px);
}
.bfx-text {
    font-family: var(--bf-font-serif); font-size: clamp(16px, 1.35vw, 20px);
    font-style: italic; font-weight: 500; line-height: 1.55; color: var(--bf-text);
    margin: 0; max-width: 380px;
}

/* ---------- estados iniciais ----------
   Fase 01 nasce VISÍVEL (frasco, copy, notas, pitaya) — a seção chega
   pronta durante o handoff. Fases 02–04 e luz quente começam
   apagadas e são reveladas pela timeline (se o JS falhar, a página mostra
   a Fase 01 completa — nunca uma cena vazia). */
.bfx-warm,
.bfx-note--peonia, .bfx-note--frangipani, .bfx-note--baunilha,
.bfx-copy--peonia, .bfx-copy--frangipani, .bfx-copy--baunilha { opacity: 0; }

/* ================================================================
   MOBILE (≤768) — composição própria
   ================================================================ */
@media (max-width: 768px) {
    /* copy no topo → frasco central grande → pitaya entrando pela direita */
    .bfx-flask-wrap { top: 61%; }
    .bfx-flask { height: 42svh; }
    .bfx-halo { left: 50%; width: min(100vw, 480px); height: min(100vw, 480px); }
    .bfx-warm { width: min(120vw, 620px); height: min(120vw, 620px); }
    .bfx-ground { width: 86vw; bottom: 9%; height: 80px; }

    .bfx-copy--note {
        left: 50%; top: calc(env(safe-area-inset-top) + 68px);
        transform: translateX(-50%); text-align: center; max-width: min(92vw, 460px);
    }
    .bfx-copy--note .bfx-text { margin: 0 auto; font-size: clamp(15.5px, 4.2vw, 17px); max-width: 320px; }
    .bfx-copy--note .bfx-eyebrow { margin-bottom: 12px; }
    .bfx-copy--note .bfx-tagline { margin-bottom: 10px; }
    .bfx-copy--note::before { inset: -14px -26px; background: radial-gradient(72% 70% at 50% 40%, rgba(255,254,255,0.66), rgba(255,254,255,0) 76%); }
    /* quebras do desktop não se aplicam: deixa o texto fluir em 2–3 linhas */
    .bfx-name br { display: none; }
    .bfx-name { font-size: clamp(30px, 8.4vw, 38px); margin-bottom: 14px; }

    /* PITAYA grande também no mobile: ~40% fora, atrás do frasco */
    .bfx-note--pitaya .bfx-ing {
        left: 54%; bottom: 3%;
        width: clamp(230px, 62vw, 310px);
        filter: drop-shadow(-12px 18px 30px rgba(180, 60, 110, 0.26));
    }
    .bfx-ing-petal { left: 12%; top: 34%; width: clamp(30px, 8vw, 44px); }
    .bfx-fg__petal { left: 6%; bottom: 12%; width: clamp(44px, 13vw, 66px); }

    /* nuvens: só a da esquerda (a do bg + pitaya preenchem a direita) */
    .bfx-cloudfoot--l { left: -14%; bottom: -3%; width: clamp(220px, 62vw, 320px); }
    .bfx-cloudfoot--r { display: none; }

    /* ingredientes das fases 02–04 no mobile: mesma lógica da pitaya
       (grandes, entrando pela direita-inferior, atrás do frasco) */
    .bfx-ing--peonia { left: 40%; bottom: 4%; top: auto; width: clamp(280px, 76vw, 380px); }
    .bfx-peo-petal--a { left: 12%; top: 34%; }
    .bfx-peo-petal--b { left: 8%; bottom: 20%; }
    .bfx-peo-bfly { left: 14%; top: 24%; width: clamp(30px, 9vw, 46px); }

    .bfx-ing--frangipani { left: 42%; top: auto; bottom: 6%; width: clamp(270px, 74vw, 370px); }
    .bfx-fra-mini { left: 12%; top: 34%; bottom: auto; }

    .bfx-ing--baunilha { left: 42%; bottom: 4%; width: clamp(270px, 74vw, 370px); }
    .bfx-bau-gema { left: 12%; top: 34%; }

    /* nuvem divisória mais alta em tela vertical */
    .bfx-divider { left: -30vw; width: 165vw; }
}

/* ================================================================
   MOBILE CURTO (≤768 × altura ≤740) — pouco respiro vertical:
   copy compacta + frasco menor e mais baixo, para a descrição das
   fases (Pitaya/Baunilha são as mais longas) nunca tocar o frasco.
   ================================================================ */
@media (max-width: 768px) and (max-height: 740px) {
    .bfx-flask-wrap { top: 63%; }
    .bfx-flask { height: 38svh; }
    /* top herda os 68px do bloco mobile — abaixo do header fixo (~63px) */
    .bfx-copy--note .bfx-eyebrow { margin-bottom: 8px; }
    .bfx-copy--note .bfx-tagline { margin-bottom: 6px; }
    .bfx-name { font-size: clamp(26px, 7vw, 32px); margin-bottom: 10px; }
    .bfx-copy--note .bfx-text { font-size: clamp(14.5px, 3.8vw, 15.5px); max-width: 300px; }
}

/* ================================================================
   MODO ESTÁTICO (sem JS / prefers-reduced-motion)
   Seção simplesmente empilhada abaixo do Hero, com a Fase 01 legível.
   ================================================================ */
.bfx:not(.bfx--live) .bfx-divider { display: none; }
.bfx:not(.bfx--live) .bfx-stage { height: 100svh; }

@media (prefers-reduced-motion: reduce) {
    .bfx-flask { animation: none; }
}