/* ==========================================================================
   bada.city - Submerged Victorian Aquarium
   Color Palette & CSS Custom Properties
   Fonts: "Playfair Display" (Google Fonts), "Cormorant Garamond", "EB Garamond"
   Title: 64px Playfair Display" heading scale
   Intersection Observer with threshold arrays [0, 0.25, 0.5]
   Each panel's entry animation is unique:
   ========================================================================== */

:root {
    --gold-primary: #c9a84c;
    --gold-bright: #d4af37;
    --black-abyss: #0a0a0a;
    --black-onyx: #121210;
    --marble-carrara: #f2ede6;
    --marble-vein: #c4b8a8;
    --ivory-parchment: #e8dcc8;
    --fish-crimson: #8b2500;
    --fish-teal: #1a6b5a;
    --fish-koi: #d4762c;
}

/* ==========================================================================
   Reset & Base
   ========================================================================== */

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

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

body {
    background-color: var(--black-abyss);
    color: var(--ivory-parchment);
    font-family: 'EB Garamond', 'Georgia', serif;
    font-size: 17px;
    line-height: 1.75;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   Particle Canvas
   ========================================================================== */

#particle-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1000;
}

/* ==========================================================================
   Navigation Markers
   ========================================================================== */

#nav-markers {
    position: fixed;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 900;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.nav-marker {
    font-family: 'Playfair Display', serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--gold-primary);
    text-decoration: none;
    opacity: 0.4;
    transition: opacity 0.4s ease, color 0.4s ease;
    letter-spacing: 0.05em;
}

.nav-marker:hover,
.nav-marker.active {
    opacity: 1;
    color: var(--gold-bright);
}

/* ==========================================================================
   Marble Panel Base
   ========================================================================== */

.marble-panel {
    background:
        radial-gradient(ellipse at 20% 30%, rgba(244,237,230,0.95) 0%, rgba(196,184,168,0.15) 50%, transparent 70%),
        radial-gradient(ellipse at 80% 70%, rgba(244,237,230,0.9) 0%, rgba(196,184,168,0.12) 45%, transparent 65%),
        radial-gradient(ellipse at 50% 50%, rgba(201,168,76,0.08) 0%, transparent 60%),
        linear-gradient(135deg, #f2ede6 0%, #e8dcc8 30%, #f2ede6 50%, #c4b8a8 70%, #f2ede6 100%),
        linear-gradient(45deg, rgba(196,184,168,0.3) 0%, transparent 40%, rgba(196,184,168,0.2) 60%, transparent 100%);
    background-color: var(--marble-carrara);
    border: 1px solid var(--gold-primary);
    position: relative;
}

.marble-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 30% 20%, rgba(201,168,76,0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 80%, rgba(196,184,168,0.25) 0%, transparent 40%),
        linear-gradient(160deg, transparent 30%, rgba(196,184,168,0.15) 50%, transparent 70%);
    pointer-events: none;
}

/* ==========================================================================
   Ambient Fish Layer
   ========================================================================== */

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

