/* =========================================================
   4/5 · ANIMAÇÕES — transições orgânicas e cinematográficas
   · abertura com anel e folhas
   · título palavra a palavra + grifo desenhado
   · folhas e pétalas flutuando, pétalas caindo
   · cortina nas fotos, parallax, ramos que se desenham, flores que desabrocham
   · cenas: cada seção entra e sai ligada à rolagem (vale também ao subir)
   · ilustrações botânicas traçadas pela rolagem
   · cortina verde com lírio ao navegar pelo menu
   Tudo só roda com JS ativo (.js) e é desligado em responsive.css
   para quem prefere menos movimento.
   ========================================================= */

/* Variáveis animáveis: --p (traço 0→1), --entra/--sai (progresso da cena) */
@property --p     { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --entra { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --sai   { syntax: "<number>"; inherits: true; initial-value: 0; }

/* ---------- Keyframes ---------- */
@keyframes tracar        { from { --p: 0; } to { --p: 1; } }
@keyframes desenhar      { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes surgir        { from { opacity: 0; transform: translateY(24px); filter: blur(8px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes palavra       { from { transform: translateY(105%) rotate(4deg); } to { transform: none; } }
@keyframes foco          { from { opacity: 0; filter: blur(10px); } to { opacity: 1; filter: blur(0); } }
@keyframes cortina-foto  { from { clip-path: inset(100% 0 0 0 round 28px); } to { clip-path: inset(0 0 0 0 round 28px); } }
@keyframes zoom-lento    { from { transform: scale(1.18); } to { transform: scale(1); } }
@keyframes desabrochar   { 0% { opacity: 0; transform: scale(.2) rotate(-120deg); } 70% { opacity: 1; transform: scale(1.08) rotate(8deg); } 100% { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes brotar        { 0% { opacity: 0; transform: scale(0) rotate(-30deg); } 100% { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes flutuar-a     { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 33% { transform: translate(14px, -18px) rotate(14deg); } 66% { transform: translate(-10px, -8px) rotate(-10deg); } }
@keyframes flutuar-b     { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(-16px, 20px) rotate(-22deg); } }
@keyframes cair          { 0% { transform: translate(0, -40px) rotate(0deg); opacity: 0; } 10% { opacity: .55; } 50% { transform: translate(30px, 150px) rotate(160deg); } 90% { opacity: .55; } 100% { transform: translate(-20px, 340px) rotate(320deg); opacity: 0; } }
@keyframes respirar      { 0%, 100% { scale: 1; } 50% { scale: 1.08; } }
@keyframes girar-lento   { to { rotate: 360deg; } }
@keyframes intro-sair    { 0% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 0 100% 0); visibility: hidden; } }
@keyframes intro-folha   { from { opacity: 0; transform: var(--t0); } to { opacity: 1; transform: var(--t1); } }
@keyframes letras        { from { opacity: 0; transform: translateY(10px) scale(1.06); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }

/* Atraso das animações do hero: espera a abertura terminar */
:root { --intro: 1.3s; }
.sem-intro { --intro: .05s; }

/* ---------- 1. Abertura ---------- */
.intro { display: none; }
.js:not(.sem-intro) .intro {
  position: fixed; inset: 0; z-index: 500;
  display: grid; place-content: center; justify-items: center; gap: 18px;
  background: var(--creme);
  animation: intro-sair .7s var(--ease-cine) .95s forwards;
  pointer-events: none;
}
.intro-inner { position: relative; width: 120px; height: 120px; display: grid; place-items: center; }
.intro-anel { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.intro-anel circle { fill: none; stroke: var(--verde-oliva); stroke-width: 1.4; stroke-dasharray: 1; stroke-dashoffset: 1; animation: desenhar .85s var(--ease-organico) .05s forwards; }
.intro-s { width: 40px; height: auto; opacity: 0; animation: foco .6s var(--ease) .25s forwards; }
.intro-folha { position: absolute; width: 22px; height: 33px; color: var(--verde-oliva); opacity: 0; animation: intro-folha .6s var(--ease) .5s forwards; }
.intro-folha-1 { left: -14px; bottom: 6px; --t0: rotate(-60deg) scale(0); --t1: rotate(-35deg) scale(1); }
.intro-folha-2 { right: -14px; top: 6px; --t0: rotate(120deg) scale(0); --t1: rotate(145deg) scale(1); color: var(--oliva-claro); }
.intro-nome {
  font-family: var(--fonte-titulo); font-weight: 600; font-size: 1rem; text-transform: uppercase;
  color: var(--verde-escuro); letter-spacing: .22em; opacity: 0;
  animation: letras .7s var(--ease) .4s forwards;
}

/* ---------- 2. Entrada do hero ---------- */
.js .hero-in { opacity: 0; animation: surgir 1s var(--ease) forwards; animation-delay: calc(var(--intro) + var(--o, 0) * .12s); }

/* Título palavra a palavra (spans criados pelo main.js) */
.js [data-split] .w { display: inline-block; overflow: hidden; vertical-align: top; padding: .12em .02em .1em; margin: -.12em -.02em -.1em; }
.js [data-split] .w > span { display: inline-block; transform: translateY(105%); animation: palavra 1s var(--ease) forwards; animation-delay: calc(var(--intro) + .15s + var(--i) * .06s); }
.js [data-split] .w-grifo { overflow: visible; }
.js [data-split] .w-grifo > span { transform: none; opacity: 0; animation-name: foco; }
.js .grifo path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: desenhar 1.1s var(--ease-organico) forwards; animation-delay: calc(var(--intro) + 1.1s); }

/* Foto: cortina em arco que sobe + zoom lento */
.js .hero-foto { animation: cortina-foto 1.4s var(--ease-cine) both; animation-delay: calc(var(--intro) + .1s); }
.js .hero-foto img { animation: zoom-lento 2.4s var(--ease) both; animation-delay: calc(var(--intro) + .1s); }
.js .hero-card { opacity: 0; animation: surgir .9s var(--ease) forwards; animation-delay: calc(var(--intro) + 1.2s); }
.js .hero-flor { opacity: 0; animation: desabrochar 1.3s var(--ease) forwards, girar-lento 40s linear infinite; animation-delay: calc(var(--intro) + 1.3s), calc(var(--intro) + 2.6s); }

/* Folhas e pétalas flutuando (só transform: leve para a GPU) */
.js .hf { animation: flutuar-a 16s var(--ease-organico) infinite; }
.js .hf-2, .js .hf-5, .js .hf-7 { animation-name: flutuar-b; animation-duration: 11s; }
.js .hf-3 { animation-duration: 21s; animation-delay: -6s; }
.js .hf-4 { animation-duration: 13s; animation-delay: -3s; }
.js .hf-6 { animation-duration: 19s; animation-delay: -9s; }
.js .hf-7 { animation-delay: -4s; }
.hero-folhas { translate: 0 var(--py, 0); }
/* Pausa animações infinitas fora da tela (classe aplicada pelo main.js) */
.js .pausado .hf, .js .pausado svg { animation-play-state: paused !important; }

/* ---------- 3. Revelação ao rolar (IntersectionObserver) ---------- */
.js .reveal { opacity: 0; transform: translateY(32px); filter: blur(6px); transition: opacity 1s var(--ease), transform 1s var(--ease), filter 1s var(--ease); transition-delay: var(--delay, 0s); }
.js .reveal.is-visible { opacity: 1; transform: none; filter: blur(0); }

/* Traço do eyebrow cresce quando o bloco aparece */
.js .reveal .eyebrow::before { transform: scaleX(0); transition: transform .9s var(--ease) .3s; }
.js .reveal.is-visible .eyebrow::before { transform: scaleX(1); }

/* Fotos: revelação editorial — uma faixa verde sobe cobrindo o quadro,
   a foto aparece por baixo e a faixa segue para cima (repete a cada passagem) */
@keyframes faixa-foto {
  0%   { transform: scaleY(0); transform-origin: 50% 100%; }
  44%  { transform: scaleY(1); transform-origin: 50% 100%; }
  56%  { transform: scaleY(1); transform-origin: 50% 0; }
  100% { transform: scaleY(0); transform-origin: 50% 0; }
}
.js .reveal-mask .photo-frame::after, .js .reveal-mask .talk-img::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, var(--verde-oliva), var(--verde-escuro));
  transform: scaleY(0);
}
.js .reveal-mask .talk-img { position: relative; }
.js .reveal-mask.is-visible .photo-frame::after, .js .reveal-mask.is-visible .talk-img::after {
  animation: faixa-foto 1.5s var(--ease-cine) both; animation-delay: var(--delay, 0s);
}
.js .reveal-mask img { opacity: 0; transform: scale(1.28); transition: opacity 0s linear, transform 0s; }
.js .reveal-mask.is-visible img {
  opacity: 1; transform: scale(1.06);
  transition: opacity 0s linear calc(var(--delay, 0s) + .7s), transform 2.4s var(--ease) calc(var(--delay, 0s) + .7s);
}
.js .reveal-mask figcaption { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .reveal-mask.is-visible figcaption { opacity: 1; transform: none; transition-delay: calc(var(--delay, 0s) + 1s); }
[data-parallax-img] img { translate: 0 var(--py, 0); }

/* Flor que desabrocha no título da seção */
.js .bloom { opacity: 0; }
.js .reveal.is-visible .bloom { animation: desabrochar 1.2s var(--ease) .1s forwards; }

/* ---------- 4. Ramos que se desenham entre seções ---------- */
.js .vine-caule { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.2s var(--ease-organico); }
.js .vine.is-visible .vine-caule { stroke-dashoffset: 0; }
.js .vine-folha, .js .vine-flor { transform-box: fill-box; transform-origin: center; opacity: 0; scale: 0; transition: opacity .6s var(--ease), scale .8s var(--ease); }
.js .vine.is-visible .vine-folha, .js .vine.is-visible .vine-flor { opacity: 1; scale: 1; }
.js .vine.is-visible svg > :nth-child(2) { transition-delay: .7s; }
.js .vine.is-visible svg > :nth-child(3) { transition-delay: 1.1s; }
.js .vine.is-visible svg > :nth-child(4) { transition-delay: 1.5s; }
.js .vine.is-visible svg > :nth-child(5) { transition-delay: 1.9s; }

/* Traços dos cantos e da faixa verde */
.js .deco-traco path, .js .dif-tracos path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.6s var(--ease-organico); }
.js .deco-traco.is-visible path, .js .dif-tracos.is-visible path { stroke-dashoffset: 0; }
.js .dif-tracos.is-visible path:nth-child(2) { transition-delay: .5s; }

/* ---------- 5. Cenas: seções entram e saem conforme a rolagem ----------
   O main.js grava --entra (0 → 1 enquanto a seção sobe na tela) e --sai
   (0 → 1 enquanto ela vai embora pelo topo). Como depende só da posição,
   o efeito se repete igual ao rolar para cima. */
.js .cena > .container {
  opacity: calc(.15 + var(--entra) * .85 - var(--sai) * .55);
  transform: translate3d(0, calc((1 - var(--entra)) * 90px - var(--sai) * 40px), 0) scale(calc(.93 + var(--entra) * .07 - var(--sai) * .05));
  transform-origin: 50% 0;
}
/* Seções coloridas chegam como um cartão que se abre até as bordas */
.js .cena.section-salvia, .js .cena.diferenciais {
  clip-path: inset(0 calc((1 - var(--entra)) * 7vw) round calc((1 - var(--entra)) * 72px));
}

/* ---------- 6. Ilustrações botânicas traçadas ----------
   Cada caminho tem pathLength="1"; --p (0 → 1) vem da rolagem (main.js)
   e passa por herança para dentro dos <use>. */
.js .botanica {
  stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p));
  transform: rotate(calc((1 - var(--p)) * -7deg)) translateY(calc((1 - var(--p)) * 24px));
  transform-origin: 50% 100%;
  transition: --p .5s linear;
}
.js .hero .botanica { animation: tracar 2.8s var(--ease-organico) both; animation-delay: calc(var(--intro) + .5s); }
.js .bt-hero-margarida { animation-delay: calc(var(--intro) + 1.4s); }

/* ---------- 7. Títulos das seções: palavra a palavra, a cada passagem ---------- */
.js [data-split-rolagem] .w { display: inline-block; overflow: hidden; vertical-align: top; padding: .12em .02em .1em; margin: -.12em -.02em -.1em; }
.js [data-split-rolagem] .w > span { display: inline-block; transform: translateY(110%) rotate(5deg); transition: transform 1.1s var(--ease); transition-delay: calc(var(--delay, 0s) + .15s + var(--i) * .07s); }
.js .is-visible [data-split-rolagem] .w > span { transform: none; }

/* ---------- 8. Cortina de transição do menu ----------
   cobrindo: duas camadas sobem e o lírio se desenha · revelando: a cortina segue para cima */
.transicao { position: fixed; inset: 0; z-index: 400; visibility: hidden; pointer-events: none; }
.transicao.ativa { visibility: visible; pointer-events: auto; }
.transicao-camada { position: absolute; inset: 0; clip-path: inset(100% 0 0 0); transition: clip-path .65s var(--ease-cine); }
.transicao:not(.ativa) .transicao-camada { transition: none; }
.transicao-camada-1 { background: var(--oliva-claro); }
.transicao-camada-2 { background: var(--verde-escuro); transition-delay: .09s; }
.transicao.cobrindo .transicao-camada { clip-path: inset(0 0 0 0); }
.transicao.revelando .transicao-camada { clip-path: inset(0 0 100% 0); }
.transicao.revelando .transicao-camada-1 { transition-delay: .1s; }
.transicao.revelando .transicao-camada-2 { transition-delay: 0s; }
.transicao-centro {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 16px;
  opacity: 0; transform: translateY(16px); transition: opacity .3s var(--ease), transform .6s var(--ease);
}
.transicao.cobrindo .transicao-centro { opacity: 1; transform: none; transition-delay: .35s; }
.transicao-lirio {
  width: 96px; height: 180px; overflow: visible;
  fill: none; stroke: var(--oliva-claro); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
  --p: 0; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p)); transition: --p .9s var(--ease-organico);
}
.transicao.cobrindo .transicao-lirio { --p: 1; transition-delay: .3s; }
.transicao-titulo { font-family: var(--fonte-titulo); font-weight: 500; font-size: clamp(1.9rem, 5vw, 3rem); color: var(--creme); letter-spacing: .03em; }

/* ---------- 9. Nutrição: alimentos do hero se desenham e flutuam ---------- */
.js .hn { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p)); animation: tracar 2.2s var(--ease-organico) both, flutuar-a 15s var(--ease-organico) infinite; animation-delay: calc(var(--intro) + .8s), 0s; }
.js .hn-2 { animation-name: tracar, flutuar-b; animation-duration: 2.2s, 10s; animation-delay: calc(var(--intro) + 1.1s), -3s; }
.js .hn-3 { animation-duration: 2.2s, 18s; animation-delay: calc(var(--intro) + 1.4s), -7s; }
.js .hn-4 { animation-name: tracar, flutuar-b; animation-duration: 2.2s, 13s; animation-delay: calc(var(--intro) + 1s), -5s; }
.js .hn-5 { animation-duration: 2.2s, 20s; animation-delay: calc(var(--intro) + 1.6s), -11s; }

