/* Digital Telomere - Deep Sea HUD
   A hand-drawn marine biology research interface */

:root {
    --ocean-deep: #0A1628;
    --frost-glass: rgba(180, 215, 235, 0.10);
    --frost-edge: #B8D8E8;
    --ice-text: #D6EAF5;
    --mint-note: #A8E6CF;
    --coral-highlight: #FF8A80;
    --teal-instrument: #7FDBCA;
    --bioluminescence: #64FFDA;
    --warm-amber: #FFD54F;
    --mid-ocean: #1A3A5C;
    --deep-current: #0D2B45;
    --blur-light: blur(20px) saturate(1.2);
    --blur-heavy: blur(32px) saturate(1.5);
    --blur-medium: blur(24px) saturate(1.4);
}

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--ocean-deep);
    color: var(--ice-text);
    font-family: 'Commissioner', sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: 1.7;
    letter-spacing: 0.01em;
    overflow-x: hidden;
    min-height: 100vh;
}

/* ===== Canvas background ===== */
#ocean-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    pointer-events: none;
}

/* ===== HUD Frame - Tier 1 (z-index: 10) ===== */
#hud-frame {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.5s ease;
}

#hud-frame.visible {
    opacity: 1;
}

/* Corner brackets */
.corner-bracket {
    position: absolute;
    opacity: 0.4;
    animation: bracket-pulse 4s ease-in-out infinite;
}

.corner-bracket.top-left {
    top: 16px;
    left: 16px;
}

.corner-bracket.top-right {
    top: 16px;
    right: 16px;
}

.corner-bracket.bottom-left {
    bottom: 16px;
    left: 16px;
}

.corner-bracket.bottom-right {
    bottom: 16px;
    right: 16px;
}

@keyframes bracket-pulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.5; }
}

/* Registration crosshairs */
.crosshair {
    position: absolute;
    opacity: 0.3;
    animation: bracket-pulse 4s ease-in-out infinite;
    animation-delay: -2s;
}

.crosshair.top-mid {
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
}

.crosshair.bottom-mid {
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
}

.crosshair.left-mid {
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
}

.crosshair.right-mid {
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
}

/* Depth readout strip (right edge, 60px wide) */
#depth-readout {
    position: absolute;
    top: 40px;
    right: 20px;
    width: 60px;
    height: calc(100vh - 80px);
    overflow: hidden;
}

#depth-values {
    font-family: 'Space Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.08em;
    color: var(--teal-instrument);
    opacity: 0.7;
    line-height: 20px;
    white-space: nowrap;
    transition: transform 0.1s linear;
}

#depth-values span {
    display: block;
    text-align: right;
    padding-right: 4px;
}

/* Depth scale ruler */
#depth-scale {
    position: absolute;
    top: 40px;
    right: 80px;
    width: 20px;
    height: calc(100vh - 80px);
    opacity: 0.4;
}

/* ===== Title Panel - Tier 2 (z-index: 20) ===== */
#title-panel {
    position: fixed;
    top: 40px;
    left: 30px;
    width: 320px;
    padding: 24px;
    z-index: 20;
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 1.5s ease 0.3s, transform 1.5s ease 0.3s;
    background: rgba(200, 225, 240, 0.08);
    backdrop-filter: var(--blur-medium);
    -webkit-backdrop-filter: var(--blur-medium);
}

#title-panel.visible {
    opacity: 1;
    transform: scale(1);
}

/* Frost panel base */
.frost-panel {
    background: var(--frost-glass);
    backdrop-filter: var(--blur-light);
    -webkit-backdrop-filter: var(--blur-light);
    border: 1px solid rgba(184, 216, 232, 0.25);
    border-radius: 4px;
}

.compass-rose-wrap {
    float: left;
    margin-right: 16px;
    margin-bottom: 8px;
}

#compass-rose {
    animation: compass-spin 8s linear infinite;
}

@keyframes compass-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Site title - Commissioner 700, 36px (48px per design) */
#site-title {
    font-family: 'Commissioner', sans-serif;
    font-weight: 700;
    font-size: 36px;
    color: var(--ice-text);
    letter-spacing: 0.04em;
    line-height: 1.2;
    margin-bottom: 8px;
}