.ambient-fish {
    position: absolute;
    color: var(--gold-primary);
    opacity: 0;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.fish-1 {
    width: 100px;
    top: 25%;
    animation: swim-1 32s linear infinite;
    animation-delay: 2s;
}

.fish-2 {
    width: 60px;
    top: 55%;
    animation: swim-2 26s linear infinite;
    animation-delay: 8s;
}

.fish-3 {
    width: 80px;
    top: 75%;
    animation: swim-3 38s linear infinite;
    animation-delay: 14s;
}

@keyframes swim-1 {
    0%   { transform: translateX(-120px) translateY(0); opacity: 0; }
    5%   { opacity: 0.35; }
    20%  { transform: translateX(25vw) translateY(-15px); }
    40%  { transform: translateX(50vw) translateY(10px); }
    60%  { transform: translateX(75vw) translateY(-8px); }
    80%  { transform: translateX(95vw) translateY(12px); }
    95%  { opacity: 0.35; }
    100% { transform: translateX(105vw) translateY(0); opacity: 0; }
}

@keyframes swim-2 {
    0%   { transform: translateX(105vw) translateY(0) scaleX(-1); opacity: 0; }
    5%   { opacity: 0.3; }
    25%  { transform: translateX(75vw) translateY(12px) scaleX(-1); }
    50%  { transform: translateX(45vw) translateY(-10px) scaleX(-1); }
    75%  { transform: translateX(20vw) translateY(8px) scaleX(-1); }
    95%  { opacity: 0.3; }
    100% { transform: translateX(-80px) translateY(0) scaleX(-1); opacity: 0; }
}

@keyframes swim-3 {
    0%   { transform: translateX(-100px) translateY(0); opacity: 0; }
    5%   { opacity: 0.25; }
    15%  { transform: translateX(15vw) translateY(-20px); }
    35%  { transform: translateX(35vw) translateY(15px); }
    55%  { transform: translateX(60vw) translateY(-12px); }
    75%  { transform: translateX(80vw) translateY(18px); }
    95%  { opacity: 0.25; }
    100% { transform: translateX(110vw) translateY(0); opacity: 0; }
}

/* ==========================================================================
   Section Base
   ========================================================================== */

.section {
    position: relative;
    min-height: 100vh;
}

/* ==========================================================================
   THE ATRIUM (Section I)
   ========================================================================== */

.section-atrium {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 40px;
}

.atrium-panel {
    width: min(90vw, 900px);
    height: min(85vh, 700px);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    opacity: 0;
    transition: opacity 1.2s ease;
    box-shadow: 0 8px 40px rgba(0,0,0,0.5);
}

.atrium-panel.visible {
    opacity: 1;
}

.atrium-content {
    text-align: center;
    z-index: 10;
    position: relative;
}

#site-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(40px, 8vw, 72px);
    font-weight: 700;
    color: var(--gold-primary);
    letter-spacing: 0.08em;
    margin-bottom: 20px;
    display: inline-block;
}

#site-title .letter {
    display: inline-block;
    opacity: 0;
    transform: translateY(16px) scale(0.8);
    transition: none;
}

#site-title .letter.revealed {
    opacity: 1;
    transform: translateY(0) scale(1);
    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);
}