/* Ícones de alimentos na faixa: balançam de leve, cada um no seu tempo */
@keyframes balancar { 0%, 100% { rotate: -6deg; } 50% { rotate: 6deg; } }
.js .faixa-icone { animation: balancar 4s var(--ease-organico) infinite; }
.js .faixa-trilho li:nth-child(even) .faixa-icone { animation-duration: 5s; animation-delay: -2s; }
.js .faixa-trilho li:nth-child(3n) .faixa-icone { animation-duration: 6s; animation-delay: -1s; }

/* ---------- 10. Toques premium ---------- */
/* Hero sai de cena ao rolar: texto sobe e esmaece, foto desce e recua (main.js grava --hero-sai) */
.js .hero-copy { translate: 0 calc(var(--hero-sai, 0) * -70px); opacity: calc(1 - var(--hero-sai, 0) * .75); }
.js .hero-media { translate: 0 calc(var(--hero-sai, 0) * 50px); scale: calc(1 - var(--hero-sai, 0) * .06); }

/* Eyebrow: letras se aproximam quando o bloco entra */
.js .reveal .eyebrow { letter-spacing: .42em; opacity: 0; transition: letter-spacing 1.4s var(--ease), opacity 1s var(--ease); transition-delay: calc(var(--delay, 0s) + .1s); }
.js .reveal.is-visible .eyebrow { letter-spacing: .16em; opacity: 1; }

