/* bada.day - Pixel Ocean */
/* Colors: #0A2E3C #1B3A4B #D4E4ED #EBF2F7 #00E5CC #007A6E #FF3355 */
/* Fonts: Silkscreen (display), Libre Baskerville (body), Share Tech Mono (annotations) */

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

html {
    scroll-snap-type: y mandatory;
    overflow-x: hidden;
    scrollbar-width: none;
    scroll-behavior: smooth;
}

html::-webkit-scrollbar {
    display: none;
}

body {
    font-family: "Libre Baskerville", Georgia, serif;
    color: #1B3A4B;
    background: #EBF2F7;
    overflow-x: hidden;
    image-rendering: pixelated;
    -webkit-font-smoothing: antialiased;
}

/* ===== PIXEL GRID OVERLAY ===== */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        repeating-linear-gradient(0deg, transparent, transparent 15px, rgba(0, 229, 204, 0.04) 15px, rgba(0, 229, 204, 0.04) 16px),
        repeating-linear-gradient(90deg, transparent, transparent 15px, rgba(0, 229, 204, 0.04) 15px, rgba(0, 229, 204, 0.04) 16px);
    pointer-events: none;
    z-index: 1000;
}

/* ===== SCANLINE OVERLAY ===== */
#scanlines {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        0deg,
        transparent 0px,
        transparent 1px,
        rgba(0, 0, 0, 0.03) 1px,
        rgba(0, 0, 0, 0.03) 2px
    );
    pointer-events: none;
    z-index: 999;
    mix-blend-mode: multiply;
}

/* ===== TIDE GAUGE ===== */
#tide-gauge {
    position: fixed;
    right: 0;
    top: 0;
    width: 1px;
    height: 100vh;
    background: rgba(0, 229, 204, 0.15);
    z-index: 998;
}

#tide-gauge-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 0%;
    background: #00E5CC;
    box-shadow: 0 0 8px #00E5CC;
    transition: height 0.1s linear;
}

.tide-marker {
    position: absolute;
    right: 4px;
    transform: translateY(-50%);
    pointer-events: none;
}

.fish-icon {
    display: block;
    image-rendering: pixelated;
    filter: drop-shadow(0 0 4px rgba(0, 229, 204, 0.6));
}

/* ===== ZONES ===== */
.zone {
    width: 100%;
    height: 100vh;
    scroll-snap-align: start;
    position: relative;
    overflow: hidden;
}

.zone-content {
    position: relative;
    z-index: 2;
    padding: 64px;
    height: 100%;
}

.zone-border {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: repeating-linear-gradient(90deg, #0A2E3C 0px, #0A2E3C 8px, #00E5CC 8px, #00E5CC 16px);
    background-size: 32px 4px;
    animation: border-march 1s linear infinite;
    z-index: 3;
}

@keyframes border-march {
    from { background-position: 0 0; }
    to { background-position: 32px 0; }
}

/* ===== TYPOGRAPHY BASE ===== */
.zone-title {
    font-family: "Silkscreen", "Courier New", monospace;
    font-weight: 700;
    font-size: 48px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #0A2E3C;
    text-shadow: 2px 2px 0px #00E5CC;
    line-height: 1.2;
    margin-bottom: 16px;
}

.zone-subtitle {
    font-family: "Libre Baskerville", Georgia, serif;
    font-style: italic;
    font-size: 24px;
    color: #1B3A4B;
    margin-bottom: 32px;
    line-height: 1.6;
}

.annotation {
    font-family: "Share Tech Mono", "Courier New", monospace;
    font-weight: 400;
    font-size: 13px;
    color: rgba(0, 229, 204, 0.6);
    display: block;
    margin-bottom: 8px;
    letter-spacing: 0.08em;
}

.coord-label {
    margin-top: 32px;
}

.zone-label {
    margin-bottom: 32px;
}

.body-text {
    font-family: "Libre Baskerville", Georgia, serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.8;
    color: #1B3A4B;
    margin-bottom: 16px;
    max-width: 560px;
}

.body-text-light {
    font-family: "Libre Baskerville", Georgia, serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.8;
    color: #D4E4ED;
    margin-bottom: 8px;
}

.body-text-dark {
    font-family: "Libre Baskerville", Georgia, serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.6;
    color: #D4E4ED;
    opacity: 0.85;
}

/* ===== ZONE 1: SURFACE ===== */
#zone-surface {
    background: #EBF2F7;
}

