/* ==========================================================================
   mujun.quest — Styles
   A surreal scholarly expedition into contradiction
   ========================================================================== */

/* --- CSS Custom Properties --- */
:root {
    --parchment-base: #F5EDD6;
    --gold-ink: #B8962E;
    --deep-black: #1A1812;
    --luxury-gold: #D4AF37;
    --aged-sepia: #8B7355;
    --tropical-teal: #2E8B7A;
    --paper-shadow: #D4C8A8;
    --base-unit: 24px;
    --content-margin-left: 15%;
    --content-width: 60%;
}

/* --- Reset & Base --- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    background-color: var(--parchment-base);
    color: var(--deep-black);
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 400;
    font-size: clamp(16px, 1.1vw, 18px);
    line-height: 1.9;
    overflow-x: hidden;
    position: relative;
}

/* --- Font utility classes --- */
.cinzel-decorative {
    font-family: 'Cinzel Decorative', 'Georgia', serif;
    font-weight: 700;
}

.cormorant-sc {
    font-family: 'Cormorant SC', 'Cormorant Garamond', Georgia, serif;
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 0.12em;
}

/* --- Page Fade Overlay --- */
#page-fade-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--deep-black);
    z-index: 9999;
    pointer-events: none;
    opacity: 1;
    transition: opacity 1000ms ease-out;
}

#page-fade-overlay.faded {
    opacity: 0;
}

/* --- Gold Vertical Rule (left margin guide) --- */
#gold-vertical-rule {
    position: fixed;
    top: 0;
    left: var(--content-margin-left);
    width: 1px;
    height: 100vh;
    background-color: var(--gold-ink);
    opacity: 0.15;
    z-index: 10;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

/* --- Parchment Vignette (aged paper effect) --- */
.parchment-vignette {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, transparent 50%, rgba(212, 200, 168, 0.35) 100%);
    pointer-events: none;
    z-index: 1;
}

/* Paper grain noise via pseudo-element */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.04;
    z-index: 0;
    pointer-events: none;
    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)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 256px 256px;
}

/* ============================================================
   SECTION: Title Parchment (Hero - 100vh)
   ============================================================ */
#title-parchment {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    z-index: 2;
}

.title-content {
    text-align: center;
    position: relative;
    z-index: 5;
}

#site-title {
    font-size: clamp(36px, 5vw, 72px);
    letter-spacing: 0.04em;
    color: var(--deep-black);
    opacity: 0;
    transition: opacity 800ms ease-in;
    margin-bottom: calc(var(--base-unit) * 1.5);
}

#site-title.visible {
    opacity: 1;
}

#site-subtitle {
    position: relative;
    display: inline-block;
    color: var(--aged-sepia);
    opacity: 0;
    transition: opacity 500ms ease-in;
}

#site-subtitle.visible {
    opacity: 1;
}

.subtitle-text {
    position: relative;
    display: inline-block;
}

.subtitle-underline {
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--gold-ink);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 600ms ease-out;
}

#site-subtitle.underline-drawn .subtitle-underline {
    transform: scaleX(1);
}

/* ============================================================
   SECTION: Fish Containers & Animations
   ============================================================ */
.fish-container {
    position: absolute;
    pointer-events: none;
    z-index: 4;
}

.fish {
    display: block;
}

/* Hero fish - angelfish drifting right to left */
.fish-container--hero {
    top: 55%;
    right: -150px;
    width: 120px;
    height: 80px;
    animation: drift-hero 20s linear infinite;
}

.fish-container--hero .fish {
    color: var(--gold-ink);
    width: 120px;
    height: 80px;
}

@keyframes drift-hero {
    0% {
        transform: translateX(0) translateY(0);
    }
    25% {
        transform: translateX(-30vw) translateY(-15px);
    }
    50% {
        transform: translateX(-60vw) translateY(10px);
    }
    75% {
        transform: translateX(-90vw) translateY(-8px);
    }
    100% {
        transform: translateX(-120vw) translateY(0);
    }
}

/* Panel fish */
.fish-container--panel {
    width: 60px;
    height: 100px;
    animation: drift-panel 18s linear infinite;
}

.fish-container--panel .fish {
    color: var(--tropical-teal);
    width: 60px;
    height: 100px;
}

.fish-container--panel-2 {
    bottom: 15%;
    right: -140px;
    width: 140px;
    height: 90px;
    animation: drift-panel-reverse 22s linear infinite;
}

.fish-container--panel-2 .fish {
    color: var(--tropical-teal);
    width: 140px;
    height: 90px;
}