/* Barra fina de progresso da leitura no topo */
.progresso { position: fixed; inset: 0 0 auto; z-index: 150; height: 2px; background: linear-gradient(90deg, var(--oliva-claro), var(--verde-oliva)); transform: scaleX(var(--leitura, 0)); transform-origin: 0 50%; pointer-events: none; }

/* Textura de filme bem sutil (granulado), só com JS e movimento liberado */
.js body::after {
  content: ""; position: fixed; inset: -50%; z-index: 700; pointer-events: none; opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  animation: granulado 1.2s steps(5) infinite;
}
@keyframes granulado { 0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); } 60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); } }

/* Cursor com anel que segue o mouse (só mouse/trackpad; criado pelo main.js) */
.cursor-anel {
  position: fixed; top: 0; left: 0; z-index: 650; pointer-events: none;
  width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%;
  border: 1.5px solid var(--verde-oliva); background: rgba(201, 209, 163, 0);
  transition: width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), background-color .35s var(--ease), border-color .35s var(--ease), opacity .3s;
  opacity: 0;
}
.cursor-anel.ativo { opacity: .8; }
.cursor-anel.sobre-link { width: 64px; height: 64px; margin: -32px 0 0 -32px; background: rgba(201, 209, 163, .28); border-color: transparent; }
.cursor-anel.sobre-foto { width: 90px; height: 90px; margin: -45px 0 0 -45px; border-color: rgba(247, 245, 238, .9); }
.cursor-anel.pressionado { width: 28px; height: 28px; margin: -14px 0 0 -14px; }