#site-title .char {
    display: inline-block;
    opacity: 0;
    transition: opacity 0.3s ease;
}

#site-title .char.visible {
    opacity: 1;
}

.dive-log {
    font-family: 'Caveat', cursive;
    font-size: 18px;
    color: var(--mint-note);
    transform: rotate(-1deg);
    clear: both;
    margin-bottom: 6px;
}

.hud-coordinates {
    display: flex;
    gap: 12px;
    margin-top: 4px;
    clear: both;
}

.hud-coordinates .instrument-text {
    font-size: 10px;
}

/* ===== Sonar Panel - Bottom Left (Tier 2) ===== */
#sonar-panel {
    position: fixed;
    bottom: 30px;
    left: 30px;
    width: 160px;
    height: 160px;
    z-index: 20;
    opacity: 0;
    transition: opacity 0.8s ease;
}

#sonar-panel.visible {
    opacity: 1;
}

#sonar-sweep {
    transform-origin: 80px 80px;
    animation: sonar-rotate 3s linear infinite;
    animation-play-state: paused;
}

#sonar-trail {
    transform-origin: 80px 80px;
    animation: sonar-rotate 3s linear infinite;
    animation-play-state: paused;
}

#sonar-panel.active #sonar-sweep,
#sonar-panel.active #sonar-trail {
    animation-play-state: running;
}

@keyframes sonar-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Sonar blips */
.sonar-blip {
    animation: blip-flash 3s ease-in-out infinite;
}

.sonar-blip:nth-child(5) {
    animation-delay: 0s;
}

.sonar-blip:nth-child(6) {
    animation-delay: 1s;
}

.sonar-blip:nth-child(7) {
    animation-delay: 2s;
}

@keyframes blip-flash {
    0%, 70%, 100% { opacity: 0; }
    75% { opacity: 0.8; }
    85% { opacity: 0.4; }
}

/* ===== Annotation Panel - Bottom Right (Tier 2) ===== */
#annotation-panel {
    position: fixed;
    bottom: 30px;
    right: 90px;
    width: 280px;
    height: 140px;
    padding: 18px;
    z-index: 20;
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.8s ease, transform 0.6s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#annotation-panel.visible {
    opacity: 1;
    transform: scale(1);
}

.field-note {
    font-family: 'Caveat', cursive;
    font-size: 18px;
    color: var(--mint-note);
    line-height: 1.5;
    transform: rotate(0.5deg);
}

.annotation-timestamp {
    text-align: right;
    margin-top: 8px;
    opacity: 0.5;
}

/* ===== Scroll container ===== */
#scroll-container {
    position: relative;
    z-index: 15;
}

/* ===== Dive sections ===== */
.dive-section {
    position: relative;
    width: 100%;
}

#surface {
    height: 50vh;
}

#surface .section-spacer {
    height: 50vh;
}

#descent {
    min-height: 150vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10vh 0;
    gap: 8vh;
}

#reef {
    min-height: 350vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15vh;
    padding: 15vh 5vw;
}

#deep-water {
    min-height: 250vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12vh;
    padding: 10vh 5vw;
}

#floor {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10vh 5vw;
    gap: 6vh;
    position: relative;
}

/* ===== Content panels (center viewport, max 680px) ===== */
.content-panel {
    max-width: 680px;
    width: 100%;
    padding: 40px;
    background: rgba(180, 210, 230, 0.12);
    backdrop-filter: var(--blur-heavy);
    -webkit-backdrop-filter: var(--blur-heavy);
    border: 1px solid rgba(184, 216, 232, 0.30);
    border-radius: 4px;
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
                transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.content-panel.revealed {
    opacity: 1;
    transform: scale(1);
}

/* Panel wavy border decoration */
.content-panel::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 10%;
    width: 80%;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(168, 230, 207, 0.3) 20%,
        rgba(168, 230, 207, 0.5) 50%,
        rgba(168, 230, 207, 0.3) 80%,
        transparent 100%
    );
    border-radius: 1px;
}

.content-panel {
    position: relative;
}

.content-panel h2 {
    font-family: 'Commissioner', sans-serif;
    font-weight: 700;
    font-size: 28px;
    color: var(--ice-text);
    margin-bottom: 20px;
    letter-spacing: 0.02em;
}

