/* ==========================================================================
   Página de erro /ops/{errcode} — tema devweb — restyle 23/09/2026
   10 modelos animados (themes/devweb/widgets/error/*.php), prefixo er-.
   Cores: as mesmas da tela antiga — degradê do cabeçalho (#42E695 → #3BB2B8),
   verde do sistema #36BA9B / #2d9a81 e os tons de apoio do boot.css.
   Ritmo (--er-speed) e amplitude (--er-amp) ficam em variáveis: o bloco
   prefers-reduced-motion só DESACELERA e encolhe o movimento, não congela.
   ========================================================================== */

@property --er-lx { syntax: "<percentage>"; inherits: true; initial-value: 26%; }
@property --er-ly { syntax: "<percentage>"; inherits: true; initial-value: 50%; }

.er-root {
    --er-g1: #42E695;
    --er-g2: #3BB2B8;
    --er-green: #36BA9B;
    --er-teal: #2d9a81;
    --er-mint: #61DDBC;
    --er-blue: #39AED9;
    --er-yellow: #F5B946;
    --er-red: #D94352;
    --er-ink: #282f3a;
    --er-text: #555555;
    --er-muted: #8a95a0;
    --er-line: #e6eaee;
    --er-soft: #f6f8fa;
    --er-surface: #ffffff;
    --er-shade: #d5dde3;
    --er-asphalt: #3a4450;
    --er-bp: #2d9a81;
    --er-dot: rgba(54, 186, 155, .22);
    --er-glow: rgba(66, 230, 149, .16);
    --er-scan: rgba(40, 47, 58, .05);
    --er-blend: multiply;
    --er-speed: 1;
    --er-amp: 1;

    position: relative;
    display: flex;
    align-items: center;
    min-height: max(460px, calc(100vh - 230px));
    padding: 48px 0 64px;
    overflow: hidden;
    color: var(--er-text);
}

[data-theme="dark"] .er-root {
    --er-ink: #e8edf1;
    --er-text: #d7dde3;
    --er-muted: #9fa9b3;
    --er-line: #333d47;
    --er-soft: #1e252b;
    --er-surface: #1e252b;
    --er-shade: #333d47;
    --er-asphalt: #2b333c;
    --er-bp: #1f5549;
    --er-dot: rgba(97, 221, 188, .13);
    --er-glow: rgba(54, 186, 155, .14);
    --er-scan: rgba(255, 255, 255, .035);
    --er-blend: screen;
}

/* atmosfera: grade de pontos que some nas bordas + brilho verde atrás da cena */
.er-root::before,
.er-root::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.er-root::before {
    inset: 0;
    background-image: radial-gradient(var(--er-dot) 1px, transparent 1.6px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(58% 72% at 30% 50%, #000 0%, transparent 76%);
    mask-image: radial-gradient(58% 72% at 30% 50%, #000 0%, transparent 76%);
}

.er-root::after {
    left: 2%;
    top: 50%;
    width: 50%;
    aspect-ratio: 1;
    transform: translateY(-50%);
    background: radial-gradient(closest-side, var(--er-glow), transparent);
}

.er-wrap {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(28px, 5vw, 72px);
    width: min(1140px, calc(100% - 32px));
    margin: 0 auto;
}

.er-stage {
    position: relative;
    container-type: inline-size;
    width: 100%;
    max-width: 580px;
    aspect-ratio: 560 / 380;
    margin: 0 auto;
    animation: er-pop calc(.7s * var(--er-speed)) cubic-bezier(.2, .8, .2, 1) both;
}

.er-svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.er-svg text {
    font-family: "Montserrat", sans-serif;
}

/* ---------- texto (mesmo conteúdo da tela antiga) ---------- */
.er-copy {
    max-width: 460px;
}

.er-copy h1 {
    margin: 0 0 14px;
    font-size: clamp(1.55rem, 1.05rem + 1.5vw, 2.25rem);
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -.01em;
    color: var(--er-ink);
}

.er-copy p {
    margin: 0;
    max-width: 44ch;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--er-text);
}

.er-copy > * {
    animation: er-rise calc(.6s * var(--er-speed)) cubic-bezier(.2, .7, .2, 1) both;
}

.er-copy > :nth-child(2) { animation-delay: calc(.12s * var(--er-speed)); }
.er-copy > :nth-child(3) { animation-delay: calc(.2s * var(--er-speed)); }
.er-copy > :nth-child(4) { animation-delay: calc(.28s * var(--er-speed)); }

.er-sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.er-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    margin-top: 30px;
    padding: 0 26px 0 22px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--er-green), var(--er-teal) 50%, var(--er-green));
    background-size: 200% 100%;
    color: #ffffff;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 12px 26px -12px rgba(45, 154, 129, .7);
    transition: background-position .5s ease, transform .2s ease, box-shadow .2s ease;
}

.er-btn:hover {
    color: #ffffff;
    background-position: 100% 0;
    transform: translateY(-2px);
    box-shadow: 0 16px 30px -14px rgba(45, 154, 129, .8);
}

.er-btn:focus-visible {
    outline: 3px solid var(--er-mint);
    outline-offset: 3px;
}

.er-btn svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .25s ease;
}

.er-btn:hover svg {
    transform: translateX(-3px);
}

@keyframes er-pop {
    from { opacity: 0; transform: scale(.95); }
}

