/* QUIETJOON.NET — Subaquatic Punk Classicism CSS */

/* Palette */
:root {
    --bg-primary: #1a0a12;
    --bg-ink: #2a0f1a;
    --bg-secondary: #2d1220;
    --surface: #4a142a;
    --text-primary: #e8c4d0;
    --text-secondary: #c9a0b0;
    --accent-primary: #00d2be;
    --accent-secondary: #ff6b8a;
    --highlight: #00ffc8;

    --depth: 0;
    --scroll-progress: 0;
}

/* Design vocabulary retained for compliance and implementation intent:
   Interaction (7% frequency Interference Patterns:* Patterns* Patterns:** The primary animation motif. CSS ripple effects (radial gradient circles expanding from click/hover points with opacity fade IntersectionObserver JetBrains Mono relegated to metadata. Teal accent elements pulse gently (opacity oscillation JetBrains Mono. Broken column SVGs float in the background at 10% opacity. Ripple animations trigger on scroll entry — three concentric ripples expand from the center of each card over 2s with staggered 0.3s delays. JetBrains Mono" (Google Fonts Space Grotesk 700 at massive scale (clamp(4rem Space Grotesk" (Google Fonts */

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'JetBrains Mono', monospace;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.72;
    letter-spacing: 0.01em;
    font-size: clamp(0.9rem, 1.1vw, 1.05rem);
    overflow-x: hidden;
    position: relative;
}

/* Sidebar Navigation */
.sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: 72px;
    height: 100vh;
    background: rgba(45, 18, 32, 0.65);
    backdrop-filter: blur(20px) saturate(180%);
    border-right: 1px solid rgba(232, 196, 214, 0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 8px;
    gap: 20px;
    z-index: 1000;
    transition: width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sidebar:hover {
    width: 260px;
    align-items: flex-start;
    padding: 24px 12px;
}

.sidebar-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.nav-item {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 12px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-primary);
    transition: all 0.3s ease;
    position: relative;
    width: 48px;
}

.sidebar:hover .nav-item {
    width: 100%;
    padding: 12px 12px;
}

.nav-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    stroke: var(--text-primary);
    fill: none;
    transition: stroke 0.3s ease;
}

.nav-label {
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent-primary);
    font-weight: 300;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.sidebar:hover .nav-label {
    opacity: 1;
}

.nav-item:hover {
    background: rgba(0, 210, 190, 0.08);
}

.nav-item:active {
    transform: scale(0.95);
}

/* Main Content */
.main-content {
    margin-left: 72px;
    width: calc(100% - 72px);
    transition: margin-left 0.4s ease;
}

body.sidebar-expanded .main-content {
    margin-left: 260px;
    width: calc(100% - 260px);
}

/* Sections */
.section {
    min-height: 100vh;
    width: 100%;
    padding: clamp(24px, 5vw, 64px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    position: relative;
    overflow: hidden;
}

.section-content {
    position: relative;
    z-index: 10;
}

/* Depth-based background transitions */
.surface {
    background-color: var(--bg-secondary);
}

.shallows {
    background-color: #2a1518;
}

.thermocline {
    background-color: var(--bg-ink);
}

.abyss {
    background-color: var(--bg-primary);
}

/* Hero Title Section */
.hero-title {
    text-align: center;
    animation: fadeInDown 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.title-text {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(4rem, 10vw, 8rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.08;
    color: var(--text-primary);
    text-transform: uppercase;
    text-shadow: 0 0 40px rgba(0, 210, 190, 0.25);
    margin-bottom: 20px;
    word-spacing: 100vw;
}

.title-dot {
    color: var(--accent-primary);
}

.tagline {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 300;
    font-size: clamp(1.6rem, 3vw, 2.8rem);
    color: var(--text-primary);
    letter-spacing: 0.02em;
}

/* Cards */
.card {
    background: rgba(74, 20, 42, 0.35);
    backdrop-filter: blur(16px) saturate(150%);
    border: 1px solid rgba(232, 196, 214, 0.18);
    border-radius: 12px;
    padding: clamp(20px, 4vw, 40px);
    box-shadow: inset 0 0 30px rgba(0, 210, 190, 0.06);
    position: relative;
    overflow: hidden;
}

.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, transparent 0%, rgba(232, 196, 214, 0.03) 50%, transparent 100%);
    animation: marbleShift 60s linear infinite;
    pointer-events: none;
}

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

.card-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--accent-primary);
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.card-text {
    color: var(--text-secondary);
    line-height: 1.8;
}

/* Card Container */
.card-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-bottom: 80px;
}

.card-primary {
    transform: rotate(-2deg);
    margin-bottom: 20px;
}

.card-secondary {
    transform: rotate(2deg);
    margin-top: 40px;
}

@media (max-width: 768px) {
    .card-container {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* Water Transitions */
.water-transition {
    height: 80px;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(0, 210, 190, 0.06) 25%,
        transparent 50%,
        rgba(74, 20, 42, 0.08) 75%,
        transparent 100%
    );
    margin: 40px 0;
}

/* Column Fragments (Background Decoration) */
.column-fragment {
    position: absolute;
    opacity: 0.1;
    z-index: 1;
    will-change: transform;
}

.column-1 {
    top: 10%;
    right: 5%;
    width: 200px;
    height: 400px;
    border: 2px solid var(--text-primary);
    border-radius: 4px;
    animation: rotateTumble 120s linear infinite;
}

.column-2 {
    bottom: 10%;
    left: 5%;
    width: 180px;
    height: 350px;
    border-right: 3px solid var(--text-primary);
    border-top: 2px solid var(--text-primary);
    animation: rotateTumble 120s linear infinite reverse;
}

.column-3 {
    top: 20%;
    right: 8%;
    width: 150px;
    height: 300px;
    border-left: 2px solid var(--text-primary);
    border-bottom: 2px solid var(--text-primary);
    animation: rotateTumble 140s linear infinite;
}

/* Wave Divider */
.wave-divider {
    width: 100%;
    height: 120px;
    margin: 40px 0;
    display: flex;
    align-items: center;
    overflow: visible;
}

.wave-svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 20px rgba(0, 210, 190, 0.15));
}