/* Botões magnéticos: seguem levemente o mouse (main.js grava --mx/--my) */
.btn { translate: var(--mx, 0px) var(--my, 0px); }
.btn.magnetico-solto { transition: translate .6s var(--ease), background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease); }

/* ---------- 11. Detalhes vivos ---------- */
/* Linha do tempo cresce de cima para baixo */
.js .timeline::before { transform: scaleY(0); transition: transform 1.8s var(--ease-organico) .2s; }
.js .timeline.is-visible::before { transform: scaleY(1); }
.js .timeline li.is-visible .timeline-num { animation: brotar .7s var(--ease) both; animation-delay: calc(var(--delay, 0s) + .15s); }

/* Ícones da faixa verde brotam */
.js .dif-grid li .icon { transform: scale(0) rotate(-40deg); transition: transform .9s var(--ease); transition-delay: calc(var(--delay, 0s) + .2s); }
.js .dif-grid li.is-visible .icon { transform: none; }

/* Pétalas caindo na faixa verde */
.js .petalas-caindo svg { animation: cair 9s linear infinite; }
.js .petalas-caindo svg:nth-child(2) { animation-duration: 12s; animation-delay: -4s; }
.js .petalas-caindo svg:nth-child(3) { animation-duration: 10s; animation-delay: -7s; }
.js .petalas-caindo svg:nth-child(4) { animation-duration: 13s; animation-delay: -2s; }
.js .petalas-caindo svg:nth-child(5) { animation-duration: 11s; animation-delay: -9s; }
.js .petalas-caindo svg:nth-child(6) { animation-duration: 14s; animation-delay: -5s; }
.js .petalas-caindo svg:nth-child(7) { animation-duration: 12s; animation-delay: -10s; }
.js .petalas-caindo svg:nth-child(8) { animation-duration: 15s; animation-delay: -1s; }
.js .petalas-caindo svg:nth-child(9) { animation-duration: 13s; animation-delay: -8s; }

