/* ============================================
   ppuzzl.net - Dark Academia / F-Pattern Layout
   Palette: Muted | Typography: Frutiger-Clean
   Motifs: Crystalline | Tone: Elegant-Sophisticated
   ============================================ */

/* --- CSS Custom Properties & @property for Counter-Animate --- */
@property --counter-value {
    syntax: '<integer>';
    inherits: false;
    initial-value: 0;
}

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

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

body {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    color: #c8bfb0;
    background: linear-gradient(to bottom, #1a1714 0%, #0f0d0b 100%);
    background-attachment: fixed;
    line-height: 1.72;
    letter-spacing: 0.01em;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --- Noise Texture Overlay --- */
#noise-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.02;
}

/* --- Gradient Mesh Backgrounds --- */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse at 20% 30%, rgba(184, 154, 90, 0.04) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 70%, rgba(74, 122, 114, 0.03) 0%, transparent 50%),
        radial-gradient(ellipse at 60% 10%, rgba(184, 154, 90, 0.02) 0%, transparent 40%);
}

/* --- Typography --- */

/* Display - Cormorant Garamond */
h1, h2, h3 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.15;
    color: #c8bfb0;
}

h1 {
    font-size: clamp(3rem, 8vw, 7rem);
}

h2 {
    font-size: clamp(1.8rem, 4vw, 3.2rem);
}

h3 {
    font-size: clamp(1.3rem, 2.5vw, 1.8rem);
}

/* Body Text */
.body-text {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: clamp(1rem, 1.8vw, 1.15rem);
    line-height: 1.72;
    letter-spacing: 0.01em;
    color: #c8bfb0;
    max-width: 62ch;
    margin-bottom: 1.5rem;
}

/* Mono Accent */
.mono-accent {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 400;
    font-size: clamp(0.8rem, 1.4vw, 0.95rem);
    letter-spacing: 0.06em;
    color: #8a7e6d;
}

.mono-label {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 400;
    font-size: clamp(0.8rem, 1.4vw, 0.95rem);
    letter-spacing: 0.06em;
    color: #8a7e6d;
}

/* --- Drop Caps --- */
.drop-cap {
    float: left;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 700;
    font-size: 4em;
    line-height: 0.8;
    margin-right: 0.1em;
    color: #b89a5a;
}

/* --- Hero Section --- */
#hero {
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    padding: 8vh 5vw 0;
    position: relative;
    z-index: 1;
}

.hero-content {
    display: flex;
    width: 100%;
    align-items: flex-start;
    gap: 2rem;
}

.hero-left {
    flex: 0 0 60%;
    padding-top: 5vh;
}

.hero-right {
    flex: 0 0 40%;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
}

/* Site Title */
#site-title {
    color: #c8bfb0;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 800ms ease, transform 800ms ease;
}

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

/* Hero Rule */
.hero-rule {
    height: 1px;
    background: #4a3f35;
    margin: 1.5rem 0;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1000ms ease 400ms;
}

.hero-rule.visible {
    transform: scaleX(1);
}

/* Subtitle */
.subtitle {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 1rem;
    color: #8a7e6d;
    opacity: 0;
    transition: opacity 600ms ease;
    min-height: 1.5em;
}

.subtitle.visible {
    opacity: 1;
}

.subtitle-text {
    display: inline-block;
    opacity: 0;
    transition: opacity 500ms ease;
}

.subtitle-text.active {
    opacity: 1;
}

.subtitle-text.fading {
    opacity: 0;
}

/* Crystal Hero SVG */
.crystal-hero {
    width: 30vw;
    max-width: 400px;
    height: auto;
    animation: crystal-rotate 720s linear infinite;
}

.crystal-wireframe polygon,
.crystal-wireframe line {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: crystal-draw 2s ease-out 500ms forwards;
}

@keyframes crystal-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes crystal-draw {
    to { stroke-dashoffset: 0; }
}

/* --- Thesis Section (Second Stroke of F) --- */
#thesis {
    padding: 8vh 5vw;
    position: relative;
    z-index: 1;
}

.thesis-content {
    display: flex;
    gap: 4rem;
    align-items: flex-start;
}

.thesis-text {
    flex: 0 0 60%;
}

.thesis-crystal {
    flex: 0 0 35%;
    display: flex;
    justify-content: center;
    padding-top: 2rem;
}

.crystal-accent {
    width: 18vw;
    max-width: 200px;
    height: auto;
    animation: crystal-rotate 720s linear infinite;
}

/* --- Section Dividers --- */
.section-divider {
    display: flex;
    align-items: center;
    padding: 0 5vw;
    gap: 0;
    margin: 3rem 0;
}

.divider-line {
    flex: 1;
    height: 1px;
    background: #4a3f35;
}

.divider-diamond {
    width: 12px;
    height: 12px;
    background: transparent;
    border: 1px solid #4a3f35;
    transform: rotate(45deg);
    margin: 0 1rem;
    flex-shrink: 0;
}

/* --- Stem Sections (Left Vertical Descent) --- */
.stem-section {
    padding: 4vh 5vw;
    position: relative;
    z-index: 1;
}

.stem-content {
    display: flex;
    gap: 2rem;
}

.stem-main {
    flex: 0 0 65%;
}

