/* ===== RESET & BASE ===== */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --deep-current: #1b2d2a;
    --coral-alarm: #c1444e;
    --anemone-pink: #d4899a;
    --seafoam-veil: #b8d8d0;
    --kelp-cream: #f0ebe0;
    --lagoon-deep: #2a7c6f;
    --abyssal: #0e1b1f;
    --bioluminescent: #b3a7cc;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Libre Baskerville', Georgia, serif;
    color: var(--abyssal);
    background: var(--deep-current);
    overflow-x: hidden;
    line-height: 1.75;
}

/* ===== EMERGENCY BANNER ===== */
#emergency-banner {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 2.4rem;
    background: var(--coral-alarm);
    z-index: 1000;
    overflow: hidden;
    display: flex;
    align-items: center;
    will-change: background-color;
    animation: bannerPulse 4s ease-in-out infinite paused;
}

#emergency-banner.intensified {
    animation-play-state: running;
}

@keyframes bannerPulse {
    0%, 100% { background-color: var(--coral-alarm); }
    50% { background-color: var(--anemone-pink); }
}

.banner-track {
    display: flex;
    white-space: nowrap;
    will-change: transform;
    animation: bannerScroll 20s linear infinite;
}

.banner-track span {
    font-family: 'Caveat', cursive;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--kelp-cream);
    padding: 0 0.5rem;
}

@keyframes bannerScroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* ===== SEAHORSE SCROLL INDICATOR ===== */
#seahorse-indicator {
    position: fixed;
    right: 16px;
    top: 3.4rem;
    z-index: 900;
    opacity: 0.6;
    transition: opacity 0.3s;
    pointer-events: none;
}

/* ===== PUFFERFISH NAVIGATION ===== */
#pufferfish-nav {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1000;
    cursor: pointer;
}

#pufferfish-nav .pufferfish-svg {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#pufferfish-nav:hover .pufferfish-svg {
    transform: scale(1.4);
}

.nav-anchors {
    position: absolute;
    bottom: 60px;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity 0.3s, transform 0.3s;
}

#pufferfish-nav:hover .nav-anchors {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.nav-anchors a {
    font-family: 'Libre Baskerville', serif;
    font-size: 1rem;
    color: var(--kelp-cream);
    background: var(--deep-current);
    padding: 4px 12px;
    border-radius: 4px;
    text-decoration: none;
    border: 1px solid var(--lagoon-deep);
    transition: background 0.2s;
}

.nav-anchors a:hover {
    background: var(--lagoon-deep);
}

/* ===== SECTIONS ===== */
.section {
    position: relative;
    min-height: 100vh;
    padding: 4rem 2rem;
    padding-top: calc(2.4rem + 4rem);
    overflow: hidden;
}

/* ===== TIDAL COLUMN ===== */
.tidal-column {
    max-width: 38rem;
    position: relative;
    z-index: 10;
    transition: margin-left 0.6s ease, margin-right 0.6s ease;
}

.column-left {
    margin-left: 5vw;
}

.column-center {
    margin-left: auto;
    margin-right: auto;
}

.column-right {
    margin-left: auto;
    margin-right: 5vw;
}

/* ===== BLUR FOCUS ANIMATION ===== */
.blur-focus-target {
    opacity: 0;
    filter: blur(12px);
    transition: opacity 1.2s ease, filter 1.2s ease;
}

.blur-focus-target.visible {
    opacity: 1;
    filter: blur(0);
}

