/* ============================================================
   gamelicensor.pro — Light-Academia Reading Room
   Palette: warm ivory to charcoal (no pure black / white)
   Typography: Fraunces (display) · Source Serif 4 (body) · DM Sans (captions)
   ============================================================ */

:root {
    /* Palette */
    --bg-ivory:        #f5f0e8;
    --surface-warm:    #ebe5d9;
    --accent-cream:    #d4cfc5;
    --text-body:       #5c5549;
    --text-heading:    #3a3530;
    --text-caption:    #8a8279;
    --ghost-linen:     #e8e2d8;
    --deep-ground:     #2c2822;

    /* Type */
    --font-display:  "Fraunces", "Source Serif 4", Georgia, serif;
    --font-body:     "Source Serif 4", "Fraunces", Georgia, serif;
    --font-caption:  "DM Sans", "Inter", "Lato", "Space Grotesk", system-ui, sans-serif;

    /* Rhythm */
    --easing:   cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --fade-dur: 600ms;

    /* Layout */
    --page-pad: 15%;
    --measure:  55ch;
}

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

html {
    background: var(--bg-ivory);
}

body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background: var(--bg-ivory);
    color: var(--text-body);
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.4vw, 1.2rem);
    line-height: 1.8;
    letter-spacing: 0.01em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

p {
    margin: 0 0 1.4em 0;
}

/* ============================================================
   Section 1: The Colophon Bar
   ============================================================ */

.colophon {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 12vh;
    min-height: 72px;
    background: var(--bg-ivory);
    z-index: 20;
    border-bottom: 1px solid transparent;
    transition: border-color 600ms var(--easing);
}

.colophon.is-scrolled {
    border-bottom-color: var(--accent-cream);
}

.colophon-inner {
    height: 100%;
    padding: 0 var(--page-pad);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.domain {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(1.4rem, 2.2vw, 1.9rem);
    letter-spacing: -0.02em;
    color: var(--text-heading);
    font-variation-settings: "wght" 300, "opsz" 72;
    transition: font-variation-settings 800ms var(--easing);
}

.domain.is-loaded {
    font-variation-settings: "wght" 600, "opsz" 72;
}

.domain:hover {
    font-variation-settings: "wght" 700, "opsz" 72;
}

.nav {
    display: flex;
    gap: clamp(1.2rem, 3vw, 2.4rem);
    align-items: baseline;
}

.nav-item {
    font-family: var(--font-caption);
    font-weight: 400;
    font-size: clamp(0.75rem, 1vw, 0.9rem);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-caption);
    opacity: 0;
    transform: translateY(4px);
    transition:
        opacity var(--fade-dur) var(--easing),
        transform var(--fade-dur) var(--easing),
        color 400ms var(--easing);
}

.nav-item.is-revealed {
    opacity: 1;
    transform: translateY(0);
}

.nav-item:hover {
    color: var(--text-heading);
}

/* ============================================================
   Page Shell
   ============================================================ */

.page {
    padding-top: 12vh;
}

/* ============================================================
   Section 2: The Thesis Panel
   ============================================================ */

.thesis {
    position: relative;
    min-height: 70vh;
    padding: 10vh var(--page-pad) 8vh;
    opacity: 0;
    transition: opacity var(--fade-dur) var(--easing);
}

.thesis.is-loaded {
    opacity: 1;
}

.thesis-grid {
    display: grid;
    grid-template-columns: 60% 40%;
    gap: 4vw;
    align-items: start;
    position: relative;
    z-index: 2;
}

.thesis-title {
    margin: 0 0 1.2em 0;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.8rem, 3.6vw, 3.2rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--text-heading);
    font-variation-settings: "wght" 600, "opsz" 144;
    max-width: 14ch;
}

.thesis-lede {
    font-size: clamp(1.05rem, 1.5vw, 1.3rem);
    color: var(--text-heading);
    max-width: var(--measure);
    margin-bottom: 1.6em;
}

.thesis-body {
    max-width: var(--measure);
}

/* Blobs in Thesis panel */
.thesis-blobs {
    position: relative;
    min-height: 480px;
    height: 100%;
}

