/* Gemeinsame Hintergrundmanifestation des Bordcomputers. */
[data-machine-ghost-host] { position: relative; }

.machine-ghost {
    position: absolute;
    z-index: 0;
    top: var(--ghost-top, 18%);
    left: var(--ghost-left, 38%);
    width: var(--ghost-width, 58%);
    height: var(--ghost-height, 68%);
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    color: var(--machine-ghost-color, #FF4FD8);
    -webkit-mask-image: repeating-linear-gradient(to bottom, #000 0 3px, transparent 3px 7px);
    mask-image: repeating-linear-gradient(to bottom, #000 0 3px, transparent 3px 7px);
    filter: blur(.15px) drop-shadow(0 0 12px rgba(255, 79, 216, .18));
}

.machine-ghost-face {
    position: absolute;
    inset: 50% auto auto var(--ghost-face-left, 74%);
    min-width: 5ch;
    margin: 0;
    color: var(--machine-ghost-face-color, #FF97DD);
    font-family: inherit;
    font-size: var(--ghost-size, clamp(4rem, 8vw, 7rem));
    line-height: 1;
    letter-spacing: .09em;
    opacity: var(--ghost-face-opacity, .09);
    transform: translate(-50%, -50%);
    text-align: center;
    white-space: nowrap;
    text-shadow: 0 0 5px rgba(255, 208, 242, .55), 0 0 18px rgba(255, 79, 216, .42), 0 0 42px rgba(255, 38, 190, .24);
    transition: transform .14s steps(2, end), color .14s steps(1, end);
}

.machine-ghost-fragment {
    position: absolute;
    height: 2px;
    opacity: 0;
    background: linear-gradient(90deg, transparent, var(--machine-ghost-color, #FF4FD8), transparent);
    box-shadow: 0 0 9px rgba(255, 79, 216, .45);
}

.machine-ghost-fragment-1 { top: 29%; left: 13%; width: 68%; }
.machine-ghost-fragment-2 { top: 52%; left: 29%; width: 62%; }
.machine-ghost-fragment-3 { top: 72%; left: 8%; width: 51%; }
.machine-ghost.is-materializing { animation: machineGhostMaterialize 1.5s steps(9, end) forwards; }
.machine-ghost.is-present { opacity: 1; }
.machine-ghost.is-dissolving { animation: machineGhostDissolve 1.3s steps(8, end) forwards; }
.machine-ghost.is-materializing .machine-ghost-fragment,
.machine-ghost.is-dissolving .machine-ghost-fragment { animation: machineGhostFragment 1.3s steps(5, end) both; }
.machine-ghost-face[data-mood="blink"],
.machine-ghost-face[data-mood="long-blink"] { transform: translate(-50%, -48%) scaleY(.94); }
.machine-ghost-face[data-mood="glance"] { transform: translate(-47%, -50%); }
.machine-ghost-face[data-mood="asymmetric"] { transform: translate(-52%, -49%); }
.machine-ghost-face[data-mood="thinking"] { color: var(--machine-ghost-muted, #D98AC7); }
.machine-ghost-face[data-mood="smile"],
.machine-ghost-face[data-mood="curious"] { opacity: calc(var(--ghost-face-opacity, .09) + .025); }

@keyframes machineGhostMaterialize {
    0% { opacity: 0; clip-path: inset(48% 0 50% 0); transform: translateX(7px); }
    28% { opacity: .45; clip-path: inset(18% 0 55% 0); transform: translateX(-4px); }
    58% { opacity: .72; clip-path: inset(36% 0 12% 0); transform: translateX(2px); }
    82% { opacity: .9; clip-path: inset(5% 0 8% 0); transform: translateX(0); }
    100% { opacity: 1; clip-path: inset(0); transform: translateX(0); }
}

@keyframes machineGhostDissolve {
    0% { opacity: 1; clip-path: inset(0); }
    45% { opacity: .62; clip-path: inset(12% 0 28% 0); transform: translateX(-3px); }
    72% { opacity: .3; clip-path: inset(61% 0 8% 0); transform: translateX(5px); }
    100% { opacity: 0; clip-path: inset(49% 0 49% 0); transform: translateX(0); }
}

@keyframes machineGhostFragment {
    0%, 100% { opacity: 0; transform: translateX(-18%); }
    24%, 68% { opacity: .55; }
    52% { opacity: .2; transform: translateX(24%); }
}

@media (max-width: 600px) {
    .machine-ghost { filter: blur(.1px) drop-shadow(0 0 9px rgba(255, 79, 216, .14)); }
}

@media (prefers-reduced-motion: reduce) {
    .machine-ghost { display: none !important; }
    .machine-ghost-face { transition: none !important; }
}