/* ============================================
   gamelicen.se — Flat-Design Scholasticism
   Ethereal Blue Palette / Layered Codex Layout
   ============================================ */

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

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

body {
    background-color: #F4F8FC;
    color: #1A1F2E;
    font-family: 'Lora', Georgia, serif;
    line-height: 1.72;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --- Color Palette Variables --- */
:root {
    --deep-archive: #1B2A45;
    --catalog-ink: #2A3B5C;
    --faded-clause: #8EAEC4;
    --pale-license: #B8D4E8;
    --archive-ice: #E8F0FA;
    --parchment-blue: #F4F8FC;
    --edf-blue: #EDF4FA;
    --night-ink: #1A1F2E;
    --stamp-vermillion: #C44B3F;
    --mid-blue: #3A5070;
    --meta-blue: #6A8BA8;
}

/* --- Typography --- */
h1, h2, h3 {
    font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
}

/* --- SECTION I: THE TITLE PLATE (Hero) --- */
.hero-section {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 600px;
    background-color: var(--archive-ice);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.hero-border {
    position: absolute;
    top: 24px;
    left: 24px;
    right: 24px;
    bottom: 24px;
    width: calc(100% - 48px);
    height: calc(100% - 48px);
}

.animated-border-rect {
    stroke-dasharray: 4 2;
    stroke-dashoffset: 0;
    opacity: 0;
    animation: borderReveal 0.5s ease-out 1.5s forwards, borderRotate 60s linear 2s infinite;
}

@keyframes borderReveal {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes borderRotate {
    from { stroke-dashoffset: 0; }
    to { stroke-dashoffset: -400; }
}

.hero-content {
    text-align: center;
    z-index: 1;
}

.hero-title {
    font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    font-weight: 700;
    font-size: 72px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--deep-archive);
    margin-bottom: 24px;
}

.hero-rule {
    width: 200px;
    height: 1px;
    background-color: var(--catalog-ink);
    margin: 0 auto 20px;
}

.hero-subtitle {
    font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    font-weight: 400;
    font-size: 13px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--faded-clause);
}

/* --- Full-Width Horizontal Rules --- */
.full-rule {
    width: 100%;
    height: 1px;
    background-color: var(--faded-clause);
}

.full-rule.double-rule {
    height: auto;
    background: none;
    border: none;
    padding: 0;
    position: relative;
}

.full-rule.double-rule::before,
.full-rule.double-rule::after {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background-color: var(--faded-clause);
}

.full-rule.double-rule::before {
    margin-bottom: 4px;
}

/* --- Section Container (Centered Codex) --- */
.section-container {
    position: relative;
    max-width: 880px;
    margin: 0 auto;
    padding: 60px 20px 60px 140px;
}

/* --- Margin Annotations --- */
.margin-annotation {
    position: absolute;
    left: 20px;
    top: 64px;
    width: 100px;
    font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--faded-clause);
    opacity: 0;
    transition: opacity 0.8s ease-out 0.2s;
}

.margin-annotation.visible {
    opacity: 1;
}

/* --- Panels --- */
.panel {
    border: 1px solid var(--catalog-ink);
    padding: 48px 40px;
    position: relative;
}

.panel-ice {
    background-color: var(--archive-ice);
}

.panel-parchment {
    background-color: var(--parchment-blue);
}

/* Panel stacking depth effect */
.panel::after {
    content: '';
    position: absolute;
    top: 8px;
    left: 8px;
    right: -8px;
    bottom: -8px;
    border: 1px solid var(--catalog-ink);
    z-index: -1;
    background-color: var(--edf-blue);
}

/* --- Index Section --- */
.index-section {
    background-color: var(--parchment-blue);
    padding: 20px 0;
}

.index-panel {
    background-color: var(--parchment-blue);
}

.index-list {
    list-style: none;
    padding: 0;
    margin-top: 32px;
}

.index-entry {
    padding: 16px 0;
}

.index-entry a {
    text-decoration: none;
    color: var(--deep-archive);
    display: flex;
    align-items: baseline;
    gap: 16px;
    transition: color 0.3s ease-out;
}

.index-entry a:hover {
    color: var(--mid-blue);
}

.roman {
    font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    font-weight: 500;
    font-size: 18px;
    letter-spacing: 0.04em;
    color: var(--catalog-ink);
    min-width: 40px;
}

.entry-title {
    font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    font-weight: 500;
    font-size: 18px;
    letter-spacing: 0.04em;
}

.entry-rule {
    border: none;
    height: 1px;
    background-color: var(--pale-license);
}

/* Index panel border animation */
.index-panel.border-animating {
    border-color: transparent;
    background-image:
        linear-gradient(var(--parchment-blue), var(--parchment-blue)),
        linear-gradient(var(--catalog-ink), var(--catalog-ink));
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

/* --- Section Headings --- */
.section-heading {
    font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    font-weight: 600;
    font-size: 32px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--deep-archive);
    margin-bottom: 24px;
}