/* ===== SECTION I: BROADCAST ===== */
.section-broadcast {
    background: var(--deep-current);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

.section-broadcast .tidal-column {
    text-align: center;
}

.main-title {
    font-family: 'Libre Baskerville', serif;
    font-weight: 700;
    font-size: clamp(3.5rem, 9vw, 7rem);
    color: var(--seafoam-veil);
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.subtitle {
    font-family: 'Caveat', cursive;
    font-style: italic;
    font-size: clamp(1.2rem, 3vw, 1.8rem);
    color: var(--anemone-pink);
    margin-top: 1rem;
}

/* Angelfish drift */
.angelfish-drift {
    position: absolute;
    width: 20vw;
    top: 30%;
    opacity: 0.3;
    animation: fishDrift 20s linear infinite;
    z-index: 5;
}

@keyframes fishDrift {
    from { transform: translateX(100vw); }
    to { transform: translateX(-30vw); }
}

/* ===== SECTION II: TEMPORARY ===== */
.section-temporary {
    background: var(--kelp-cream);
    color: var(--abyssal);
}

.section-heading {
    font-family: 'Libre Baskerville', serif;
    font-weight: 700;
    font-size: clamp(2.4rem, 6vw, 5rem);
    letter-spacing: -0.02em;
    margin-bottom: 2rem;
    color: var(--abyssal);
}

.body-text {
    font-size: clamp(1rem, 1.8vw, 1.15rem);
    line-height: 1.75;
    max-width: 38rem;
    margin-bottom: 1.5rem;
}

.body-text em {
    font-style: italic;
}

.highlight {
    background-image: linear-gradient(var(--anemone-pink), var(--anemone-pink));
    background-position: bottom 2px left;
    background-size: 100% 3px;
    background-repeat: no-repeat;
}

/* Annotations */
.annotation {
    position: absolute;
    font-family: 'Caveat', cursive;
    font-size: clamp(0.85rem, 1.4vw, 1.1rem);
    color: var(--abyssal);
    border: 1.5px solid var(--lagoon-deep);
    padding: 0.8rem 1rem;
    background: rgba(240, 235, 224, 0.8);
    z-index: 20;
}

.annotation-1 {
    right: 5vw;
    top: 25%;
    transform: rotate(-3deg);
}

.annotation-2 {
    right: 8vw;
    top: 60%;
    transform: rotate(2deg);
}

/* Ripple lines */
.ripple-lines {
    position: absolute;
    right: 15%;
    bottom: 20%;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ripple-lines span {
    display: block;
    width: 80px;
    height: 1px;
    background: var(--lagoon-deep);
    opacity: 0.2;
}

/* ===== SECTION III: FISH ARCHIVE ===== */
.section-archive {
    background: var(--seafoam-veil);
}

.fish-entry {
    margin-bottom: 4rem;
    display: flex;
    flex-direction: column;
}

.fish-left {
    align-items: flex-start;
}

.fish-right {
    align-items: flex-end;
}

.fish-svg {
    width: min(40vw, 280px);
    height: auto;
    display: block;
}

.fish-caption {
    font-family: 'Libre Baskerville', serif;
    font-style: italic;
    font-size: clamp(0.9rem, 1.4vw, 1.05rem);
    max-width: 30rem;
    margin-top: 1rem;
    color: var(--abyssal);
    opacity: 0.85;
}

/* Collage rectangles */
.collage-rect {
    position: absolute;
    border-radius: 2px;
    pointer-events: none;
}

.collage-1 {
    width: 180px;
    height: 120px;
    background: var(--anemone-pink);
    opacity: 0.2;
    top: 15%;
    right: 8%;
    transform: rotate(3deg);
}

.collage-2 {
    width: 140px;
    height: 90px;
    background: var(--bioluminescent);
    opacity: 0.18;
    top: 45%;
    left: 5%;
    transform: rotate(-5deg);
}

.collage-3 {
    width: 100px;
    height: 160px;
    background: var(--coral-alarm);
    opacity: 0.15;
    bottom: 12%;
    right: 15%;
    transform: rotate(7deg);
}

/* ===== SECTION IV: EMERGENCY FREQUENCIES ===== */
.section-frequencies {
    background: var(--deep-current);
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
}

.large-text {
    font-family: 'Libre Baskerville', serif;
    font-weight: 700;
    font-size: clamp(2rem, 5vw, 4rem);
    color: var(--seafoam-veil);
    letter-spacing: -0.02em;
    margin-bottom: 30vh;
    line-height: 1.3;
}

.large-text:last-child {
    margin-bottom: 0;
}

.large-text em {
    color: var(--anemone-pink);
    font-weight: 400;
}

/* Caustic light */
.caustic-light {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(ellipse 300px 300px at 20% 30%, rgba(42, 124, 111, 0.08), transparent),
        radial-gradient(ellipse 200px 200px at 70% 60%, rgba(179, 167, 204, 0.06), transparent),
        radial-gradient(ellipse 250px 250px at 50% 80%, rgba(184, 216, 208, 0.05), transparent);
    mix-blend-mode: overlay;
    pointer-events: none;
}

/* ===== SECTION V: DISSOLUTION ===== */
.section-dissolution {
    background: linear-gradient(to bottom, var(--deep-current), var(--lagoon-deep), var(--seafoam-veil));
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dissolution-content {
    text-align: center;
    z-index: 20;
}

.final-text {
    font-family: 'Libre Baskerville', serif;
    font-size: 2rem;
    color: var(--kelp-cream);
    margin-bottom: 1rem;
}

.final-text-sub {
    font-family: 'Libre Baskerville', serif;
    font-size: 1.2rem;
    color: var(--anemone-pink);
}

/* Scattered fish */
.scattered-fish {
    position: absolute;
    pointer-events: none;
    z-index: 5;
}

.fish-s1 { width: 30vw; top: 10%; left: 5%; opacity: 0.2; transform: rotate(-10deg); }
.fish-s2 { width: 20vw; top: 25%; right: 10%; opacity: 0.15; transform: rotate(8deg); }
.fish-s3 { width: 50vw; bottom: 15%; left: 20%; opacity: 0.1; transform: rotate(-5deg); }
.fish-s4 { width: 15vw; top: 60%; left: 8%; opacity: 0.25; transform: rotate(12deg); }
.fish-s5 { width: 10vw; bottom: 30%; right: 20%; opacity: 0.35; transform: rotate(-15deg); }

/* ===== KANJI WATERMARKS ===== */
.kanji-watermark {
    position: absolute;
    font-family: 'Hiragino Mincho ProN', 'Yu Mincho', serif;
    font-size: clamp(15rem, 30vw, 40rem);
    opacity: 0.04;
    pointer-events: none;
    z-index: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    line-height: 1;
    color: currentColor;
}

.section-broadcast .kanji-watermark { color: var(--seafoam-veil); }
.section-temporary .kanji-watermark { color: var(--abyssal); }
.section-archive .kanji-watermark { color: var(--deep-current); }
.section-frequencies .kanji-watermark { color: var(--seafoam-veil); opacity: 0.03; }
.section-dissolution .kanji-watermark { color: var(--kelp-cream); }

/* ===== TORN EDGES ===== */
.torn-edge {
    position: relative;
    height: 60px;
    z-index: 50;
    margin-top: -30px;
    margin-bottom: -30px;
}

.torn-edge-1 {
    background: var(--kelp-cream);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60'%3E%3Cpath d='M0 60 L0 25 Q50 5 100 20 Q150 35 200 15 Q250 0 300 22 Q350 40 400 18 Q450 2 500 28 Q550 45 600 20 Q650 0 700 30 Q750 50 800 22 Q850 5 900 25 Q950 42 1000 15 Q1050 0 1100 20 Q1150 38 1200 25 L1200 60Z' fill='white'/%3E%3C/svg%3E");
    mask-size: 100% 100%;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60'%3E%3Cpath d='M0 60 L0 25 Q50 5 100 20 Q150 35 200 15 Q250 0 300 22 Q350 40 400 18 Q450 2 500 28 Q550 45 600 20 Q650 0 700 30 Q750 50 800 22 Q850 5 900 25 Q950 42 1000 15 Q1050 0 1100 20 Q1150 38 1200 25 L1200 60Z' fill='white'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%;
}

.torn-edge-2 {
    background: var(--seafoam-veil);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60'%3E%3Cpath d='M0 60 L0 30 Q60 10 120 28 Q180 45 240 18 Q300 0 360 25 Q420 48 480 20 Q540 0 600 32 Q660 55 720 22 Q780 0 840 28 Q900 50 960 18 Q1020 0 1080 25 Q1140 45 1200 30 L1200 60Z' fill='white'/%3E%3C/svg%3E");
    mask-size: 100% 100%;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60'%3E%3Cpath d='M0 60 L0 30 Q60 10 120 28 Q180 45 240 18 Q300 0 360 25 Q420 48 480 20 Q540 0 600 32 Q660 55 720 22 Q780 0 840 28 Q900 50 960 18 Q1020 0 1080 25 Q1140 45 1200 30 L1200 60Z' fill='white'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%;
}

.torn-edge-3 {
    background: var(--deep-current);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60'%3E%3Cpath d='M0 60 L0 20 Q80 40 160 15 Q240 0 320 28 Q400 50 480 18 Q560 0 640 30 Q720 52 800 20 Q880 0 960 25 Q1040 45 1120 18 Q1160 5 1200 20 L1200 60Z' fill='white'/%3E%3C/svg%3E");
    mask-size: 100% 100%;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60'%3E%3Cpath d='M0 60 L0 20 Q80 40 160 15 Q240 0 320 28 Q400 50 480 18 Q560 0 640 30 Q720 52 800 20 Q880 0 960 25 Q1040 45 1120 18 Q1160 5 1200 20 L1200 60Z' fill='white'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%;
}

.torn-edge-4 {
    background: linear-gradient(to bottom, var(--deep-current), var(--lagoon-deep));
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60'%3E%3Cpath d='M0 60 L0 28 Q100 5 200 22 Q300 40 400 12 Q500 0 600 25 Q700 48 800 15 Q900 0 1000 30 Q1100 50 1200 28 L1200 60Z' fill='white'/%3E%3C/svg%3E");
    mask-size: 100% 100%;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60'%3E%3Cpath d='M0 60 L0 28 Q100 5 200 22 Q300 40 400 12 Q500 0 600 25 Q700 48 800 15 Q900 0 1000 30 Q1100 50 1200 28 L1200 60Z' fill='white'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%;
}

/* ===== BUBBLES ===== */
.bubbles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
}

.bubble {
    position: absolute;
    border-radius: 50%;
    background: var(--seafoam-veil);
    transition: transform 0.1s linear;
}

.section-temporary .bubble,
.section-archive .bubble {
    background: var(--bioluminescent);
}

/* ===== DISSOLUTION FADE ===== */
body.dissolving .section-dissolution .dissolution-content,
body.dissolving .section-dissolution .scattered-fish {
    transition: opacity 8s ease;
    opacity: 0.3;
}

body.dissolving .banner-track {
    animation-duration: 60s;
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
    .blur-focus-target {
        filter: none;
        transition: opacity 0.3s;
    }

    .angelfish-drift {
        animation: none;
        right: 10%;
        left: auto;
    }

    .banner-track {
        animation-duration: 60s;
    }

    .scattered-fish {
        opacity: 0.15 !important;
    }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .annotation {
        display: none;
    }

    .column-left { margin-left: 3vw; }
    .column-right { margin-right: 3vw; margin-left: auto; }

    .fish-svg { width: min(60vw, 240px); }

    .section { padding: 3rem 1.2rem; padding-top: calc(2.4rem + 3rem); }
}