/* MARITIMER FOOTER - MASTERPIECE EDITION */

:root { 
    --wave-speed: 0s; 
    --line-opacity-multiplier: 1; 
}

#maritime-footer-module {
    position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
    pointer-events: none; z-index: 999;
    overflow: hidden; background: transparent; user-select: none;
}

.physics-wrapper {
    position: absolute;
    bottom: 60px;
    left: 50%;
    width: 1000vw; 
    height: 0;
    margin-left: -500vw; 
    transform-origin: center bottom;
    will-change: transform;
}

.shimmering-lines {
    animation: waveLineRoll var(--wave-speed) linear infinite, lineHuePulsing 15s ease-in-out infinite alternate !important;
}
@keyframes lineHuePulsing {
    0%   { filter: drop-shadow(0 0 3px rgba(56, 189, 248, 0.4)) hue-rotate(0deg); }
    50%  { filter: drop-shadow(0 0 5px rgba(52, 211, 153, 0.6)) hue-rotate(-30deg); }
    100% { filter: drop-shadow(0 0 3px rgba(167, 139, 250, 0.4)) hue-rotate(30deg); }
}

.wave-line { 
    position: absolute; 
    top: -30px; left: 0; width: 100%; height: 60px; 
    background-repeat: repeat-x; 
    background-size: 600px 100%; 
    background-position: center;
    will-change: transform, opacity; 
    pointer-events: none; 
    transition: opacity 0.3s ease-out;
}

.line-back { 
    top: -40px; 
    opacity: calc(0.2 * var(--line-opacity-multiplier)); 
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 60' preserveAspectRatio='none'%3E%3Cpath d='M0,30 Q150,50 300,30 T600,30' fill='none' stroke='%2338bdf8' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E"); 
}
.line-mid { 
    top: -25px; 
    opacity: calc(0.4 * var(--line-opacity-multiplier)); 
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 60' preserveAspectRatio='none'%3E%3Cpath d='M0,30 Q150,10 300,30 T600,30' fill='none' stroke='%2338bdf8' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); 
}
.line-front { 
    top: -10px; 
    opacity: calc(0.6 * var(--line-opacity-multiplier)); 
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 60' preserveAspectRatio='none'%3E%3Cpath d='M0,30 Q150,60 300,30 T600,30' fill='none' stroke='%2338bdf8' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); 
}

@keyframes waveLineRoll { 
    0% { transform: translateX(0); } 
    100% { transform: translateX(-600px); } 
}

.bubbles-layer { position: absolute; top: -50px; left: calc(50% - 40vw); width: 80vw; height: 100px; pointer-events: none; overflow: visible; opacity: 0.6; }
.water-bubble { position: absolute; bottom: 0px; background: transparent; border: 1px solid rgba(56, 189, 248, 0.4); box-shadow: 0 0 2px rgba(56, 189, 248, 0.2); border-radius: 50%; animation: bubbleRise 4s ease-in infinite; }
@keyframes bubbleRise { 0% { transform: translateY(0) scale(0.3); opacity: 0; } 20% { opacity: 0.8; } 80% { opacity: 0.3; } 100% { transform: translateY(-100px) scale(1); opacity: 0; } }

/* --- FISCH --- */
.fish-layer {
    position: absolute; 
    font-size: 1.4rem; 
    opacity: 0.95 !important; 
    filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.7)); 
    pointer-events: none;
    animation: epicFishJourneyHigh 100s linear infinite, fishSineWaveHigh 2.5s ease-in-out infinite alternate;
    transition: opacity 0.5s ease, filter 0.3s ease;
}
.interactive-fish {
    pointer-events: auto !important;
    cursor: pointer;
}
.interactive-fish:hover {
    filter: drop-shadow(0 0 15px rgba(56, 189, 248, 1)) brightness(1.3);
}