/* Cards: folha do canto cresce no hover */
.card { transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.card-folha { transform-origin: 70% 90%; transition: transform .8s var(--ease), color .6s var(--ease); }
.card:hover { transform: translateY(-6px); box-shadow: var(--sombra); }
.card:hover .card-folha { transform: rotate(-18deg) scale(1.25); color: var(--oliva-claro); }
.card-icon { transition: transform .6s var(--ease), background-color .4s; }
.card:hover .card-icon { transform: rotate(-8deg) scale(1.06); background: var(--salvia); }

/* Botão contornado: preenchimento verde sobe como água */
.btn-outline::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--verde-escuro); border-radius: inherit; transform: translateY(101%); transition: transform .45s var(--ease); }
.btn-outline:hover::before { transform: none; }

/* FAQ: seta gira e conteúdo surge */
.faq summary::after { transition: transform .4s var(--ease), margin .4s var(--ease); }
.js .faq details[open] p { animation: surgir .6s var(--ease); }

/* Formulário: folha respira */
.js .form-folha { animation: respirar 7s var(--ease-organico) infinite; }

/* WhatsApp flutuante entra depois da abertura */
.js .whats-float { opacity: 0; animation: brotar .8s var(--ease) forwards; animation-delay: calc(var(--intro) + 1.8s); }