.subsection-heading {
    font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    font-weight: 500;
    font-size: 22px;
    letter-spacing: 0.04em;
    color: var(--catalog-ink);
    margin-bottom: 24px;
}

/* --- Body Text --- */
.body-text {
    font-family: 'Lora', Georgia, serif;
    font-weight: 400;
    font-size: 17px;
    line-height: 1.72;
    color: var(--night-ink);
    margin-bottom: 20px;
}

.body-text em {
    font-style: italic;
    color: var(--deep-archive);
}

/* --- Blockquotes --- */
.license-quote {
    font-family: 'Lora', Georgia, serif;
    font-weight: 500;
    font-size: 19px;
    line-height: 1.65;
    color: var(--mid-blue);
    border-left: 3px solid var(--pale-license);
    padding: 16px 24px;
    margin: 32px 0;
}

/* --- Metadata Blocks --- */
.metadata-block {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 32px;
    padding-top: 16px;
    border-top: 1px solid var(--pale-license);
}

.meta-tag {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 300;
    font-size: 12px;
    letter-spacing: 0.03em;
    color: var(--meta-blue);
}

/* --- Inline Code --- */
code {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 400;
    font-size: 14px;
    background-color: var(--edf-blue);
    padding: 2px 6px;
    color: var(--catalog-ink);
}

/* --- Corpus Sections --- */
.corpus-section {
    background-color: var(--parchment-blue);
}

.corpus-section:nth-child(odd) {
    background-color: var(--parchment-blue);
}

/* --- Collage Interludes --- */
.collage-interlude {
    background-color: var(--parchment-blue);
    padding: 80px 0;
    overflow: hidden;
}

.collage-container {
    position: relative;
    max-width: 880px;
    margin: 0 auto;
    height: 400px;
    padding: 0 20px;
}

/* Color field blocks */
.color-field {
    position: absolute;
}

.field-1 {
    width: 300px;
    height: 200px;
    background-color: var(--pale-license);
    top: 20px;
    left: 40px;
    opacity: 1;
}

.field-2 {
    width: 250px;
    height: 180px;
    background-color: var(--archive-ice);
    top: 60px;
    left: 180px;
    opacity: 0.8;
}

.field-3 {
    width: 200px;
    height: 150px;
    background-color: var(--pale-license);
    top: 100px;
    right: 60px;
    opacity: 0.6;
}

.field-4 {
    width: 280px;
    height: 220px;
    background-color: var(--archive-ice);
    top: 30px;
    right: 40px;
    opacity: 1;
}

.field-5 {
    width: 220px;
    height: 160px;
    background-color: var(--pale-license);
    top: 80px;
    left: 60px;
    opacity: 0.8;
}

.field-6 {
    width: 320px;
    height: 240px;
    background-color: var(--archive-ice);
    top: 10px;
    left: 20px;
    opacity: 0.6;
}

.field-7 {
    width: 260px;
    height: 200px;
    background-color: var(--pale-license);
    top: 50px;
    left: 200px;
    opacity: 1;
}

.field-8 {
    width: 180px;
    height: 140px;
    background-color: var(--archive-ice);
    top: 120px;
    right: 40px;
    opacity: 0.8;
}

/* License fragments */
.license-fragment {
    position: absolute;
    font-family: 'Lora', Georgia, serif;
    font-style: italic;
    font-size: 10px;
    line-height: 1.5;
    color: var(--catalog-ink);
    max-width: 260px;
    overflow: hidden;
    padding: 8px;
    border: 1px solid var(--pale-license);
    background-color: rgba(244, 248, 252, 0.9);
}

.fragment-1 {
    top: 40px;
    left: 60px;
    transform: rotate(2deg);
    max-height: 80px;
}

.fragment-2 {
    bottom: 60px;
    right: 80px;
    transform: rotate(-3deg);
    max-height: 70px;
}

.fragment-3 {
    top: 60px;
    left: 80px;
    transform: rotate(-2deg);
    max-height: 80px;
}

.fragment-4 {
    top: 50px;
    right: 60px;
    transform: rotate(3deg);
    max-height: 80px;
}

.fragment-5 {
    bottom: 40px;
    left: 60px;
    transform: rotate(-4deg);
    max-height: 70px;
}

/* Geometric stamps */
.geo-stamp {
    position: absolute;
}

.stamp-licensed {
    width: 120px;
    height: 120px;
    top: 140px;
    left: 400px;
    transform: rotate(5deg);
}

.stamp-rev {
    width: 100px;
    height: 50px;
    bottom: 40px;
    left: 180px;
    transform: rotate(-3deg);
}

.stamp-pending {
    width: 120px;
    height: 120px;
    top: 120px;
    right: 100px;
    transform: rotate(-4deg);
}