.blob {
    position: absolute;
    display: block;
    top: var(--blob-y, 0);
    left: var(--blob-x, 0);
    pointer-events: none;
    animation:
        blobMorph var(--blob-dur, 17s) var(--easing) infinite,
        blobDrift calc(var(--blob-dur, 17s) * 1.3) var(--easing) infinite alternate;
    animation-delay: var(--blob-delay, 0s);
    will-change: border-radius, transform;
}

.blob-xl {
    width: 260px;
    height: 260px;
    background: var(--accent-cream);
    opacity: 0.50;
}

.blob-md {
    width: 150px;
    height: 150px;
    background: var(--surface-warm);
    opacity: 0.45;
}

.blob-md:nth-of-type(3) {
    background: var(--accent-cream);
    opacity: 0.35;
}

.blob-sm {
    width: 88px;
    height: 88px;
    background: var(--accent-cream);
    opacity: 0.55;
}

@keyframes blobMorph {
    0% {
        border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    }
    20% {
        border-radius: 58% 42% 33% 67% / 55% 60% 40% 45%;
    }
    40% {
        border-radius: 50% 50% 62% 38% / 70% 35% 65% 30%;
    }
    60% {
        border-radius: 35% 65% 40% 60% / 45% 55% 45% 55%;
    }
    80% {
        border-radius: 70% 30% 55% 45% / 38% 62% 38% 62%;
    }
    100% {
        border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    }
}

@keyframes blobDrift {
    0%   { transform: translate(0, 0) rotate(0deg); }
    50%  { transform: translate(14px, -10px) rotate(6deg); }
    100% { transform: translate(-10px, 12px) rotate(-4deg); }
}

/* ============================================================
   Section 3: The Registry Corridor
   ============================================================ */

.registry {
    position: relative;
    padding: 8vh 0 12vh;
}

.entry {
    position: relative;
    padding: 0 15% 8vh 15%;
}

.entry-inner {
    position: relative;
    width: 55%;
    margin-left: 0;
    z-index: 2;
}

.entry-head {
    display: flex;
    flex-direction: column;
    gap: 0.35em;
    margin-bottom: 1.2em;
}

.entry-number {
    font-family: var(--font-caption);
    font-size: clamp(0.72rem, 0.9vw, 0.85rem);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-caption);
}

.entry-title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1.4rem, 2.5vw, 2.2rem);
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--text-heading);
    font-variation-settings: "wght" 500, "opsz" 144;
}

.entry-body {
    color: var(--text-body);
    max-width: var(--measure);
}

/* Binding-edge chapter blobs */
.binding-blob {
    position: absolute;
    top: 10%;
    left: calc(15% - 110px);
    width: 68px;
    height: 68px;
    background: var(--accent-cream);
    opacity: 0.45;
    pointer-events: none;
    animation:
        blobMorph var(--binding-dur, 18s) var(--easing) infinite,
        bindingDrift calc(var(--binding-dur, 18s) * 1.1) var(--easing) infinite alternate;
    will-change: border-radius, transform;
}

.entry:nth-child(odd) .binding-blob {
    background: var(--surface-warm);
    opacity: 0.55;
    width: 78px;
    height: 78px;
    top: 18%;
    left: calc(15% - 130px);
}

.entry:nth-child(3) .binding-blob {
    width: 58px;
    height: 58px;
    top: 30%;
    opacity: 0.40;
}

@keyframes bindingDrift {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(-6px, -32px); }
}

/* Rules */
.rule {
    height: 1px;
    width: 40%;
    margin: 4vh 0 0 0;
    background: var(--accent-cream);
    opacity: 0;
    transform: scaleX(0.6);
    transform-origin: left center;
    transition:
        opacity var(--fade-dur) var(--easing),
        transform 900ms var(--easing);
}

.entry.is-revealed .rule {
    opacity: 1;
    transform: scaleX(1);
}

.rule.doubled {
    position: relative;
    margin-top: 5vh;
}

.rule.doubled::after {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    height: 1px;
    width: 100%;
    background: var(--accent-cream);
}

/* ============================================================
   Watermarks (typographic)
   ============================================================ */

.watermark {
    position: absolute;
    pointer-events: none;
    user-select: none;
    font-family: var(--font-display);
    font-weight: 200;
    font-variation-settings: "wght" 200, "opsz" 144;
    color: var(--text-heading);
    opacity: 0;
    letter-spacing: -0.03em;
    line-height: 0.9;
    white-space: nowrap;
    transition: opacity 1200ms var(--easing);
    z-index: 0;
}

