/* bada.quest - Dopamine-Maximalist Aquarium Hallucination */

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

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.7;
    letter-spacing: 0.01em;
    color: #F0ECF5;
    background: #0D0A1F;
    overflow-x: hidden;
}

/* === SCROLL PROGRESS THERMOMETER === */
.scroll-progress {
    position: fixed;
    top: 0;
    right: 0;
    width: 3px;
    height: 0%;
    background: #FF6B35;
    z-index: 1000;
    transition: height 0.1s linear;
}

/* === TYPOGRAPHY === */
h1 {
    font-family: 'Space Mono', monospace;
    font-size: clamp(56px, 8vw, 120px);
    font-weight: 700;
    letter-spacing: -0.04em;
    text-transform: uppercase;
    line-height: 1.05;
}

h2 {
    font-family: 'Space Mono', monospace;
    font-size: clamp(28px, 4vw, 72px);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.15;
}

p {
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.7;
    letter-spacing: 0.01em;
}

.photo-caption {
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #1A1230;
}

/* === SECTIONS === */
.section {
    position: relative;
    width: 100vw;
    min-height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- SECTION 1: THE SURFACE --- */
.section-surface {
    background: linear-gradient(165deg, #1A1230 0%, #2D1B4E 60%, #FF6B35 100%);
    flex-direction: column;
}

.hero-content {
    text-align: center;
    z-index: 2;
    position: relative;
}

.hero-title {
    color: #F0ECF5;
}

.hero-tagline {
    color: #00E5CC;
    font-size: 18px;
    margin-top: 1rem;
}

.betta-fish {
    position: absolute;
    bottom: -5vh;
    right: -5vw;
    width: 40vw;
    z-index: 1;
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- SECTION 2: THE REEF SHELF --- */
.section-reef {
    background: linear-gradient(180deg, #00E5CC 0%, #1A1230 100%);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: row;
}

.reef-photo {
    width: 60%;
    height: 100vh;
    position: relative;
    flex-shrink: 0;
}

.reef-photo-img {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #FF6B35 0%, #00E5CC 40%, #1A1230 100%);
    filter: contrast(1.2) saturate(1.4);
    background-image:
        radial-gradient(ellipse at 20% 50%, rgba(255, 107, 53, 0.6) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 30%, rgba(0, 229, 204, 0.5) 0%, transparent 40%),
        radial-gradient(ellipse at 50% 80%, rgba(255, 182, 39, 0.4) 0%, transparent 45%),
        linear-gradient(135deg, #FF6B35 0%, #00E5CC 40%, #1A1230 100%);
}

.reef-text {
    width: 35%;
    padding: 4vw;
    position: relative;
    z-index: 2;
}

.reef-text h2 {
    color: #1A1230;
    font-size: clamp(24px, 3vw, 48px);
    margin-bottom: 1.5rem;
}

.reef-text p {
    color: #1A1230;
    font-size: 18px;
    line-height: 1.7;
}

.tetra {
    position: absolute;
    width: 60px;
    z-index: 3;
}

.tetra-1 { left: 56%; top: 25%; }
.tetra-2 { left: 58%; top: 50%; }
.tetra-3 { left: 54%; top: 72%; }

/* --- TRANSITION ZONES --- */
.transition-zone {
    height: 20vh;
    position: relative;
    overflow: hidden;
}

.transition-1 {
    background: linear-gradient(180deg, #1A1230 0%, #FF2D7B 50%, #1A1230 100%);
}

.transition-2 {
    background: linear-gradient(180deg, #1A1230 0%, #FFB627 50%, #FF6B35 100%);
}

.transition-3 {
    background: linear-gradient(180deg, #FF2D7B 0%, #1A1230 100%);
}

.transition-fish {
    position: absolute;
    width: 80px;
    top: 50%;
    transform: translateY(-50%);
    animation: swimAcross 8s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

@keyframes swimAcross {
    0% { left: -100px; }
    100% { left: calc(100vw + 100px); }
}

/* --- SECTION 3: THE DROP-OFF --- */
.section-dropoff {
    background: radial-gradient(ellipse at 30% 70%, #FF2D7B 0%, #1A1230 80%);
    justify-content: flex-start;
    align-items: center;
}

.angelfish-bg {
    position: absolute;
    width: 50vw;
    height: auto;
    left: 25%;
    top: 10%;
    z-index: 0;
}

.dropoff-text {
    position: relative;
    z-index: 2;
    padding-left: 10vw;
    padding-right: 10vw;
    max-width: 100%;
}

.dropoff-text h2 {
    color: #F0ECF5;
    font-size: clamp(28px, 4vw, 72px);
    line-height: 1.2;
}

/* --- SECTION 4: THE CORAL GARDEN --- */
.section-coral {
    background: linear-gradient(135deg, #FFB627 0%, #FF6B35 50%, #FF2D7B 100%);
}

.coral-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 2vw;
    width: 92vw;
    height: 92vh;
    padding: 2vw;
}

.coral-photo {
    position: relative;
    overflow: hidden;
}

.photo-placeholder {
    width: 100%;
    height: 100%;
    border-radius: 0;
}

.coral-photo-1 {
    background:
        radial-gradient(ellipse at 30% 40%, rgba(255, 107, 53, 0.8) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 60%, rgba(0, 229, 204, 0.7) 0%, transparent 40%),
        linear-gradient(180deg, #1A1230 0%, #2D1B4E 100%);
}

.coral-photo-2 {
    background:
        radial-gradient(ellipse at 60% 30%, rgba(255, 182, 39, 0.8) 0%, transparent 50%),
        radial-gradient(ellipse at 30% 70%, rgba(255, 45, 123, 0.6) 0%, transparent 40%),
        linear-gradient(160deg, #2D1B4E 0%, #1A1230 100%);
}

.coral-photo-3 {
    background:
        radial-gradient(ellipse at 40% 50%, rgba(0, 229, 204, 0.7) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(255, 107, 53, 0.6) 0%, transparent 40%),
        linear-gradient(200deg, #1A1230 0%, #0D0A1F 100%);
}

.coral-photo-4 {
    background:
        radial-gradient(ellipse at 50% 40%, rgba(255, 45, 123, 0.7) 0%, transparent 50%),
        radial-gradient(ellipse at 20% 80%, rgba(255, 182, 39, 0.6) 0%, transparent 40%),
        linear-gradient(140deg, #0D0A1F 0%, #2D1B4E 100%);
}

.photo-caption {
    position: absolute;
    bottom: 12px;
    left: 12px;
}

/* --- SECTION 5: THE DEEP WATER --- */
.section-deep {
    background: linear-gradient(180deg, #1A1230 0%, #0D0A1F 100%);
}

.deep-content {
    text-align: center;
    max-width: 600px;
    padding: 2rem;
    z-index: 2;
    position: relative;
}

.deep-content h2 {
    color: #00E5CC;
    margin-bottom: 1.5rem;
}

.deep-content p {
    color: #F0ECF5;
}

.seahorse {
    position: absolute;
    right: -20px;
    top: 0;
    height: 100%;
    width: auto;
    z-index: 0;
}

/* --- SECTION 6: THE ABYSS --- */
.section-abyss {
    background: #0D0A1F;
    flex-direction: column;
    gap: 4rem;
}

.abyss-title {
    font-family: 'Space Mono', monospace;
    font-size: 48px;
    font-weight: 700;
    letter-spacing: -0.04em;
    color: #FF6B35;
    text-transform: uppercase;
}

.clownfish {
    width: 70px;
    position: absolute;
    top: 60%;
    animation: drift 60s linear infinite;
}

@keyframes drift {
    0% { left: -10vw; }
    100% { left: 110vw; }
}

/* === BUBBLE PARTICLE SYSTEM === */
.bubbles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.bubble {
    position: absolute;
    bottom: -20px;
    border-radius: 50%;
    background: #F0ECF5;
    animation: rise 8s linear infinite;
}

.bubble:nth-child(1)  { left: 8%;  width: 6px;  height: 6px;  opacity: 0.08; animation-delay: 0s;    animation-duration: 9s; }
.bubble:nth-child(2)  { left: 15%; width: 4px;  height: 4px;  opacity: 0.12; animation-delay: 1.2s;  animation-duration: 7s; }
.bubble:nth-child(3)  { left: 25%; width: 8px;  height: 8px;  opacity: 0.06; animation-delay: 2.5s;  animation-duration: 10s; }
.bubble:nth-child(4)  { left: 35%; width: 5px;  height: 5px;  opacity: 0.10; animation-delay: 0.8s;  animation-duration: 8s; }
.bubble:nth-child(5)  { left: 45%; width: 10px; height: 10px; opacity: 0.05; animation-delay: 3.1s;  animation-duration: 11s; }
.bubble:nth-child(6)  { left: 55%; width: 7px;  height: 7px;  opacity: 0.09; animation-delay: 1.7s;  animation-duration: 7.5s; }
.bubble:nth-child(7)  { left: 65%; width: 4px;  height: 4px;  opacity: 0.14; animation-delay: 4.2s;  animation-duration: 8.5s; }
.bubble:nth-child(8)  { left: 72%; width: 12px; height: 12px; opacity: 0.05; animation-delay: 0.3s;  animation-duration: 12s; }
.bubble:nth-child(9)  { left: 80%; width: 6px;  height: 6px;  opacity: 0.11; animation-delay: 2.8s;  animation-duration: 9.5s; }
.bubble:nth-child(10) { left: 88%; width: 5px;  height: 5px;  opacity: 0.07; animation-delay: 1.5s;  animation-duration: 8s; }
.bubble:nth-child(11) { left: 20%; width: 8px;  height: 8px;  opacity: 0.06; animation-delay: 3.5s;  animation-duration: 10.5s; }
.bubble:nth-child(12) { left: 40%; width: 4px;  height: 4px;  opacity: 0.13; animation-delay: 5s;    animation-duration: 7s; }
.bubble:nth-child(13) { left: 60%; width: 9px;  height: 9px;  opacity: 0.05; animation-delay: 2s;    animation-duration: 11s; }
.bubble:nth-child(14) { left: 75%; width: 6px;  height: 6px;  opacity: 0.10; animation-delay: 4s;    animation-duration: 9s; }
.bubble:nth-child(15) { left: 92%; width: 5px;  height: 5px;  opacity: 0.08; animation-delay: 1s;    animation-duration: 8.5s; }

@keyframes rise {
    0% {
        transform: translateY(0) translateX(0);
        opacity: var(--bubble-opacity, 0.08);
    }
    25% {
        transform: translateY(-25vh) translateX(10px);
    }
    50% {
        transform: translateY(-50vh) translateX(-8px);
    }
    75% {
        transform: translateY(-75vh) translateX(12px);
    }
    100% {
        transform: translateY(-105vh) translateX(0);
        opacity: 0;
    }
}

.bubbles-sparse .bubble {
    animation-duration: 14s;
}

.bubbles-sparse .bubble:nth-child(1) { animation-delay: 0s; }
.bubbles-sparse .bubble:nth-child(2) { animation-delay: 4s; }
.bubbles-sparse .bubble:nth-child(3) { animation-delay: 8s; }
.bubbles-sparse .bubble:nth-child(4) { animation-delay: 12s; }

/* === SLIDE-REVEAL ANIMATIONS === */
.slide-from-left {
    transform: translateX(-100%);
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.slide-from-right {
    transform: translateX(100%);
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.slide-from-top {
    transform: translateY(-100%);
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.slide-from-bottom {
    transform: translateY(100%);
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.slide-from-left.visible,
.slide-from-right.visible,
.slide-from-top.visible,
.slide-from-bottom.visible {
    transform: translate(0, 0);
}

/* Coral garden stagger */
.coral-grid .coral-photo:nth-child(2) { transition-delay: 0.2s; }
.coral-grid .coral-photo:nth-child(3) { transition-delay: 0.4s; }
.coral-grid .coral-photo:nth-child(4) { transition-delay: 0.6s; }

/* === FILM GRAIN OVERLAY === */
.photo-placeholder::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.15'/%3E%3C/svg%3E");
    pointer-events: none;
    mix-blend-mode: overlay;
}

.photo-placeholder {
    position: relative;
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
    .section-reef {
        flex-direction: column;
    }

    .reef-photo {
        width: 100%;
        height: 50vh;
    }

    .reef-text {
        width: 100%;
        padding: 6vw;
    }

    .tetra {
        display: none;
    }

    .coral-grid {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, 1fr);
    }

    .dropoff-text {
        padding-left: 6vw;
        padding-right: 6vw;
    }
}