/* Infinity AI — base visual reutilizável, derivada do Infinity Hub "Fluid Clarity". */

/* ============ TOKENS ============ */
:root{
  --ink:#0c2024;--ink-2:#294246;--muted:#50666a;--muted-2:#8a9a9c;
  --bg:#ecefe6;--paper:#fbfbf6;
  --line:rgba(12,32,36,.09);--line-2:rgba(12,32,36,.15);
  --deep:#06181b;--deep-2:#0a2125;--deep-3:#10353a;
  --lime:#a8e44b;--lime-d:#78ad1c;--cyan:#19c3d0;--teal:#0b8d96;--teal-d:#087078;--green:#1c9f5f;--red:#dc564c;--amber:#e3a02a;
  --on-ink:#e6f3f0;--on-ink-2:#9dbcbe;--on-lime:#162d07;
  --ease:cubic-bezier(.22,1,.36,1);
  --spring:linear(0,.006,.025 2.8%,.101 6.1%,.539 18.9%,.721 25.3%,.849 31.5%,.937 38.1%,.968 41.8%,.991 45.7%,1.006 50.1%,1.015 55%,1.017 63.9%,1.001 85.9%,1);
  --t-fast:.25s;--t-ui:.45s;--t-enter:.8s;--t-camera:1.15s;
  --r-xl:22px;--r-lg:18px;--r-md:13px;--r-sm:10px;--r-stage:34px;
  --f-ui:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --glass:linear-gradient(180deg,rgba(255,255,255,.76),rgba(255,255,255,.52));
  --edge:rgba(255,255,255,.82);
  --ink-panel:linear-gradient(155deg,#0c2d32 0%,#071b1e 72%);
  --sh-1:0 0 0 1px rgba(12,32,36,.045),0 1px 2px rgba(12,32,36,.04),0 18px 36px -24px rgba(12,60,56,.30);
  --sh-2:0 0 0 1px rgba(12,32,36,.06),0 26px 50px -22px rgba(12,60,56,.42);
  --sh-ink:inset 0 1px 0 rgba(255,255,255,.1),0 34px 54px -30px rgba(3,22,24,.75);
  /* escala tipográfica do palco (unidades do palco 1600×900) */
  --s-display:112px;--s-title:64px;--s-lead:34px;--s-body:25px;--s-label:15px;
}

/* ============ BASE ============ */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.55 var(--f-ui);letter-spacing:-.011em;-webkit-font-smoothing:antialiased;font-feature-settings:"cv11","ss03";font-variant-numeric:tabular-nums}
button,input{font:inherit;color:inherit}button{cursor:pointer}
:focus-visible{outline:2px solid var(--teal-d);outline-offset:3px;border-radius:6px}
.on-ink :focus-visible,.ink :focus-visible{outline-color:var(--cyan)}
button:disabled{opacity:.45;cursor:not-allowed}
svg{display:block}
.icon{width:18px;height:18px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
::selection{background:rgba(25,195,208,.25);color:var(--ink)}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:rgba(12,32,36,.15);border-radius:10px;border:3px solid transparent;background-clip:padding-box}
html{scrollbar-color:rgba(12,32,36,.2) transparent}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ============ AMBIENTE ============ */
.bg-fx{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;border-radius:inherit}
.bg-fx.fixed{position:fixed;border-radius:0}
.bg-fx .blob{position:absolute;border-radius:50%;filter:blur(80px);will-change:transform}
.bg-fx .b1{width:52%;aspect-ratio:1;left:-14%;top:-40%;background:radial-gradient(circle,rgba(25,195,208,.42),transparent 66%);animation:drift1 30s ease-in-out infinite alternate}
.bg-fx .b2{width:44%;aspect-ratio:1;right:-14%;top:4%;background:radial-gradient(circle,rgba(168,228,75,.40),transparent 66%);animation:drift2 36s ease-in-out infinite alternate}
.bg-fx .b3{width:56%;aspect-ratio:1.8;left:22%;bottom:-34%;background:radial-gradient(circle,rgba(11,141,150,.22),transparent 66%);animation:drift3 40s ease-in-out infinite alternate}
.bg-fx:after{content:"";position:absolute;inset:0;opacity:.07;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes drift1{to{transform:translate(8%,10%) scale(1.12)}}
@keyframes drift2{to{transform:translate(-7%,14%) scale(.92)}}
@keyframes drift3{to{transform:translate(-9%,-8%) scale(1.1)}}

/* ============ MARCA ============ */
.brand{display:flex;align-items:center;gap:12px}
.brand-mark{width:40px;height:40px;flex:none;display:grid;place-items:center;border-radius:14px;background:linear-gradient(140deg,rgba(168,228,75,.16),rgba(25,195,208,.18));border:1px solid rgba(25,195,208,.28)}
.brand-mark svg{width:25px;height:25px}
.brand-name{font:650 17px var(--f-ui);letter-spacing:-.035em;color:var(--ink)}.brand-name span{color:var(--teal)}
.on-ink .brand-name{color:#f3faf7}.on-ink .brand-name span{color:var(--cyan)}

/* ============ SUPERFÍCIES ============ */
.glass{position:relative;isolation:isolate;border-radius:var(--r-xl);background:var(--glass);border:1px solid var(--edge);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),var(--sh-1);backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%)}
.ink{position:relative;isolation:isolate;border-radius:var(--r-xl);background:var(--ink-panel);color:var(--on-ink);border:1px solid rgba(255,255,255,.08);box-shadow:var(--sh-ink)}
.lime{position:relative;isolation:isolate;border-radius:var(--r-xl);background:linear-gradient(150deg,#b7ec62,#9bdb3c);color:var(--on-lime);border:1px solid rgba(255,255,255,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 26px 44px -26px rgba(90,140,20,.65)}
.aurora{position:absolute;inset:0;z-index:-1;overflow:hidden;border-radius:inherit;pointer-events:none}
.aurora i{position:absolute;border-radius:50%;filter:blur(46px)}
.aurora i:nth-child(1){width:340px;height:340px;right:-90px;top:-140px;background:radial-gradient(circle,rgba(25,195,208,.6),transparent 66%);animation:aur1 16s ease-in-out infinite alternate}
.aurora i:nth-child(2){width:280px;height:280px;left:28%;bottom:-170px;background:radial-gradient(circle,rgba(168,228,75,.4),transparent 66%);animation:aur2 20s ease-in-out infinite alternate}
.aurora:after{content:"";position:absolute;inset:0;background:radial-gradient(rgba(255,255,255,.09) 1px,transparent 1.3px) 0 0/22px 22px;-webkit-mask-image:linear-gradient(180deg,#000,transparent 75%);mask-image:linear-gradient(180deg,#000,transparent 75%)}
@keyframes aur1{to{transform:translate(-60px,50px) scale(1.15)}}
@keyframes aur2{to{transform:translate(70px,-40px) scale(1.2)}}
.tile-icon{width:44px;height:44px;display:grid;place-items:center;border-radius:15px;border:1px solid var(--line);background:rgba(255,255,255,.75);color:var(--teal);box-shadow:0 8px 18px -12px rgba(12,60,56,.45)}
.tile-icon .icon{width:21px;height:21px}
.ink .tile-icon{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.1);color:var(--lime);box-shadow:none}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;font:550 12px var(--f-ui);letter-spacing:.02em;background:rgba(11,141,150,.1);color:var(--teal-d);white-space:nowrap}
.chip.live{background:rgba(28,159,95,.12);color:#0e6a40}
.chip.live:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green);animation:ping 2.2s infinite}
.ink .chip{background:rgba(168,228,75,.14);color:var(--lime)}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(28,159,95,.55)}70%,100%{box-shadow:0 0 0 8px rgba(28,159,95,0)}}