@keyframes epicFishJourneyHigh {
    0%    { left: calc(50% - 45vw); top: 15px; transform: perspective(300px) rotateY(180deg); }
    10%   { left: calc(50% + 40vw); top: 10px; transform: perspective(300px) rotateY(180deg); }
    12.5% { left: calc(50% + 40vw); top: 10px; transform: perspective(300px) rotateY(90deg) scale(0.8); }
    15%   { left: calc(50% + 40vw); top: -25px; transform: perspective(300px) rotateY(0deg); } 
    22.5% { left: calc(50% - 45vw); top: -20px; transform: perspective(300px) rotateY(0deg); }
    25%   { left: calc(50% - 45vw); top: -20px; transform: perspective(300px) rotateY(90deg) scale(0.8); }

    26%   { left: calc(50% - 45vw); top: 10px; transform: perspective(300px) rotateY(180deg) rotateZ(-15deg); }
    30%   { left: calc(50% - 10vw); top: -40px; transform: perspective(300px) rotateY(180deg) rotateZ(10deg); } 
    35%   { left: calc(50% + 20vw); top: -5px; transform: perspective(300px) rotateY(180deg) rotateZ(-10deg); }
    40%   { left: calc(50% + 40vw); top: -30px; transform: perspective(300px) rotateY(180deg); } 
    42.5% { left: calc(50% + 40vw); top: -30px; transform: perspective(300px) rotateY(90deg) scale(0.8); }
    45%   { left: calc(50% + 40vw); top: 5px; transform: perspective(300px) rotateY(0deg); }
    47.5% { left: calc(50% - 45vw); top: 5px; transform: perspective(300px) rotateY(0deg); }
    50%   { left: calc(50% - 45vw); top: 5px; transform: perspective(300px) rotateY(90deg) scale(0.8); }

    52%   { left: calc(50% - 45vw); top: 10px; transform: perspective(300px) rotateY(180deg); }
    58%   { left: calc(50% + 40vw); top: -35px; transform: perspective(300px) rotateY(180deg); } 
    62.5% { left: calc(50% + 40vw); top: -35px; transform: perspective(300px) rotateY(90deg) scale(0.8); } 
    65%   { left: calc(50% + 40vw); top: 0px; transform: perspective(300px) rotateY(0deg); }
    72.5% { left: calc(50% - 45vw); top: 0px; transform: perspective(300px) rotateY(0deg); }
    75%   { left: calc(50% - 45vw); top: 0px; transform: perspective(300px) rotateY(90deg) scale(0.8); } 

    77%   { left: calc(50% - 45vw); top: -20px; transform: perspective(300px) rotateY(180deg) rotateZ(20deg); }
    85%   { left: calc(50% + 40vw); top: -45px; transform: perspective(300px) rotateY(180deg) rotateZ(-10deg); } 
    87.5% { left: calc(50% + 40vw); top: -45px; transform: perspective(300px) rotateY(90deg) scaleX(-1); } 
    90%   { left: calc(50% + 40vw); top: -10px; transform: perspective(300px) rotateY(0deg); }
    97.5% { left: calc(50% - 45vw); top: -10px; transform: perspective(300px) rotateY(0deg); }
    100%  { left: calc(50% - 45vw); top: 15px; transform: perspective(300px) rotateY(180deg); } 
}
@keyframes fishSineWaveHigh { 0% { margin-top: 0px; } 100% { margin-top: -18px; } }

/* STUFEN DES FISCH-SCHILLERNS (Level 0 bis 3) */
.fish-layer.shimmer-level-1 {
    filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.8)) brightness(1.1);
    animation: epicFishJourneyHigh 100s linear infinite, fishSineWaveHigh 2.5s ease-in-out infinite alternate, fishScaleShimmer1 1.5s linear infinite !important;
}
.fish-layer.shimmer-level-2 {
    filter: drop-shadow(0 0 10px rgba(52, 211, 153, 0.9)) brightness(1.3);
    animation: epicFishJourneyHigh 100s linear infinite, fishSineWaveHigh 2.5s ease-in-out infinite alternate, fishScaleShimmer2 1s linear infinite !important;
}
.fish-layer.shimmer-level-3 {
    filter: drop-shadow(0 0 16px rgba(255, 255, 255, 1)) brightness(1.6);
    animation: epicFishJourneyHigh 100s linear infinite, fishSineWaveHigh 2.5s ease-in-out infinite alternate, fishScaleShimmer3 0.5s linear infinite !important;
}

@keyframes fishScaleShimmer1 {
    0%   { filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.8)) brightness(1.1) hue-rotate(0deg); }
    100% { filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.9)) brightness(1.2) hue-rotate(180deg); }
}
@keyframes fishScaleShimmer2 {
    0%   { filter: drop-shadow(0 0 10px rgba(52, 211, 153, 0.9)) brightness(1.3) hue-rotate(0deg); }
    100% { filter: drop-shadow(0 0 14px rgba(52, 211, 153, 1)) brightness(1.4) hue-rotate(360deg); }
}
@keyframes fishScaleShimmer3 {
    0%   { filter: drop-shadow(0 0 14px rgba(255, 255, 255, 1)) brightness(1.5) hue-rotate(0deg); }
    100% { filter: drop-shadow(0 0 20px rgba(56, 189, 248, 1)) brightness(1.8) hue-rotate(360deg); }
}

/* --- HAI --- */
.shark-layer { 
    position: absolute; bottom: 60px; left: 20px; font-size: 1.6rem; opacity: 0.85; 
    cursor: grab; pointer-events: auto; touch-action: none; 
}
.shark-layer:active { cursor: grabbing; opacity: 1; filter: grayscale(0%); }

.shark-3d-wrapper { 
    display: inline-block; 
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.5s ease;
    filter: drop-shadow(1px 3px 5px rgba(0, 0, 0, 0.4)); 
}

