/* Tecela AI · hero "o caminho de um dado" (v4.2): um filme de ~17 s no palco à direita do hero.
   Banco de dados → API → interface → automação → agente de IA com memória → decisão → o T.
   Uma frase por cena; o dado que viaja é o único elemento em cobre. Movimento em hero-film.js.
   Sem script, a marca estática ocupa o palco. Site em tema escuro. */

[data-hf-host] {
  --hf-card:rgba(12,24,43,.97); --hf-line:rgba(98,155,255,.22); --hf-line-2:rgba(98,155,255,.4);
  --hf-ink:#EAF2FF; --hf-ink-2:#A9BCD6; --hf-ink-3:#7189A8; --hf-blue:#629BFF; --hf-copper:#ED9C55; --hf-green:#6FE3B5;
  position:relative; overflow:hidden; isolation:isolate;
  background:radial-gradient(ellipse 55% 65% at 76% 44%,#10264A 0%,transparent 70%),var(--bg);
}
[data-hf-host]>.container {position:relative;z-index:1}
.hf-canvas {position:absolute;inset:0;z-index:0;width:100%;height:100%;pointer-events:none}
.home-hero[data-hf-host]::before {content:none!important}

/* ---------- Palco ---------- */
.home-hero .hf-stage {position:relative;min-height:clamp(440px,44vw,600px);padding:0}
.home-hero .hf-stage::before {display:none}
.hf-mark {position:absolute;left:50%;top:46%;width:min(46%,260px);aspect-ratio:1;translate:-50% -50%}
.hf-mark path {fill:#629BFF}
.hf-scenes {position:absolute;inset:0 0 56px}
[data-hf-host]:not(.hf-live) .hf-scenes,[data-hf-host]:not(.hf-live) .hf-route {display:none}
[data-hf-host].hf-live .hf-mark {display:none}
[data-hf-host].hf-pre .hf-mark {opacity:0;animation:hf-failsafe 0s linear 3s forwards}
/* A faixa de disciplinas espera o filme: o script a traz de volta no fim (e o failsafe, se o script não rodar). */
[data-hf-host].hf-pre .discipline-strip {opacity:0;animation:hf-failsafe 0s linear 3s forwards}
@keyframes hf-failsafe {to {opacity:1}}

/* Cada cena fica no centro do palco; o script cuida da entrada, da saída e dos detalhes. */
.hf-scenes>* {position:absolute;left:50%;top:52%;translate:-50% -50%;opacity:0;will-change:transform,opacity}
.hf-card {z-index:2;width:min(400px,92%);border-radius:18px;background:var(--hf-card);border:1px solid var(--hf-line);
  box-shadow:0 30px 70px #02081499,0 0 0 1px #ffffff05 inset;color:var(--hf-ink);padding:22px 24px 24px;backdrop-filter:blur(6px)}
.hf-label {display:block;margin-bottom:16px;font:600 12px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--hf-ink-3)}

/* 1 · banco de dados: duas linhas apagadas e o pedido novo aceso */
.hf-db {left:46%}
.hf-skel {display:grid;grid-template-columns:1.4fr 1fr .7fr;gap:14px;padding:13px 16px;opacity:0}
.hf-skel i {height:8px;border-radius:4px;background:#1B2F4B}
.hf-row {position:relative;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px 16px;border-radius:12px;border:1px solid var(--hf-line-2);opacity:0}
.hf-row::before {content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,rgba(98,155,255,.2),rgba(98,155,255,.03));opacity:var(--hot,0)}
.hf-row b {position:relative;font:700 19px var(--font-sans);letter-spacing:-.01em;color:var(--hf-ink)}
.hf-new {position:relative;font:700 12.5px var(--font-sans);font-style:normal;padding:4px 11px;border-radius:99px;color:var(--hf-copper);background:rgba(237,156,85,.12);border:1px solid rgba(237,156,85,.38)}

/* 2 · API */
.hf-api {left:55%}
.hf-req {display:flex;align-items:center;gap:12px;font:600 18px var(--font-mono);color:var(--hf-ink);opacity:0}
.hf-req b {font-size:12px;padding:5px 9px;border-radius:6px;background:#1C3A66;color:#CFE3FF;letter-spacing:.04em}
.hf-res {display:flex;align-items:center;gap:11px;margin-top:18px;padding-top:16px;border-top:1px solid #1B2F4B;font:600 16px var(--font-sans);color:var(--hf-green);opacity:0}
.hf-res i {flex:none;width:22px;height:22px;border-radius:50%;background:var(--hf-green);position:relative}
.hf-res i::after {content:"";position:absolute;left:7px;top:3.5px;width:5px;height:10px;border-right:2px solid #0A1424;border-bottom:2px solid #0A1424;rotate:45deg}

/* 3 · interface */
.hf-note {display:flex;align-items:center;gap:16px;opacity:0}
.hf-note>i {flex:none;width:48px;height:48px;border-radius:14px;background:#1C3A66;position:relative}
.hf-note>i::after {content:"";position:absolute;left:17px;top:12px;width:9px;height:17px;border-right:3px solid var(--hf-blue);border-bottom:3px solid var(--hf-blue);rotate:45deg}
.hf-note b {display:block;font:700 20px var(--font-sans);letter-spacing:-.015em;color:var(--hf-ink)}
.hf-note small {display:block;margin-top:4px;font-size:14.5px;color:var(--hf-ink-2)}

/* 4 · automação */
.hf-flow {width:min(540px,96%);aspect-ratio:400/220}
.hf-flow-links {position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hf-flow-links path {fill:none;stroke:rgba(98,155,255,.3);stroke-width:1.6;stroke-dasharray:var(--len,400);stroke-dashoffset:var(--off,400);vector-effect:non-scaling-stroke}
.hf-node {position:absolute;left:var(--x);top:var(--y);translate:-50% -50%;display:flex;align-items:center;gap:10px;padding:11px 16px 11px 11px;border-radius:12px;
  background:var(--hf-card);border:1px solid var(--hf-line);box-shadow:0 14px 34px #02081480;white-space:nowrap;opacity:0}
.hf-node i {width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:#1B2F4B;color:var(--hf-ink-2);transition:background .25s,color .25s}
.hf-node svg {width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.hf-node b {font-size:15px;font-weight:650;color:var(--hf-ink)}
.hf-node.is-lit {border-color:var(--hf-line-2)}
.hf-node.is-lit i {background:var(--hf-blue);color:#0A1424}

/* 5 · agente e memória */
.hf-agent {width:min(520px,96%);aspect-ratio:1.25}
.hf-orb {position:absolute;left:36%;top:40%;width:120px;height:120px;translate:-50% -50%}
.hf-orb i {position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(98,155,255,.45)}
.hf-orb i:nth-child(2) {inset:-18px;border-color:rgba(98,155,255,.25);border-style:dashed}
.hf-orb i:nth-child(3) {inset:-40px;border-color:rgba(98,155,255,.12)}
.hf-orb b {position:absolute;inset:22px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#EAF4FF,#629BFF 45%,#2459DB 100%);box-shadow:0 0 50px #629BFFAA,0 0 120px #629BFF55}
.hf-mem {position:absolute;left:76%;top:38%;width:170px;height:170px;translate:-50% -50%}
.hf-mem-label {position:absolute;left:50%;bottom:-26px;translate:-50% 0;font:600 12px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--hf-ink-3)}
.hf-dot {position:absolute;width:6px;height:6px;border-radius:50%;background:#35557F;translate:-50% -50%;transition:background .3s,box-shadow .3s}
.hf-dot.is-hit {background:var(--hf-blue);box-shadow:0 0 12px var(--hf-blue)}
.hf-answer {position:absolute;left:50%;top:84%;translate:-50% -50%;width:max-content;max-width:100%;margin:0;padding:14px 18px;border-radius:14px;background:var(--hf-card);border:1px solid var(--hf-line-2);
  font:650 17px/1.4 var(--font-sans);color:var(--hf-ink);box-shadow:0 18px 40px #02081499;min-height:2.9em;opacity:0}

/* 6 · decisão */
.hf-final {width:min(380px,90%)}
.hf-final b {display:block;font-size:21px;line-height:1.25;letter-spacing:-.02em;margin-bottom:20px;opacity:0}
.hf-actions {display:flex;gap:8px}
.hf-btn {padding:10px 18px;border-radius:9px;background:var(--hf-blue);color:#0A1424;font:700 14px var(--font-sans)}
.hf-btn.ghost {background:transparent;color:var(--hf-ink);border:1px solid var(--hf-line-2)}

/* 7 · o T */
.hf-t {width:min(52%,300px);aspect-ratio:1;top:50%;z-index:3;overflow:visible}
.hf-t path {fill:#629BFF}

/* ---------- Trajeto (as seis paradas) ---------- */
.hf-route {position:absolute;left:0;right:48px;bottom:10px;display:flex;justify-content:space-between;list-style:none;margin:0;padding:0;opacity:0}
.hf-route::before {content:"";position:absolute;left:8px;right:8px;top:7px;height:1px;background:rgba(98,155,255,.2)}
.hf-route::after {content:"";position:absolute;left:8px;top:7px;height:1px;width:calc((100% - 16px) * var(--hf-progress,0));background:var(--hf-blue)}
.hf-route li {position:relative;z-index:1;margin:0;display:grid;justify-items:center;gap:8px;font:600 12px var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--hf-ink-3);transition:color .35s}
.hf-route li::before {content:"";width:15px;height:15px;border-radius:50%;background:var(--bg);border:1.5px solid rgba(98,155,255,.35);transition:all .35s}
.hf-route li.is-done::before {background:var(--hf-blue);border-color:var(--hf-blue)}
.hf-route li.is-on {color:var(--hf-ink)}
.hf-route li.is-on::before {background:var(--bg);border:4px solid var(--hf-blue);box-shadow:0 0 0 5px rgba(98,155,255,.18)}

/* ---------- Controle ---------- */
.hf-toggle {position:absolute;right:0;bottom:4px;z-index:4;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(245,247,252,.18);background:rgba(10,20,36,.7);color:var(--fg-2);cursor:pointer;backdrop-filter:blur(6px)}
.hf-toggle:hover {color:var(--fg);border-color:rgba(98,155,255,.6)}
.hf-toggle:focus-visible {outline:2px solid var(--accent);outline-offset:3px}
.hf-toggle svg {width:14px;height:14px;display:none}
.hf-toggle[data-state="playing"] .i-pause,.hf-toggle[data-state="paused"] .i-play,.hf-toggle[data-state="ended"] .i-replay {display:block}

/* ---------- Faixa de disciplinas ---------- */
.home-hero .discipline-strip {display:flex;flex-wrap:wrap;justify-content:space-between;gap:0;padding-block:22px 30px;margin-top:8px;position:relative;border-top:0}
.home-hero .discipline-strip::before {content:"";position:absolute;top:0;left:var(--gutter);right:var(--gutter);height:1px;background:color-mix(in srgb,var(--fg) 10%,transparent)}
.home-hero .discipline-strip span {display:flex;align-items:center;gap:10px;font-size:13px;font-weight:500;color:var(--fg-2);letter-spacing:-.01em;padding:4px 0}
.home-hero .discipline-strip span+span::before {content:"";width:1px;height:18px;background:color-mix(in srgb,var(--fg) 14%,transparent);margin-right:clamp(10px,2.4vw,34px)}
.home-hero .discipline-strip svg {width:18px;height:18px;flex:none;color:var(--accent);stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

@media(max-width:960px) {
  .home-hero .hf-stage {min-height:430px;margin-top:-4px}
  .hf-route {right:48px}
  .hf-route li:not(.is-on) {color:transparent}
  .home-hero .discipline-strip {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 10px;padding-block:20px 28px}
  .home-hero .discipline-strip span+span::before {display:none}
  .home-hero .discipline-strip span {font-size:12.5px;min-width:0;flex-direction:column;align-items:flex-start;gap:7px;line-height:1.3;overflow-wrap:anywhere}
}
@media(max-width:600px) {
  .hf-toggle {width:44px;height:44px;bottom:0}
  .hf-card {padding:18px 18px 20px}
  .hf-row b,.hf-note b {font-size:17px}
  .hf-req {font-size:15px}
  .hf-res {font-size:14.5px}
  .hf-final b {font-size:18px}
  .hf-orb {width:92px;height:92px}
  .hf-mem {width:130px;height:130px}
  .hf-answer {font-size:15px;white-space:normal;width:90%}
  .hf-node b {font-size:13px}
  .hf-node {padding:8px 11px 8px 8px}
}
@media(max-width:380px) {.home-hero .discipline-strip {grid-template-columns:repeat(2,minmax(0,1fr))}}