/* ============ BOTÕES ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:44px;padding:0 20px;border-radius:999px;border:1px solid var(--line-2);background:rgba(255,255,255,.62);color:var(--ink-2);font-weight:600;font-size:14px;white-space:nowrap;backdrop-filter:blur(10px);transition:transform var(--t-ui) var(--spring),background var(--t-fast),box-shadow var(--t-ui) var(--ease),border-color var(--t-fast)}
.btn:not(.btn-primary,.btn-lime):hover{background:#fff}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 26px -16px rgba(12,60,56,.6)}
.btn:active{transform:scale(.96)}
.btn .icon{width:16px;height:16px;transition:transform .5s var(--ease)}
.btn:hover .icon{transform:translate(2px,-2px)}
.btn-primary{background:linear-gradient(180deg,#143e44,#08211f);color:#f2fbf6;border-color:#07201f;box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 12px 24px -12px rgba(5,30,30,.85)}
.btn-primary:hover{background:linear-gradient(180deg,#18484f,#0a2927)}
.btn-primary .icon{color:var(--lime)}
.btn-lime{background:var(--lime);border-color:var(--lime);color:#1b3309}
.btn-lime:hover{background:#b5ec5c}
.btn:disabled{transform:none;box-shadow:none}

.icon-btn{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line);background:rgba(255,255,255,.6);color:var(--ink-2);border-radius:15px;position:relative;transition:transform var(--t-ui) var(--spring),box-shadow var(--t-ui) var(--ease),background var(--t-fast),color var(--t-fast)}
.icon-btn:hover{background:#fff;color:var(--teal);transform:translateY(-2px);box-shadow:0 12px 24px -14px rgba(12,60,56,.55)}
.icon-btn:active{transform:scale(.9)}
.icon-btn:disabled{transform:none;box-shadow:none;background:rgba(255,255,255,.3)}
.icon-btn.flip .icon{transform:scaleX(-1)}
.on-ink .icon-btn{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1);color:#cfe3e2}
.on-ink .icon-btn:hover{background:rgba(255,255,255,.12);color:var(--lime);box-shadow:0 12px 24px -14px rgba(0,0,0,.6)}

/* ============ DOCK (navegação da apresentação) ============ */
.dock{position:relative;display:flex;flex-direction:column;gap:6px;padding:16px 12px;border-radius:30px;color:#a4bbbd;overflow:hidden;
  background:linear-gradient(170deg,rgba(9,33,37,.97),rgba(5,21,24,.97));border:1px solid rgba(255,255,255,.07);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 34px 60px -30px rgba(3,20,22,.7)}