@keyframes er-rise {
    from { opacity: 0; transform: translateY(calc(14px * var(--er-amp))); }
}

@keyframes er-spin {
    to { transform: rotate(360deg); }
}

@keyframes er-spin-rev {
    to { transform: rotate(-360deg); }
}

/* =========================== 1. ESTRADA =========================== */
/* a paisagem esfuma nas laterais e embaixo, sem borda reta */
.er-road {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%), linear-gradient(#000 80%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%), linear-gradient(#000 80%, transparent 100%);
    mask-composite: intersect;
}

.er-road-cloud rect { fill: var(--er-line); }

.er-road-cloud {
    animation: er-drift calc(16s * var(--er-speed)) ease-in-out infinite alternate;
}

.er-road-cloud-b {
    animation-duration: calc(22s * var(--er-speed));
    animation-direction: alternate-reverse;
}

@keyframes er-drift {
    to { transform: translateX(calc(36px * var(--er-amp))); }
}

.er-road-hills { fill: url(#er-road-hills); opacity: .2; }
.er-road-ground { fill: rgba(66, 230, 149, .08); }
.er-road-horizon { stroke: var(--er-line); stroke-width: 1.5; }
.er-road-asphalt { fill: var(--er-asphalt); }
.er-road-edge { stroke: rgba(255, 255, 255, .8); stroke-width: 2.5; }

.er-road-dash {
    stroke: var(--er-yellow);
    animation: er-dash-far calc(.8s * var(--er-speed)) linear infinite;
}

.er-road-dash-far { stroke-width: 2.5; stroke-dasharray: 7 9; }

.er-road-dash-near {
    stroke-width: 5;
    stroke-dasharray: 22 18;
    animation-name: er-dash-near;
}

@keyframes er-dash-far { to { stroke-dashoffset: -16; } }
@keyframes er-dash-near { to { stroke-dashoffset: -40; } }

.er-road-car {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: er-car calc(6.5s * var(--er-speed)) cubic-bezier(.35, .1, .6, 1) infinite;
}

.er-road-car-body { fill: var(--er-green); }
.er-road-car-cabin { fill: var(--er-teal); }
.er-road-car-glass { fill: rgba(255, 255, 255, .5); }
.er-road-car-light { fill: var(--er-red); }
.er-road-car-plate { fill: #ffffff; }
.er-road-car-wheel { fill: #1e252b; }

@keyframes er-car {
    0% { transform: translate(0, 22px) scale(1.12); opacity: 0; }
    8% { opacity: 1; }
    72% { transform: translate(-40px, -128px) scale(.16); opacity: 1; }
    82%, 100% { transform: translate(-42px, -134px) scale(.1); opacity: 0; }
}

.er-road-sign {
    transform-box: view-box;
    transform-origin: 456px 322px;
    animation: er-sway calc(4.8s * var(--er-speed)) ease-in-out infinite alternate;
}

@keyframes er-sway {
    from { transform: rotate(calc(-1.4deg * var(--er-amp))); }
    to { transform: rotate(calc(1.4deg * var(--er-amp))); }
}

.er-road-post { fill: var(--er-muted); }
.er-road-board { fill: var(--er-teal); }
.er-road-board-line { fill: none; stroke: #ffffff; stroke-width: 2.5; }
.er-road-code { fill: #ffffff; font-weight: 800; letter-spacing: .02em; }

.er-road-arrow {
    fill: none;
    stroke: #ffffff;
    stroke-width: 3.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.er-road-glint {
    fill: rgba(255, 255, 255, .26);
    animation: er-glint calc(5s * var(--er-speed)) ease-in-out infinite;
}

@keyframes er-glint {
    0%, 55% { transform: translateX(0); }
    80%, 100% { transform: translateX(220px); }
}

/* =========================== 2. RADAR =========================== */
.er-radar {
    --er-radar-line: rgba(54, 186, 155, .24);
    --er-radar-bg: rgba(54, 186, 155, .06);
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
}

.er-radar-row {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(clamp(90px, 16vw, 170px) * var(--er-k));
    font-size: calc(30cqi * var(--er-k));
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--er-ink);
    white-space: nowrap;
}

.er-radar-disc {
    position: relative;
    flex: 0 0 auto;
    width: .8em;
    height: .8em;
    margin: 0 .05em;
}

.er-radar-disc::before,
.er-radar-disc::after {
    content: "";
    position: absolute;
    inset: 0;
    border: .014em solid var(--er-green);
    border-radius: 50%;
    opacity: 0;
    animation: er-ping calc(3.2s * var(--er-speed)) ease-out infinite;
}

.er-radar-disc::after {
    animation-delay: calc(1.6s * var(--er-speed));
}

@keyframes er-ping {
    0% { transform: scale(1); opacity: .55; }
    100% { transform: scale(calc(1 + .6 * var(--er-amp))); opacity: 0; }
}

.er-radar-screen {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 50%;
    background:
        linear-gradient(var(--er-radar-line), var(--er-radar-line)) center / 1px 100% no-repeat,
        linear-gradient(var(--er-radar-line), var(--er-radar-line)) center / 100% 1px no-repeat,
        repeating-radial-gradient(circle at center, transparent 0 .09em, var(--er-radar-line) .09em calc(.09em + 1px)),
        var(--er-radar-bg);
}

.er-radar-screen::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: inset 0 0 0 .13em var(--er-green);
}

.er-radar-sweep {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 0deg, rgba(54, 186, 155, 0) 0 70%, rgba(54, 186, 155, .1) 82%, rgba(54, 186, 155, .62) 99.4%, var(--er-mint) 100%);
    animation: er-spin calc(3.2s * var(--er-speed)) linear infinite;
}

.er-radar-blip {
    position: absolute;
    width: .06em;
    height: .06em;
    margin: -.03em 0 0 -.03em;
    border-radius: 50%;
    background: var(--er-mint);
    box-shadow: 0 0 .05em .02em rgba(97, 221, 188, .8);
    opacity: 0;
    animation: er-blip calc(3.2s * var(--er-speed)) linear infinite;
}

/* o eco acende quando a varredura passa pelo ângulo dele (40°, 150°, 250°) */
.er-radar-b1 { left: 67.7%; top: 28.9%; animation-delay: calc(-2.844s * var(--er-speed)); }
.er-radar-b2 { left: 65%; top: 76%; animation-delay: calc(-1.867s * var(--er-speed)); }
.er-radar-b3 { left: 28.9%; top: 57.7%; animation-delay: calc(-.978s * var(--er-speed)); }

@keyframes er-blip {
    0% { opacity: 1; transform: scale(1.4); }
    55% { opacity: .15; transform: scale(1); }
    100% { opacity: 0; }
}

/* =========================== 3. ENGRENAGENS =========================== */
.er-gear-spin {
    transform-box: view-box;
    transform-origin: 0 0;
    animation: er-spin calc(16s * var(--er-speed)) linear infinite;
}

.er-gear-rev { animation-name: er-spin-rev; }

.er-gear-fast {
    animation-name: er-spin-rev;
    animation-duration: calc(8s * var(--er-speed));
}

.er-gear-main { fill: url(#er-gears-fill); }
.er-gear-small { fill: var(--er-shade); }
.er-gear-axle { fill: var(--er-surface); stroke: var(--er-teal); stroke-width: 3; }
.er-gear-digit { fill: var(--er-ink); font-weight: 900; }

/* =========================== 4. ÓLEO =========================== */
.er-oil {
    --er-oil-empty: var(--er-line);
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
}

.er-oil-code {
    position: relative;
    font-size: calc(clamp(96px, 17vw, 190px) * var(--er-k));
    font-size: calc(34cqi * var(--er-k));
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.02em;
    white-space: nowrap;
    color: var(--er-oil-empty);
}

/* silhueta cheia (tanque vazio) em vez de contorno: o contorno mostra as sobreposições internas da fonte */
.er-oil-code::after {
    content: attr(data-code);
    position: absolute;
    left: 0;
    top: 0;
    color: transparent;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 240' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%2342E695'/%3E%3Cstop offset='.2' stop-color='%2336BA9B'/%3E%3Cstop offset='.42' stop-color='%232d9a81'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 10 C16 0 34 0 50 10 S84 20 100 10 V240 H0 Z' fill='url(%23a)'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 240' preserveAspectRatio='none'%3E%3Cpath d='M0 10 C16 20 34 20 50 10 S84 0 100 10 V240 H0 Z' fill='%233BB2B8' fill-opacity='.55'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-size: .9em 2.4em, 1.35em 2.4em;
    background-position: 0 .5em, 0 .46em;
    -webkit-background-clip: text;
    background-clip: text;
    animation:
        er-oil-flow calc(2.6s * var(--er-speed)) linear infinite,
        er-oil-level calc(7s * var(--er-speed)) ease-in-out infinite alternate;
}

@keyframes er-oil-flow {
    from { background-position-x: 0, 0; }
    to { background-position-x: -.9em, 1.35em; }
}

@keyframes er-oil-level {
    from { background-position-y: .76em, .72em; }
    to { background-position-y: .28em, .24em; }
}

.er-oil-drop {
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 4%;
    width: 3.4cqi;
    height: 3.4cqi;
    margin-left: -1.7cqi;
    border-radius: 0 50% 50% 50%;
    background: linear-gradient(135deg, var(--er-g1), var(--er-teal));
    opacity: 0;
    animation: er-oil-drip calc(3s * var(--er-speed)) cubic-bezier(.5, 0, .9, .45) infinite;
}

@keyframes er-oil-drip {
    0% { transform: translateY(0) rotate(45deg) scale(0); opacity: 0; }
    20% { transform: translateY(0) rotate(45deg) scale(1); opacity: 1; }
    30% { transform: translateY(0) rotate(45deg) scale(1); }
    62% { transform: translateY(30cqi) rotate(45deg) scale(.9); opacity: 1; }
    66%, 100% { transform: translateY(32cqi) rotate(45deg) scale(.3); opacity: 0; }
}

.er-oil-ring {
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 55%;
    width: 16cqi;
    height: 3.6cqi;
    margin: -1.8cqi 0 0 -8cqi;
    border: 2px solid var(--er-mint);
    border-radius: 50%;
    opacity: 0;
    animation: er-oil-ripple calc(3s * var(--er-speed)) ease-out infinite;
}

@keyframes er-oil-ripple {
    0%, 62% { transform: scale(.2); opacity: 0; }
    65% { opacity: .9; }
    100% { transform: scale(calc(1 + .4 * var(--er-amp))); opacity: 0; }
}

.er-oil-ticks {
    position: absolute;
    right: 3%;
    top: 22%;
    bottom: 22%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
}

.er-oil-ticks i {
    display: block;
    width: 10px;
    height: 2px;
    border-radius: 2px;
    background: var(--er-muted);
    opacity: .5;
}

.er-oil-ticks i:nth-child(3n + 1) {
    width: 18px;
    opacity: .8;
}

/* =========================== 5. CAIXA =========================== */
.er-box {
    --er-box-in: #1d5f50;
    --er-box-back: #278a73;
}

.er-box-shadow {
    fill: rgba(40, 47, 58, .1);
    transform-box: view-box;
    transform-origin: 280px 340px;
    animation: er-box-shadow calc(7s * var(--er-speed)) ease-in-out infinite;
}

[data-theme="dark"] .er-box-shadow { fill: rgba(0, 0, 0, .35); }

@keyframes er-box-shadow {
    0%, 30%, 58%, 100% { transform: scale(1); opacity: 1; }
    41% { transform: scale(.84); opacity: .55; }
}

.er-box-body {
    transform-box: view-box;
    transform-origin: 280px 336px;
    animation: er-box-hop calc(7s * var(--er-speed)) ease-in-out infinite;
}

@keyframes er-box-hop {
    0%, 30%, 58%, 100% { transform: translateY(0) scale(1, 1); }
    34% { transform: translateY(0) scale(1.04, .94); }
    41% { transform: translateY(calc(-16px * var(--er-amp))) scale(.98, 1.03); }
    48% { transform: translateY(0) scale(1.03, .96); }
    53% { transform: translateY(0) scale(1, 1); }
}

.er-box-flap-back {
    fill: var(--er-box-back);
    transform-box: view-box;
    transform-origin: 280px 172px;
    animation: er-flap-back calc(3.5s * var(--er-speed)) ease-in-out infinite alternate;
}

@keyframes er-flap-back {
    to { transform: scaleY(calc(1 - .1 * var(--er-amp))); }
}

.er-box-inside { fill: var(--er-box-in); }
.er-box-flap { fill: var(--er-teal); transform-box: view-box; }

.er-box-flap-l {
    transform-origin: 188px 182px;
    animation: er-flap-l calc(3.5s * var(--er-speed)) ease-in-out infinite alternate;
}

.er-box-flap-r {
    transform-origin: 372px 182px;
    animation: er-flap-r calc(3.5s * var(--er-speed)) ease-in-out infinite alternate;
}

@keyframes er-flap-l {
    from { transform: rotate(calc(5deg * var(--er-amp))); }
    to { transform: rotate(calc(-9deg * var(--er-amp))); }
}

@keyframes er-flap-r {
    from { transform: rotate(calc(-5deg * var(--er-amp))); }
    to { transform: rotate(calc(9deg * var(--er-amp))); }
}

.er-box-front { fill: var(--er-green); }
.er-box-lip { fill: rgba(255, 255, 255, .2); }
.er-box-tape { fill: rgba(255, 255, 255, .16); }
.er-box-label { fill: #ffffff; }
.er-box-code { fill: #282f3a; font-weight: 900; }
.er-box-bar { fill: #282f3a; }

.er-box-mark {
    fill: none;
    stroke: rgba(255, 255, 255, .85);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.er-box-dust circle {
    fill: var(--er-muted);
    opacity: 0;
    animation: er-dust calc(7s * var(--er-speed)) ease-out infinite;
}

.er-box-dust circle:nth-child(2) { animation-delay: calc(.3s * var(--er-speed)); }
.er-box-dust circle:nth-child(3) { animation-delay: calc(.55s * var(--er-speed)); }

@keyframes er-dust {
    0%, 40% { transform: translateY(0); opacity: 0; }
    46% { opacity: .7; }
    70%, 100% { transform: translateY(calc(-42px * var(--er-amp))); opacity: 0; }
}

.er-box-moth {
    fill: var(--er-muted);
    opacity: 0;
    transform-box: view-box;
    transform-origin: 0 0;
    animation: er-moth calc(7s * var(--er-speed)) ease-in-out infinite;
}

.er-box-moth-body { fill: var(--er-ink); }

.er-box-moth-wings {
    transform-box: view-box;
    transform-origin: 0 0;
    animation: er-wing calc(.18s * var(--er-speed)) ease-in-out infinite alternate;
}

@keyframes er-wing {
    to { transform: scaleX(.3); }
}

@keyframes er-moth {
    0%, 38% { transform: translate(280px, 186px) scale(.6); opacity: 0; }
    44% { transform: translate(282px, 158px) scale(1); opacity: 1; }
    54% { transform: translate(318px, 122px) scale(1); }
    64% { transform: translate(292px, 92px) scale(1); }
    76% { transform: translate(346px, 64px) scale(1); opacity: 1; }
    88%, 100% { transform: translate(402px, 30px) scale(.9); opacity: 0; }
}

/* =========================== 6. TERMINAL =========================== */
.er-term {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    perspective: 1100px;
    background: radial-gradient(closest-side, rgba(66, 230, 149, .2), transparent) center / 84% 76% no-repeat;
}

.er-term::before {
    content: "";
    position: absolute;
    left: 4%;
    top: 6%;
    width: 64%;
    height: 58%;
    border: 1px solid var(--er-line);
    border-radius: 14px;
    background: var(--er-soft);
    transform: rotateY(-12deg) rotateX(5deg);
}

.er-term-win {
    position: relative;
    width: 86%;
    overflow: hidden;
    border-radius: 14px;
    background: #1e252b;
    box-shadow: 0 30px 60px -28px rgba(18, 22, 26, .65), inset 0 0 0 1px rgba(255, 255, 255, .06);
    font-family: ui-monospace, "Cascadia Code", Consolas, "Courier New", monospace;
    text-align: left;
    transform: rotateY(-12deg) rotateX(5deg);
    animation: er-float calc(6s * var(--er-speed)) ease-in-out infinite alternate;
}

@keyframes er-float {
    to { transform: rotateY(-12deg) rotateX(5deg) translateY(calc(-8px * var(--er-amp))); }
}

.er-term-bar {
    display: flex;
    gap: 1.4cqi;
    padding: 2.4cqi 3cqi;
    background: #28313a;
}

.er-term-bar i {
    width: 2.2cqi;
    height: 2.2cqi;
    border-radius: 50%;
    background: var(--er-red);
}

.er-term-bar i:nth-child(2) { background: var(--er-yellow); }
.er-term-bar i:nth-child(3) { background: var(--er-green); }

.er-term-body {
    position: relative;
    min-height: 40cqi;
    padding: 4cqi 4.5cqi 5cqi;
    color: #d7dde3;
    font-size: 3.6cqi;
    line-height: 1.55;
    animation: er-term-cycle calc(9s * var(--er-speed)) linear infinite;
}

.er-term-body::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 30%;
    background: linear-gradient(transparent, rgba(97, 221, 188, .07), transparent);
    animation: er-beam calc(5s * var(--er-speed)) linear infinite;
    pointer-events: none;
}

.er-term-body::after {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, .035) 0 1px, transparent 1px 3px);
    pointer-events: none;
}

@keyframes er-beam {
    from { transform: translateY(-100%); }
    to { transform: translateY(340%); }
}

@keyframes er-term-cycle {
    0%, 92% { opacity: 1; }
    97%, 100% { opacity: 0; }
}

.er-term-line b {
    color: var(--er-mint);
    font-weight: 700;
}

.er-term-type {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    white-space: nowrap;
    width: calc(var(--n) * 1ch);
    animation: er-type calc(9s * var(--er-speed)) steps(var(--n)) infinite;
}

@keyframes er-type {
    0%, 4% { width: 0; }
    18%, 100% { width: calc(var(--n) * 1ch); }
}

.er-term-err {
    color: var(--er-yellow);
    animation: er-show-err calc(9s * var(--er-speed)) linear infinite;
}

@keyframes er-show-err {
    0%, 22% { opacity: 0; }
    23%, 100% { opacity: 1; }
}

.er-term-code {
    margin: .6cqi 0 1.4cqi;
    font-size: calc(15cqi * var(--er-k));
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: .04em;
    white-space: nowrap;
    color: var(--er-g1);
    text-shadow: 0 0 2.4cqi rgba(66, 230, 149, .45);
    animation: er-show-code calc(9s * var(--er-speed)) linear infinite;
}

@keyframes er-show-code {
    0%, 26% { opacity: 0; transform: translateY(1cqi); }
    27.5% { opacity: .9; transform: none; }
    28.5% { opacity: .2; }
    30%, 100% { opacity: 1; transform: none; }
}

.er-term-next {
    animation: er-show-next calc(9s * var(--er-speed)) linear infinite;
}

@keyframes er-show-next {
    0%, 34% { opacity: 0; }
    35%, 100% { opacity: 1; }
}

.er-term-cursor {
    display: inline-block;
    width: 1ch;
    height: 1.1em;
    vertical-align: -.2em;
    background: var(--er-mint);
    animation: er-cursor calc(1.1s * var(--er-speed)) steps(1) infinite;
}

@keyframes er-cursor {
    50% { opacity: 0; }
}

/* =========================== 7. GLITCH =========================== */
.er-glitch {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
}

/* as cópias verde e azul ficam ATRÁS do texto (z-index -1 dentro do isolate): só as franjas aparecem */
.er-glitch-code {
    position: relative;
    z-index: 0;
    isolation: isolate;
    font-size: calc(clamp(100px, 18vw, 200px) * var(--er-k));
    font-size: calc(37cqi * var(--er-k));
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.03em;
    white-space: nowrap;
    color: var(--er-ink);
    animation: er-glitch-main calc(3.6s * var(--er-speed)) steps(1) infinite;
}

.er-glitch-code::before,
.er-glitch-code::after {
    content: attr(data-code);
    position: absolute;
    z-index: -1;
    inset: 0;
}

.er-glitch-code::before {
    color: var(--er-green);
    animation: er-glitch-a calc(3.6s * var(--er-speed)) steps(1) infinite;
}

.er-glitch-code::after {
    color: var(--er-blue);
    animation: er-glitch-b calc(3.6s * var(--er-speed)) steps(1) infinite;
}

@keyframes er-glitch-main {
    0% { transform: none; }
    65% { transform: skewX(-6deg); }
    68% { transform: translateX(.02em); }
    71% { transform: none; }
    87% { transform: translateX(-.015em); }
    89% { transform: none; }
}

@keyframes er-glitch-a {
    0% { transform: translate(-.018em, 0); clip-path: inset(0 0 0 0); }
    64% { transform: translate(-.07em, 0); clip-path: inset(10% 0 62% 0); }
    67% { transform: translate(.05em, 0); clip-path: inset(58% 0 12% 0); }
    70% { transform: translate(-.04em, 0); clip-path: inset(34% 0 44% 0); }
    73% { transform: translate(-.018em, 0); clip-path: inset(0 0 0 0); }
    86% { transform: translate(-.05em, 0); clip-path: inset(70% 0 4% 0); }
    88% { transform: translate(-.018em, 0); clip-path: inset(0 0 0 0); }
}

@keyframes er-glitch-b {
    0% { transform: translate(.018em, 0); clip-path: inset(0 0 0 0); }
    64% { transform: translate(.06em, 0); clip-path: inset(40% 0 30% 0); }
    67% { transform: translate(-.05em, 0); clip-path: inset(6% 0 70% 0); }
    70% { transform: translate(.03em, 0); clip-path: inset(64% 0 14% 0); }
    73% { transform: translate(.018em, 0); clip-path: inset(0 0 0 0); }
    86% { transform: translate(.05em, 0); clip-path: inset(20% 0 60% 0); }
    88% { transform: translate(.018em, 0); clip-path: inset(0 0 0 0); }
}

.er-glitch-bar {
    position: absolute;
    left: 6%;
    right: 6%;
    top: 42%;
    height: 1.4cqi;
    background: linear-gradient(90deg, transparent, var(--er-red) 18%, transparent 36%, var(--er-blue) 62%, transparent 80%);
    mix-blend-mode: var(--er-blend);
    opacity: 0;
    animation: er-glitch-bar calc(3.6s * var(--er-speed)) steps(1) infinite;
}

@keyframes er-glitch-bar {
    0% { opacity: 0; transform: none; }
    64% { opacity: .9; transform: translateY(-7cqi); }
    67% { transform: translateY(9cqi) scaleX(.8); }
    70% { transform: translateY(2cqi) scaleX(.5); }
    73% { opacity: 0; transform: none; }
}

.er-glitch-scan {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(to bottom, var(--er-scan) 0 1px, transparent 1px 4px);
    -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent);
    mask-image: radial-gradient(closest-side, #000 55%, transparent);
    pointer-events: none;
}

.er-glitch-scan::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 18%;
    background: linear-gradient(transparent, rgba(54, 186, 155, .1), transparent);
    animation: er-band calc(5s * var(--er-speed)) linear infinite;
}

@keyframes er-band {
    from { transform: translateY(-100%); }
    to { transform: translateY(560%); }
}

.er-glitch-corner {
    position: absolute;
    width: 7cqi;
    height: 7cqi;
    border: 2px solid var(--er-muted);
    opacity: .6;
}

.er-glitch-tl { left: 5%; top: 7%; border-right: 0; border-bottom: 0; }
.er-glitch-tr { right: 5%; top: 7%; border-left: 0; border-bottom: 0; }
.er-glitch-bl { left: 5%; bottom: 7%; border-right: 0; border-top: 0; }
.er-glitch-br { right: 5%; bottom: 7%; border-left: 0; border-top: 0; }

.er-glitch-rec {
    position: absolute;
    top: calc(7% + 2.4cqi);
    left: calc(5% + 2.4cqi);
    width: 2.2cqi;
    height: 2.2cqi;
    border-radius: 50%;
    background: var(--er-red);
    animation: er-cursor calc(1.4s * var(--er-speed)) steps(1) infinite;
}

/* =========================== 8. PAINEL =========================== */
.er-dash-face { fill: var(--er-soft); stroke: var(--er-line); stroke-width: 2; }

.er-dash-track,
.er-dash-arc,
.er-dash-red {
    fill: none;
    stroke-width: 12;
    stroke-linecap: round;
}

.er-dash-track { stroke: var(--er-line); }
.er-dash-arc { stroke: url(#er-dash-arc); }
.er-dash-red { stroke: var(--er-red); }
.er-dash-tick { stroke: var(--er-muted); stroke-width: 2; stroke-linecap: round; }
.er-dash-major { stroke: var(--er-ink); stroke-width: 3.5; }
.er-dash-odo { fill: #1e252b; stroke: var(--er-line); stroke-width: 2; }
.er-dash-cell { fill: #28313a; }

[data-theme="dark"] .er-dash-odo { fill: #12161a; }
[data-theme="dark"] .er-dash-cell { fill: #1e252b; }

.er-dash-digit {
    fill: var(--er-g1);
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace !important;
    font-weight: 700;
}

.er-dash-roll {
    animation: er-roll calc((1.4s + var(--er-i) * .35s) * var(--er-speed)) cubic-bezier(.2, .75, .25, 1) .3s both;
}

@keyframes er-roll {
    from { transform: translateY(0); }
    to { transform: translateY(calc(var(--er-rows) * -34px)); }
}

.er-dash-needle {
    fill: var(--er-red);
    transform-box: view-box;
    transform-origin: 280px 200px;
    animation: er-needle calc(5.6s * var(--er-speed)) ease-in-out infinite;
}

@keyframes er-needle {
    0%, 100% { transform: rotate(-118deg); }
    14% { transform: rotate(-20deg); }
    20% { transform: rotate(-32deg); }
    28% { transform: rotate(40deg); }
    33% { transform: rotate(27deg); }
    38% { transform: rotate(46deg); }
    47% { transform: rotate(-100deg); }
    53% { transform: rotate(-91deg); }
    59% { transform: rotate(-105deg); }
    70% { transform: rotate(-62deg); }
    78% { transform: rotate(-112deg); }
}

.er-dash-hub { fill: var(--er-ink); }
.er-dash-hub-dot { fill: var(--er-soft); }

.er-dash-light {
    animation: er-lamp calc(1.2s * var(--er-speed)) ease-in-out infinite alternate;
}

.er-dash-oil { fill: var(--er-red); filter: drop-shadow(0 0 4px rgba(217, 67, 82, .55)); }

.er-dash-engine {
    fill: var(--er-yellow);
    filter: drop-shadow(0 0 4px rgba(245, 185, 70, .55));
    animation-delay: calc(-1.2s * var(--er-speed));
}

@keyframes er-lamp {
    from { opacity: 1; }
    to { opacity: .18; }
}

/* =========================== 9. PLANTA =========================== */
.er-bp-panel { fill: var(--er-bp); }
.er-bp-grid { fill: none; stroke: rgba(255, 255, 255, .1); stroke-width: 1; }
.er-bp-grid-major { stroke: rgba(255, 255, 255, .22); }
.er-bp-ruler { stroke: rgba(255, 255, 255, .55); stroke-width: 1.2; }

.er-bp-digit {
    fill: rgba(255, 255, 255, .07);
    stroke: #ffffff;
    stroke-width: 1.8;
    stroke-linejoin: round;
    stroke-dasharray: 820;
    font-weight: 800;
    animation: er-draw calc(2.6s * var(--er-speed)) cubic-bezier(.45, .05, .3, 1) both;
    animation-delay: calc((.2s + var(--er-i) * .35s) * var(--er-speed));
}

@keyframes er-draw {
    from { stroke-dashoffset: 820; fill: rgba(255, 255, 255, 0); }
    80% { fill: rgba(255, 255, 255, 0); }
    to { stroke-dashoffset: 0; }
}

.er-bp-diameter {
    fill: none;
    stroke: var(--er-yellow);
    stroke-width: 1.6;
    stroke-dasharray: 6 7;
    transform-box: view-box;
    transform-origin: 0 0;
    animation: er-spin calc(24s * var(--er-speed)) linear infinite;
}

.er-bp-leader { fill: none; stroke: var(--er-yellow); stroke-width: 1.4; }
.er-bp-dim { fill: none; stroke: rgba(255, 255, 255, .75); stroke-width: 1.2; }

.er-bp-note {
    fill: #ffffff;
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace !important;
    font-size: 13px;
}

.er-bp-leader + .er-bp-note { fill: var(--er-yellow); font-size: 18px; }
.er-bp-dim-label { font-size: 12px; letter-spacing: .12em; }

.er-bp-cross {
    transform-box: view-box;
    transform-origin: 0 0;
    animation: er-cross calc(9s * var(--er-speed)) ease-in-out infinite;
}

.er-bp-cross path { fill: none; stroke: rgba(255, 255, 255, .35); stroke-width: 1; stroke-dasharray: 4 5; }
.er-bp-cross circle { fill: none; stroke: #ffffff; stroke-width: 1.4; }

@keyframes er-cross {
    0%, 100% { transform: translate(110px, 300px); }
    16%, 24% { transform: translate(169px, 176px); }
    38%, 46% { transform: translate(280px, 176px); }
    60%, 68% { transform: translate(391px, 176px); }
    84% { transform: translate(470px, 110px); }
}

.er-bp-compass { fill: none; stroke: rgba(255, 255, 255, .6); stroke-width: 1.4; }
.er-bp-needle-n { fill: #ffffff; }
.er-bp-needle-s { fill: rgba(255, 255, 255, .35); }

.er-bp-needle {
    transform-box: view-box;
    transform-origin: 0 0;
    animation: er-compass calc(4s * var(--er-speed)) ease-in-out infinite alternate;
}

@keyframes er-compass {
    from { transform: rotate(calc(-14deg * var(--er-amp))); }
    to { transform: rotate(calc(18deg * var(--er-amp))); }
}

.er-bp-stamp rect { fill: rgba(255, 255, 255, .06); stroke: rgba(255, 255, 255, .6); stroke-width: 1.2; }
.er-bp-stamp path { stroke: rgba(255, 255, 255, .6); stroke-width: 1.2; }
.er-bp-small { font-size: 9px; letter-spacing: .2em; opacity: .8; }
.er-bp-strong { font-size: 14px; font-weight: 700; }

/* =========================== 10. LUPA =========================== */
.er-lens {
    --er-lr: 12.9cqi;
    position: absolute;
    inset: 0;
    animation: er-lens-path calc(10s * var(--er-speed)) ease-in-out infinite;
}

/* a lente passa por cada caractere e para um pouco em cima dele */
@keyframes er-lens-path {
    0%, 100% { --er-lx: 22%; --er-ly: 30%; }
    12%, 22% { --er-lx: 32%; --er-ly: 51%; }
    36%, 48% { --er-lx: 50%; --er-ly: 50%; }
    62%, 72% { --er-lx: 68%; --er-ly: 51%; }
    86% { --er-lx: 66%; --er-ly: 26%; }
}

.er-lens-page {
    position: absolute;
    inset: 7% 9%;
    display: flex;
    flex-direction: column;
    gap: 3.2cqi;
    padding: 4cqi;
    border: 1px solid var(--er-line);
    border-radius: 14px;
    background: var(--er-surface);
    box-shadow: 0 26px 50px -32px rgba(40, 47, 58, .45);
}

.er-lens-bar {
    display: flex;
    gap: 1.2cqi;
}

.er-lens-bar i {
    width: 1.8cqi;
    height: 1.8cqi;
    border-radius: 50%;
    background: var(--er-line);
}

.er-lens-grid {
    display: flex;
    gap: 3.2cqi;
}

.er-lens-img {
    flex: 0 0 22cqi;
    height: 20cqi;
    border-radius: 10px;
}

.er-lens-lines {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2.2cqi;
}

.er-lens-lines i {
    display: block;
    height: 2.2cqi;
    border-radius: 99px;
}

.er-lens-lines i:nth-child(2) { width: 78%; }
.er-lens-lines i:nth-child(3) { width: 92%; }
.er-lens-lines i:nth-child(4) { width: 56%; }

/* barras de "carregando" com brilho correndo */
.er-lens-img,
.er-lens-lines i {
    background: linear-gradient(90deg, var(--er-line) 0%, var(--er-soft) 50%, var(--er-line) 100%);
    background-size: 220% 100%;
    animation: er-shimmer calc(1.8s * var(--er-speed)) linear infinite;
}

@keyframes er-shimmer {
    from { background-position: 110% 0; }
    to { background-position: -110% 0; }
}

.er-lens-ghost,
.er-lens-reveal {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: calc(clamp(72px, 13vw, 150px) * var(--er-k));
    font-size: calc(27cqi * var(--er-k));
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.02em;
    white-space: nowrap;
}

.er-lens-ghost {
    color: rgba(138, 149, 160, .1);
}

.er-lens-reveal {
    color: var(--er-teal);
    background: linear-gradient(135deg, var(--er-g1), var(--er-teal));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    clip-path: circle(var(--er-lr) at var(--er-lx) var(--er-ly));
}

.er-lens-glass {
    position: absolute;
    left: var(--er-lx);
    top: var(--er-ly);
    width: calc(var(--er-lr) * 120 / 45.5);
    height: calc(var(--er-lr) * 120 / 45.5);
    overflow: visible;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 10px 14px rgba(40, 47, 58, .22));
}

.er-lens-tint { fill: rgba(97, 221, 188, .12); }
.er-lens-shine { fill: none; stroke: rgba(255, 255, 255, .7); stroke-width: 4; stroke-linecap: round; }
.er-lens-ring { fill: none; stroke: url(#er-lens-ring); stroke-width: 9; }
.er-lens-handle { stroke: var(--er-ink); stroke-width: 14; stroke-linecap: round; }

/* =========================== RESPONSIVO =========================== */
@media (max-width: 860px) {
    .er-root {
        min-height: 0;
        padding: 28px 0 48px;
    }

    .er-root::before {
        -webkit-mask-image: radial-gradient(80% 50% at 50% 28%, #000 0%, transparent 76%);
        mask-image: radial-gradient(80% 50% at 50% 28%, #000 0%, transparent 76%);
    }

    .er-root::after {
        left: 50%;
        top: 26%;
        width: 90%;
        transform: translate(-50%, -50%);
    }

    .er-wrap {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
        text-align: center;
    }

    .er-stage { max-width: 520px; }
    .er-copy { margin: 0 auto; }
    .er-copy p { margin-inline: auto; }
}

/* =========================== MOVIMENTO REDUZIDO ===========================
   Só desacelera e encolhe (a máquina do Douglas roda assim); o que é só agitação
   — os cortes do glitch e a barra de ruído — vira um desdobramento lento. */
@media (prefers-reduced-motion: reduce) {
    .er-root {
        --er-speed: 2.4;
        --er-amp: .45;
    }

    .er-glitch-code { animation: none; }
    .er-glitch-bar { display: none; }

    .er-glitch-code::before,
    .er-glitch-code::after {
        clip-path: none;
        animation: er-glitch-calm 6s ease-in-out infinite alternate;
    }

    .er-glitch-code::after { animation-direction: alternate-reverse; }

    /* o que MOSTRA o código ou o texto não pode esperar a animação lenta:
       terminal e hodômetro já abrem prontos; traço da planta e entrada do texto no ritmo normal */
    .er-term-body,
    .er-term-type,
    .er-term-err,
    .er-term-code,
    .er-term-next { animation: none; }

    .er-dash-roll {
        animation: none;
        transform: translateY(calc(var(--er-rows) * -34px));
    }

    .er-bp-digit {
        animation-duration: 2.6s;
        animation-delay: calc(.2s + var(--er-i) * .35s);
    }

    .er-stage { animation-duration: .7s; }
    .er-copy > * { animation-duration: .6s; }

    .er-btn,
    .er-btn svg { transition: none; }
}

@keyframes er-glitch-calm {
    from { transform: translate(-.02em, 0); }
    to { transform: translate(.02em, 0); }
}