#zone-surface .zone-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 96px;
}

.surface-main-title {
    font-family: "Silkscreen", "Courier New", monospace;
    font-weight: 700;
    font-size: 96px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #0A2E3C;
    text-shadow: 4px 4px 0px #00E5CC;
    line-height: 1;
    margin-bottom: 16px;
}

.surface-intro {
    max-width: 480px;
    margin-top: 16px;
}

/* ===== WAVE CONTAINER ===== */
.wave-container {
    position: absolute;
    bottom: 4px;
    left: 0;
    width: 100%;
    height: 55%;
    overflow: hidden;
    z-index: 1;
}

.shallow-waves-container {
    height: 40%;
    opacity: 0.5;
}

.wave-row {
    display: flex;
    width: 200%;
    height: 16px;
    animation: wave-scroll 4s linear infinite;
    image-rendering: pixelated;
}

.wave-tile {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

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

/* ===== ZONE 2: SHALLOWS ===== */
#zone-shallows {
    background: #D4E4ED;
}

.zone-split {
    display: grid;
    grid-template-columns: 60% 40%;
    height: 100%;
    gap: 0;
}

.zone-left {
    position: relative;
    padding: 64px;
    overflow: hidden;
}

.zone-right {
    padding: 64px 64px 64px 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#zone-shallows .zone-title {
    color: #0A2E3C;
    text-shadow: 2px 2px 0px #007A6E;
}

/* Kelp */
.kelp-field {
    position: absolute;
    bottom: 80px;
    left: 0;
    width: 100%;
    height: 60%;
    pointer-events: none;
}

