/* Movimento apenas na apresentacao. Numeros e linhas de dados ficam estaveis. */
:root { --motion-time: 180ms; --motion-ease: cubic-bezier(.2,.7,.2,1); }
.motion-preview { padding:8px 18px; background:#eaf1f8; color:#254b70; font:500 12px/1.5 system-ui; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:8px; border-bottom:1px solid #ccd9e6; }
.motion-preview button { border:1px solid #9aafc4; border-radius:8px; background:white; color:#254b70; padding:6px 10px; cursor:pointer; font:inherit; }
.motion-preview button:focus-visible { outline:3px solid #35628f; outline-offset:3px; }
.motion-preview { position:sticky; top:0; z-index:70; }
.topbar { top:var(--preview-height,48px); }
html[data-motion="on"] :is(.btn,.horus-gestao .button,.ct-tabs button,.ex-section-tabs a) { transition:box-shadow var(--motion-time),background-color var(--motion-time),border-color var(--motion-time); }
html[data-motion="on"] :is(.horus-gestao .kpi,.tile,.ct-saved article,.ex-focus) { transition:transform var(--motion-time) var(--motion-ease),box-shadow var(--motion-time),border-color var(--motion-time); }
@media(hover:hover) and (pointer:fine) {
  html[data-motion="on"] :is(.horus-gestao .kpi,.tile,.ct-saved article):hover { transform:translateY(-3px); box-shadow:0 10px 26px #2344681a; }
  html[data-motion="on"] :is(.btn,.horus-gestao .button):not(:disabled):hover { box-shadow:0 4px 12px #23446820; }
}
html[data-motion="on"] .motion-enter { animation:horus-enter 220ms var(--motion-ease) both; }
html[data-motion="on"] .horus-gestao #base[open] { animation:horus-drawer 240ms var(--motion-ease) both; }
html[data-motion="on"] :is(.modal,dialog:not(#base))[open],html[data-motion="on"] .modal { animation:horus-enter 180ms var(--motion-ease) both; }
html[data-motion="on"] .ct-chip { animation:horus-enter 160ms var(--motion-ease) both; }
html[data-motion="on"] .horus-gestao .plot { animation:horus-chart 200ms ease-out; }
.horus-gestao .numero { font-variant-numeric:tabular-nums; }
@keyframes horus-enter { from { opacity:.6; transform:translateY(7px); } to { opacity:1; transform:translateY(0); } }
@keyframes horus-drawer { from { opacity:.6; transform:translateX(24px); } to { opacity:1; transform:translateX(0); } }
@keyframes horus-chart { from { opacity:.65; } to { opacity:1; } }
html[data-motion="off"] *,html[data-motion="off"] *::before,html[data-motion="off"] *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}
@media print { .motion-preview { display:none; } }

/* Segunda proposta: composicao visivel mesmo sem hover ou movimento. */
.motion-stage { position:relative; isolation:isolate; overflow:hidden; display:grid; grid-template-columns:1.15fr 1fr; min-height:360px; margin:0 0 30px; border:1px solid #49617e66; border-radius:26px; padding:38px; color:#f4f7fc; background:radial-gradient(ellipse at 85% 15%,#36577980,transparent 55%),linear-gradient(125deg,#0b1522,#14263b 60%,#171a27); box-shadow:0 20px 50px #08132120; }
.motion-stage::before { content:''; position:absolute; inset:0; z-index:-1; opacity:.18; background-image:linear-gradient(#88aacc22 1px,transparent 1px),linear-gradient(90deg,#88aacc22 1px,transparent 1px); background-size:44px 44px; mask-image:linear-gradient(90deg,transparent,#000); }
.motion-eyebrow { color:#a9c7e8; font-size:10px; letter-spacing:2.2px; font-weight:700; }
.motion-stage h2 { font-size:clamp(26px,3.2vw,46px); line-height:1.12; letter-spacing:-1.7px; margin:22px 0 16px; color:#fff; }
.motion-stage p { max-width:460px; color:#c3d1df; font-size:14px; line-height:1.7; }
.motion-stage nav { display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.motion-stage nav a { color:white; background:#ffffff0d; border:1px solid #b8cde333; border-radius:9px; padding:10px 15px; text-decoration:none; font-size:12px; }
.motion-stage nav a:hover { background:#ffffff20; border-color:#9ab6d5; }
.motion-stage nav a:focus-visible { outline:3px solid #fff; outline-offset:4px; }
.motion-scene { position:relative; min-height:295px; perspective:900px; }
.motion-core { position:absolute; inset:80px auto auto 40%; width:116px; height:116px; display:flex; align-items:center; justify-content:center; flex-direction:column; font-size:54px; font-weight:300; background:radial-gradient(circle,#40688955,#142335); border:1px solid #89badb77; border-radius:50%; box-shadow:0 0 70px #6ba9e633; }
.motion-core span { font-size:5px; letter-spacing:1px; }
.motion-orbit { position:absolute; left:22%; top:28px; width:235px; height:235px; border:1px solid #8cb1d544; border-radius:50%; transform:rotateX(55deg) rotateZ(-30deg); }
.motion-orbit.second { transform:rotateY(55deg) rotateZ(40deg); }
.motion-float { position:absolute; width:170px; border:1px solid #9bb7d34d; border-radius:14px; background:linear-gradient(140deg,#344b63ee,#152235ee); padding:16px; box-shadow:0 18px 30px #0005; color:#9cbbdb; font-size:10px; }
.motion-float b { display:block; color:#fff; font-size:17px; margin:7px 0; }
.motion-float small { color:#c0cfdf; font-size:10px; }
.motion-float.one { left:0; top:4px; transform:rotate(-5deg); }
.motion-float.two { right:-8px; top:86px; transform:rotate(5deg); }
.motion-float.three { left:12%; bottom:0; transform:rotate(-3deg); }
html[data-motion="on"] .motion-float { animation:horus-float 6s ease-in-out infinite alternate; }
html[data-motion="on"] .motion-float.two { animation-delay:-2s; }
html[data-motion="on"] .motion-float.three { animation-delay:-4s; }
@keyframes horus-float { from { translate:0 -7px; } to { translate:0 9px; } }
.horus-gestao .kpi { border-radius:18px; padding:22px; border-top:3px solid #527da5; background:linear-gradient(135deg,var(--card),var(--seq-soft)); }
.horus-gestao .kpi .numero { font-size:34px; letter-spacing:-1px; }
.ct-search { border-radius:18px; box-shadow:0 10px 32px #25446112; border-top:3px solid #527da5; }
.ex-focus { border-radius:22px; box-shadow:0 14px 35px #25446112; }
.ex-focus-queue>a { padding:16px; margin-bottom:8px; border:1px solid var(--line); border-radius:12px; background:var(--card); }
@media(max-width:900px) { .motion-stage { grid-template-columns:1fr; padding:26px; } .motion-scene { max-width:440px; width:100%; margin:24px auto 0; } .motion-stage h2 { font-size:34px; } }
@media(max-width:420px) { .motion-float { width:140px; padding:12px; } .motion-core { left:34%; } .motion-orbit { left:8%; } }
@media(prefers-reduced-motion:reduce) { .motion-float { animation:none!important; } }