.stamp-code {
    width: 100px;
    height: 50px;
    bottom: 60px;
    right: 200px;
    transform: rotate(2deg);
}

.stamp-revoked {
    width: 140px;
    height: 140px;
    top: 100px;
    left: 360px;
    transform: rotate(-5deg);
}

.stamp-final {
    width: 100px;
    height: 50px;
    bottom: 30px;
    right: 120px;
    transform: rotate(3deg);
}

/* Stamp Vermillion pulse animation */
.stamp-licensed,
.stamp-pending,
.stamp-revoked {
    opacity: 0;
    transform-origin: center center;
}

.stamp-licensed.stamp-visible {
    opacity: 1;
    animation: stampPulse 0.4s ease-out forwards;
}

.stamp-pending.stamp-visible {
    opacity: 1;
    animation: stampPulse 0.4s ease-out forwards;
}

.stamp-revoked.stamp-visible {
    opacity: 1;
    animation: stampPulse 0.4s ease-out forwards;
}

@keyframes stampPulse {
    0% { transform: scale(1) rotate(var(--stamp-rotation, 0deg)); }
    50% { transform: scale(1.05) rotate(var(--stamp-rotation, 0deg)); }
    100% { transform: scale(1) rotate(var(--stamp-rotation, 0deg)); }
}

/* Diagrammatic connectors */
.connector {
    position: absolute;
}

.connector-1 {
    width: 200px;
    height: 100px;
    bottom: 80px;
    right: 40px;
}

.connector-2 {
    width: 200px;
    height: 120px;
    bottom: 40px;
    left: 40px;
}

.connector-3 {
    width: 200px;
    height: 80px;
    bottom: 60px;
    right: 60px;
}

/* --- Scroll Reveal Animation --- */
[data-reveal] {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

[data-reveal].revealed {
    opacity: 1;
    transform: translateY(0);
}

/* --- Section Rule Draw Animation --- */
.full-rule {
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 1.2s ease-out;
}

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

.full-rule.double-rule {
    transform: none;
}

.full-rule.double-rule::before,
.full-rule.double-rule::after {
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 1.2s ease-out;
}

.full-rule.double-rule.rule-visible::before,
.full-rule.double-rule.rule-visible::after {
    transform: scaleX(1);
}

/* --- Colophon --- */
.colophon-section {
    background-color: var(--parchment-blue);
    padding-bottom: 40px;
}

.colophon-panel {
    text-align: center;
}

.colophon-text {
    font-family: 'Lora', Georgia, serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.72;
    color: var(--faded-clause);
    max-width: 600px;
    margin: 0 auto 24px;
}

.colophon-panel .metadata-block {
    justify-content: center;
}

/* ============================================
   RESPONSIVE: Below 768px
   ============================================ */
@media (max-width: 768px) {
    .section-container {
        padding: 40px 20px;
    }

    .margin-annotation {
        position: relative;
        left: auto;
        top: auto;
        display: block;
        margin-bottom: 12px;
        padding: 4px 8px;
        background-color: var(--archive-ice);
        border: 1px solid var(--pale-license);
        display: inline-block;
    }

    .hero-title {
        font-size: 48px;
        letter-spacing: 0.08em;
    }

    .hero-subtitle {
        font-size: 11px;
        letter-spacing: 0.12em;
        padding: 0 20px;
    }

    .panel {
        padding: 32px 24px;
    }

    .section-heading {
        font-size: 26px;
    }

    .subsection-heading {
        font-size: 19px;
    }

    .license-quote {
        font-size: 17px;
        padding: 12px 16px;
    }

    .collage-container {
        height: 300px;
    }

    .stamp-licensed,
    .stamp-pending,
    .stamp-revoked {
        transform: scale(0.8);
    }

    .metadata-block {
        flex-direction: column;
        gap: 8px;
    }
}

/* ============================================
   RESPONSIVE: Below 480px
   ============================================ */
@media (max-width: 480px) {
    .hero-title {
        font-size: 36px;
        letter-spacing: 0.06em;
    }

    .hero-border {
        display: none;
    }

    .panel::after {
        display: none;
    }

    .collage-container {
        height: 220px;
    }

    .license-fragment {
        display: none;
    }

    .connector {
        display: none;
    }

    .color-field {
        opacity: 0.4;
    }

    .section-heading {
        font-size: 22px;
    }

    .body-text {
        font-size: 16px;
    }

    .license-quote {
        font-size: 16px;
    }

    .index-entry a {
        flex-direction: column;
        gap: 4px;
    }

    .roman {
        font-size: 14px;
    }

    .entry-title {
        font-size: 16px;
    }

    .hero-rule {
        width: 120px;
    }

    .section-container {
        padding: 32px 16px;
    }

    .panel {
        padding: 24px 16px;
    }
}