/* ═══════════════════════════════════════════════════════════
   reef.css – reefinity Riff-Elemente & Modal
   ═══════════════════════════════════════════════════════════ */

/* ── Riff-Wrapper um das Manifest ─────────────────────────── */

.reef-scene {
    position: relative;
    max-width: 900px;
    margin: 4rem auto;
    /* overflow:visible damit Fische/Korallen über den Rand hinausragen */
    overflow: visible;
    padding: 0 3rem;
}

/* Fische und Korallen leben absolut im reef-scene Container */
.reef-creature {
    position: absolute;
    cursor: pointer;
    transition: filter 0.2s ease, transform 0.2s ease;
    z-index: 2;
    user-select: none;
    line-height: 0; /* verhindert ungewollten whitespace unter dem SVG */
}

.reef-creature:hover {
    filter: drop-shadow(0 0 8px #4dd0e1) brightness(1.3);
}

.reef-creature.fish:hover {
    /* Hover-Scale nicht mit animation mixen, sondern filter reicht */
    filter: drop-shadow(0 0 10px #4dd0e1) brightness(1.4);
}

.reef-creature .creature-label {
    position: absolute;
    bottom: -1.6rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.65rem;
    color: #80deea;
    white-space: nowrap;
    opacity: 0.6;
    transition: opacity 0.2s ease;
    font-family: 'Courier New', monospace;
    pointer-events: none;
}

.reef-creature:hover .creature-label {
    opacity: 1;
}

/* ── Fisch-Animationen ────────────────────────────────────── */
/* BUG FIX: Keyframe-Namen sind jetzt reef-prefixed um Kollisionen
   mit anderen Bibliotheken zu vermeiden. Die Namen im JS müssen
   identisch sein: reefFishFloat / reefFishWiggle               */

@keyframes reefFishFloat {
    0%   { transform: translateY(0px); }
    50%  { transform: translateY(-7px); }
    100% { transform: translateY(0px); }
}

@keyframes reefFishWiggle {
    0%   { transform: translateY(0px) rotate(-2deg); }
    25%  { transform: translateY(-4px) rotate(1deg); }
    50%  { transform: translateY(-7px) rotate(2deg); }
    75%  { transform: translateY(-3px) rotate(-1deg); }
    100% { transform: translateY(0px) rotate(-2deg); }
}

/* Fische die nach rechts schauen (scaleX(-1)) brauchen ein eigenes
   keyframe damit die Wiggle-Rotation nicht gespiegelt-falsch wirkt */
@keyframes reefFishFloatFlipped {
    0%   { transform: scaleX(-1) translateY(0px); }
    50%  { transform: scaleX(-1) translateY(-7px); }
    100% { transform: scaleX(-1) translateY(0px); }
}

@keyframes reefFishWiggleFlipped {
    0%   { transform: scaleX(-1) translateY(0px) rotate(2deg); }
    25%  { transform: scaleX(-1) translateY(-4px) rotate(-1deg); }
    50%  { transform: scaleX(-1) translateY(-7px) rotate(-2deg); }
    75%  { transform: scaleX(-1) translateY(-3px) rotate(1deg); }
    100% { transform: scaleX(-1) translateY(0px) rotate(2deg); }
}

/* ── Modal ────────────────────────────────────────────────── */

/* BUG FIX: display:none statt nur opacity+pointer-events,
   sonst ist das Element unsichtbar aber noch klickbar / im
   Accessibility-Tree. JS setzt display:flex beim Öffnen. */

.reef-modal-overlay {
    display: none; /* JS setzt dies auf flex beim Öffnen */
    position: fixed;
    inset: 0;
    background: rgba(5, 20, 30, 0.85);
    backdrop-filter: blur(6px);
    z-index: 100;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.reef-modal-overlay.open {
    opacity: 1;
}

.reef-modal {
    background: linear-gradient(160deg, #0d2d3a 0%, #0a1e2b 100%);
    border: 1px solid #1e6b7b;
    border-radius: 12px;
    max-width: 700px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    padding: 2.5rem;
    position: relative;
    transform: translateY(20px) scale(0.97);
    transition: transform 0.3s ease;
    box-shadow:
        0 0 40px rgba(77, 208, 225, 0.08),
        0 20px 60px rgba(0, 0, 0, 0.5);
}

.reef-modal-overlay.open .reef-modal {
    transform: translateY(0) scale(1);
}

/* Wasser-Shimmer oben im Modal */
.reef-modal::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, #4dd0e1, #26c6da, transparent);
    border-radius: 12px 12px 0 0;
}

.reef-modal-close {
    position: absolute;
    top: 1rem;
    right: 1.2rem;
    background: none;
    border: none;
    color: #4dd0e1;
    font-size: 1.5rem;
    cursor: pointer;
    line-height: 1;
    opacity: 0.7;
    transition: opacity 0.2s;
    padding: 0.2rem 0.5rem;
}

.reef-modal-close:hover {
    opacity: 1;
}

.reef-modal-type {
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #4dd0e1;
    margin-bottom: 0.5rem;
    font-family: 'Courier New', monospace;
}

.reef-modal h2 {
    color: #80deea;
    margin: 0 0 0.3rem 0;
    font-size: 1.6rem;
}

.reef-modal-meta {
    font-size: 0.8rem;
    color: #546e7a;
    margin-bottom: 1.5rem;
    font-family: 'Courier New', monospace;
}

.reef-modal-content {
    color: #b2ebf2;
    line-height: 1.8;
    font-size: 0.95rem;
}

.reef-modal-content h2,
.reef-modal-content h3 {
    color: #4dd0e1;
    margin-top: 1.5rem;
}

.reef-modal-content code {
    background: rgba(77, 208, 225, 0.1);
    border: 1px solid rgba(77, 208, 225, 0.2);
    padding: 0.1em 0.4em;
    border-radius: 4px;
    font-size: 0.85em;
    color: #80deea;
}

.reef-modal-content pre {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(77, 208, 225, 0.15);
    border-radius: 8px;
    padding: 1rem;
    overflow-x: auto;
}

.reef-modal-content pre code {
    background: none;
    border: none;
    padding: 0;
}

.reef-modal-content blockquote {
    border-left: 3px solid #4dd0e1;
    margin-left: 0;
    padding-left: 1rem;
    color: #80deea;
    font-style: italic;
}

/* Ladeindikator */
.reef-modal-loading {
    text-align: center;
    padding: 2rem;
    color: #4dd0e1;
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
}

.reef-modal-loading::after {
    content: '';
    display: inline-block;
    width: 1.5em;
    animation: reefDots 1.2s steps(3, end) infinite;
}

@keyframes reefDots {
    0%   { content: ''; }
    33%  { content: '.'; }
    66%  { content: '..'; }
    100% { content: '...'; }
}

/* Scrollbar im Modal */
.reef-modal::-webkit-scrollbar       { width: 6px; }
.reef-modal::-webkit-scrollbar-track { background: transparent; }
.reef-modal::-webkit-scrollbar-thumb { background: #1e6b7b; border-radius: 3px; }

/* ── Responsive ───────────────────────────────────────────── */

@media (max-width: 768px) {
    .reef-scene {
        padding: 0 1rem;
    }

    .reef-modal {
        padding: 1.5rem;
        max-height: 90vh;
    }

    .reef-modal h2 {
        font-size: 1.2rem;
    }
}