:root {
    color-scheme: light;
    background: #abd1cb;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
}

.wumpis-welt {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    height: 100svh;
    overflow: hidden;
    isolation: isolate;
}

.ocean {
    position: absolute;
    inset: -3%;
    z-index: -1;
    width: 106%;
    height: 106%;
    pointer-events: none;
}

.water-layer {
    /* Jede Form dreht und skaliert um ihre eigene Mitte. */
    transform-box: fill-box;
    transform-origin: center;
    animation: current-drift 24s ease-in-out infinite;
}

.water-layer--outer {
    --drift-x: 18px;
    --drift-y: -15px;
    --turn: 1deg;
    --swell: 1.01;
    animation-duration: 30s;
}

.water-layer--mint {
    --drift-x: -26px;
    --drift-y: 18px;
    --turn: -1.5deg;
    --swell: 1.015;
    animation-duration: 27s;
    animation-delay: -8s;
}

.water-layer--deep {
    --drift-x: 24px;
    --drift-y: 16px;
    --turn: 1.8deg;
    --swell: 1.012;
    animation-duration: 23s;
    animation-delay: -5s;
}

.water-layer--inner {
    /* Mitte der ursprünglichen Pfad-Bounds im 1840 × 1034 ViewBox.
       Fischpositionen dürfen den Drehpunkt der Bubble nicht verschieben. */
    transform-box: view-box;
    transform-origin: 884.694140px 532.308712px;
    --drift-x: -20px;
    --drift-y: -22px;
    --turn: -1.4deg;
    --swell: 1.018;
    animation-duration: 19s;
    animation-delay: -11s;
}

.bubble-fish {
    pointer-events: none;
}

.fish {
    /* Gemeinsamer 90-s-Takt, Starts jeweils 30 s auseinander.
       Jede Passage dauert unter 60 s: nie drei Fische gleichzeitig.
       Start, Ende und Rücksprung liegen vollständig außerhalb der Maske. */
    animation: fish-near 90s linear infinite;
}

.fish--near {
    opacity: .30;
    animation-delay: -12s;
}

.fish--far {
    opacity: .14;
    animation-name: fish-far;
    animation-delay: -72s;
}

.fish--middle {
    opacity: .22;
    animation-name: fish-middle;
    animation-delay: -42s;
}

.fish image {
    transform-box: fill-box;
    transform-origin: center;
    animation: fish-tilt 8s ease-in-out infinite;
}

.fish--far image {
    animation-duration: 11s;
    animation-delay: -3s;
}

.fish--middle image {
    animation-duration: 9s;
    animation-delay: -6s;
}

@keyframes fish-tilt {
    0%, 100% { transform: rotate(-2deg); }
    50% { transform: rotate(2deg); }
}

@keyframes fish-near {
    0% { transform: translate(1490px, 350px); visibility: visible; }
    22% { transform: translate(875px, 326px); }
    44% { transform: translate(260px, 344px); visibility: visible; }
    44.001%, 100% { transform: translate(260px, 344px); visibility: hidden; }
}

@keyframes fish-far {
    0% { transform: translate(260px, 635px); visibility: visible; }
    26% { transform: translate(875px, 659px); }
    52% { transform: translate(1490px, 641px); visibility: visible; }
    52.001%, 100% { transform: translate(1490px, 641px); visibility: hidden; }
}

@keyframes fish-middle {
    0% { transform: translate(1490px, 760px); visibility: visible; }
    20% { transform: translate(875px, 782px); }
    40% { transform: translate(260px, 766px); visibility: visible; }
    40.001%, 100% { transform: translate(260px, 766px); visibility: hidden; }
}

.water-layer--veil {
    --drift-x: 15px;
    --drift-y: -18px;
    --turn: 1.2deg;
    --swell: 1.01;
    animation-duration: 25s;
    animation-delay: -15s;
}