.atrium-subtitle {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(16px, 3vw, 24px);
    font-weight: 500;
    font-style: italic;
    color: var(--gold-bright);
    letter-spacing: 0.04em;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.atrium-subtitle.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Corner Flourishes */
.corner-flourish {
    position: absolute;
    width: 100px;
    height: 100px;
    z-index: 5;
}

.corner-flourish.top-left { top: 15px; left: 15px; }
.corner-flourish.top-right { top: 15px; right: 15px; }
.corner-flourish.bottom-left { bottom: 15px; left: 15px; }
.corner-flourish.bottom-right { bottom: 15px; right: 15px; }

.flourish-path {
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    transition: stroke-dashoffset 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.atrium-panel.visible .flourish-path {
    stroke-dashoffset: 0;
}

/* Atrium Betta Fish */
.atrium-betta {
    position: absolute;
    width: 200px;
    right: -200px;
    bottom: 25%;
    z-index: 8;
    opacity: 0;
    transition: none;
}

.atrium-betta.swimming {
    animation: betta-enter 4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes betta-enter {
    0%   { right: -200px; opacity: 0; }
    15%  { opacity: 0.7; }
    100% { right: 10%; opacity: 0.7; }
}

.betta-fin-top,
.betta-fin-bottom {
    animation: fin-wave 3s ease-in-out infinite;
}

.betta-fin-bottom {
    animation-delay: 0.5s;
}

.betta-tail {
    animation: tail-sway 2.5s ease-in-out infinite;
}

@keyframes fin-wave {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-3px); }
}

@keyframes tail-sway {
    0%, 100% { transform: translateX(0) rotate(0deg); }
    50%      { transform: translateX(3px) rotate(2deg); }
}

/* ==========================================================================
   THE GALLERY (Section II)
   ========================================================================== */

.section-gallery {
    padding: 80px 40px 120px;
    min-height: 300vh;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(16, 1fr);
    gap: 12px;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}

.gallery-panel {
    padding: 40px;
    position: relative;
    z-index: 10;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    transition: transform 0.3s ease-out, border-color 0.3s ease;
    color: #1a1a1a;
}

.gallery-panel:hover {
    transform: scale(1.03);
    border-color: var(--gold-bright);
}

.panel-inner {
    position: relative;
    z-index: 2;
}

/* Panel-specific positions in the broken grid */
.panel-a {
    grid-column: 1 / 10;
    grid-row: 1;
    transform: rotate(-0.8deg);
    margin-bottom: -30px;
}

.panel-b {
    grid-column: 8 / 16;
    grid-row: 2;
    transform: rotate(0.5deg);
    margin-top: 20px;
    z-index: 15;
}

.panel-c {
    grid-column: 2 / 12;
    grid-row: 3;
    transform: rotate(-1.2deg);
    margin-top: -20px;
}

.panel-d {
    grid-column: 9 / 17;
    grid-row: 4;
    transform: rotate(0.7deg);
    margin-top: -40px;
    z-index: 20;
}

.panel-e {
    grid-column: 1 / 8;
    grid-row: 5;
    transform: rotate(-0.5deg);
    margin-top: 10px;
}

.panel-f {
    grid-column: 6 / 17;
    grid-row: 6;
    transform: rotate(1deg);
    margin-top: -25px;
    z-index: 15;
}

/* Panel headings */
.panel-heading {
    font-family: 'Playfair Display', serif;
    font-size: clamp(28px, 4vw, 48px);
    font-weight: 700;
    color: var(--gold-primary);
    letter-spacing: 0.08em;
    margin-bottom: 16px;
}

/* Ornamental dividers */
.ornamental-divider {
    width: 180px;
    margin: 12px 0 20px;
}

.ornamental-divider svg {
    width: 100%;
    height: 12px;
}

/* Body text inside panels */
.body-text {
    font-family: 'EB Garamond', serif;
    font-size: 17px;
    line-height: 1.75;
    color: #2a2520;
    max-width: 580px;
}

.accent-text {
    font-family: 'Cormorant Garamond', serif;
    font-size: 22px;
    font-weight: 500;
    font-style: italic;
    line-height: 1.6;
    color: #3a3530;
}

.attribution {
    font-family: 'Cormorant Garamond', serif;
    font-size: 16px;
    font-style: italic;
    color: var(--gold-primary);
    margin-top: 16px;
}

/* Specimen frames */
.specimen-frame {
    text-align: center;
    padding: 10px;
}

.specimen-fish {
    width: 180px;
    height: auto;
    margin: 0 auto 12px;
    display: block;
}

.specimen-label {
    font-family: 'Cormorant Garamond', serif;
    font-size: 16px;
    font-style: italic;
    color: var(--gold-primary);
    letter-spacing: 0.04em;
}

.specimen-common {
    font-family: 'EB Garamond', serif;
    font-size: 14px;
    color: var(--marble-vein);
    margin-top: 4px;
}

/* Panel animation states */
.animate-panel {
    opacity: 0;
    transition: opacity 0.8s ease, transform 0.8s ease, clip-path 0.8s ease;
}

.animate-panel[data-animation="slide-left"] {
    transform: translateX(-60px) rotate(-3deg);
}

.animate-panel[data-animation="fade-up"] {
    transform: translateY(40px) scale(0.95);
}

.animate-panel[data-animation="clip-circle"] {
    clip-path: circle(0% at 50% 50%);
    transform: rotate(-1.2deg);
}

.animate-panel[data-animation="fade-delay"] {
    transform: translateY(20px) rotate(0.7deg);
}

/* Revealed states */
.animate-panel.revealed[data-animation="slide-left"] {
    opacity: 1;
    transform: translateX(0) rotate(-0.8deg);
}

.panel-e.animate-panel.revealed[data-animation="slide-left"] {
    transform: translateX(0) rotate(-0.5deg);
}

.animate-panel.revealed[data-animation="fade-up"] {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0.5deg);
}

.panel-f.animate-panel.revealed[data-animation="fade-up"] {
    transform: translateY(0) scale(1) rotate(1deg);
}

.animate-panel.revealed[data-animation="clip-circle"] {
    opacity: 1;
    clip-path: circle(100% at 50% 50%);
    transform: rotate(-1.2deg);
}

.animate-panel.revealed[data-animation="fade-delay"] {
    opacity: 1;
    transform: translateY(0) rotate(0.7deg);
}

/* Kinetic text animations */
.kinetic-text .letter {
    display: inline-block;
    opacity: 0;
    transform: translateY(12px);
}