.kelp-strand {
    position: absolute;
    bottom: 0;
    width: 8px;
    height: 96px;
    background: linear-gradient(to top, #007A6E 0%, #007A6E 40%, #00E5CC 100%);
    image-rendering: pixelated;
    animation: kelp-sway 3s ease-in-out infinite alternate;
    transform-origin: bottom center;
}

.kelp-strand.tall {
    height: 160px;
    animation-duration: 4s;
}

.kelp-strand::before {
    content: "";
    position: absolute;
    top: -16px;
    left: 0;
    width: 8px;
    height: 16px;
    background: #007A6E;
}

.kelp-strand::after {
    content: "";
    position: absolute;
    top: -32px;
    left: -4px;
    width: 16px;
    height: 12px;
    background: #00E5CC;
    opacity: 0.7;
}

@keyframes kelp-sway {
    0% { transform: translateX(-2px) skewX(-2deg); }
    100% { transform: translateX(2px) skewX(2deg); }
}

/* Coral */
.coral-cluster {
    position: absolute;
    bottom: 80px;
    left: 48px;
    display: flex;
    gap: 32px;
    align-items: flex-end;
    z-index: 2;
}

.coral {
    image-rendering: pixelated;
}

.coral-1 {
    width: 32px;
    height: 32px;
    background-image:
        linear-gradient(45deg, #0A2E3C 25%, transparent 25%),
        linear-gradient(-45deg, #0A2E3C 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #00E5CC 75%),
        linear-gradient(-45deg, transparent 75%, #00E5CC 75%);
    background-size: 4px 4px;
    background-color: #007A6E;
}

.coral-2 {
    width: 24px;
    height: 48px;
    background-image:
        linear-gradient(45deg, #00E5CC 25%, transparent 25%),
        linear-gradient(-45deg, #00E5CC 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #0A2E3C 75%),
        linear-gradient(-45deg, transparent 75%, #0A2E3C 75%);
    background-size: 4px 4px;
    background-color: #1B3A4B;
}

.coral-3 {
    width: 28px;
    height: 28px;
    background-image:
        linear-gradient(45deg, #007A6E 25%, transparent 25%),
        linear-gradient(-45deg, #007A6E 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #00E5CC 75%),
        linear-gradient(-45deg, transparent 75%, #00E5CC 75%);
    background-size: 4px 4px;
    background-color: #0A2E3C;
}

/* Floating sprite overlay */
.sprite-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.floating-sprite {
    image-rendering: pixelated;
    animation: sprite-float 6s ease-in-out infinite alternate;
}

@keyframes sprite-float {
    0% { transform: translate(0, 0); }
    100% { transform: translate(16px, -16px); }
}

/* ===== ZONE 3: DEPTHS ===== */
#zone-depths {
    background: #1B3A4B;
}

#zone-depths .zone-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 64px;
}

#zone-depths .zone-title {
    color: #D4E4ED;
    text-shadow: 2px 2px 0px #007A6E;
}

.depth-annotation {
    color: rgba(0, 229, 204, 0.5);
}

.staggered-text {
    position: relative;
    z-index: 2;
}

.stagger-line {
    display: block;
    padding-left: calc(var(--offset, 0) * 48px);
    margin-bottom: 8px;
}

.depth-bands {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    z-index: 0;
    opacity: 0.5;
}

.depth-band {
    flex: 1;
    position: relative;
}

.band-dark {
    background: #0A2E3C;
}

.band-light {
    background: #1B3A4B;
}

.band-dark::after,
.band-light::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(45deg, rgba(0, 229, 204, 0.08) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(0, 229, 204, 0.08) 25%, transparent 25%);
    background-size: 8px 8px;
}

/* ===== ZONE 4: ABYSS ===== */
#zone-abyss {
    background: #0A2E3C;
}

#zone-abyss .zone-content {
    position: relative;
    height: 100%;
}

#zone-abyss::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(0, 229, 204, 0.08) 0%, transparent 8%),
        radial-gradient(circle at 70% 60%, rgba(0, 229, 204, 0.06) 0%, transparent 10%),
        radial-gradient(circle at 50% 80%, rgba(0, 229, 204, 0.05) 0%, transparent 12%);
    pointer-events: none;
}

.abyss-title {
    color: #D4E4ED;
    text-shadow: 2px 2px 0px #007A6E;
    opacity: 0.75;
    font-size: 64px;
    margin: 0;
}

.abyss-annotation {
    color: rgba(0, 229, 204, 0.35);
    font-size: 11px;
}

.abyss-fragments {
    position: relative;
    width: 100%;
    height: 80%;
}

.glitch-fragment {
    position: absolute;
    width: 160px;
    min-height: 64px;
    padding: 12px;
    border: 1px solid rgba(0, 229, 204, 0.2);
    background: rgba(0, 229, 204, 0.03);
    will-change: transform;
}

.fragment-1 { top: 8%; left: 12%; width: 200px; }
.fragment-2 { top: 38%; left: 55%; width: 220px; }
.fragment-3 { top: 65%; left: 20%; width: 180px; }
.fragment-4 { top: 18%; left: 72%; width: 80px; min-height: 80px; }
.fragment-5 { top: 72%; left: 62%; width: 180px; }
.fragment-6 { top: 42%; left: 8%; width: 80px; min-height: 96px; }
.fragment-7 { top: 10%; left: 45%; width: 200px; }

.angler-glow {
    filter: drop-shadow(0 0 6px #00E5CC);
    animation: glow-pulse 2s ease-in-out infinite;
}

@keyframes glow-pulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

/* ===== ZONE 5: RESURFACE ===== */
#zone-resurface {
    background: #EBF2F7;
    position: relative;
}

.resurface-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    max-width: 720px;
    position: relative;
    z-index: 3;
}

.resurface-title {
    color: #0A2E3C;
    text-shadow: 4px 4px 0px #00E5CC;
    font-size: 72px;
}

.resurface-text {
    max-width: 640px;
}

/* Pixel Sun */
.pixel-sun {
    position: absolute;
    bottom: -25%;
    left: 50%;
    transform: translateX(-50%);
    width: 480px;
    height: 480px;
    z-index: 1;
    animation: sun-rise 8s ease-out forwards;
}

@keyframes sun-rise {
    from { bottom: -50%; opacity: 0; }
    to { bottom: -25%; opacity: 1; }
}

.sun-pixel {
    position: absolute;
    image-rendering: pixelated;
}

/* ===== FISH LAYER ===== */
#fish-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
    overflow: hidden;
}

.swimming-fish {
    position: absolute;
    image-rendering: pixelated;
    will-change: transform;
}

.swim-right {
    animation: swim-across linear forwards;
}

.swim-left {
    animation: swim-left linear forwards;
}

@keyframes swim-across {
    0% { transform: translateX(-48px); }
    100% { transform: translateX(calc(100vw + 48px)); }
}

@keyframes swim-left {
    0% { transform: translateX(calc(100vw + 48px)) scaleX(-1); }
    100% { transform: translateX(-48px) scaleX(-1); }
}

/* ===== GLITCH LAYER ===== */
#glitch-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 900;
}

