/* APIcultura DS v2 — motion. Só transform/opacity/filter-estático. Respeita prefers-reduced-motion. */
@keyframes aur-a{to{transform:translate3d(12vw,6vw,0) scale(1.15)}}
@keyframes aur-b{to{transform:translate3d(-14vw,8vw,0) scale(1.1)}}
@keyframes aur-c{to{transform:translate3d(-8vw,-3vw,0) scale(1.2)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes blink{50%{opacity:0}}
@keyframes live{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
@keyframes shimmer{to{transform:translateX(100%)}}
@keyframes fade-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes toast-in{from{opacity:0;transform:translateY(20px) scale(.94)}to{opacity:1;transform:none}}
@keyframes toast-out{to{opacity:0;transform:translateX(30px) scale(.96)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes drift{0%,100%{transform:translate(0,0) rotate(0)}33%{transform:translate(8px,-12px) rotate(2deg)}66%{transform:translate(-6px,-6px) rotate(-2deg)}}
@keyframes wing{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.45)}}
@keyframes rain-in{from{opacity:0;transform:translateY(-120px) scale(.8)}to{opacity:1;transform:none}}
@keyframes rain-fall{from{transform:translateY(-30%)}to{transform:translateY(30%)}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes dash{to{stroke-dashoffset:-48}}
@keyframes pop{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
@keyframes ring{0%{transform:scale(.6);opacity:.7}100%{transform:scale(2.2);opacity:0}}
@keyframes comb-pulse{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes row-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes check-in{from{transform:scale(0) rotate(-40deg)}to{transform:none}}
@keyframes sway{0%,100%{transform:rotate(-1.2deg)}50%{transform:rotate(1.2deg)}}
@keyframes glow-breathe{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}
/* ===== reveal por scroll (JS adiciona .is-in e remove data-reveal no fim da animacao) ===== */
@keyframes rv-up{from{opacity:0;transform:translate3d(0,24px,0)}to{opacity:1;transform:none}}
@keyframes rv-zoom{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
@keyframes rv-left{from{opacity:0;transform:translate3d(-30px,0,0)}to{opacity:1;transform:none}}
@keyframes rv-right{from{opacity:0;transform:translate3d(30px,0,0)}to{opacity:1;transform:none}}
@keyframes rv-word{from{transform:translate3d(0,105%,0)}to{transform:none}}
.js [data-reveal]:not(.is-in){opacity:0;animation:rv-fs 0s 4s forwards}
@keyframes rv-fs{to{opacity:1}}
.js [data-reveal].is-in{animation:rv-up .7s var(--ease-expo) backwards;animation-delay:calc(var(--i,0) * 70ms)}
.js [data-reveal="zoom"].is-in{animation-name:rv-zoom}
.js [data-reveal="left"].is-in{animation-name:rv-left}.js [data-reveal="right"].is-in{animation-name:rv-right}
.js [data-split] .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.js [data-split]:not(.is-in) .w>span{transform:translate3d(0,105%,0)}
.js [data-split] .w>span{display:inline-block}
.js [data-split].is-in .w>span{animation:rv-word .8s var(--ease-expo) backwards;animation-delay:calc(var(--w,0) * 55ms + 80ms)}
/* ===== loader (so na 1a visita da sessao; ~600 ms; nao bloqueia clique; failsafe em CSS) ===== */
.loader{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:var(--bg);pointer-events:none;transition:opacity .28s ease-out,visibility .28s;animation:lfs .3s 2.4s forwards}
.loader.done{opacity:0;visibility:hidden}
.no-loader .loader:not([data-keep]){display:none}
.loader[data-keep]{animation:none}
.loader .lx{display:grid;justify-items:center;gap:14px}
.loader .lh{width:148px;height:148px}
.loader svg{display:block;width:148px;height:148px;overflow:visible}
.loader .rg{fill:none;stroke:var(--accent);stroke-width:1;stroke-linejoin:round;vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:center;opacity:0;animation:lring 1.3s var(--ease-out) infinite}
.loader .r2{animation-delay:.43s}.loader .r3{animation-delay:.86s}
.loader .ol{fill:none;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;animation:draw .55s var(--ease-io) .05s forwards}
.loader .fl{fill:var(--accent);opacity:0;animation:lfill .4s .4s var(--ease-out) forwards}
.loader .mk{transform-box:fill-box;transform-origin:center;opacity:0;animation:lbee 1.1s ease-in-out .25s infinite,lshow .3s .25s forwards}
.loader .wm{margin:0;font:500 24px/1 var(--f-ui);letter-spacing:-.01em;color:var(--ink);text-align:center;opacity:0;animation:lshow .35s .3s forwards}
.wm{font-weight:500}
.wm .api{font-weight:700;color:var(--accent-strong)}
@keyframes lring{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.9);opacity:0}}
@keyframes lfill{to{opacity:.16}}
@keyframes lbee{0%,100%{transform:translateY(1.5px)}50%{transform:translateY(-2.5px)}}
@keyframes lshow{to{opacity:1}}
@keyframes lfs{to{opacity:0;visibility:hidden}}
/* ===== abelhas / apiário ===== */
.bee-fly{position:absolute;left:0;top:0;width:34px;height:34px;pointer-events:none;z-index:3;filter:drop-shadow(0 4px 6px rgba(60,38,0,.25))}
.bee-fly .wgs{transform-box:fill-box;transform-origin:50% 100%;animation:wing .14s ease-in-out infinite}
.bee-fly .drop{opacity:0}.bee-fly.carry .drop{opacity:1}
.trail path{fill:none;stroke:var(--arc);stroke-width:1.6;stroke-dasharray:3 9;stroke-linecap:round}
.hive-sway{transform-box:fill-box;transform-origin:50% 100%;animation:sway 6s ease-in-out infinite}
.float{animation:bob 6s ease-in-out infinite}.float.b{animation-duration:7.5s;animation-delay:-2s}.float.c{animation:drift 9s ease-in-out infinite}
.pulse-ring{position:absolute;inset:0;border-radius:inherit;border:2px solid var(--accent);animation:ring 2.4s ease-out infinite;pointer-events:none}
/* ===== mosaico / chuva de ícones ===== */
.mosaic{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:16px;padding:8px}
.mosaic .tile{animation:rain-in 1s var(--ease-expo) backwards;animation-delay:calc(var(--d,0) * 1ms)}
.mosaic .tile .bobber{display:contents}
.rain{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;-webkit-mask-image:linear-gradient(transparent,#000 25%,#000 70%,transparent);mask-image:linear-gradient(transparent,#000 25%,#000 70%,transparent)}
.rain-col{position:absolute;top:-40%;display:flex;flex-direction:column;gap:30px;animation:rain-fall var(--dur,26s) linear infinite alternate}
.rain-col .ti{opacity:var(--o,.5)}
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee-track{display:flex;gap:40px;width:max-content;animation:marquee 38s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .js [data-reveal],.js [data-split] .w>span{opacity:1!important;transform:none!important;filter:none!important}
  .loader{display:none}
  .js [data-reveal]{opacity:1!important}
  .aurora i,.rain-col,.marquee-track,.bee-fly{animation:none!important}
}
/* ===== suavidade geral: nada muda de estado sem transicao curta (transform/opacity/cor) ===== */
::view-transition-old(root),::view-transition-new(root){animation-duration:.32s;animation-timing-function:cubic-bezier(.4,0,.2,1)}
a{transition:color .15s}
@keyframes focus-in{from{outline-color:transparent}}
:focus-visible{animation:focus-in .18s ease-out}
/* FAQ: abre/fecha com fade (::details-content) ou, sem suporte, fade-up no texto */
.acc details p{animation:fade-up .32s var(--ease-out) backwards}
@supports selector(::details-content){
  .acc details::details-content{opacity:0;transition:opacity .25s ease,content-visibility .25s allow-discrete}
  .acc details[open]::details-content{opacity:1}
  .acc details p{animation:none}
}
/* microinteracoes baratas */
.pv-ico{transition:transform .2s var(--ease-out)}
.pv:hover .pv-ico{transform:scale(1.1)}
@keyframes cta-pulse{0%,100%{opacity:0}45%{opacity:1}}
.btn.pulse>span,.btn.pulse>svg{position:relative}
.btn.pulse::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,0));opacity:0;animation:cta-pulse 3.2s ease-in-out 1.4s infinite;pointer-events:none}
.flow-hive{animation:hbob 7s ease-in-out infinite}@keyframes hbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}.flow-hive.mid{animation-duration:8.4s;animation-delay:-2s}.flow-hive:last-of-type{animation-delay:-4s}
@media (prefers-reduced-motion:reduce){.btn.pulse::before,.flow-hive{animation:none!important}}