.content-panel p {
    margin-bottom: 16px;
    color: var(--ice-text);
    font-weight: 300;
}

.content-panel p:last-child {
    margin-bottom: 0;
}

/* Subheadings */
.content-panel h3 {
    font-family: 'Commissioner', sans-serif;
    font-weight: 500;
    font-size: 22px;
    color: var(--ice-text);
    margin-bottom: 12px;
}

/* ===== Fish illustrations (Tier 3, z-index: 30 on hover) ===== */
.fish-illustration {
    position: relative;
    opacity: 0;
    transition: opacity 0.8s ease, transform 1.2s ease;
    z-index: 20;
}

.fish-illustration:hover {
    z-index: 30;
}

#fish-mandarin {
    transform: translateX(-200px);
}

#fish-mandarin.visible {
    opacity: 1;
    transform: translateX(0);
    animation: fish-swim 4s ease-in-out infinite;
}

@keyframes fish-swim {
    0%, 100% { transform: translateY(0); }
    25% { transform: translateY(-8px) translateX(3px); }
    50% { transform: translateY(-15px); }
    75% { transform: translateY(-8px) translateX(-3px); }
}

#fish-moorish {
    transform: translateX(200px);
}

#fish-moorish.visible {
    opacity: 1;
    transform: translateX(0);
    animation: fish-swim-alt 5s ease-in-out infinite;
}

@keyframes fish-swim-alt {
    0%, 100% { transform: translateY(0); }
    25% { transform: translateY(-6px) translateX(-4px); }
    50% { transform: translateY(-12px); }
    75% { transform: translateY(-6px) translateX(4px); }
}

/* Regal Angelfish - hover reveal */
#fish-angelfish {
    transform: scale(0.85);
}

#fish-angelfish.revealed {
    opacity: 0.85;
    transform: scale(1);
    animation: fish-hover 6s ease-in-out infinite;
}

#fish-angelfish:hover {
    opacity: 1;
}

#fish-angelfish:hover .fish-annotation {
    opacity: 1;
}

@keyframes fish-hover {
    0%, 100% { transform: translateY(0) translateX(0); }
    33% { transform: translateY(-10px) translateX(5px); }
    66% { transform: translateY(-5px) translateX(-8px); }
}

/* ===== Fish annotations ===== */
.fish-annotation {
    position: absolute;
    font-family: 'Caveat', cursive;
    font-size: 16px;
    color: var(--mint-note);
    transform: rotate(var(--rotate, 0deg)) scale(0.7);
    opacity: 0;
    transition: opacity 0.4s ease 0.1s, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s;
    white-space: nowrap;
}

.fish-annotation.visible {
    opacity: 1;
    transform: rotate(var(--rotate, 0deg)) scale(1);
}

/* Mandarin annotations */
.annotation-dorsal {
    top: -10px;
    left: 140px;
}

.annotation-eye {
    top: 50px;
    right: -40px;
}

.annotation-tail {
    bottom: 30px;
    left: 10px;
}

.annotation-lateral {
    bottom: 55px;
    left: 100px;
}

/* Moorish annotations */
.annotation-filament {
    top: -15px;
    left: 100px;
}

.annotation-band {
    top: 100px;
    right: -50px;
}

.annotation-snout {
    top: 70px;
    right: -70px;
}

/* Angelfish annotations */
.annotation-angelfish-dorsal {
    top: -5px;
    left: 100px;
}

.annotation-angelfish-stripe {
    top: 90px;
    right: -70px;
}

.annotation-line {
    display: inline-block;
    width: 30px;
    height: 1px;
    background: var(--mint-note);
    vertical-align: middle;
    margin-right: 6px;
    opacity: 0.6;
}

.annotation-text {
    vertical-align: middle;
}

/* ===== Descent field note ===== */
.descent-note {
    max-width: 500px;
    text-align: center;
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
                transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.descent-note.revealed {
    opacity: 1;
    transform: scale(1);
}

/* ===== Telomere divider ===== */
.telomere-divider {
    width: 100%;
    max-width: 800px;
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
                transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.telomere-divider.revealed {
    opacity: 1;
    transform: scale(1);
}

.telomere-divider.revealed #telomere-strand-1,
.telomere-divider.revealed #telomere-strand-2,
.telomere-divider.revealed .telomere-strand {
    animation: draw-strand 2s ease forwards;
}

@keyframes draw-strand {
    to {
        stroke-dashoffset: 0;
    }
}

/* ===== Neon tetra scatter ===== */
#tetra-scatter {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 5;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.5s ease;
}

#tetra-scatter.visible {
    opacity: 1;
}