.fish-container--panel-3 {
    top: 10%;
    left: -120px;
    width: 120px;
    height: 80px;
    animation: drift-panel-left 25s linear infinite;
}

.fish-container--panel-3 .fish {
    color: var(--gold-ink);
    width: 120px;
    height: 80px;
}

/* First panel seahorse */
.fish-container--panel:not(.fish-container--panel-2):not(.fish-container--panel-3) {
    top: 20%;
    right: -60px;
}

@keyframes drift-panel {
    0% {
        transform: translateX(0) translateY(0);
    }
    50% {
        transform: translateX(-50vw) translateY(20px);
    }
    100% {
        transform: translateX(-100vw) translateY(0);
    }
}

@keyframes drift-panel-reverse {
    0% {
        transform: translateX(0) translateY(0);
    }
    50% {
        transform: translateX(-60vw) translateY(-15px);
    }
    100% {
        transform: translateX(-120vw) translateY(0);
    }
}

@keyframes drift-panel-left {
    0% {
        transform: translateX(0) translateY(0);
    }
    50% {
        transform: translateX(55vw) translateY(18px);
    }
    100% {
        transform: translateX(110vw) translateY(0);
    }
}

/* Final scroll circling fish */
.fish-container--final {
    z-index: 4;
}

.fish-container--final-1 {
    top: 15%;
    left: 10%;
    width: 100px;
    height: 65px;
    animation: circle-fish-1 25s linear infinite;
}

.fish-container--final-1 .fish {
    color: var(--tropical-teal);
    width: 100px;
    height: 65px;
}

.fish-container--final-2 {
    top: 60%;
    right: 12%;
    width: 60px;
    height: 100px;
    animation: circle-fish-2 20s linear infinite;
}

.fish-container--final-2 .fish {
    color: var(--gold-ink);
    width: 60px;
    height: 100px;
}

.fish-container--final-3 {
    bottom: 18%;
    left: 20%;
    width: 120px;
    height: 80px;
    animation: circle-fish-3 22s linear infinite;
}

.fish-container--final-3 .fish {
    color: var(--gold-ink);
    width: 120px;
    height: 80px;
}

@keyframes circle-fish-1 {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }
    25% {
        transform: translate(80px, -40px) rotate(5deg);
    }
    50% {
        transform: translate(40px, 30px) rotate(-3deg);
    }
    75% {
        transform: translate(-30px, -20px) rotate(4deg);
    }
    100% {
        transform: translate(0, 0) rotate(0deg);
    }
}

@keyframes circle-fish-2 {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }
    25% {
        transform: translate(-50px, 30px) rotate(-6deg);
    }
    50% {
        transform: translate(20px, -40px) rotate(4deg);
    }
    75% {
        transform: translate(40px, 20px) rotate(-3deg);
    }
    100% {
        transform: translate(0, 0) rotate(0deg);
    }
}

@keyframes circle-fish-3 {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }
    25% {
        transform: translate(60px, 25px) rotate(4deg);
    }
    50% {
        transform: translate(-40px, -30px) rotate(-5deg);
    }
    75% {
        transform: translate(-20px, 35px) rotate(3deg);
    }
    100% {
        transform: translate(0, 0) rotate(0deg);
    }
}

/* Fish hover repulsion (handled via JS adding transform) */
.fish.repelled {
    transition: transform 0.8s ease-out;
}

/* ============================================================
   SECTION: Paradox Codex
   ============================================================ */
#paradox-codex {
    position: relative;
    z-index: 2;
    padding-top: calc(var(--base-unit) * 4);
    padding-bottom: calc(var(--base-unit) * 4);
}

/* --- Paradox Entry --- */
.paradox-entry {
    position: relative;
    margin-left: var(--content-margin-left);
    max-width: var(--content-width);
    margin-bottom: calc(var(--base-unit) * 4);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 300ms ease, transform 300ms ease;
}

.paradox-entry.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* --- Drop Cap --- */
.drop-cap-wrapper {
    float: left;
    margin-right: 12px;
    margin-top: 4px;
}

.drop-cap {
    display: inline-block;
    font-size: 3.42em;
    line-height: 1;
    color: var(--deep-black);
    border: 1px solid var(--gold-ink);
    padding: 6px 10px;
    position: relative;
    transition: transform 0.3s ease;
}

/* Corner ornaments on drop cap */
.drop-cap::before,
.drop-cap::after {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    border-color: var(--luxury-gold);
}

.drop-cap::before {
    top: -1px;
    left: -1px;
    border-top: 2px solid var(--luxury-gold);
    border-left: 2px solid var(--luxury-gold);
}