.glitch-strip {
    position: absolute;
    left: 0;
    width: 100%;
    height: 4px;
    overflow: hidden;
    will-change: transform;
    mix-blend-mode: difference;
}

/* ===== CORRUPTION LAYER ===== */
#corruption-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 800;
}

.corruption-block {
    position: absolute;
    width: 32px;
    height: 32px;
    image-rendering: pixelated;
    mix-blend-mode: difference;
    will-change: opacity;
}

/* ===== GLITCH TEXT EFFECT ===== */
.glitch-text-active .zone-title,
.glitch-text-active .body-text,
.glitch-text-active .body-text-light,
.glitch-text-active .body-text-dark,
.glitch-text-active .annotation,
.glitch-text-active .zone-subtitle {
    text-shadow: -2px 0 #FF3355, 2px 0 #00E5CC !important;
    animation: text-jitter 0.1s steps(2) infinite;
}

@keyframes text-jitter {
    0% { transform: translateX(0); }
    50% { transform: translateX(1px); }
    100% { transform: translateX(-1px); }
}

/* ===== DITHERING PATTERNS ===== */
.dither-checker {
    background-image:
        linear-gradient(45deg, currentColor 25%, transparent 25%),
        linear-gradient(-45deg, currentColor 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, currentColor 75%),
        linear-gradient(-45deg, transparent 75%, currentColor 75%);
    background-size: 4px 4px;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
    .surface-main-title {
        font-size: 56px;
        text-shadow: 2px 2px 0px #00E5CC;
    }
    .zone-title {
        font-size: 32px;
    }
    .resurface-title {
        font-size: 42px;
    }
    .abyss-title {
        font-size: 36px;
    }
    .zone-split {
        grid-template-columns: 1fr;
    }
    .zone-left {
        display: none;
    }
    .zone-right {
        padding: 48px;
    }
    .zone-content {
        padding: 48px;
    }
    .stagger-line {
        padding-left: calc(var(--offset, 0) * 20px);
    }
    .glitch-fragment {
        width: 120px !important;
    }
    .fragment-4 { left: 60%; }
    .fragment-5 { left: 45%; }
    .fragment-7 { left: 35%; }
    .pixel-sun {
        width: 320px;
        height: 320px;
    }
}

@media (max-width: 480px) {
    .surface-main-title {
        font-size: 40px;
    }
    .zone-title {
        font-size: 24px;
    }
    .body-text, .body-text-light {
        font-size: 16px;
    }
    .zone-content {
        padding: 32px;
    }
}