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

html {
    scroll-behavior: smooth;
}

body {
    background-color: #0d1f15;
    color: #b8c4a8;
    font-family: 'Lora', serif;
    font-weight: 400;
    font-size: clamp(0.95rem, 1.3vw, 1.15rem);
    line-height: 1.72;
    letter-spacing: 0.01em;
    overflow-x: hidden;
}

/* === MALACHITE GRAIN TEXTURE (applied to body) === */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 600px 400px at 20% 30%, #1a3c2a14 0%, transparent 70%),
        radial-gradient(ellipse 400px 600px at 80% 60%, #2d5a3d0d 0%, transparent 70%),
        radial-gradient(ellipse 500px 300px at 50% 80%, #0d1f151f 0%, transparent 70%),
        radial-gradient(ellipse 300px 500px at 70% 20%, #1a3c2a14 0%, transparent 70%);
}

/* === BRASS RAIL NAVIGATION === */
.brass-rail {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 30px;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
}

.rail-line {
    position: absolute;
    top: 14px;
    left: 10%;
    right: 10%;
    height: 3px;
    background: #c9a84c;
}

.diamond {
    width: 14px;
    height: 14px;
    background: #1a3c2a;
    border: 2px solid #c9a84c;
    transform: rotate(45deg);
    cursor: pointer;
    position: relative;
    z-index: 2;
    transition: background 0.3s, box-shadow 0.3s;
}

/* Golden ratio spacing: gaps ~1:1.618 */
.diamond:nth-child(2) { margin-left: 0; }
.diamond:nth-child(3) { margin-left: 60px; }
.diamond:nth-child(4) { margin-left: 97px; }
.diamond:nth-child(5) { margin-left: 60px; }
.diamond:nth-child(6) { margin-left: 37px; }

.diamond.active {
    background: radial-gradient(circle, #c9a84c, #8b6914);
    box-shadow: 0 0 8px #c9a84c80;
}

.diamond:hover {
    background: #c9a84c;
}

/* === CHAMBERS (GENERAL) === */
.chamber {
    min-height: 100vh;
    position: relative;
    display: flex;
    flex-direction: column;
    z-index: 1;
    overflow: hidden;
}

.chamber-header {
    padding: 8vh 8vw 3vh;
}

.chamber-title {
    font-family: 'Poiret One', cursive;
    font-weight: 400;
    font-size: clamp(3rem, 7vw, 6rem);
    line-height: 1.05;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #c9a84c;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
    position: relative;
}

.chamber-title::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 200px;
    height: 100%;
    background: linear-gradient(90deg, transparent, #c9a84c40, transparent);
    transition: none;
}

.chamber-title:hover::after {
    animation: goldShimmer 1.5s ease forwards;
}

@keyframes goldShimmer {
    from { left: -200px; }
    to { left: 100%; }
}

.chamber.visible .chamber-title {
    opacity: 1;
    transform: translateY(0);
}

.chamber-subtitle {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 600;
    font-size: clamp(1.1rem, 2.5vw, 1.6rem);
    line-height: 1.3;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #d4c9a8;
    margin-top: 1.5rem;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease 0.2s, transform 0.8s ease 0.2s;
}

.chamber.visible .chamber-subtitle {
    opacity: 1;
    transform: translateY(0);
}

.body-text {
    color: #b8c4a8;
    max-width: 60ch;
    margin-bottom: 2rem;
}

/* === CHAMBER 1 — THE SURFACE === */
.chamber-1 {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.chamber-1 .chamber-content {
    position: relative;
    z-index: 2;
}

.chamber-1 .chamber-title {
    font-size: clamp(3.5rem, 9vw, 7rem);
}

.sunburst {
    position: absolute;
    inset: 0;
    background: conic-gradient(
        from 0deg at 50% 50%,
        #c9a84c15 0deg, transparent 15deg,
        transparent 30deg, #c9a84c15 30deg,
        #c9a84c15 45deg, transparent 45deg,
        transparent 60deg, #c9a84c15 60deg,
        #c9a84c15 75deg, transparent 75deg,
        transparent 90deg, #c9a84c15 90deg,
        #c9a84c15 105deg, transparent 105deg,
        transparent 120deg, #c9a84c15 120deg,
        #c9a84c15 135deg, transparent 135deg,
        transparent 150deg, #c9a84c15 150deg,
        #c9a84c15 165deg, transparent 165deg,
        transparent 180deg, #c9a84c15 180deg,
        #c9a84c15 195deg, transparent 195deg,
        transparent 210deg, #c9a84c15 210deg,
        #c9a84c15 225deg, transparent 225deg,
        transparent 240deg, #c9a84c15 240deg,
        #c9a84c15 255deg, transparent 255deg,
        transparent 270deg, #c9a84c15 270deg,
        #c9a84c15 285deg, transparent 285deg,
        transparent 300deg, #c9a84c15 300deg,
        #c9a84c15 315deg, transparent 315deg,
        transparent 330deg, #c9a84c15 330deg,
        #c9a84c15 345deg, transparent 345deg,
        transparent 360deg
    );
    opacity: 0.6;
    animation: sunburstSpin 60s linear infinite;
}

@keyframes sunburstSpin {
    to { transform: rotate(360deg); }
}

/* Background fish */
.bg-fish {
    position: absolute;
    z-index: 1;
    pointer-events: none;
}

.fish-angel-large {
    width: 40vw;
    top: 10%;
    right: -5%;
    animation: fishDriftH 25s ease-in-out infinite alternate, fishRotate 8s ease-in-out infinite alternate;
}

.fish-angel-small {
    width: 20vw;
    bottom: 15%;
    left: 5%;
    animation: fishDriftH2 30s ease-in-out infinite alternate, fishRotate 10s ease-in-out infinite alternate-reverse;
    transform: scale(0.8);
}

@keyframes fishDriftH {
    from { transform: translateX(-5vw); }
    to { transform: translateX(5vw); }
}

@keyframes fishDriftH2 {
    from { transform: translateX(3vw) scale(0.8); }
    to { transform: translateX(-3vw) scale(0.8); }
}

@keyframes fishRotate {
    from { rotate: -3deg; }
    to { rotate: 3deg; }
}

/* === FRIEZE — MEMBRANE ZONES === */
.frieze {
    height: 15vh;
    position: relative;
    z-index: 1;
    background:
        repeating-linear-gradient(
            120deg,
            #c9a84c20 0px, transparent 2px, transparent 20px, #c9a84c20 22px
        ),
        repeating-linear-gradient(
            60deg,
            #1a3c2a40 0px, transparent 2px, transparent 20px, #1a3c2a40 22px
        );
    background-size: 40px 40px;
    animation: friezeScroll 30s linear infinite;
}

@keyframes friezeScroll {
    to { background-position: 200px 0; }
}

/* === CHAMBER BODY LAYOUT (F-pattern) === */
.chamber-body {
    display: flex;
    flex: 1;
    padding: 0 8vw 6vh;
    gap: 5%;
}

.content-column {
    width: 60%;
}

.aquarium-panel {
    width: 35%;
    position: relative;
    overflow: hidden;
    border-left: 2px solid #c9a84c30;
    background: linear-gradient(180deg, #0d1f1500, #1a3c2a20, #0d1f1500);
}

/* === AQUARIUM FISH DRIFT === */
.aquarium-fish {
    position: absolute;
    animation-play-state: paused;
}

.fish-drift-1 {
    width: 80px;
    top: 15%;
    left: 10%;
    animation: driftRight 20s ease-in-out infinite alternate, fishRotate 6s ease-in-out infinite alternate;
    transform: scale(0.6);
}

.fish-drift-2 {
    width: 60px;
    top: 45%;
    right: 10%;
    animation: driftLeft 28s ease-in-out infinite alternate, fishRotate 9s ease-in-out infinite alternate-reverse;
    transform: scale(0.8);
}

.fish-drift-3 {
    width: 100px;
    bottom: 20%;
    left: 20%;
    animation: driftRight 35s ease-in-out infinite alternate, fishRotate 7s ease-in-out infinite alternate;
    transform: scale(1.0);
}

.chamber.visible .aquarium-fish {
    animation-play-state: running;
}

@keyframes driftRight {
    from { transform: translateX(-20px); }
    to { transform: translateX(calc(100% - 40px)); }
}

@keyframes driftLeft {
    from { transform: translateX(20px); }
    to { transform: translateX(calc(-100% + 40px)); }
}

/* === CARDS === */
.cards-row {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.card-flip {
    width: 280px;
    height: 180px;
    perspective: 1000px;
    cursor: pointer;
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.chamber.visible .card-flip {
    opacity: 1;
    transform: translateX(0);
}

.chamber.visible .card-flip:nth-child(1) { transition-delay: 0.15s; }
.chamber.visible .card-flip:nth-child(2) { transition-delay: 0.3s; }
.chamber.visible .card-flip:nth-child(3) { transition-delay: 0.45s; }

.card-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.card-flip.flipped .card-inner {
    transform: rotateY(180deg);
}

.card-front, .card-back {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    border: 1px solid #c9a84c40;
}

/* Deco corner sunbursts */
.card-front::before,
.card-front::after {
    content: '';
    position: absolute;
    width: 30px;
    height: 30px;
    background: conic-gradient(from 0deg, #c9a84c40, transparent 60deg, transparent);
}
.card-front::before { top: 0; left: 0; }
.card-front::after { bottom: 0; right: 0; transform: rotate(180deg); }

.card-front {
    background: #d4c9a8; /* f0ebe0 ivory reef alt, 1e2e1e night forest text, 3aa68c reef turquoise highlight */
    /* Chevron top border */
    background-image: repeating-linear-gradient(
        120deg, #c9a84c4d 0px, transparent 2px, transparent 8px
    );
    background-size: 16px 8px;
    background-repeat: repeat-x;
    background-position: top;
}

.card-title {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 600;
    font-size: clamp(1.1rem, 2.5vw, 1.4rem);
    line-height: 1.3;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #1a3c2a;
    text-align: center;
}

.card-back {
    background: #1a3c2a;
    transform: rotateY(180deg);
    overflow: hidden;
}

.card-back p {
    font-family: 'Lora', serif;
    font-weight: 400;
    font-size: 0.85rem;
    line-height: 1.6;
    color: #b8c4a8; /* sage mist on #1e2e1e night-forest dark */
    position: relative;
    z-index: 1;
}

.card-watermark {
    position: absolute;
    width: 120px;
    height: 120px;
    right: -10px;
    bottom: -10px;
    opacity: 1;
}

/* === CHAMBER 3 — DEEPER GREEN === */
.chamber-3 {
    background: #0d1f15;
}

.deco-arch-band {
    height: 20px;
    margin-top: 1rem;
    background: repeating-linear-gradient(
        90deg,
        transparent 0px, transparent 18px,
        #c9a84c30 18px, #c9a84c30 20px
    ),
    radial-gradient(ellipse 20px 20px at 10px 20px, transparent 14px, #c9a84c30 14px, #c9a84c30 16px, transparent 16px);
    background-size: 20px 20px;
}

/* === CHAMBER 4 — DARKEST === */
.chamber-4 {
    background: linear-gradient(180deg, #0d1f15, #091510);
}

.lionfish-svg {
    width: 80%;
    max-width: 300px;
    margin: auto;
    display: block;
}

.lionfish-strokes line,
.lionfish-strokes circle {
    stroke-dasharray: 300;
    stroke-dashoffset: 300;
    transition: stroke-dashoffset 2s ease;
}

.chamber-4.visible .lionfish-strokes line,
.chamber-4.visible .lionfish-strokes circle {
    stroke-dashoffset: 0;
}

/* === CHAMBER 5 — THE ABYSS === */
.chamber-5 {
    background: linear-gradient(180deg, #091510, #060e0a);
    align-items: center;
    justify-content: center;
    text-align: center;
}

.abyss-content {
    position: relative;
    z-index: 2;
}

.outline-title {
    -webkit-text-stroke: 1.5px #c9a84c;
    color: transparent;
    font-size: clamp(3rem, 8vw, 6.5rem);
}

.single-card {
    justify-content: center;
    margin-top: 2rem;
}

.card-flip-large {
    width: 400px;
    height: 220px;
}

/* Ascending fish in Chamber 5 */
.fish-ascend-1 {
    width: 15vw;
    bottom: 30%;
    right: 10%;
    animation: fishAscend 22s ease-in-out infinite;
    opacity: 0.15;
}

.fish-ascend-2 {
    width: 10vw;
    bottom: 50%;
    left: 8%;
    animation: fishAscend2 28s ease-in-out infinite;
    opacity: 0.12;
}

.fish-ascend-3 {
    width: 12vw;
    bottom: 20%;
    left: 40%;
    animation: fishAscend3 35s ease-in-out infinite;
    opacity: 0.1;
}

@keyframes fishAscend {
    0% { transform: translateY(0) rotate(5deg); }
    50% { transform: translateY(-15vh) rotate(-3deg); }
    100% { transform: translateY(0) rotate(5deg); }
}

@keyframes fishAscend2 {
    0% { transform: translateY(0) rotate(-3deg); }
    50% { transform: translateY(-20vh) rotate(4deg); }
    100% { transform: translateY(0) rotate(-3deg); }
}

@keyframes fishAscend3 {
    0% { transform: translateY(0) rotate(2deg); }
    50% { transform: translateY(-10vh) rotate(-5deg); }
    100% { transform: translateY(0) rotate(2deg); }
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
    .chamber-body {
        flex-direction: column;
    }
    .content-column {
        width: 100%;
    }
    .aquarium-panel {
        width: 100%;
        height: 200px;
        border-left: none;
        border-top: 2px solid #c9a84c30;
    }
    .cards-row {
        justify-content: center;
    }
    .card-flip {
        width: 100%;
        max-width: 300px;
    }
    .card-flip-large {
        max-width: 400px;
    }
    .diamond:nth-child(3),
    .diamond:nth-child(4),
    .diamond:nth-child(5),
    .diamond:nth-child(6) {
        margin-left: 30px;
    }
}