/* Política de privacidade: painel sobe */
.politica:target .politica-fundo { animation: foco .4s var(--ease); }
.politica:target .politica-painel { animation: surgir .6s var(--ease); }

/* Menu mobile: painel desce suave */
.main-nav { visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s linear .3s; }
.main-nav.is-open { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.main-nav.is-open li { animation: surgir .5s var(--ease) both; }
.main-nav.is-open li:nth-child(2) { animation-delay: .05s; }
.main-nav.is-open li:nth-child(3) { animation-delay: .1s; }
.main-nav.is-open li:nth-child(4) { animation-delay: .15s; }
.main-nav.is-open li:nth-child(5) { animation-delay: .2s; }

/* Sublinhado do menu desktop desliza (posição final em responsive.css) */
.main-nav ul a::after { transition: transform .35s var(--ease); }

/* Vídeos "Em breve": anel que pulsa em volta do play e desenhos que flutuam */
@keyframes pulso-anel { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(1.9); opacity: 0; } }
.js .em-breve-play::after {
  content: ""; position: absolute; inset: -1.5px; border-radius: 50%; border: 1.5px solid var(--oliva-claro);
  animation: pulso-anel 2.4s var(--ease) infinite;
}
.js .em-breve-arte { animation: flutuar-a 16s var(--ease-organico) infinite; }
.js .em-breve-arte-2 { animation-name: flutuar-b; animation-duration: 12s; animation-delay: -4s; }
.js .em-breve-arte-3 { animation-duration: 19s; animation-delay: -8s; }
.js .pausado .em-breve-play::after { animation-play-state: paused; }