.kinetic-text .letter.revealed {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.4s cubic-bezier(0.23, 1, 0.32, 1),
                transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.kinetic-line {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.kinetic-line.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================================
   THE DEEP CHAMBER (Section III)
   ========================================================================== */

.section-deep {
    padding: 120px 40px 160px;
    position: relative;
    min-height: 200vh;
    overflow: hidden;
}

.deep-fish-bg {
    position: absolute;
    width: 500px;
    top: 10%;
    right: 5%;
    z-index: 1;
    animation: deep-fish-drift 25s ease-in-out infinite;
}

.deep-fish-lionfish {
    position: absolute;
    width: 400px;
    bottom: 15%;
    left: 5%;
    z-index: 1;
    animation: deep-fish-drift-2 30s ease-in-out infinite;
}

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

@keyframes deep-fish-drift-2 {
    0%, 100% { transform: translateX(0) translateY(0); }
    30%      { transform: translateX(25px) translateY(-12px); }
    60%      { transform: translateX(-10px) translateY(18px); }
}

.deep-content {
    max-width: 700px;
    margin: 0 auto;
    position: relative;
    z-index: 10;
}

.deep-quote {
    font-family: 'Playfair Display', serif;
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 700;
    color: var(--gold-primary);
    letter-spacing: 0.06em;
    margin-bottom: 60px;
    border: none;
    padding: 0;
}

.deep-body {
    font-family: 'EB Garamond', serif;
    font-size: 17px;
    line-height: 1.75;
    color: var(--ivory-parchment);
    max-width: 580px;
    margin-bottom: 40px;
}

.deep-passage {
    margin: 60px 0;
}

.deep-secondary-quote {
    font-family: 'Cormorant Garamond', serif;
    font-size: 24px;
    font-weight: 500;
    font-style: italic;
    color: var(--gold-bright);
    letter-spacing: 0.04em;
    border: none;
    padding: 0;
    margin-top: 80px;
    line-height: 1.5;
}

/* ==========================================================================
   THE GROTTO (Section IV)
   ========================================================================== */

.section-grotto {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 40px;
}

.grotto-content {
    text-align: center;
    z-index: 10;
    position: relative;
}

.grotto-text {
    font-family: 'Playfair Display', serif;
    font-size: clamp(28px, 5vw, 40px);
    font-weight: 700;
    color: var(--gold-primary);
    letter-spacing: 0.06em;
    margin-bottom: 40px;
}

.grotto-text .letter {
    display: inline-block;
    opacity: 0;
    transform: translateY(12px);
}

.grotto-text .letter.revealed {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.5s cubic-bezier(0.23, 1, 0.32, 1),
                transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.grotto-text.pulse {
    animation: grotto-pulse 4s ease-in-out infinite;
}

@keyframes grotto-pulse {
    0%, 100% { opacity: 0.85; }
    50%      { opacity: 1; }
}

.grotto-signature {
    font-family: 'EB Garamond', serif;
    font-size: 16px;
    color: var(--marble-vein);
    letter-spacing: 0.1em;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.8s ease 0.5s, transform 0.8s ease 0.5s;
}

.grotto-signature.revealed {
    opacity: 0.7;
    transform: translateY(0);
}

/* ==========================================================================
   Specimen hover teal glow
   ========================================================================== */

.specimen-frame .specimen-fish {
    transition: filter 0.3s ease;
}

.gallery-panel:hover .specimen-fish {
    filter: drop-shadow(0 0 20px rgba(26,107,90,0.2));
}

/* ==========================================================================
   Corner flourish scroll rotation (applied via JS transform)
   ========================================================================== */

.corner-flourish {
    transition: transform 0.1s linear;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 900px) {
    .gallery-grid {
        display: flex;
        flex-direction: column;
        gap: 30px;
    }

    .gallery-panel {
        transform: none !important;
        margin: 0 !important;
    }

    .animate-panel.revealed[data-animation="slide-left"],
    .panel-e.animate-panel.revealed[data-animation="slide-left"] {
        transform: none;
    }

    .animate-panel.revealed[data-animation="fade-up"],
    .panel-f.animate-panel.revealed[data-animation="fade-up"] {
        transform: none;
    }

    .animate-panel.revealed[data-animation="clip-circle"] {
        transform: none;
    }

    .animate-panel.revealed[data-animation="fade-delay"] {
        transform: none;
    }

    #nav-markers {
        right: 12px;
    }

    .corner-flourish {
        width: 60px;
        height: 60px;
    }

    .section-gallery {
        padding: 40px 20px;
        min-height: auto;
    }

    .section-deep {
        padding: 80px 20px;
    }

    .deep-fish-bg,
    .deep-fish-lionfish {
        width: 250px;
    }
}

@media (max-width: 600px) {
    .gallery-panel {
        padding: 24px;
    }

    .atrium-panel {
        width: 95vw;
        height: auto;
        min-height: 60vh;
        padding: 40px 20px;
    }
}