.tetra {
    position: absolute;
    left: var(--tx, 50vw);
    top: var(--ty, 50vh);
    animation: tetra-drift 6s ease-in-out infinite;
    animation-delay: var(--delay, 0s);
}

@keyframes tetra-drift {
    0%, 100% {
        transform: translateX(0) translateY(0);
    }
    25% {
        transform: translateX(15px) translateY(-8px);
    }
    50% {
        transform: translateX(5px) translateY(-15px);
    }
    75% {
        transform: translateX(-10px) translateY(-5px);
    }
}

/* ===== Surface button ===== */
.surface-button-wrap {
    margin-top: 30px;
    display: flex;
    justify-content: center;
}

#surface-button {
    cursor: pointer;
    pointer-events: all;
    transition: transform 0.15s ease;
}

#surface-button:hover {
    animation: button-shake 0.3s ease;
}

#surface-button:hover path:first-of-type {
    stroke: var(--coral-highlight);
    opacity: 1;
}

#surface-button:hover text {
    fill: var(--coral-highlight);
}

@keyframes button-shake {
    0%, 100% { transform: translateX(0); }
    16% { transform: translateX(2px); }
    33% { transform: translateX(-2px); }
    50% { transform: translateX(2px); }
    66% { transform: translateX(-2px); }
    83% { transform: translateX(2px); }
}

/* ===== Field notes (inline / handwritten style) ===== */
.field-note-inline {
    font-family: 'Caveat', cursive;
    font-size: 18px;
    color: var(--mint-note);
    transform: rotate(var(--rotate, -0.5deg));
    display: block;
    margin-top: 12px;
    opacity: 0.85;
}

/* Floor field note */
.floor-field-note {
    max-width: 500px;
    text-align: center;
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
                transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.floor-field-note.revealed {
    opacity: 1;
    transform: scale(1);
}

/* ===== HUD instrument text ===== */
.instrument-text {
    font-family: 'Space Mono', monospace;
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--teal-instrument);
    opacity: 0.7;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    #site-title {
        font-size: 26px;
    }

    #title-panel {
        width: 240px;
        padding: 16px;
        top: 20px;
        left: 16px;
    }

    #annotation-panel {
        width: 200px;
        height: auto;
        right: 16px;
        bottom: 16px;
        padding: 12px;
    }

    #sonar-panel {
        width: 100px;
        height: 100px;
        bottom: 16px;
        left: 16px;
    }

    #sonar-panel svg {
        width: 100px;
        height: 100px;
    }

    #depth-readout {
        display: none;
    }

    #depth-scale {
        display: none;
    }

    .content-panel {
        padding: 24px;
        margin: 0 16px;
    }

    .content-panel h2 {
        font-size: 22px;
    }

    .fish-illustration svg {
        max-width: 240px;
        height: auto;
    }

    .fish-annotation {
        font-size: 14px;
    }

    #reef, #deep-water {
        padding: 10vh 4vw;
        gap: 10vh;
    }

    #reef {
        min-height: 280vh;
    }

    #deep-water {
        min-height: 200vh;
    }

    .hud-coordinates {
        flex-direction: column;
        gap: 2px;
    }

    .descent-note,
    .floor-field-note {
        margin: 0 20px;
    }
}

@media (max-width: 480px) {
    #title-panel {
        width: 200px;
    }

    #annotation-panel {
        display: none;
    }

    .corner-bracket {
        display: none;
    }

    .crosshair {
        display: none;
    }

    .compass-rose-wrap {
        display: none;
    }

    #sonar-panel {
        width: 80px;
        height: 80px;
    }

    #sonar-panel svg {
        width: 80px;
        height: 80px;
    }

    .content-panel {
        padding: 20px;
    }

    .fish-illustration svg {
        max-width: 200px;
    }
}