/* ============================================================================
   Vaucai — «Deja de adaptarte a programas imposibles.» (2026-10-08). The
   impossible program: a management program rises from the depth in an aerial
   shot, comes apart in layers towards you (settings, a form of twelve fields,
   an error that shakes, «¿Desea guardar los cambios?», a sync stuck at 3 %,
   an expired licence, a forced update, an expired session) and, as the
   sentence leaves, sinks back into the depth. Only the chaos: the way out is
   the next screen. Choreography: hero-scroll.js.
   The program is generic: no real product. Without the scroll scene (no JS)
   it is not shown: it is decoration, the sentence carries the message.
   ============================================================================ */

.hero-maze { display: none; }

.hero-pin.is-scroll .hero-maze {
    display: block;
    position: absolute;
    left: 50%;
    top: var(--msgs-top, 50%);
    width: 100vw;
    height: var(--scene-h, 100vh);
    transform: translate(-50%, -50%);
    pointer-events: none;
    visibility: hidden;
}

/* The camera and the rig: the program lives on a plane tilted in 3D. */
.mz-cam {
    position: absolute;
    inset: 0;
    perspective: 1800px;
    perspective-origin: 50% 50%;
}
.mz-rig {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1040px;
    height: 640px;
    margin: -320px 0 0 -520px;
    transform-style: preserve-3d;
    will-change: transform;
}

/* Every layer: dark glass with a hairline edge. */
.mz-layer {
    position: absolute;
    box-sizing: border-box;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(44, 44, 48, 0.97) 0%, rgba(30, 30, 33, 0.97) 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 30px 80px rgba(0, 0, 0, 0.7);
    color: #98989d;
    font: 500 11px/1.25 -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    overflow: hidden;
    will-change: transform, opacity;
}

/* ----- The program window. */
.mz-app { inset: 0; }
.mz-in-app { position: absolute; inset: 0; display: flex; flex-direction: column; }
.mz-bar {
    display: flex; align-items: center; gap: 7px;
    height: 30px; padding: 0 14px;
    background: rgba(255, 255, 255, 0.035);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.mz-bar b { width: 10px; height: 10px; border-radius: 50%; background: #3a3a3c; }
.mz-bar span { margin-left: 12px; color: #aeaeb2; font-weight: 600; }
.mz-menu {
    display: flex; gap: 18px; height: 26px; padding: 0 16px; align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    color: #aeaeb2;
}
.mz-tools {
    display: flex; gap: 6px; height: 34px; padding: 0 14px; align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.mz-tools i { width: 20px; height: 20px; border-radius: 5px; background: rgba(255, 255, 255, 0.07); }
.mz-tools i:nth-child(5n) { margin-right: 10px; }
.mz-body { flex: 1; display: flex; min-height: 0; }
.mz-side {
    width: 170px; padding: 10px 0; display: flex; flex-direction: column; gap: 2px;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.02);
}
.mz-side span { padding: 3px 14px; color: #aeaeb2; font-weight: 600; }
.mz-side span.sub { padding-left: 22px; color: #6e6e73; font-weight: 500; }
.mz-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.mz-tabs { display: flex; gap: 2px; padding: 8px 10px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.mz-tabs span { padding: 5px 9px; border-radius: 6px 6px 0 0; background: rgba(255, 255, 255, 0.03); white-space: nowrap; }
.mz-tabs span.on { background: rgba(255, 255, 255, 0.09); color: #e5e5ea; }
.mz-filters { display: flex; gap: 8px; padding: 9px 10px; }
.mz-filters span { flex: 1; padding: 5px 8px; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09); white-space: nowrap; }
.mz-grid { flex: 1; padding: 0 10px; overflow: hidden; }
.mz-row { display: grid; grid-template-columns: 1fr 1.1fr 2.2fr 1fr 1fr 1fr .7fr .7fr; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.mz-row span { height: 22px; display: flex; align-items: center; padding: 0 8px; border-right: 1px solid rgba(255, 255, 255, 0.04); }
.mz-row span i { display: block; height: 5px; width: var(--w); border-radius: 3px; background: rgba(255, 255, 255, 0.11); }
.mz-head span { color: #c7c7cc; font-weight: 600; height: 24px; }

/* ----- The dialogs that pile up on it. */
.mz-dlg { padding: 0 0 14px; }
.mz-dt {
    height: 30px; display: flex; align-items: center; padding: 0 14px; margin-bottom: 12px;
    background: rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    color: #e5e5ea; font-weight: 600; font-size: 12px;
}
.mz-settings { width: 300px; height: 330px; left: 30px; top: 150px; }
.mz-checks { display: grid; gap: 8px; padding: 0 16px; }
.mz-checks span { display: flex; align-items: center; gap: 9px; color: #aeaeb2; }
.mz-checks b { width: 12px; height: 12px; border-radius: 3px; box-shadow: inset 0 0 0 1.5px #636366; }
.mz-checks span.on b { background: #636366; }
.mz-form { width: 340px; height: 380px; left: 640px; top: 110px; }
.mz-fields { display: grid; gap: 7px; padding: 0 16px; }
.mz-fields label { display: grid; grid-template-columns: 130px 1fr; align-items: center; gap: 10px; color: #aeaeb2; }
.mz-fields label i { height: 18px; border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); background: rgba(0, 0, 0, 0.25); }
.mz-fields label.bad { color: #ff6961; }
.mz-fields label.bad i { box-shadow: inset 0 0 0 1.5px #ff453a; }
.mz-msg { display: flex; gap: 12px; padding: 0 16px; align-items: flex-start; }
.mz-msg b {
    flex: none; width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 17px; font-weight: 800; color: #fff; background: #636366;
}
.mz-msg p { margin: 0; color: #c7c7cc; font-size: 12px; line-height: 1.4; }
.mz-msg strong { color: #fff; }
.mz-btns { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 16px 0; }
.mz-btns span { padding: 6px 14px; border-radius: 7px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); color: #e5e5ea; }
.mz-btns span.on { background: #48484a; box-shadow: none; }
.mz-error { width: 340px; height: 160px; left: 300px; top: 430px; box-shadow: inset 0 0 0 1px rgba(255, 69, 58, 0.55), 0 0 40px rgba(255, 69, 58, 0.18), 0 30px 80px rgba(0, 0, 0, 0.65); }
.mz-error .mz-msg b { background: #ff453a; }
.mz-save { width: 340px; height: 150px; left: 560px; top: 30px; }
.mz-licence { width: 320px; height: 150px; left: 760px; top: 470px; }
.mz-update { width: 320px; height: 150px; left: 370px; top: 170px; }
.mz-session { width: 280px; height: 104px; left: -90px; top: 420px; }
.mz-session .mz-msg b { font-family: Georgia, serif; font-style: italic; }
.mz-progress { width: 290px; height: 104px; left: 70px; top: 40px; }
.mz-pbar { margin: 4px 16px 10px; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.mz-pbar i { display: block; width: 3%; height: 100%; background: #8e8e93; border-radius: 4px; }
.mz-pl { display: flex; justify-content: space-between; padding: 0 16px; }

/* The sentence keeps the halo of the first screen over the program. */
.hero-pin.is-scroll .hero-msg:nth-child(2) {
    text-shadow: 0 0 18px color-mix(in srgb, var(--bg) calc(var(--halo, 1) * 100%), transparent), 0 0 36px color-mix(in srgb, var(--bg) calc(var(--halo, 1) * 100%), transparent), 0 0 60px color-mix(in srgb, var(--bg) calc(var(--halo, 1) * 100%), transparent);
}