/* ==========================================================================
   ghost-mascot.css — Maskottchen ueber dem GitHub-Bereich der Startseite
   ========================================================================== */
.ghost-wrap {
    display: flex; flex-direction: column; align-items: center;
    padding: clamp(40px, 8vw, 90px) 16px 0;
    pointer-events: none;
}
.ghost {
    position: relative;
    width: clamp(150px, 22vw, 220px);
    aspect-ratio: 231 / 289;
    transform-origin: top center;
    animation: ghostFloat 2.8s ease-in-out infinite;
    color: #0d0b14;               /* Farbe der Augen */
}
@keyframes ghostFloat {
    0%, 100% { transform: translateY(0) scaleY(1); }
    50%      { transform: translateY(-8px) scaleY(1.08); }
}
.ghost-body {
    position: absolute; inset: 0;
    /* Form des Geists als Maske (gleicher Pfad wie im Original) */
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 231 289'%3E%3Cpath d='M230.809 115.385V249.411C230.809 269.923 214.985 287.282 194.495 288.411C184.544 288.949 175.364 285.718 168.26 280C159.746 273.154 147.769 273.461 139.178 280.23C132.638 285.384 124.381 288.462 115.379 288.462C106.377 288.462 98.1451 285.384 91.6055 280.23C82.912 273.385 70.9353 273.385 62.2415 280.23C55.7532 285.334 47.598 288.411 38.7246 288.462C17.4132 288.615 0 270.667 0 249.359V115.385C0 51.6667 51.6756 0 115.404 0C179.134 0 230.809 51.6667 230.809 115.385Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 231 289'%3E%3Cpath d='M230.809 115.385V249.411C230.809 269.923 214.985 287.282 194.495 288.411C184.544 288.949 175.364 285.718 168.26 280C159.746 273.154 147.769 273.461 139.178 280.23C132.638 285.384 124.381 288.462 115.379 288.462C106.377 288.462 98.1451 285.384 91.6055 280.23C82.912 273.385 70.9353 273.385 62.2415 280.23C55.7532 285.334 47.598 288.411 38.7246 288.462C17.4132 288.615 0 270.667 0 249.359V115.385C0 51.6667 51.6756 0 115.404 0C179.134 0 230.809 51.6667 230.809 115.385Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    /* Ersatz ohne WebGL: statischer Verlauf in denselben Farben */
    background:
        radial-gradient(60% 50% at 30% 20%, #ffb3d9, transparent 70%),
        radial-gradient(60% 55% at 80% 35%, #87ceeb, transparent 70%),
        radial-gradient(70% 60% at 50% 80%, #4a90e2, transparent 75%),
        linear-gradient(180deg, #2c3e50, #1a1a2e);
    filter: drop-shadow(0 18px 30px rgba(74, 144, 226, .25));
}
.ghost-canvas { width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .6s ease; }
.ghost-canvas.is-ready { opacity: 1; }
.ghost-eyes { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ghost-eye-group { transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.ghost-eye { fill: currentColor; transform-box: fill-box; transform-origin: center; animation: ghostBlink 3s ease-in-out infinite; }
@keyframes ghostBlink {
    0%, 90%, 100% { transform: scaleY(1); }
    95%           { transform: scaleY(.1); }
}
.ghost-shadow {
    width: clamp(90px, 13vw, 130px); height: 14px; margin-top: 18px; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(0, 0, 0, .45), transparent);
    animation: ghostShadow 2.8s ease-in-out infinite;
}
@keyframes ghostShadow { 0%, 100% { transform: scaleX(1); opacity: .9; } 50% { transform: scaleX(.82); opacity: .6; } }

@media (prefers-reduced-motion: reduce) {
    .ghost, .ghost-eye, .ghost-shadow { animation: none; }
    .ghost-eye-group { transition: none; }
}