.watermark-thesis {
    top: 2vh;
    right: -2vw;
    font-size: clamp(6rem, 15vw, 14rem);
    transform: rotate(0deg);
}

.thesis.is-loaded .watermark-thesis {
    opacity: 0.045;
}

.watermark-entry {
    top: 0;
    right: 6%;
    font-size: clamp(4rem, 10vw, 9rem);
    opacity: 0;
}

.entry:nth-child(even) .watermark-entry {
    right: auto;
    left: 42%;
    top: -2vh;
    transform: rotate(-4deg);
}

.entry:nth-child(3) .watermark-entry {
    right: 8%;
    top: 20%;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: clamp(3rem, 7vw, 7rem);
}

.entry.is-revealed .watermark-entry {
    opacity: 0.04;
}

/* ============================================================
   Reveal pattern
   ============================================================ */

.reveal {
    opacity: 0;
    transform: translateY(8px);
    transition:
        opacity var(--fade-dur) var(--easing),
        transform var(--fade-dur) var(--easing);
}

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

/* ============================================================
   Section 4: The Seal Floor
   ============================================================ */

.seal {
    position: relative;
    min-height: 40vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6vh var(--page-pad);
    gap: 4vh;
}

.seal-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.seal-blob {
    width: clamp(260px, 32vw, 360px);
    height: clamp(260px, 32vw, 360px);
    background: var(--accent-cream);
    opacity: 0.40;
    display: flex;
    align-items: center;
    justify-content: center;
    animation:
        sealMorph 16s var(--easing) infinite,
        sealPulse 8s var(--easing) infinite;
    will-change: border-radius, transform;
}

.seal-ghost {
    font-family: var(--font-display);
    font-weight: 200;
    font-size: clamp(1.1rem, 1.8vw, 1.5rem);
    color: var(--text-heading);
    opacity: 0.20;
    letter-spacing: 0.02em;
    font-variation-settings: "wght" 200, "opsz" 72;
    white-space: nowrap;
}

@keyframes sealMorph {
    0%   { border-radius: 42% 58% 48% 52% / 52% 40% 60% 48%; }
    25%  { border-radius: 55% 45% 38% 62% / 40% 58% 42% 60%; }
    50%  { border-radius: 48% 52% 55% 45% / 60% 48% 52% 40%; }
    75%  { border-radius: 40% 60% 55% 45% / 50% 55% 45% 50%; }
    100% { border-radius: 42% 58% 48% 52% / 52% 40% 60% 48%; }
}

@keyframes sealPulse {
    0%   { transform: scale(0.95); }
    50%  { transform: scale(1.05); }
    100% { transform: scale(0.95); }
}

.seal-statement {
    margin: 0;
    font-family: var(--font-caption);
    font-weight: 500;
    font-size: clamp(0.75rem, 1vw, 0.9rem);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-caption);
    text-align: center;
    max-width: 60ch;
}

.terminal-space {
    height: 15vh;
    width: 100%;
    background: var(--bg-ivory);
}

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

@media (max-width: 900px) {
    :root {
        --page-pad: 8%;
    }

    .thesis-grid {
        grid-template-columns: 1fr;
        gap: 6vh;
    }

    .thesis-blobs {
        min-height: 320px;
    }

    .entry {
        padding-left: 12%;
        padding-right: 8%;
    }

    .entry-inner {
        width: 100%;
    }

    .binding-blob,
    .entry:nth-child(odd) .binding-blob,
    .entry:nth-child(3) .binding-blob {
        left: auto;
        right: 6%;
        top: 4vh;
        width: 56px;
        height: 56px;
    }

    .watermark-entry,
    .entry:nth-child(3) .watermark-entry {
        font-size: clamp(2.6rem, 12vw, 5rem);
        writing-mode: initial;
        transform: none;
        right: 4%;
        top: -1vh;
        left: auto;
    }
}

@media (max-width: 560px) {
    .colophon {
        height: auto;
        min-height: 0;
        padding: 1.2rem 0;
    }

    .colophon-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.6rem;
    }

    .page {
        padding-top: 22vh;
    }

    .nav {
        gap: 1rem;
    }
}