/* ═══════════════════════════════════════════════════════════════════════
   Visuais temáticos das páginas de projeto (views/visuals/<slug>.eta)
   HTML + CSS puro, sem imagens: leve, nítido e na cor do projeto.
   Tudo escala com `em`, e o tamanho-base vem de cqw (o palco é um container).
   Para criar um novo: docs/COMO-ADICIONAR-PROJETO.md
   ═══════════════════════════════════════════════════════════════════════ */

.vz { position: absolute; inset: 0; display: grid; place-items: center; font-size: 3cqw; line-height: 1.4; color: var(--ink); }
.vz *, .vz *::before, .vz *::after { box-sizing: border-box; }
.vz-panel { background: rgb(5 9 7 / .6); border: 1px solid var(--line); border-radius: 1.2em; box-shadow: 0 1.2em 3em -1.2em rgb(0 0 0 / .75); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.vz-bar { display: flex; align-items: center; gap: .4em; padding: .75em 1em; border-bottom: 1px solid var(--line); font: 500 .72em/1 var(--mono); color: var(--ink-3); }
.vz-bar i { width: .8em; height: .8em; border-radius: 50%; background: rgb(255 255 255 / .18); }
.vz-bar span { margin-left: .5em; }
.sk { display: block; height: .55em; margin: .35em 0; border-radius: .3em; background: rgb(255 255 255 / .13); }
.vz .i { width: 1.1em; height: 1.1em; }

/* digitação em loop (linhas de terminal) */
.vt { display: block; width: 0; overflow: hidden; white-space: pre; animation: vtype 11s infinite both steps(var(--n)); animation-delay: var(--d); }
@keyframes vtype { 0% { width: 0; } 22%, 86% { width: calc(var(--n) * 1ch); } 96%, 100% { width: 0; } }
.vt.dim { color: var(--ink-3); }
.m { font-style: normal; font-weight: 700; margin-right: .5ch; }
.m.post { color: #60a5fa; }

/* ═════════ Pomodoro: anel de contagem regressiva e player ═════════ */
.vz-pomodoro { display: block; }
.pomo { position: absolute; top: 7%; left: 27%; width: 46%; aspect-ratio: 1; }
.pomo svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.pomo__track { fill: none; stroke: rgb(255 255 255 / .09); stroke-width: 9; }
.pomo__bar { fill: none; stroke: url(#pomo-g); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; filter: drop-shadow(0 0 .5em var(--accent)); animation: pomo-run 12s linear infinite; }
@keyframes pomo-run { to { stroke-dashoffset: 100; } }
.pomo__time { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: .3em; }
.pomo__badge { padding: .2em .9em; border-radius: 999px; font: 600 .72em/1.3 var(--mono); color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); }
.pomo__digits { height: 1.15em; overflow: hidden; font: 800 3.1em/1.15 var(--font); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.pomo__roll { animation: pomo-roll 12s steps(6) infinite; }
.pomo__roll span { display: block; height: 1.15em; text-align: center; }
@keyframes pomo-roll { to { transform: translateY(-100%); } }
.pomo__player { position: absolute; bottom: 6%; left: 50%; display: flex; align-items: center; gap: .8em; padding: .65em 1.1em; transform: translateX(-50%); white-space: nowrap; }
.pomo__yt { display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%; color: #06100a; background: var(--accent); }
.pomo__yt .i { width: .8em; height: .8em; fill: currentColor; }
.pomo__player small { color: var(--ink-2); font-size: .8em; }
.eq { display: flex; align-items: flex-end; gap: .22em; height: 1.4em; }
.eq i { width: .28em; height: 100%; border-radius: .2em; background: var(--accent); transform-origin: bottom; animation: eq 1s ease-in-out infinite alternate; animation-delay: calc(var(--k) * -.19s); }
@keyframes eq { from { transform: scaleY(.2); } to { transform: scaleY(1); } }

/* ═════════ Frases: cartão que troca de frase ═════════ */
.vz-frases { align-content: center; gap: 1.2em; }
.quote { position: relative; width: 80%; padding: 2.2em 2em 1.4em; overflow: hidden; }
.quote__mark { position: absolute; top: -.15em; left: .35em; font: 800 6em/1 Georgia, serif; color: var(--accent); opacity: .3; }
.quote__stack { position: relative; min-height: 8em; }
.quote__item { position: absolute; inset: 0; opacity: 0; animation: qcycle 15s infinite both; animation-delay: calc(var(--k) * 5s); }
.quote__item p { margin: 0 0 .8em; font-size: 1.3em; font-weight: 600; line-height: 1.35; letter-spacing: -.01em; }
.quote__item cite { font-style: normal; font-size: .9em; color: var(--accent); }
.quote__item cite::before { content: '— '; }
@keyframes qcycle { 0% { opacity: 0; transform: translateY(.7em); } 5%, 30% { opacity: 1; transform: none; } 35%, 100% { opacity: 0; transform: translateY(-.7em); } }
.quote__url { display: block; padding-top: 1em; border-top: 1px solid var(--line); font: 400 .7em/1 var(--mono); color: var(--ink-3); }
.quote__actions { display: flex; gap: .8em; }
.pill { display: inline-flex; align-items: center; gap: .5em; padding: .7em 1.3em; border-radius: 999px; font-weight: 600; font-size: .85em; background: rgb(255 255 255 / .08); border: 1px solid var(--line); animation: press 5s infinite; }
.pill--accent { color: #06100a; background: var(--accent); border-color: transparent; animation-delay: -2.5s; }
@keyframes press { 0%, 86%, 100% { transform: none; } 92% { transform: scale(.93); } }

/* ═════════ Mega Generator: JSON sendo gerado ═════════ */
.mega { width: 84%; overflow: hidden; }
.mega__chips { display: flex; flex-wrap: wrap; gap: .45em; padding: 1em 1.1em 0; }
.mega__chips span { padding: .25em .75em; border-radius: .6em; font: 500 .72em/1.4 var(--mono); color: var(--ink-2); border: 1px solid var(--line); background: rgb(255 255 255 / .04); }
.mega__chips .on { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.mega__json { padding: 1em 1.1em; font: 400 .82em/1.85 var(--mono); }
.mega .ln { display: block; white-space: pre; opacity: 0; animation: lnin 9s infinite both; animation-delay: calc(var(--k) * .45s); }
.mega b { color: var(--accent); font-weight: 400; }
.mega u { color: var(--accent-2); text-decoration: none; }
@keyframes lnin { 0%, 2% { opacity: 0; transform: translateX(-.8em); } 8%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
.mega__btn { display: inline-flex; align-items: center; gap: .5em; margin: 0 1.1em 1.1em; padding: .6em 1.1em; border-radius: 999px; font-weight: 600; font-size: .8em; color: #06100a; background: var(--accent); animation: press 4.5s infinite; }

/* ═════════ Feed de Tecnologia: livro aberto virando página ═════════ */
.vz-feed { align-content: center; gap: 1.4em; }
.bk { position: relative; width: 88%; aspect-ratio: 1.58; perspective: 80em; filter: drop-shadow(0 1.2em 1.4em rgb(0 0 0 / .55)); }
.bk__half, .bk__face { padding: 1.3em 1.2em 1em; display: flex; flex-direction: column; gap: .5em; color: #3b3226; background: linear-gradient(180deg, #f8f1e2, #efe5cf); }
.bk__half { position: absolute; top: 0; bottom: 0; width: 50%; overflow: hidden; box-shadow: 0 .16em 0 #e2d8c1, 0 .32em 0 #cdc1a8; }
.bk__half--l { left: 0; border-radius: .45em 0 0 .45em; background: linear-gradient(90deg, #f3ead6, #f8f1e2 80%, #d8ccb2); }
.bk__half--r { right: 0; border-radius: 0 .45em .45em 0; background: linear-gradient(90deg, #d8ccb2, #f8f1e2 20%, #f3ead6); }
.bk__run { font: 500 .62em/1 var(--mono); text-transform: uppercase; letter-spacing: .14em; color: #8a7a60; }
.bk i { display: block; height: .5em; margin: .22em 0; border-radius: .25em; background: rgb(59 50 38 / .34); }
.bk__title i { height: .85em; background: rgb(59 50 38 / .8); }
.bk__by i { height: .38em; background: color-mix(in srgb, var(--accent) 70%, #5a3d10); }
.bk__title { margin-top: .4em; }
.bk__text { position: relative; display: block; margin-top: .5em; }
.bk__drop { position: absolute; left: 0; top: -.12em; font: 800 2.6em/.95 Georgia, serif; color: color-mix(in srgb, var(--accent) 75%, #5a3d10); }
.bk__text:has(.bk__drop) > i:nth-of-type(-n + 3) { margin-left: 2.3em; max-width: calc(100% - 2.3em); }
.bk__folio { margin-top: auto; align-self: center; font: 500 .62em/1 var(--mono); font-style: normal; color: #8a7a60; }
.bk__leaf { position: absolute; top: 0; right: 0; bottom: 0; width: 50%; transform-origin: left center; transform-style: preserve-3d; animation: bk-flip 7s ease-in-out infinite; }
.bk__face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 .16em 0 #e2d8c1, 0 .32em 0 #cdc1a8; animation: bk-fade 7s linear infinite; }
.bk__face--front { border-radius: 0 .45em .45em 0; background: linear-gradient(90deg, #d8ccb2, #f8f1e2 20%, #f3ead6); }
.bk__face--back { transform: rotateY(180deg); border-radius: .45em 0 0 .45em; background: linear-gradient(90deg, #f3ead6, #f8f1e2 80%, #d8ccb2); }
.bk__shade { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, rgb(0 0 0 / .35), transparent 60%); opacity: 0; animation: bk-shade 7s ease-in-out infinite; pointer-events: none; backface-visibility: hidden; }
@keyframes bk-flip {
	0%, 38% { transform: rotateY(0); }
	58%, 100% { transform: rotateY(-180deg); }
}
/* O fade fica nas faces: opacity animada na própria folha achataria o 3D e a frente apareceria espelhada */
@keyframes bk-fade { 0% { opacity: 0; } 3%, 92% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes bk-shade { 0%, 38% { opacity: 0; } 48% { opacity: .9; } 58%, 100% { opacity: 0; } }
.bk__mode { display: inline-flex; gap: .2em; padding: .25em; border-radius: 999px; font: 600 .78em/1 var(--font); background: rgb(5 9 7 / .6); border: 1px solid var(--line); }
.bk__mode span { display: inline-flex; align-items: center; gap: .45em; padding: .55em 1.1em; border-radius: 999px; color: var(--ink-2); }
.bk__mode .on { color: #1d1303; background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.bk__mode .i { width: 1em; height: 1em; }
.feed__ping { position: absolute; top: 9%; right: 7%; width: 2.6em; height: 2.6em; border-radius: 50%; border: 2px solid var(--accent); animation: ripple 2.4s ease-out infinite; }
@keyframes ripple { from { transform: scale(.4); opacity: .8; } to { transform: scale(2.6); opacity: 0; } }
@keyframes scroll-up { to { transform: translateY(-50%); } }

/* ═════════ DynDB: bancos e requisições ═════════ */
.vz-dyndb { align-content: center; gap: 1.6em; }
.dbs { display: flex; gap: 2.6em; }
.db { display: grid; justify-items: center; gap: .5em; animation: dbpulse 6s ease-in-out infinite; animation-delay: calc(var(--k) * 2s); }
.db svg { width: 3.4em; height: 4em; fill: color-mix(in srgb, var(--accent) 10%, transparent); stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 .5em color-mix(in srgb, var(--accent) 60%, transparent)); }
.db small { font: 400 .68em/1 var(--mono); color: var(--ink-3); }
@keyframes dbpulse { 0%, 100% { transform: none; opacity: .6; } 12%, 30% { transform: translateY(-.6em); opacity: 1; } 45% { transform: none; opacity: .6; } }
.cli { width: 82%; overflow: hidden; }
.cli__body { padding: 1em 1.1em 1.2em; font: 400 .78em/2 var(--mono); min-height: 10.4em; }

/* ═════════ ProtonUnity: jogadores conectados por WebRTC ═════════ */
.vz-proton { display: block; }
.net { position: absolute; inset: 0; width: 100%; height: 100%; }
.net line { stroke: color-mix(in srgb, var(--accent) 55%, transparent); stroke-width: 1.5; stroke-dasharray: 4 6; vector-effect: non-scaling-stroke; animation: march 1.4s linear infinite; }
@keyframes march { to { stroke-dashoffset: -20; } }
.pk { position: absolute; width: .9em; height: .9em; margin: -.45em 0 0 -.45em; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 1em var(--accent-2); animation: 3.2s linear infinite; }
.pk1 { animation-name: pk1; } .pk2 { animation-name: pk2; animation-delay: -.8s; } .pk3 { animation-name: pk3; animation-delay: -1.6s; }
.pk4 { animation-name: pk4; animation-delay: -2.4s; } .pk5 { animation-name: pk5; animation-delay: -1s; } .pk6 { animation-name: pk6; animation-delay: -2s; }
@keyframes pk1 { from { left: 15%; top: 24%; } to { left: 85%; top: 24%; } }
@keyframes pk2 { from { left: 85%; top: 24%; } to { left: 85%; top: 76%; } }
@keyframes pk3 { from { left: 85%; top: 76%; } to { left: 15%; top: 76%; } }
@keyframes pk4 { from { left: 15%; top: 76%; } to { left: 15%; top: 24%; } }
@keyframes pk5 { from { left: 15%; top: 24%; } to { left: 85%; top: 76%; } }
@keyframes pk6 { from { left: 85%; top: 24%; } to { left: 15%; top: 76%; } }
.hub { position: absolute; top: 50%; left: 50%; display: grid; place-content: center; justify-items: center; width: 7.6em; height: 7.6em; border-radius: 50%; transform: translate(-50%, -50%); text-align: center; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 26%, #050805), #050805 72%); border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); animation: hub 3.2s ease-in-out infinite; }
.hub b { font-size: .95em; }
.hub small { font: 400 .62em/1.3 var(--mono); color: var(--ink-2); }
@keyframes hub { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); } 50% { box-shadow: 0 0 0 1.4em transparent, 0 0 2.4em color-mix(in srgb, var(--accent) 40%, transparent); } }
.peer { position: absolute; width: 21%; transform: translate(-50%, -50%); overflow: hidden; animation: bob 5s ease-in-out infinite; animation-delay: calc(var(--k) * -1.2s); }
.peer .vz-bar { padding: .45em .6em; }
.peer .vz-bar i { width: .5em; height: .5em; }
.peer__scene { position: relative; height: 4.6em; }
.peer__scene i { position: absolute; border-radius: 50%; }
.peer__scene .a { width: 1.2em; height: 1.2em; left: 20%; top: 40%; background: var(--accent); animation: roam 4s ease-in-out infinite alternate; }
.peer__scene .b { width: .8em; height: .8em; right: 22%; bottom: 20%; background: var(--accent-2); animation: roam 5s ease-in-out infinite alternate-reverse; }
.peer__scene span { position: absolute; right: .6em; top: .4em; font: 500 .62em/1 var(--mono); color: var(--ink-3); }
@keyframes bob { 50% { transform: translate(-50%, calc(-50% - .5em)); } }
@keyframes roam { to { transform: translate(1.6em, -1em); } }

/* ═════════ Triazen: feed cronológico ═════════ */
.tz { width: 74%; overflow: hidden; }
.tz__top { display: flex; align-items: center; justify-content: space-between; padding: .8em 1.1em; border-bottom: 1px solid var(--line); }
.tz__top b { font-size: 1.1em; letter-spacing: -.03em; color: var(--accent); }
.tz__top small { margin-left: .2em; font-size: .5em; color: var(--ink-2); font-weight: 600; }
.tz__nav { display: flex; gap: .5em; }
.tz__nav i { width: 1em; height: 1em; border-radius: .3em; background: rgb(255 255 255 / .16); }
.tz__quote { margin: .8em 1.1em; padding: .6em .9em; border-radius: .8em; background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); }
.tz__quote small { display: block; margin-bottom: .2em; font-weight: 700; font-size: .72em; }
.tz__view { height: 14.6em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 82%, transparent); mask-image: linear-gradient(#000 82%, transparent); }
.tz__list { animation: scroll-up 18s linear infinite; }
.tz__post { height: 7.3em; margin: 0 1.1em .6em; padding: .8em .9em; border-radius: .9em; background: rgb(255 255 255 / .05); border: 1px solid var(--line); }
.tz__who { display: flex; align-items: center; gap: .7em; margin-bottom: .5em; }
.tz__who i { width: 2em; height: 2em; border-radius: 50%; background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 40%, #000)); }
.tz__who small { font: 400 .62em/1 var(--mono); color: var(--ink-3); }
.tz__who .sk { margin: 0 0 .25em; }
.tz__foot { display: flex; align-items: center; gap: .5em; margin-top: .5em; }
.like { display: grid; color: var(--ink-3); }
.like .i { width: 1em; height: 1em; }
.like--pop { color: #f87171; animation: heart 4s infinite; }
.like--pop .i { fill: currentColor; }
@keyframes heart { 0%, 70%, 100% { transform: none; } 80% { transform: scale(1.5); } 90% { transform: scale(.95); } }

/* ═════════ Video Alerta Bot: conversa no Telegram ═════════ */
.chat { width: 72%; max-height: 94%; overflow: hidden; }
.chat__head { display: flex; align-items: center; gap: .8em; padding: .9em 1.1em; border-bottom: 1px solid var(--line); }
.chat__head b { display: block; font-size: .92em; line-height: 1.2; }
.chat__head small { color: var(--ink-3); font-size: .7em; }
.chat__avatar { display: grid; place-items: center; width: 2.4em; height: 2.4em; border-radius: 50%; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.chat__body { display: grid; gap: .6em; padding: .9em; align-content: start; }
.bubble { width: 92%; padding: .65em .8em; border-radius: .3em 1.1em 1.1em 1.1em; background: rgb(255 255 255 / .08); opacity: 0; animation: pop 12s infinite both; animation-delay: calc(var(--k) * 1.6s); }
.bubble__title { display: flex; align-items: center; gap: .5em; margin: 0 0 .45em; font-weight: 700; font-size: .85em; color: var(--accent); }
.bubble .sk { margin: .3em 0; }
.bubble__link { display: inline-block; margin-top: .4em; font-size: .75em; font-weight: 600; color: var(--accent); }
.thumb { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 6.2; margin-bottom: .5em; border-radius: .7em; background: linear-gradient(135deg, #1f2937, #0b1220); overflow: hidden; }
.thumb::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 70% 30%, rgb(255 77 77 / .55), transparent 60%); }
.thumb__play { position: relative; display: grid; place-items: center; width: 2.6em; height: 2.6em; border-radius: 50%; color: #fff; background: #ff4d4d; }
.thumb__play .i { width: 1em; height: 1em; fill: currentColor; }
.thumb em { position: absolute; right: .5em; bottom: .4em; padding: .1em .45em; border-radius: .3em; font: 500 .62em/1.4 var(--mono); font-style: normal; background: rgb(0 0 0 / .7); }
.typing { display: flex; gap: .3em; width: fit-content; padding: .7em .9em; border-radius: 1em; background: rgb(255 255 255 / .08); opacity: 0; animation: pop 12s infinite both; animation-delay: calc(var(--k) * 1.6s); }
.typing i { width: .5em; height: .5em; border-radius: 50%; background: var(--ink-3); animation: dots 1s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes pop { 0% { opacity: 0; transform: translateY(1em) scale(.92); } 5%, 84% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; } }
@keyframes dots { 50% { transform: translateY(-.35em); background: var(--accent); } }

/* ═════════ Arkadon: tower defense com torres livres ═════════ */
.vz-ark { display: block; }
.map { position: absolute; inset: 0; width: 100%; height: 100%; }
.map__grid line { stroke: rgb(255 255 255 / .05); stroke-width: .25; }
.road { fill: none; stroke: rgb(255 255 255 / .09); stroke-width: 7; stroke-linejoin: round; }
.road--core { stroke: color-mix(in srgb, var(--accent-2) 35%, transparent); stroke-width: .8; stroke-dasharray: 2 3; animation: march 1.2s linear infinite; }
.tw { transform-box: fill-box; transform-origin: center; opacity: 0; animation: place 10s infinite both; animation-delay: calc(var(--k) * .9s); }
.tw__range { fill: color-mix(in srgb, var(--accent) 8%, transparent); stroke: color-mix(in srgb, var(--accent) 55%, transparent); stroke-width: .35; stroke-dasharray: 1.4 1.4; }
.tw__base { fill: #0b0f0d; stroke: var(--accent); stroke-width: .8; }
.tw__core { fill: var(--accent); }
@keyframes place { 0% { opacity: 0; transform: scale(0); } 5% { opacity: 1; transform: scale(1.25); } 8%, 88% { opacity: 1; transform: scale(1); } 96%, 100% { opacity: 0; transform: scale(.6); } }
.base { fill: color-mix(in srgb, var(--accent-2) 30%, #0b0f0d); stroke: var(--accent-2); stroke-width: .6; }
.en { position: absolute; width: 1.1em; height: 1.1em; margin: -.55em 0 0 -.55em; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 1em var(--accent-2); animation: walk 9s linear infinite; }
.en2 { animation-delay: -3s; } .en3 { animation-delay: -6s; }
@keyframes walk {
	0% { left: 0; top: 20%; } 19% { left: 32%; top: 20%; } 43% { left: 32%; top: 70%; }
	64.5% { left: 68%; top: 70%; } 81% { left: 68%; top: 35%; } 100% { left: 100%; top: 35%; }
}
.ark__label { position: absolute; left: 1.4em; bottom: 1.1em; padding: .35em .9em; border-radius: 999px; font: 500 .68em/1.4 var(--mono); color: var(--ink-2); background: rgb(5 9 7 / .65); border: 1px solid var(--line); }

/* ═════════ ChronoSaur: olho de dinossauro com relógio ═════════ */
.vz-chrono { align-content: center; gap: 1.2em; }
.vz-chrono::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 50%, transparent 40%, rgb(0 0 0 / .7)); animation: flicker 5s steps(1) infinite; }
.eye { width: 82%; filter: drop-shadow(0 0 1.4em color-mix(in srgb, var(--accent) 45%, transparent)); }
.eye__lid { transform-box: fill-box; transform-origin: center; animation: blink-eye 6s infinite; }
.eye__shape { fill: #0b0403; stroke: color-mix(in srgb, var(--accent) 60%, transparent); stroke-width: 1.5; }
.eye__ticks { transform-box: view-box; transform-origin: 100px 80px; animation: spin-back 24s linear infinite; }
.eye__ticks line { stroke: color-mix(in srgb, var(--accent-2) 90%, #fff); stroke-width: 1.4; stroke-linecap: round; }
.eye__hand { stroke: #fff; stroke-width: 1.4; stroke-linecap: round; opacity: .85; transform-origin: 100px 80px; animation: spin-back 6s linear infinite; }
.eye__pupil { fill: #050202; transform-box: fill-box; transform-origin: center; animation: pupil 5s ease-in-out infinite; }
@keyframes spin-back { to { transform: rotate(-360deg); } }
@keyframes pupil { 50% { transform: scaleX(1.5); } }
@keyframes blink-eye { 0%, 90%, 100% { transform: scaleY(1); } 94% { transform: scaleY(.06); } }
@keyframes flicker { 0%, 100% { opacity: 1; } 91% { opacity: .55; } 93% { opacity: 1; } 96% { opacity: .7; } }
.chrono__label { position: relative; z-index: 1; padding: .4em 1em; border-radius: 999px; font: 500 .72em/1.4 var(--mono); letter-spacing: .12em; color: var(--accent); background: rgb(5 5 5 / .7); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); animation: glitch 4s steps(1) infinite; }
@keyframes glitch { 0%, 100% { transform: none; } 92% { transform: translateX(-.25em); } 94% { transform: translateX(.3em); color: var(--accent-2); } 96% { transform: none; } }

/* ═════════ Clínica Home: agenda da semana ═════════ */
.cal { width: 90%; padding-bottom: .4em; }
.cal__head { display: flex; align-items: center; justify-content: space-between; padding: .9em 1.1em; }
.cal__head b { font-size: .95em; }
.cal__grid { position: relative; display: grid; grid-template-columns: 2.6em repeat(5, 1fr); grid-template-rows: 1.8em repeat(4, 3.2em); gap: .35em; padding: 0 1.1em 1em; }
.cal__grid > b { align-self: center; text-align: center; font: 500 .68em/1 var(--mono); color: var(--ink-3); text-transform: uppercase; letter-spacing: .1em; }
.cal__grid > em { align-self: center; font: 400 .66em/1 var(--mono); font-style: normal; color: var(--ink-3); }
.slot { display: flex; align-items: center; gap: .5em; padding: 0 .55em; border-radius: .7em; background: color-mix(in srgb, var(--accent) 16%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); opacity: 0; animation: slot 10s infinite both; animation-delay: calc(var(--k) * .6s); }
.slot i { display: grid; place-items: center; flex: none; width: 1.7em; height: 1.7em; border-radius: 50%; font: 700 .55em/1 var(--mono); font-style: normal; color: #06100a; background: var(--accent); }
.slot .sk { margin: 0; height: .4em; }
@keyframes slot { 0% { opacity: 0; transform: scale(.6); } 6% { opacity: 1; transform: scale(1.06); } 9%, 88% { opacity: 1; transform: scale(1); } 96%, 100% { opacity: 0; } }
.cal__grid::before { content: ''; position: absolute; inset: 2.15em 1.1em 1em calc(1.1em + 2.95em); border-radius: .7em; background: repeating-linear-gradient(90deg, transparent 0 calc(20% - 1px), rgb(255 255 255 / .06) calc(20% - 1px) 20%); pointer-events: none; }
.cal__now { position: absolute; top: 2em; bottom: .8em; left: calc(1.1em + 2.95em); width: 2px; border-radius: 2px; background: var(--accent); box-shadow: 0 0 1em var(--accent); animation: now 8s linear infinite; }
@keyframes now { from { transform: translateX(0); } to { transform: translateX(calc(38cqw)); } }

@media (prefers-reduced-motion: reduce) {
	/* sem movimento, mostra o quadro final já montado */
	.mega .ln, .bubble, .typing, .tw, .slot, .quote__item:first-child { animation: none; opacity: 1; }
	.vt { animation: none; width: calc(var(--n) * 1ch); }
}


/* ═════════ English Now: cartão que vira e dias do plano ═════════ */
.eng { width: 82%; padding: 1.1em 1.2em 1.2em; }
.eng__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: .8em; font: 600 .8em/1 var(--mono); }
.eng__day { color: var(--ink-2); }
.eng__xp { display: inline-flex; align-items: center; gap: .4em; padding: .3em .7em; border-radius: 999px; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.eng__bar { height: .5em; margin-bottom: 1.1em; border-radius: 999px; background: rgb(255 255 255 / .09); overflow: hidden; }
.eng__bar i { display: block; width: 21%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--accent-2)); animation: eng-grow 1.6s var(--ease) both; }
@keyframes eng-grow { from { width: 0; } }
.eng__card { perspective: 60em; height: 9em; }
.eng__flip { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; animation: eng-flip 7s ease-in-out infinite; }
.eng__face { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: .5em; padding: 1em; border-radius: 1em; text-align: center; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 20%, #0a0f14), color-mix(in srgb, var(--accent-2) 16%, #0a0f14)); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.eng__face--back { transform: rotateY(180deg); }
.eng__face small { font: 500 .7em/1 var(--mono); text-transform: uppercase; letter-spacing: .14em; color: var(--ink-3); }
.eng__face b { font-size: 1.45em; letter-spacing: -.02em; }
.eng__voice { display: inline-flex; align-items: center; gap: .45em; padding: .3em .8em; border-radius: 999px; font-size: .75em; color: var(--accent); background: rgb(255 255 255 / .06); }
@keyframes eng-flip { 0%, 38% { transform: rotateY(0); } 50%, 88% { transform: rotateY(180deg); } 100% { transform: rotateY(360deg); } }
.eng__days { display: grid; grid-template-columns: repeat(14, 1fr); gap: .35em; margin-top: 1.1em; }
.eng__days i { aspect-ratio: 1; border-radius: 50%; background: rgb(255 255 255 / .1); }
.eng__days .done { background: var(--accent); }
.eng__days .now { background: var(--accent-2); box-shadow: 0 0 0 .25em color-mix(in srgb, var(--accent-2) 30%, transparent); animation: now-dot 1.6s ease-in-out infinite; }
@keyframes now-dot { 50% { transform: scale(1.25); } }

/* ═════════ Mercado Helper: itens sendo marcados e total subindo ═════════ */
@property --done { syntax: '<number>'; inherits: true; initial-value: 0; }
.mh { width: 78%; overflow: hidden; }
.mh__head { display: flex; align-items: center; justify-content: space-between; padding: .9em 1.1em; border-bottom: 1px solid var(--line); }
.mh__head b { font-size: .95em; }
.mh__list { list-style: none; padding: .4em 0; margin: 0; }
.mh__row { display: flex; align-items: center; gap: .8em; padding: .65em 1.1em; animation-duration: 10s; animation-iteration-count: infinite; }
.mh__row:nth-child(1) { animation-name: mh-c1; } .mh__row:nth-child(2) { animation-name: mh-c2; }
.mh__row:nth-child(3) { animation-name: mh-c3; } .mh__row:nth-child(4) { animation-name: mh-c4; }
@keyframes mh-c1 { 0%, 19.9% { --done: 0; } 20%, 92% { --done: 1; } 97%, 100% { --done: 0; } }
@keyframes mh-c2 { 0%, 39.9% { --done: 0; } 40%, 92% { --done: 1; } 97%, 100% { --done: 0; } }
@keyframes mh-c3 { 0%, 59.9% { --done: 0; } 60%, 92% { --done: 1; } 97%, 100% { --done: 0; } }
@keyframes mh-c4 { 0%, 79.9% { --done: 0; } 80%, 92% { --done: 1; } 97%, 100% { --done: 0; } }
.mh__tick { display: grid; place-items: center; flex: none; width: 1.6em; height: 1.6em; border-radius: .5em; border: 2px solid color-mix(in srgb, var(--accent) calc(var(--done) * 100%), var(--ink-3)); background: color-mix(in srgb, var(--accent) calc(var(--done) * 100%), transparent); color: #06100a; }
.mh__tick .i { width: .95em; height: .95em; stroke-width: 3; opacity: var(--done); transform: scale(calc(.4 + var(--done) * .6)); }
.mh__name { flex: 1; font-weight: 500; opacity: calc(1 - var(--done) * .45); }
.mh__price { font: 500 .85em/1 var(--mono); color: color-mix(in srgb, var(--accent) calc(var(--done) * 100%), var(--ink-3)); }
.mh__total { display: flex; align-items: center; justify-content: space-between; padding: .9em 1.1em; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--accent) 10%, transparent); font-size: .8em; color: var(--ink-2); }
.mh__digits { height: 1.4em; overflow: hidden; font: 800 1.45em/1.4 var(--font); letter-spacing: -.03em; color: var(--accent); font-variant-numeric: tabular-nums; }
.mh__roll { animation: mh-roll 10s steps(5) infinite; }
.mh__roll b { display: block; height: 1.4em; text-align: right; }
@keyframes mh-roll { to { transform: translateY(-100%); } }

@media (prefers-reduced-motion: reduce) {
	.mh__row { animation: none; --done: 1; }
	.mh__roll { animation: none; transform: translateY(-80%); }
	.eng__flip { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
	.bk__leaf, .bk__face { animation: none; }
}

/* ═════════ Tessela: fotos se encaixando em um mosaico ═════════ */
.vz-tessela { align-content: center; gap: 1.1em; }
.mos { position: relative; width: 74%; aspect-ratio: 4 / 3; }
.mos::before { content: ''; position: absolute; inset: -.2em; border-radius: .5em; border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); box-shadow: 0 1.4em 3em -1.2em color-mix(in srgb, var(--accent) 55%, transparent); opacity: 0; animation: mos-frame 10s infinite both; }
.mos__tiles { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr); }
/* O mosaico é uma imagem só: cada foto mostra a sua fatia (--c coluna, --r linha) de um fundo 4x3 */
.tile {
	position: relative; display: block;
	background-image:
		radial-gradient(ellipse 26% 34% at 27% 38%, color-mix(in srgb, var(--accent-2) 75%, #1b0f2e) 0 45%, transparent 100%),
		radial-gradient(ellipse 24% 30% at 70% 60%, color-mix(in srgb, var(--accent) 65%, #0b1230) 0 45%, transparent 100%),
		radial-gradient(ellipse 12% 16% at 50% 20%, color-mix(in srgb, var(--accent-2) 55%, #1b0f2e), transparent),
		radial-gradient(ellipse 10% 14% at 86% 26%, color-mix(in srgb, var(--accent) 55%, #0b1230), transparent),
		radial-gradient(ellipse 12% 16% at 12% 80%, color-mix(in srgb, var(--accent) 50%, #0b1230), transparent),
		radial-gradient(ellipse 14% 18% at 46% 86%, color-mix(in srgb, var(--accent-2) 45%, #1b0f2e), transparent),
		/* núcleos de células: pontos pequenos de borda mais nítida */
		radial-gradient(ellipse 1.6% 2.2% at 24% 34%, color-mix(in srgb, var(--accent) 80%, #fff) 0 55%, transparent 100%),
		radial-gradient(ellipse 1.4% 2% at 31% 42%, color-mix(in srgb, var(--accent) 70%, #fff) 0 55%, transparent 100%),
		radial-gradient(ellipse 1.5% 2.1% at 66% 55%, color-mix(in srgb, var(--accent-2) 80%, #fff) 0 55%, transparent 100%),
		radial-gradient(ellipse 1.3% 1.9% at 74% 63%, color-mix(in srgb, var(--accent-2) 70%, #fff) 0 55%, transparent 100%),
		radial-gradient(ellipse 1.2% 1.7% at 49% 18%, color-mix(in srgb, var(--accent) 75%, #fff) 0 55%, transparent 100%),
		radial-gradient(ellipse 1.2% 1.7% at 87% 28%, color-mix(in srgb, var(--accent-2) 75%, #fff) 0 55%, transparent 100%),
		radial-gradient(ellipse 1.3% 1.8% at 13% 79%, color-mix(in srgb, var(--accent-2) 75%, #fff) 0 55%, transparent 100%),
		radial-gradient(ellipse 1.3% 1.8% at 45% 88%, color-mix(in srgb, var(--accent) 75%, #fff) 0 55%, transparent 100%),
		linear-gradient(135deg, #0e1530, #170f2b);
	background-size: 400% 300%;
	background-position: calc(var(--c) * 100% / 3) calc(var(--r) * 50%);
	animation: tile-in 10s infinite both; animation-delay: calc(var(--k) * .12s);
}
.tile::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 0 .12em rgb(255 255 255 / .4); animation: tile-seam 10s infinite both; animation-delay: calc(var(--k) * .12s); }
@keyframes tile-in {
	0%, 4% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(.8); }
	22%, 86% { opacity: 1; transform: none; }
	96%, 100% { opacity: 0; transform: scale(.96); }
}
/* as emendas somem quando as fotos terminam de se misturar */
@keyframes tile-seam { 0%, 38% { opacity: 1; } 54%, 100% { opacity: 0; } }
@keyframes mos-frame { 0%, 38% { opacity: 0; } 50%, 88% { opacity: 1; } 96%, 100% { opacity: 0; } }
.mos__scan { position: absolute; top: -.5em; bottom: -.5em; left: 0; width: .2em; border-radius: 1em; background: var(--accent); box-shadow: 0 0 1.2em var(--accent); opacity: 0; animation: mos-scan 10s infinite both; }
@keyframes mos-scan { 0%, 52% { opacity: 0; transform: translateX(0); } 54% { opacity: 1; } 80% { opacity: 1; transform: translateX(74cqw); } 82%, 100% { opacity: 0; transform: translateX(74cqw); } }
.mos__foot { display: flex; align-items: flex-end; justify-content: space-between; width: 74%; }
.mos__bar { display: inline-flex; flex-direction: column; gap: .35em; font: 500 .68em/1 var(--mono); color: var(--ink-2); }
.mos__bar i { display: block; width: 6em; height: .5em; border: .14em solid var(--ink-2); border-top: 0; }
.mos__chip { padding: .4em 1em; border-radius: 999px; font: 500 .68em/1.4 var(--mono); color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }

/* ═════════ facil.js: código que muda a tela ═════════ */
.vz-facil { align-content: center; gap: 1.2em; }
.fj { width: 84%; overflow: hidden; }
.fj__code { padding: 1em 1.1em; font: 400 .8em/1.9 var(--mono); min-height: 5.6em; }
.fj__code b { color: var(--accent); font-weight: 700; }
.fj__code u { color: var(--accent-2); text-decoration: none; }
.fj__view { position: relative; width: 84%; padding: 1.1em 1.2em 1em; overflow: hidden; }
.fj__view small { font: 500 .66em/1 var(--mono); color: var(--ink-3); }
.fj__view p { margin: .5em 0 .7em; font-size: 1.5em; font-weight: 700; letter-spacing: -.02em; }
.fj__name { display: inline-grid; }
.fj__name i { grid-area: 1 / 1; font-style: normal; color: var(--accent); animation-duration: 11s; animation-iteration-count: infinite; animation-fill-mode: both; animation-delay: 1.4s; }
.fj__name .a { animation-name: fj-a; }
.fj__name .b { animation-name: fj-b; }
@keyframes fj-a { 0%, 22% { opacity: 1; } 24%, 90% { opacity: 0; } 98%, 100% { opacity: 1; } }
@keyframes fj-b { 0%, 22% { opacity: 0; } 24%, 90% { opacity: 1; } 98%, 100% { opacity: 0; } }
/* a barra de progresso do Facil.ui.loading enche enquanto a linha é digitada */
.fj__load { position: absolute; top: 0; left: 0; right: 0; height: .22em; transform-origin: left; background: linear-gradient(90deg, var(--accent), var(--accent-2)); animation: fj-load 11s infinite both; animation-delay: 1.4s; }
@keyframes fj-load { 0% { opacity: 1; transform: scaleX(0); } 22% { opacity: 1; transform: scaleX(1); } 27%, 100% { opacity: 0; transform: scaleX(1); } }

/* ═════════ FacilPHP: arquivo vira endpoint ═════════ */
.vz-fphp { align-content: center; gap: 1.1em; }
.fp { width: 88%; overflow: hidden; }
.fp__list { list-style: none; display: grid; gap: .3em; margin: 0; padding: .6em; }
.fp__row { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .8em; padding: .8em .9em; font-size: .72em; }
.fp__row::before { content: ''; position: absolute; inset: 0; border-radius: .8em; background: color-mix(in srgb, var(--accent) 16%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); opacity: 0; animation: fp-hit 9s infinite; animation-delay: calc(var(--k) * 3s); }
.fp__file, .fp__url { position: relative; padding: 0; background: none; font: 500 1em/1.4 var(--mono); }
.fp__file { color: var(--ink-2); }
.fp__url { color: var(--ink); text-align: right; white-space: nowrap; }
.fp .m.get { color: var(--accent); }
.fp__arrow { position: relative; display: grid; color: var(--ink-3); animation: fp-arrow 9s infinite; animation-delay: calc(var(--k) * 3s); }
@keyframes fp-hit { 0%, 30% { opacity: 1; } 36%, 100% { opacity: 0; } }
@keyframes fp-arrow { 0%, 30% { color: var(--accent); transform: translateX(.3em); } 36%, 100% { color: var(--ink-3); transform: none; } }
.fp__res { display: inline-flex; align-items: center; gap: .8em; padding: .5em 1.2em .5em .5em; border-radius: 999px; font: 500 .75em/1 var(--mono); color: var(--ink-2); animation: fp-res 3s infinite; }
.fp__res b { padding: .3em .8em; border-radius: 999px; color: #06100a; background: var(--accent); }
@keyframes fp-res { 0%, 100% { opacity: .35; transform: translateY(.5em); } 12%, 72% { opacity: 1; transform: none; } }

/* ═════════ FacilChrome: contextos da extensão trocando mensagens ═════════ */
.vz-fchrome { display: block; }
.fc-node { position: absolute; padding: .75em 1.1em; transform: translate(-50%, -50%); text-align: center; white-space: nowrap; background: rgb(5 9 7 / .9); animation: bob 5s ease-in-out infinite; animation-delay: calc(var(--k) * -1.2s); }
.fc-node b { display: block; font-size: .95em; color: var(--accent); }
.fc-node small { display: block; margin-top: .2em; font: 400 .62em/1.3 var(--mono); color: var(--ink-3); }
.fc-badge { position: absolute; top: 50%; left: 50%; padding: .4em 1em; transform: translate(-50%, -50%); border-radius: 999px; font: 500 .66em/1.3 var(--mono); color: var(--ink-2); white-space: nowrap; background: rgb(5 9 7 / .7); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); animation: hub 3.2s ease-in-out infinite; }
.fc-pk { position: absolute; width: .9em; height: .9em; margin: -.45em 0 0 -.45em; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 1em var(--accent-2); animation: 3.4s linear infinite; }
.fc-pk1 { animation-name: fc1; } .fc-pk2 { animation-name: fc2; animation-delay: -1.1s; } .fc-pk3 { animation-name: fc3; animation-delay: -2.2s; }
@keyframes fc1 { from { left: 20%; top: 76%; } to { left: 50%; top: 20%; } }
@keyframes fc2 { from { left: 50%; top: 20%; } to { left: 80%; top: 76%; } }
@keyframes fc3 { from { left: 80%; top: 76%; } to { left: 20%; top: 76%; } }

/* ═════════ AgroSolutions: serviços conversando pelo RabbitMQ ═════════ */
.vz-agro { align-content: center; }
.ag { display: grid; row-gap: 1.7em; width: 90%; }
.ag__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2em; }
.ag__svc { position: relative; display: flex; align-items: center; gap: .7em; padding: .8em .9em; }
.ag__svc::after { content: ''; position: absolute; left: 50%; height: 1.7em; border-left: 2px dashed color-mix(in srgb, var(--accent) 45%, transparent); }
.ag__row--top .ag__svc::after { top: 100%; }
.ag__row--bottom .ag__svc::after { bottom: 100%; }
.ag__ico { display: grid; place-items: center; flex: none; width: 2.1em; height: 2.1em; border-radius: .7em; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent); }
.ag__name b { display: block; font-size: .92em; line-height: 1.2; }
.ag__name small { display: block; font: 400 .6em/1.3 var(--mono); color: var(--ink-3); }
.ag__bus { position: relative; display: grid; place-items: center; height: 2.1em; border-radius: 999px; background: color-mix(in srgb, var(--accent) 9%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.ag__label { position: relative; z-index: 1; font: 500 .66em/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
/* Um evento sobe do Ingestion, cruza o barramento e desce até o Alerts, que dispara o alerta */
.ag__dot, .ag__ev { position: absolute; z-index: 1; width: .9em; height: .9em; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 1em var(--accent-2); opacity: 0; animation-duration: 7s; animation-timing-function: linear; animation-iteration-count: infinite; animation-fill-mode: both; }
.ag__dot { left: 50%; bottom: 100%; margin-left: -.45em; }
.ag__up { animation-name: ag-up; }
.ag__down { margin-bottom: .8em; animation-name: ag-down; }
.ag__ev { top: 50%; left: 25%; margin: -.45em 0 0 -.45em; animation-name: ag-ev; }
@keyframes ag-up { 0% { opacity: 0; transform: none; } 2% { opacity: 1; } 14% { opacity: 1; transform: translateY(-.8em); } 16%, 100% { opacity: 0; transform: translateY(-.8em); } }
@keyframes ag-ev { 0%, 15% { opacity: 0; left: 25%; } 17% { opacity: 1; } 56% { opacity: 1; left: 75%; } 58%, 100% { opacity: 0; left: 75%; } }
@keyframes ag-down { 0%, 56% { opacity: 0; transform: none; } 58% { opacity: 1; } 70% { opacity: 1; transform: translateY(.8em); } 72%, 100% { opacity: 0; transform: translateY(.8em); } }
.ag__svc--out::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; border: 2px solid var(--accent-2); box-shadow: 0 0 1.4em color-mix(in srgb, var(--accent-2) 60%, transparent); opacity: 0; animation: ag-hit 7s infinite; }
@keyframes ag-hit { 0%, 70% { opacity: 0; } 74%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }
.ag__alert { position: absolute; top: 100%; right: .3em; display: inline-flex; align-items: center; gap: .4em; margin-top: .6em; padding: .3em .8em; border-radius: 999px; font: 600 .66em/1.3 var(--font); white-space: nowrap; color: #1b1303; background: var(--accent-2); opacity: 0; animation: ag-chip 7s infinite; }
.ag__alert .i { width: 1em; height: 1em; }
@keyframes ag-chip { 0%, 72% { opacity: 0; transform: translateY(-.5em) scale(.9); } 76%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }

/* ═════════ ShareSoFast: arquivo sobe, ganha link curto e some ═════════ */
.sh { position: relative; width: 78%; overflow: hidden; }
.sh__body { display: grid; gap: .9em; padding: 1.1em 1.2em 1.2em; animation: sh-body 10s infinite both; }
.sh__file { display: flex; align-items: center; gap: .8em; }
.sh__ico { display: grid; place-items: center; flex: none; width: 2.5em; height: 2.5em; border-radius: .8em; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent); }
.sh__name b { display: block; font-size: .92em; line-height: 1.2; }
.sh__name small { display: block; font: 400 .66em/1.3 var(--mono); color: var(--ink-3); }
.sh__bar { height: .5em; border-radius: 999px; background: rgb(255 255 255 / .09); overflow: hidden; }
.sh__bar i { display: block; height: 100%; border-radius: inherit; transform-origin: 0 50%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); animation: sh-fill 10s infinite both; }
/* a barra e o link voltam ao começo enquanto o corpo está invisível (77% a 95%) */
@keyframes sh-fill { 0% { transform: scaleX(0); } 34%, 76% { transform: scaleX(1); } 77%, 100% { transform: scaleX(0); } }
.sh__link { display: flex; align-items: center; gap: .6em; padding: .6em .8em; border-radius: .8em; font: 600 .78em/1 var(--mono); color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); animation: sh-pop 10s infinite both; }
.sh__link em { margin-left: auto; font-style: normal; color: var(--ink-3); }
@keyframes sh-pop { 0%, 36% { opacity: 0; transform: translateY(.6em) scale(.96); } 42%, 76% { opacity: 1; transform: none; } 77%, 100% { opacity: 0; transform: translateY(.6em) scale(.96); } }
.sh__foot { display: flex; justify-content: space-between; gap: .6em; font: 500 .7em/1.2 var(--mono); color: var(--ink-2); }
.sh__foot span { display: inline-flex; align-items: center; gap: .4em; }
.sh__foot .i { color: var(--accent-2); }
@keyframes sh-body { 0%, 70% { opacity: 1; transform: none; } 76%, 96% { opacity: 0; transform: translateY(.5em) scale(.98); } 100% { opacity: 1; transform: none; } }
.sh__gone { position: absolute; inset: 2.6em 0 0; display: grid; place-content: center; justify-items: center; gap: .3em; opacity: 0; animation: sh-gone 10s infinite both; }
.sh__ok { display: grid; place-items: center; width: 2.6em; height: 2.6em; margin-bottom: .3em; border-radius: 50%; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.sh__gone b { font-size: .95em; }
.sh__gone small { font: 400 .66em/1.3 var(--mono); color: var(--ink-3); }
@keyframes sh-gone { 0%, 74% { opacity: 0; transform: scale(.9); } 80%, 93% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: scale(.9); } }

/* ═════════ Wave Radio: o ponteiro varre as cinco estações e a tecla da vez afunda ═════════ */
.wr { width: 82%; display: grid; gap: .8em; padding: .9em; font-size: 1.1em; }
.wr__glass { position: relative; padding: .8em .9em .75em; border-radius: .9em; color: color-mix(in srgb, var(--accent) 14%, black); background: linear-gradient(180deg, color-mix(in srgb, var(--accent-2) 38%, white), color-mix(in srgb, var(--accent) 46%, white)); box-shadow: 0 0 2.6em -.4em color-mix(in srgb, var(--accent) 65%, transparent), inset 0 .15em .5em rgb(0 0 0 / .18); }
.wr__scale { position: relative; height: 2.4em; container-type: inline-size; }
.wr__scale i { position: absolute; bottom: 0; left: calc(var(--p) * 1%); width: .09em; height: .6em; background: currentColor; opacity: .5; }
.wr__scale i:nth-child(4n + 1) { height: 1.1em; opacity: .85; }
.wr__needle { position: absolute; top: 0; bottom: 0; left: 0; width: .17em; border-radius: .1em; background: color-mix(in srgb, red 72%, var(--accent)); box-shadow: 0 0 .5em color-mix(in srgb, red 60%, var(--accent)); transform: translateX(5.9cqw); animation: wr-needle 15s ease-in-out infinite; }
/* cada estação fica 3 s na faixa: o ponteiro chega no começo do trecho (20%, 40%...) e o número troca */
@keyframes wr-needle { 0%, 14% { transform: translateX(5.9cqw); } 20%, 34% { transform: translateX(28.3cqw); } 40%, 54% { transform: translateX(53.7cqw); } 60%, 74% { transform: translateX(71.2cqw); } 80%, 94% { transform: translateX(94.6cqw); } 100% { transform: translateX(5.9cqw); } }
.wr__read { display: flex; align-items: center; gap: .9em; margin-top: .6em; }
.wr__freq, .wr__name { display: block; height: 1.2em; overflow: hidden; line-height: 1.2; }
.wr__freq { font: 700 1.7em/1.2 var(--mono); }
.wr__name { flex: 1; min-width: 0; font: 800 .8em/1.2 var(--font); letter-spacing: .08em; text-transform: uppercase; }
.wr__freq b, .wr__name b { display: block; height: 1.2em; white-space: nowrap; }
.wr__roll { display: block; animation: wr-roll 15s steps(5) infinite; }
@keyframes wr-roll { to { transform: translateY(-100%); } }
.wr__read .eq { height: 1.2em; }
.wr__read .eq i { background: currentColor; }
.wr__keys { display: grid; grid-template-columns: repeat(5, 1fr); gap: .45em; padding: .45em; border-radius: .7em; background: rgb(0 0 0 / .45); }
.wr__keys i { height: 2.3em; border-radius: .4em .4em .3em .3em; background: color-mix(in srgb, white 88%, var(--accent)); box-shadow: 0 .22em 0 color-mix(in srgb, var(--accent) 30%, #4a4030), inset 0 .08em 0 white; animation: wr-key 15s infinite; animation-delay: calc(var(--k) * 3s); }
.wr__keys i:first-child { transform: translateY(.18em); background: color-mix(in srgb, var(--accent) 38%, white); box-shadow: 0 .04em 0 color-mix(in srgb, var(--accent) 30%, #4a4030), 0 0 1em color-mix(in srgb, var(--accent) 70%, transparent); }
@keyframes wr-key { 0%, 19.9% { transform: translateY(.18em); background: color-mix(in srgb, var(--accent) 38%, white); box-shadow: 0 .04em 0 color-mix(in srgb, var(--accent) 30%, #4a4030), 0 0 1em color-mix(in srgb, var(--accent) 70%, transparent); } 20%, 100% { transform: none; background: color-mix(in srgb, white 88%, var(--accent)); box-shadow: 0 .22em 0 color-mix(in srgb, var(--accent) 30%, #4a4030), inset 0 .08em 0 white; } }

@media (prefers-reduced-motion: reduce) {
	/* sem movimento, mostra o quadro final já montado */
	.sh__body, .sh__bar i, .sh__link, .sh__gone { animation: none; }
	.sh__link { opacity: 1; }
	.sh__gone { opacity: 0; }
	.tile, .tile::after, .mos::before, .mos__scan { animation: none; }
	.tile { opacity: 1; transform: none; }
	.tile::after, .mos__scan { opacity: 0; }
	.mos::before { opacity: 1; }
	.fj__name i, .fj__load, .fp__row::before, .fp__arrow, .fp__res, .ag__dot, .ag__ev, .ag__svc--out::before, .ag__alert { animation: none; }
	.fj__name .a, .fj__load, .ag__dot, .ag__ev { opacity: 0; }
	.fj__name .b, .fp__res, .ag__svc--out::before, .ag__alert { opacity: 1; }
	.fp__row:first-child::before { opacity: 1; }
	/* Wave Radio: parado na terceira estação (Synthwave), com a tecla dela afundada */
	.wr__needle, .wr__roll, .wr__keys i { animation: none; }
	.wr__needle { transform: translateX(53.7cqw); }
	.wr__roll { transform: translateY(-40%); }
	.wr__keys i:first-child { transform: none; background: color-mix(in srgb, white 88%, var(--accent)); box-shadow: 0 .22em 0 color-mix(in srgb, var(--accent) 30%, #4a4030), inset 0 .08em 0 white; }
	.wr__keys i:nth-child(3) { transform: translateY(.18em); background: color-mix(in srgb, var(--accent) 38%, white); box-shadow: 0 .04em 0 color-mix(in srgb, var(--accent) 30%, #4a4030), 0 0 1em color-mix(in srgb, var(--accent) 70%, transparent); }
}