.shark-spawn-bounce {
    animation: sharkSpawnBounceAnim 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
@keyframes sharkSpawnBounceAnim {
    0%   { transform: translateY(50px) scale(0.5); opacity: 0; }
    50%  { transform: translateY(-15px) scale(1.1); opacity: 1; }
    70%  { transform: translateY(5px) scale(0.95); }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* Butterweiche 3D-Schwenk-Keyframes mit Zwischenschritten (korrekt gespiegelt für linke/rechte Seite) */
.shark-layer.shark-facing-right .shark-3d-wrapper { 
    animation: turnToRightWithKeyframes 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes turnToRightWithKeyframes {
    0%   { transform: perspective(400px) rotateY(0deg) scale(1); }
    35%  { transform: perspective(400px) rotateY(50deg) rotateX(-15deg) translateY(-8px) scale(1.15) skewX(-5deg); }
    70%  { transform: perspective(400px) rotateY(25deg) rotateX(-5deg) translateY(-3px) scale(1.05); }
    100% { transform: perspective(400px) rotateY(35deg) rotateX(-10deg) rotateZ(-3deg) translateZ(10px); }
}

.shark-layer.shark-facing-left .shark-3d-wrapper { 
    animation: turnToLeftWithKeyframes 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes turnToLeftWithKeyframes {
    0%   { transform: perspective(400px) rotateY(35deg) scale(1); }
    35%  { transform: perspective(400px) rotateY(-50deg) rotateX(-15deg) translateY(-8px) scale(1.15) skewX(5deg); }
    70%  { transform: perspective(400px) rotateY(-25deg) rotateX(-5deg) translateY(-3px) scale(1.05); }
    100% { transform: perspective(400px) rotateY(-35deg) rotateX(-10deg) rotateZ(3deg) translateZ(10px) scaleX(-1); }
}

/* Sanfte Schwenk-Animation im Idle */
.shark-layer.is-swimming .shark-3d-wrapper {
    animation: sharkSwimSway 2.2s ease-in-out infinite alternate !important;
}
@keyframes sharkSwimSway {
    0%   { transform: perspective(400px) rotateY(-30deg) rotateX(-8deg) rotateZ(-2deg) translateZ(10px); }
    100% { transform: perspective(400px) rotateY(30deg) rotateX(-8deg) rotateZ(3deg) translateZ(10px); }
}

/* GANZ SEHR DEZENTES, GEHEIMNISVOLLES GRAU-BLAUES SCHILLERN DES HAIS */
.shark-mysterious-shimmer .shark-3d-wrapper {
    animation: sharkMysteriousAnim 8s ease-in-out infinite alternate;
}
@keyframes sharkMysteriousAnim {
    0%   { filter: drop-shadow(1px 3px 4px rgba(0, 0, 0, 0.5)) hue-rotate(0deg) brightness(0.95); }
    50%  { filter: drop-shadow(1px 3px 6px rgba(56, 189, 248, 0.2)) hue-rotate(20deg) brightness(1.05); }
    100% { filter: drop-shadow(1px 3px 4px rgba(0, 0, 0, 0.5)) hue-rotate(0deg) brightness(0.95); }
}

.shark-layer.is-eating .shark-3d-wrapper { animation: sharkBite 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards !important; }
@keyframes sharkBite { 0% { transform: perspective(400px) rotateY(20deg) rotateX(-20deg) scale(1.1); } 40% { transform: perspective(400px) rotateY(0deg) rotateX(10deg) scale(1.5); } 100% { transform: perspective(400px) rotateY(0deg) rotateX(-18deg) scale(1.1); } }
.shark-layer.is-dragging .shark-3d-wrapper { animation: sharkSwimWiggle 0.35s ease-in-out infinite alternate !important; }
@keyframes sharkSwimWiggle { 0% { transform: perspective(400px) rotateY(25deg) rotateX(-15deg) translateZ(15px); } 100% { transform: perspective(400px) rotateY(45deg) rotateX(5deg) translateZ(15px); } }

/* RIESIGES AUFBLITZEN */
.shark-flash-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 9999; }
.flash-content { text-align: center; }
.flash-text { font-size: 5rem; font-family: 'Cinzel', sans-serif; font-weight: 900; color: #fff; text-shadow: 0 0 20px #0ea5e9, 0 0 40px #38bdf8, 0 0 60px #0284c7; opacity: 0; transform: scale(0.1); }
.shark-flash-overlay.active .flash-text { animation: flashEpic 1.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }
@keyframes flashEpic { 0% { opacity: 0; transform: scale(0.1) rotate(-10deg); } 30% { opacity: 1; transform: scale(1.2) rotate(5deg); } 50% { opacity: 1; transform: scale(1.0) rotate(0deg); text-shadow: 0 0 40px #0ea5e9, 0 0 80px #38bdf8; } 80% { opacity: 1; transform: scale(1.0); } 100% { opacity: 0; transform: scale(1.5) translateY(-50px); } }