.drop-cap::after {
    bottom: -1px;
    right: -1px;
    border-bottom: 2px solid var(--luxury-gold);
    border-right: 2px solid var(--luxury-gold);
}

.drop-cap:hover {
    transform: scale(1.05);
}

/* --- Paradox Title --- */
.paradox-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 600;
    font-size: clamp(28px, 3.5vw, 56px);
    letter-spacing: 0.02em;
    color: var(--deep-black);
    margin-bottom: calc(var(--base-unit) * 0.75);
    transition: text-shadow 0.3s ease;
    clear: none;
}

.paradox-title:hover {
    text-shadow: 0 0 8px rgba(184, 150, 46, 0.3);
}

/* --- Paradox Text --- */
.paradox-statement {
    font-style: italic;
    color: var(--deep-black);
    margin-bottom: calc(var(--base-unit) * 0.75);
    clear: both;
}

.paradox-body {
    color: var(--aged-sepia);
    margin-bottom: var(--base-unit);
}

/* --- Ornate Dividers --- */
.ornate-divider {
    margin: calc(var(--base-unit) * 2) auto;
    max-width: 70%;
    opacity: 0;
    transition: opacity 300ms ease;
}

.ornate-divider.in-view {
    opacity: 1;
}

.divider-line {
    width: 100%;
    height: 40px;
    display: block;
}

/* ============================================================
   SECTION: Illumination Panels
   ============================================================ */
.illumination-panel {
    position: relative;
    width: 100%;
    padding: calc(var(--base-unit) * 5) calc(var(--base-unit) * 2);
    margin: calc(var(--base-unit) * 3) 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: var(--parchment-base);
    transform: scale(0.98);
    opacity: 0;
    transition: transform 500ms ease, opacity 500ms ease;
}

.illumination-panel.in-view {
    transform: scale(1);
    opacity: 1;
}

.impossible-geometry {
    width: clamp(140px, 20vw, 240px);
    height: auto;
    display: block;
    margin-bottom: calc(var(--base-unit) * 1.5);
    position: relative;
    z-index: 3;
}

.illumination-caption {
    text-align: center;
    color: var(--aged-sepia);
    max-width: 500px;
    position: relative;
    z-index: 3;
}

/* ============================================================
   SECTION: Final Scroll (100vh)
   ============================================================ */
#final-scroll {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    z-index: 2;
}

.final-content {
    text-align: center;
    max-width: 600px;
    padding: 0 var(--base-unit);
    position: relative;
    z-index: 5;
}

.final-content .drop-cap-wrapper {
    float: none;
    display: block;
    margin: 0 auto calc(var(--base-unit) * 1.5);
}

.final-content .drop-cap {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(48px, 6vw, 80px);
}

.final-paradox-title {
    text-align: center;
    margin-bottom: var(--base-unit);
}

.final-statement {
    text-align: center;
    margin-bottom: calc(var(--base-unit) * 2);
}

.final-colophon {
    color: var(--gold-ink);
    text-align: center;
    letter-spacing: 0.2em;
}

/* ============================================================
   Animated underlines for key terms (JS-triggered)
   ============================================================ */
.animated-underline {
    position: relative;
    display: inline;
}

.animated-underline::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 1.5px;
    background-color: var(--gold-ink);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 600ms ease-out;
}

.animated-underline.drawn::after {
    transform: scaleX(1);
}

/* ============================================================
   Responsive adjustments
   ============================================================ */
@media (max-width: 768px) {
    :root {
        --content-margin-left: 8%;
        --content-width: 82%;
    }

    #gold-vertical-rule {
        left: 8%;
    }

    .paradox-entry {
        margin-bottom: calc(var(--base-unit) * 3);
    }

    .ornate-divider {
        max-width: 90%;
    }

    .drop-cap {
        font-size: 2.5em;
        padding: 4px 8px;
    }

    .illumination-panel {
        padding: calc(var(--base-unit) * 3) var(--base-unit);
    }

    .fish-container--hero {
        width: 80px;
        height: 54px;
    }

    .fish-container--hero .fish {
        width: 80px;
        height: 54px;
    }
}

@media (max-width: 480px) {
    :root {
        --content-margin-left: 5%;
        --content-width: 90%;
    }

    #gold-vertical-rule {
        display: none;
    }

    #site-title {
        font-size: clamp(28px, 8vw, 48px);
    }

    .paradox-title {
        font-size: clamp(22px, 5vw, 36px);
    }
}

/* ============================================================
   Selection styling
   ============================================================ */
::selection {
    background-color: var(--luxury-gold);
    color: var(--parchment-base);
}