.scholars-gutter {
    flex: 0 0 30%;
    padding-top: 4rem;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    align-items: center;
}

.gutter-crystal {
    width: 5rem;
    height: auto;
    transition: opacity 300ms ease, filter 300ms ease;
}

.gutter-crystal:hover {
    opacity: 1 !important;
    filter: drop-shadow(0 0 6px rgba(184, 154, 90, 0.2));
}

.gutter-crystal:hover polygon,
.gutter-crystal:hover line {
    opacity: 0.8;
}

.gutter-note {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 400;
    font-size: 0.8rem;
    color: #4a7a72;
    letter-spacing: 0.06em;
    line-height: 1.5;
    text-align: center;
    max-width: 20ch;
    opacity: 0.85;
}

/* --- Discipline Blocks --- */
.discipline-block {
    margin-bottom: 4rem;
    padding: 2.5rem;
    background: #2a241e;
    border-left: 2px solid #4a3f35;
    position: relative;
    background:
        radial-gradient(ellipse at 15% 25%, rgba(184, 154, 90, 0.03) 0%, transparent 50%),
        radial-gradient(ellipse at 85% 75%, rgba(74, 122, 114, 0.02) 0%, transparent 40%),
        #2a241e;
}

.discipline-title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: #c8bfb0;
}

.discipline-title .mono-label {
    margin-left: 1rem;
}

/* --- Stats with Counter-Animate --- */
.discipline-stats,
.methodology-stats {
    display: flex;
    gap: 3rem;
    margin: 2rem 0;
    padding: 1.5rem 0;
    border-top: 1px solid #4a3f35;
    border-bottom: 1px solid #4a3f35;
}

.stat-item {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.stat-number {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 400;
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    color: #d4c496;
    letter-spacing: 0.06em;
    text-shadow: 0 0 8px rgba(212, 196, 150, 0.3);
    --counter-value: 0;
}

.stat-number.counting {
    transition: --counter-value 1.5s ease-out;
}

.stat-label {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 400;
    font-size: 0.75rem;
    color: #8a7e6d;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* --- Expandable Content --- */
.continue-reading {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    color: #b89a5a;
    cursor: pointer;
    display: inline-block;
    margin-top: 0.5rem;
    padding: 0.3rem 0;
    border-bottom: 1px solid transparent;
    transition: border-color 300ms ease, color 300ms ease;
}

.continue-reading:hover {
    border-bottom-color: #b89a5a;
    color: #d4c496;
}

.continue-reading.expanded::before {
    content: '';
}

.expandable-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 600ms ease, opacity 400ms ease;
    opacity: 0;
}

.expandable-content.open {
    max-height: 500px;
    opacity: 1;
    margin-top: 1.5rem;
}

/* --- Section Reveal Animation --- */
.section-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 600ms ease, transform 600ms ease;
}

.section-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* --- Letter Reveal for Section Headings --- */
.section-heading .letter-char {
    display: inline-block;
    opacity: 0;
    transition: opacity 400ms ease;
}

.section-heading.revealed .letter-char {
    opacity: 1;
}

/* --- Links & Interactions --- */
a {
    color: #b89a5a;
    text-decoration: none;
    transition: color 300ms ease;
}

a:hover {
    color: #d4c496;
}

/* --- Footer / Colophon --- */
#colophon {
    padding: 8vh 5vw 6vh;
    text-align: center;
    position: relative;
    z-index: 1;
}

.colophon-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.colophon-text {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
    font-size: 1.2rem;
    color: #8a7e6d;
    letter-spacing: 0.02em;
}

.colophon-meta {
    font-size: 0.75rem;
}

.crystal-footer {
    width: 3rem;
    height: auto;
    margin-top: 1rem;
    animation: crystal-rotate 720s linear infinite;
}

/* --- Parallax Crystal Gutter Elements --- */
.parallax-crystal {
    transition: transform 0.1s linear;
}

/* --- Responsive --- */
@media (max-width: 900px) {
    .hero-content {
        flex-direction: column;
    }

    .hero-left {
        flex: 1 1 100%;
    }

    .hero-right {
        flex: 1 1 100%;
        min-height: 40vh;
    }

    .crystal-hero {
        width: 50vw;
    }

    .thesis-content {
        flex-direction: column;
    }

    .thesis-text {
        flex: 1 1 100%;
    }

    .thesis-crystal {
        flex: 1 1 100%;
        justify-content: flex-start;
    }

    .stem-content {
        flex-direction: column;
    }

    .stem-main {
        flex: 1 1 100%;
    }

    .scholars-gutter {
        flex: 1 1 100%;
        flex-direction: row;
        flex-wrap: wrap;
        padding-top: 2rem;
        justify-content: center;
    }

    .discipline-stats,
    .methodology-stats {
        flex-wrap: wrap;
        gap: 1.5rem;
    }
}

@media (max-width: 600px) {
    #hero {
        padding: 5vh 4vw 0;
    }

    .stem-section,
    #thesis {
        padding: 4vh 4vw;
    }

    .discipline-block {
        padding: 1.5rem;
    }

    .section-divider {
        padding: 0 4vw;
    }

    .gutter-crystal {
        width: 3.5rem;
    }
}