.dock:before{content:"";position:absolute;width:260px;height:260px;left:-90px;top:-110px;border-radius:50%;background:radial-gradient(circle,rgba(25,195,208,.22),transparent 65%);pointer-events:none}
.dock-list{position:relative;display:grid;gap:2px;margin:8px 0}
.dock-indicator{position:absolute;left:0;right:0;top:0;height:40px;border-radius:14px;pointer-events:none;background:linear-gradient(90deg,rgba(25,195,208,.24),rgba(25,195,208,.07));box-shadow:inset 0 0 0 1px rgba(25,195,208,.2),0 8px 24px -10px rgba(25,195,208,.5);transition:transform .55s var(--ease)}
.dock-indicator:before{content:"";position:absolute;left:-12px;top:50%;width:4px;height:20px;margin-top:-10px;border-radius:0 4px 4px 0;background:var(--lime);box-shadow:0 0 14px rgba(168,228,75,.7)}
.dock-item{position:relative;display:flex;align-items:center;gap:12px;height:40px;width:100%;padding:0 12px;border:0;border-radius:14px;background:transparent;color:#9ab2b4;font-size:13.5px;text-align:left;white-space:nowrap;transition:color var(--t-fast),background var(--t-fast)}
.dock-item .num{font:600 11px var(--f-ui);color:#6f8d90;width:18px;font-variant-numeric:tabular-nums;transition:color var(--t-fast)}
.dock-item:hover{color:#effffb;background:rgba(255,255,255,.04)}
.dock-item[aria-current="step"]{color:#fff}.dock-item[aria-current="step"] .num{color:var(--lime)}
.dock-ctrl{position:relative;display:flex;gap:8px;align-items:center;padding:4px 2px 0}
.dock-ctrl .count{margin-left:auto;font:600 12px var(--f-ui);color:#7f9ea1;font-variant-numeric:tabular-nums;padding-right:6px}

/* ============ NAVEGAÇÃO RECOLHIDA ============ */
/* botão no canto; a lista de slides abre por cima quando alguém pedir */
.cam-nav{position:absolute;right:36px;bottom:32px;z-index:6;display:flex;align-items:center;gap:6px;padding:6px;border-radius:20px}
.cam-nav .count,.cam-nav .nav-count{font:600 13px var(--f-ui);color:var(--ink-2);font-variant-numeric:tabular-nums;padding:0 8px}
.cam-nav .icon-btn{width:40px;height:40px;border-radius:14px}
.stage .dock{position:absolute;left:28px;top:28px;bottom:28px;width:300px;z-index:7;transform:translateX(calc(-100% - 40px));opacity:0;visibility:hidden;
  transition:transform .7s var(--ease),opacity .4s,visibility 0s .7s}
.stage.menu-open .dock{transform:none;opacity:1;visibility:visible;transition:transform .7s var(--ease),opacity .3s}
.stage .dock-head{position:relative;display:flex;align-items:center;justify-content:space-between;padding:4px 4px 0 12px;font:600 13px var(--f-ui);letter-spacing:.08em;text-transform:uppercase;color:#7f9ea1}
.stage .scrim{position:absolute;inset:0;z-index:6;background:rgba(6,24,27,.22);opacity:0;visibility:hidden;transition:opacity .5s,visibility 0s .5s;border:0;padding:0;cursor:default}
.stage.menu-open .scrim{opacity:1;visibility:visible;transition:opacity .5s}

/* ============ PALCO + CÂMERA ============ */
.stage-fit{position:relative;width:100%;aspect-ratio:16/9;container-type:inline-size}
.stage{position:absolute;left:0;top:0;width:1600px;height:900px;transform-origin:0 0;transform:scale(var(--fit,1));overflow:hidden;overflow:clip;border-radius:var(--r-stage);background:var(--bg);box-shadow:var(--sh-2);outline:none}
.cam-world{position:absolute;left:0;top:0;transform-origin:0 0}
/* dentro do mundo o vidro não usa desfoque de fundo: ligar e desligar o desfoque na chegada travava a entrada.
   A névoa atrás já é suave, então um vidro mais denso tem o mesmo efeito visual. */
.cam-tilt .glass{backdrop-filter:none;-webkit-backdrop-filter:none;background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(255,255,255,.68))}
/* loops de quadros fora da tela ficam pausados: só o slide atual gasta processamento */
.frame:not(.is-active) *,.frame:not(.is-active) *:before,.frame:not(.is-active) *:after{animation-play-state:paused!important}
.frame{position:absolute;width:1600px;height:900px}
.stage-ui{position:absolute;z-index:5}

/* ============ TIPOGRAFIA DO PALCO ============ */
.t-display{font:650 var(--s-display)/.95 var(--f-ui);letter-spacing:-.04em;margin:0;text-wrap:balance}
.t-title{font:650 var(--s-title)/1 var(--f-ui);letter-spacing:-.04em;margin:0;text-wrap:balance}
.t-lead{font:600 var(--s-lead)/1.2 var(--f-ui);letter-spacing:-.025em;color:var(--teal-d);margin:0;text-wrap:balance}
.t-body{font:400 var(--s-body)/1.5 var(--f-ui);color:var(--ink-2);margin:0;max-width:34em;text-wrap:pretty}
.t-label{font:600 var(--s-label)/1.2 var(--f-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.ink .t-lead{color:var(--lime)}.ink .t-body{color:var(--on-ink-2)}

/* ============ ENTRADAS (disparadas quando o quadro fica ativo) ============ */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .03em .14em;margin-bottom:-.14em}
.w>i{display:inline-block;font-style:normal}
.is-active [data-in="words"] .w>i{animation:wordUp .9s var(--ease) backwards;animation-delay:calc(var(--k)*45ms + var(--d0,0ms) + var(--d,0ms))}
.is-active [data-in="rise"]{animation:rise var(--t-enter) var(--ease) backwards;animation-delay:calc(var(--d0,0ms) + var(--d,0ms))}
.is-active [data-in="icon"]{animation:iconIn .9s var(--spring) backwards;animation-delay:calc(var(--d0,0ms) + var(--d,0ms))}
.is-active [data-in="draw"]{stroke-dasharray:1;animation:draw 1.6s var(--ease) backwards;animation-delay:calc(var(--d0,0ms) + var(--d,0ms))}
.is-active [data-in="fade"]{animation:fadeIn .9s var(--ease) backwards;animation-delay:calc(var(--d0,0ms) + var(--d,0ms))}
@keyframes wordUp{from{transform:translateY(110%) rotate(3deg)}}
@keyframes rise{from{opacity:0;transform:translateY(26px) scale(.985);filter:blur(6px)}}
@keyframes iconIn{from{opacity:0;transform:scale(.4) rotate(-12deg)}}
@keyframes draw{from{stroke-dashoffset:1}}
@keyframes fadeIn{from{opacity:0}}

/* ============ VIVOS (loops contínuos) ============ */
@property --ang{syntax:"<angle>";inherits:false;initial-value:0deg}
/* luz que percorre a borda */
.edge-light:before{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;pointer-events:none;z-index:3;
  background:conic-gradient(from var(--ang),transparent 0 48%,rgba(25,195,208,.9) 70%,#d4fa7e 84%,rgba(168,228,75,.9) 90%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:edgeSpin 4.5s linear infinite;animation-delay:calc(var(--n,0) * -1.1s)}
@keyframes edgeSpin{to{--ang:360deg}}
.glass.edge-light:before{background:conic-gradient(from var(--ang),transparent 0 55%,rgba(11,141,150,.7) 76%,rgba(120,173,28,.9) 88%,transparent 100%)}
/* degradê que acende e apaga na base do card */
@property --sx{syntax:"<percentage>";inherits:false;initial-value:-40%}
.glow-base:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:linear-gradient(105deg,transparent calc(var(--sx) - 12%),rgba(255,255,255,.11) var(--sx),transparent calc(var(--sx) + 12%)),radial-gradient(75% 60% at 50% 120%,rgba(168,228,75,.48),transparent 70%),radial-gradient(60% 50% at 0% 0%,rgba(25,195,208,.24),transparent 70%);
  animation:breathe 3.2s ease-in-out infinite alternate,sheen 6s var(--ease) infinite;animation-delay:calc(var(--n,0) * -1.1s),calc(var(--n,0) * -1.6s)}
.glass.glow-base:after{background:linear-gradient(105deg,transparent calc(var(--sx) - 12%),rgba(255,255,255,.7) var(--sx),transparent calc(var(--sx) + 12%)),radial-gradient(75% 60% at 50% 120%,rgba(168,228,75,.42),transparent 70%),radial-gradient(60% 50% at 100% 0%,rgba(25,195,208,.2),transparent 70%)}
@keyframes breathe{from{opacity:.35}to{opacity:1}}
@keyframes sheen{0%,35%{--sx:-40%}75%,100%{--sx:140%}}
/* flutuação lenta (usa translate, não briga com as entradas) */
.float{animation:floatY var(--fd,6s) ease-in-out infinite alternate;animation-delay:calc(var(--n,0) * -1.7s)}
.is-active .float[data-in="rise"]{animation:rise var(--t-enter) var(--ease) backwards,floatY var(--fd,6s) ease-in-out infinite alternate;animation-delay:calc(var(--d0,0ms) + var(--d,0ms)),calc(var(--n,0) * -1.7s)}
.is-active .float[data-in="icon"]{animation:iconIn .9s var(--spring) backwards,floatY var(--fd,6s) ease-in-out infinite alternate;animation-delay:calc(var(--d0,0ms) + var(--d,0ms)),calc(var(--n,0) * -1.7s)}
@keyframes floatY{from{translate:0 calc(var(--fa,1) * -11px);rotate:calc(var(--fa,1) * var(--fr,0) * -.7deg)}to{translate:0 calc(var(--fa,1) * 12px);rotate:calc(var(--fa,1) * var(--fr,0) * .8deg)}}

/* ícones-gráfico em loop: cada um desenha o que o card afirma, nunca enfeite genérico */
.viz{height:42px;color:var(--teal);flex:none}
.ink .viz{color:var(--lime)}
/* execuções do dia: horas anteriores paradas, a hora atual enchendo sem parar */
.viz-exec{display:flex;align-items:flex-end;gap:3px}
.viz-exec i{width:5px;height:var(--h);border-radius:2px;background:currentColor;opacity:.4}
.viz-exec i:last-child{opacity:1;transform-origin:50% 100%;animation:hourFill 2.6s var(--ease) infinite}
@keyframes hourFill{0%{transform:scaleY(.15)}80%,100%{transform:scaleY(1)}}
/* agentes ativos: um ponto por agente, todos acesos; o brilho percorre quem está executando */
.viz-agents{display:grid;grid-template-columns:repeat(var(--cols,4),8px);gap:6px;align-content:center}
.viz-agents i{width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.75;animation:agentWork 2.4s ease-in-out infinite;animation-delay:calc(var(--k) * 200ms)}
@keyframes agentWork{0%,100%{transform:scale(1)}15%{transform:scale(1.45);opacity:1}}
/* operação 24/7: relógio de 24h cujo ponteiro nunca para */
.viz-clock{position:relative;width:42px;border-radius:50%;border:2px solid currentColor;opacity:.95}
.viz-clock:before{content:"";position:absolute;left:50%;top:50%;width:2px;height:15px;margin-left:-1px;border-radius:2px;background:currentColor;transform-origin:50% 0;animation:spin24 6s linear infinite}
.viz-clock:after{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:currentColor}
@keyframes spin24{from{transform:rotate(180deg)}to{transform:rotate(540deg)}}
/* fontes de dados: várias linhas convergindo para um ponto, com dados correndo */
.viz-merge{width:56px}
.viz-merge svg{width:56px;height:42px;overflow:visible}
.viz-merge path{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;opacity:.35}
.viz-merge path.flow{opacity:1;stroke-dasharray:4 30;animation:merge 1.8s linear infinite}
.viz-merge path.flow:nth-of-type(2n){animation-delay:-.6s}.viz-merge path.flow:nth-of-type(3n){animation-delay:-1.2s}
.viz-merge circle{fill:currentColor}
@keyframes merge{from{stroke-dashoffset:34}to{stroke-dashoffset:0}}
/* data lake: camadas de dados se organizando, de baixo para cima */
.viz-stack{display:grid;gap:4px;width:44px;align-content:end}
.viz-stack i{height:7px;border-radius:3px;background:currentColor;transform-origin:0 50%;animation:stackIn 3.2s var(--ease) infinite;animation-delay:calc((2 - var(--k)) * 250ms)}
.viz-stack i:nth-child(1){width:70%}.viz-stack i:nth-child(2){width:85%}
@keyframes stackIn{0%{transform:scaleX(0);opacity:0}25%,85%{transform:scaleX(1);opacity:1}100%{opacity:0}}
/* sistemas mantidos: os mesmos blocos continuam no lugar e passam a se conectar */
.viz-link{position:relative;display:flex;align-items:center;gap:10px}
.viz-link i{width:12px;height:12px;border-radius:3px;border:2px solid currentColor;position:relative;z-index:1;background:var(--deep-2)}
.glass .viz-link i{background:#fff}
.viz-link:before{content:"";position:absolute;left:6px;right:6px;top:50%;height:2px;margin-top:-1px;background:linear-gradient(90deg,transparent,currentColor,transparent) 0 0/40% 100% no-repeat;animation:linkRun 1.8s linear infinite}
@keyframes linkRun{from{background-position:-60% 0}to{background-position:160% 0}}

/* Flip: letras viram a partir da linha de base */
.fw{display:inline-block;white-space:nowrap}
.ch{display:inline-block;transform-origin:50% 100%}
.is-active [data-in="flip"] .ch{animation:flipUp .7s var(--ease) backwards;animation-delay:calc(var(--c) * 10ms + var(--d0,0ms) + var(--d,0ms))}
@keyframes flipUp{from{transform:perspective(500px) rotateX(-92deg);opacity:0}}

/* gráfico de linha vivo: desenha, depois um ponto percorre a linha em loop */
.chart{position:relative}
.chart svg{display:block;overflow:visible}
.chart .grid line{stroke:rgba(12,32,36,.08);stroke-dasharray:2 6}
.ink .chart .grid line{stroke:rgba(255,255,255,.07)}
.chart .area{opacity:.16;fill:currentColor}
.chart .line{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.chart .line.alt{stroke:var(--muted-2);stroke-width:2;stroke-dasharray:5 7}
.ink .chart .line.alt{stroke:#5f8487}
.chart .runner{position:absolute;left:0;top:0;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:currentColor;box-shadow:0 0 0 5px color-mix(in srgb,currentColor 22%,transparent);offset-rotate:0deg;animation:run 6s var(--ease) infinite}
@keyframes run{0%{offset-distance:0%;opacity:0}8%{opacity:1}88%{opacity:1}100%{offset-distance:100%;opacity:0}}
.chart .tip{position:absolute;white-space:nowrap;translate:-50% calc(-100% - 14px);padding:7px 12px;border-radius:999px;font:600 13px var(--f-ui);background:var(--lime);color:var(--on-lime);box-shadow:0 10px 22px -12px rgba(60,100,10,.7)}
.chart .tip:after{content:"";position:absolute;left:50%;bottom:-4px;width:9px;height:9px;translate:-50%;rotate:45deg;border-radius:2px;background:inherit}
.chart .pin{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--lime);border:3px solid var(--deep);animation:pinPulse 2s ease-in-out infinite}
@keyframes pinPulse{50%{transform:scale(1.45)}}
.is-active .chart .tip{animation:tipIn .6s var(--ease) backwards;animation-delay:calc(var(--d0,0ms) + var(--cd,0ms) + 1.4s)}
@keyframes tipIn{from{opacity:0;transform:translateY(8px) scale(.9)}}

/* palavras que acendem em sequência + sublinhado que se desenha */
.is-active [data-in="light"] .w>i{animation:lightUp .5s var(--ease) both;animation-delay:calc(var(--k) * 50ms + var(--d0,0ms) + var(--d,0ms))}
@keyframes lightUp{from{opacity:.22}}
.hl{background:linear-gradient(90deg,var(--cyan),var(--lime)) 0 100%/100% 3px no-repeat;padding-bottom:2px}
.is-active .hl{animation:hlDraw 1s var(--ease) backwards;animation-delay:calc(var(--d0,0ms) + var(--d,0ms))}
@keyframes hlDraw{from{background-size:0 3px}}

/* pacotes de dados percorrendo um caminho (offset-path no elemento) */
.packet{position:absolute;left:0;top:0;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 4px rgba(168,228,75,.25);offset-rotate:0deg;animation:run var(--pd,2.4s) linear infinite;animation-delay:var(--pdl,0s)}
.packet.c{background:var(--cyan);box-shadow:0 0 0 4px rgba(25,195,208,.22)}

/* número que conta (o JS escreve o valor) */
.count{font-variant-numeric:tabular-nums;display:inline-block}
.count.tick{animation:tick .7s var(--ease)}
@keyframes tick{30%{transform:translateY(-4px);color:var(--lime)}}
.glass .count.tick{animation-name:tickGlass}
@keyframes tickGlass{30%{transform:translateY(-4px);color:var(--teal)}}

/* ============ CÂMERA 3D ============ */
.stage{perspective:2400px}
.cam-tilt,.cam-rig{position:absolute;inset:0;transform-origin:50% 50%}
.cam-tilt{perspective:2000px}
.cam-layer{position:absolute;left:0;top:0;transform-origin:0 0;pointer-events:none}
.cam-layer>*{position:absolute}
.cam-layer.near{z-index:4}
.cam-layer .orb{border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.9),rgba(255,255,255,.25) 60%,transparent 72%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}
.cam-layer .ring{border-radius:50%;border:1.5px solid rgba(11,141,150,.18)}
.cam-layer .dotgrid{background:radial-gradient(rgba(12,32,36,.16) 1.4px,transparent 1.8px) 0 0/26px 26px;-webkit-mask-image:radial-gradient(closest-side,#000,transparent);mask-image:radial-gradient(closest-side,#000,transparent)}
.cam-layer .chipf{display:flex;align-items:center;gap:8px;padding:9px 14px 9px 10px;font-weight:600;font-size:15px;color:var(--ink-2)}
.cam-fx{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;border-radius:inherit;
  background:radial-gradient(120% 90% at 50% 50%,transparent 45%,rgba(6,24,27,.28) 100%),linear-gradient(100deg,transparent 30%,rgba(168,228,75,.10) 46%,rgba(25,195,208,.12) 54%,transparent 70%)}
.cam-layer.near .chipf{font-size:30px;gap:12px;padding:16px 26px 16px 18px;border-radius:24px}
.cam-layer.near .chipf .icon{width:30px;height:30px;color:var(--teal)}
.cam-layer .chipf.blur2{filter:blur(2.5px)}
/* fundo vivo: as peças das camadas nunca ficam paradas (usam translate/rotate/scale, sem brigar com a câmera) */
.cam-layer .orb{animation:orbDrift var(--dur,16s) ease-in-out infinite alternate}
.cam-layer .orb:nth-of-type(2n){--dur:21s;animation-direction:alternate-reverse}
.cam-layer .ring{border-style:dashed;border-width:1.5px;animation:ringTurn 90s linear infinite,ringBreathe 12s ease-in-out infinite alternate}
.cam-layer .ring:nth-of-type(2n){animation-direction:reverse,alternate}
.cam-layer .dotgrid{animation:gridDrift 26s ease-in-out infinite alternate}
.cam-layer .dotgrid:nth-of-type(2n){animation-duration:34s;animation-direction:alternate-reverse}
@keyframes orbDrift{from{translate:-30px 24px}to{translate:40px -36px}}
@keyframes ringTurn{to{rotate:360deg}}
@keyframes ringBreathe{from{scale:.94}to{scale:1.06}}
@keyframes gridDrift{from{translate:0 0}to{translate:-60px -40px}}
/* partículas subindo devagar no fundo, visíveis em todos os slides */
.bg-fx .pt{position:absolute;bottom:-20px;width:var(--s,6px);height:var(--s,6px);border-radius:50%;background:var(--c,rgba(11,141,150,.35));animation:rise-pt var(--t,22s) linear infinite;animation-delay:var(--dl,0s)}
@keyframes rise-pt{0%{transform:translateY(0);opacity:0}10%,85%{opacity:1}100%{transform:translateY(-1000px) translateX(var(--x,30px));opacity:0}}
.cam-layer.near .blur{border-radius:50%;filter:blur(18px);background:radial-gradient(circle,rgba(168,228,75,.55),transparent 70%)}

@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}