@keyframes current-drift {
    /* Ein kompletter Zyklus einschließlich Rückweg dauert 19–30 Sekunden.
       Gleiche Endpunkte und sanftes Abbremsen verhindern einen Sprung. */
    0%, 100% {
        transform: translate(0, 0) rotate(0) scale(1);
    }
    50% {
        transform: translate(var(--drift-x), var(--drift-y)) rotate(var(--turn)) scale(var(--swell));
    }
}

#wumpi-container {
    --float-period: 3.6s;
    position: relative;
    display: grid;
    place-items: center;
    width: min(clamp(160px, 22.3vw, 440px), 72vw, 79svh);
    aspect-ratio: 410 / 370;
    cursor: pointer;
}

#wumpi-container::before {
    /* Der Player ragt über den Container hinaus. Seine gesamte sichtbare
       Fläche erhält einen festen Klickbereich, unabhängig vom Schweben. */
    content: "";
    position: absolute;
    inset: -23%;
    z-index: 1;
    border-radius: 50%;
}

#wumpi-container:focus-visible {
    outline: 2px solid #285d58;
    outline-offset: 12px;
    border-radius: 50%;
}

.wumpi-float,
#wumpi-player {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.wumpi-float {
    display: grid;
    place-items: center;
}

#wumpi-player {
    /* Transparente Ränder der 1000×1000-Komposition ausgleichen. */
    inset: -23%;
}

#wumpi-player svg {
    display: block;
    width: 100%;
    height: 100%;
}

.wumpi-shadow {
    position: absolute;
    /* Abstand zum sichtbaren Körper, der über den Player-Container hinausragt. */
    top: calc(100% + clamp(48px, 6vw, 80px));
    left: 22%;
    width: 56%;
    height: 7%;
    border-radius: 50%;
    background: #245b56;
    opacity: 0;
    filter: blur(7px);
    pointer-events: none;
}

/* Beide Animationen starten zusammen, mit derselben Dauer und Kurve. */
#wumpi-container[data-ready="true"] .wumpi-float {
    animation: wumpi-float var(--float-period) ease-in-out infinite;
}

#wumpi-container[data-ready="true"] .wumpi-shadow {
    animation: wumpi-shadow var(--float-period) ease-in-out infinite;
}

#wumpi-container[data-state="error"] .wumpi-placeholder {
    display: inline;
}

#wumpi-container[data-ready="false"] #wumpi-player {
    visibility: hidden;
}

@keyframes wumpi-float {
    0%, 100% { transform: translateY(9px); }
    50% { transform: translateY(-9px); }
}

@keyframes wumpi-shadow {
    0%, 100% {
        transform: scale(1);
        opacity: .30;
        filter: blur(clamp(3px, .35vw, 5px));
    }
    50% {
        transform: scale(.78);
        opacity: .18;
        filter: blur(clamp(5px, .6vw, 8px));
    }
}

.wumpi-placeholder {
    /* Während des Ladens leer lassen; Text nur bei einem Ladefehler zeigen. */
    display: none;
    color: #285d58;
    font-size: clamp(1.125rem, 2vw, 2rem);
    font-weight: 400;
    letter-spacing: .035em;
}

/* Eine Figur behält auch im Hochformat ihre Proportionen. */
@media (max-aspect-ratio: 3 / 4) {
    #wumpi-container {
        width: min(54vw, 38svh);
    }
}

@media (prefers-reduced-motion: reduce) {
    .fish image {
        animation: none;
        transform: none;
    }

    .fish {
        animation: none;
        visibility: visible;
    }

    .fish--near { transform: translate(690px, 330px); }
    .fish--far { transform: translate(1110px, 640px); }
    .fish--middle { display: none; }

    .water-layer {
        animation: none;
        transform: none;
    }

    #wumpi-container[data-ready="true"] .wumpi-float,
    #wumpi-container[data-ready="true"] .wumpi-shadow {
        animation: none;
        transform: none;
    }

    #wumpi-container[data-ready="true"] .wumpi-shadow {
        opacity: .24;
        filter: blur(clamp(4px, .45vw, 6px));
    }
}