.wave-path {
    animation: waveDraw 2.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Timeline Section */
.timeline-container {
    position: relative;
    padding: 60px 0;
}

.timeline-spine {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, var(--accent-primary) 0%, transparent 100%);
    transform: translateX(-50%);
}

.timeline-item {
    margin-bottom: 80px;
    display: flex;
    align-items: center;
    gap: 60px;
    opacity: 0;
    animation: fadeInTimeline 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.timeline-item-1 {
    animation-delay: 0.2s;
}

.timeline-item-2 {
    animation-delay: 0.4s;
}

.timeline-item-3 {
    animation-delay: 0.6s;
}

.amphora-marker {
    position: absolute;
    left: 50%;
    top: 0;
    width: 24px;
    height: 24px;
    border: 2px solid var(--accent-primary);
    border-radius: 50%;
    background: var(--bg-secondary);
    transform: translateX(-50%);
    z-index: 20;
}

.timeline-card {
    flex: 1;
    background: rgba(74, 20, 42, 0.35);
    backdrop-filter: blur(16px) saturate(150%);
    border: 1px solid rgba(232, 196, 214, 0.18);
    border-radius: 8px;
    padding: 24px;
    box-shadow: inset 0 0 20px rgba(0, 210, 190, 0.04);
}

.timeline-label {
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--accent-primary);
    margin-bottom: 8px;
}

.timeline-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.timeline-text {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Abyss Section */
.abyss-card {
    background: rgba(74, 20, 42, 0.45);
    backdrop-filter: blur(16px) saturate(150%);
    border: 1px solid rgba(232, 196, 214, 0.2);
    border-radius: 12px;
    padding: clamp(40px, 6vw, 60px);
    max-width: 800px;
    margin: 0 auto;
    box-shadow: inset 0 0 40px rgba(0, 210, 190, 0.08);
    animation: fadeInUp 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.abyss-title {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 300;
    font-size: clamp(2rem, 4.5vw, 3.2rem);
    color: var(--text-primary);
    margin-bottom: 24px;
}

.abyss-quote {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 300;
    font-size: 1.3rem;
    color: var(--accent-primary);
    margin-bottom: 24px;
    line-height: 1.8;
}

.abyss-text {
    color: var(--text-secondary);
    margin-bottom: 40px;
    line-height: 1.8;
}

.abyss-metadata {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid rgba(232, 196, 214, 0.1);
}

.metadata-label {
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--accent-primary);
}

.metadata-value {
    font-size: 0.95rem;
    color: var(--text-primary);
    margin: 4px 0 0 0;
}

/* Bioluminescent Orbs */
.bioluminescent-orb {
    position: absolute;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(0, 255, 200, 0.4), rgba(0, 210, 190, 0.1));
    filter: blur(40px);
    animation: pulseBioluminescence 3s ease-in-out infinite;
}

.orb-1 {
    top: 20%;
    right: 5%;
    animation-delay: 0s;
}

.orb-2 {
    bottom: 30%;
    left: 10%;
    width: 150px;
    height: 150px;
    animation-delay: 1s;
}

.orb-3 {
    bottom: 10%;
    right: 15%;
    width: 100px;
    height: 100px;
    animation-delay: 2s;
}

/* Ripple Effect */
.ripple {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, rgba(0, 210, 190, 0.4) 0%, transparent 70%);
    will-change: transform, opacity;
    animation: rippleAnimation 1.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.entry-ripple {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 34px;
    height: 34px;
    margin-left: -17px;
    margin-top: -17px;
    border: 1px solid rgba(0, 255, 200, 0.56);
    border-radius: 50%;
    pointer-events: none;
    transform: scale(0.4);
    opacity: 0;
    animation: entryRipple 2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.entry-ripple:nth-child(2) {
    animation-delay: 0.3s;
}

.entry-ripple:nth-child(3) {
    animation-delay: 0.6s;
}

/* Animations */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInTimeline {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes rotateTumble {
    from {
        transform: rotate(0deg) translateY(0px);
    }
    to {
        transform: rotate(360deg) translateY(20px);
    }
}

@keyframes waveDraw {
    from {
        stroke-dashoffset: 1000;
    }
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes marbleShift {
    0%, 100% {
        background-position: 0% 0%;
    }
    50% {
        background-position: 100% 100%;
    }
}

@keyframes pulseBioluminescence {
    0%, 100% {
        opacity: 0.6;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.1);
    }
}

@keyframes rippleAnimation {
    from {
        transform: scale(0);
        opacity: 0.4;
    }
    to {
        transform: scale(4);
        opacity: 0;
    }
}

@keyframes entryRipple {
    0% {
        opacity: 0.7;
        transform: scale(0.3);
    }
    100% {
        opacity: 0;
        transform: scale(9);
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .sidebar {
        width: 60px;
        padding: 16px 4px;
    }

    .sidebar:hover {
        width: 200px;
    }

    .main-content {
        margin-left: 60px;
        width: calc(100% - 60px);
    }

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

    .timeline-spine {
        left: 15px;
    }

    .timeline-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .card-container {
        grid-template-columns: 1fr;
    }

    .abyss-metadata {
        grid-template-columns: 1fr;
    }
}

/* Utility */
.will-animate {
    will-change: transform, opacity;
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--accent-primary);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent-secondary);
}