/* ============================================================
   gamelicen.se - Global Game Licensing Authority
   Corporate-Authoritative | Gold-on-Obsidian
   Anti-gradient, flat opaque surfaces, institutional gravitas
   ============================================================ */

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

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

body {
    background-color: #08080A;
    color: #E8E4DC;
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 300;
    font-size: clamp(0.95rem, 1.1vw, 1.1rem);
    line-height: 1.85;
    letter-spacing: 0.015em;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --- Progress Bar (2px gold, fixed top, fills left-to-right) --- */
#progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 2px;
    background-color: #C5A55A;
    z-index: 1000;
    will-change: width;
    pointer-events: none;
}

/* --- Background Grid (canvas element, fixed, full viewport) --- */
#background-grid {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    pointer-events: none;
}

/* --- Watermark Layer ("LICENSED" repeated, -30deg rotation, 3% opacity) --- */
#watermark-layer {
    position: fixed;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    transform: rotate(-30deg);
    opacity: 0.03;
}

#watermark-layer::before {
    content: 'LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  LICENSED  ';
    display: block;
    font-family: 'Share Tech Mono', monospace;
    font-size: 120px;
    color: #C5A55A;
    white-space: pre-wrap;
    word-spacing: 80px;
    line-height: 1.6;
    letter-spacing: 0.1em;
}

/* --- Gold Margin Lines (1px, appear/disappear with section transitions) --- */
.margin-line {
    position: fixed;
    top: 0;
    width: 1px;
    height: 100vh;
    background-color: #C5A55A;
    z-index: 1;
    pointer-events: none;
    opacity: 0.3;
    transition: opacity 0.6s ease;
}

#margin-line-left {
    left: calc(50% - 340px - 60px);
}

#margin-line-right {
    left: calc(50% + 340px - 60px);
}

.margin-line.pulse {
    opacity: 0.8;
}

/* --- Content Spine (680px max-width, offset 60px left of center) --- */
#content-spine {
    position: relative;
    z-index: 2;
    max-width: 680px;
    margin: 0 auto;
    margin-left: calc(50% - 340px - 60px);
    padding: 0 20px;
}

/* --- Responsive: collapse offset on narrow viewports --- */
@media (max-width: 860px) {
    #content-spine {
        margin-left: auto;
        margin-right: auto;
        max-width: 100%;
        padding: 0 24px;
    }
    #margin-line-left {
        left: 16px;
    }
    #margin-line-right {
        right: 16px;
        left: auto;
    }
}

/* --- Sections (min-height: 80vh, vertically centered content) --- */
.content-section {
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 100px 0;
    position: relative;
    background-color: #111114;
}

/* Hero occupies exactly 100vh */
.hero-section {
    min-height: 100vh;
    padding: 0;
    background-color: #08080A;
}

/* Footer has no minimum height */
.footer-section {
    min-height: auto;
    padding: 120px 0 80px;
    background-color: #08080A;
}

.section-inner {
    width: 100%;
}

/* --- Graphite Layer hover states (#1A1A1F) --- */
.content-section:hover {
    background-color: #1A1A1F;
}

.hero-section:hover,
.footer-section:hover {
    background-color: #08080A;
}

/* --- Corner Brackets (top-left and bottom-right, gold at 30% opacity) --- */
.corner-bracket {
    position: absolute;
    width: 32px;
    height: 32px;
    pointer-events: none;
}

.corner-bracket.top-left {
    top: 60px;
    left: -8px;
    border-top: 1px solid rgba(197, 165, 90, 0.3);
    border-left: 1px solid rgba(197, 165, 90, 0.3);
}

.corner-bracket.bottom-right {
    bottom: 60px;
    right: -8px;
    border-bottom: 1px solid rgba(197, 165, 90, 0.3);
    border-right: 1px solid rgba(197, 165, 90, 0.3);
}

/* --- Typography --- */

/* Headlines: Share Tech Mono, uppercase, gold */
h1, h2 {
    font-family: 'Share Tech Mono', monospace;
    font-weight: 400;
    text-transform: uppercase;
    color: #C5A55A;
    line-height: 1.2;
}

/* Hero title: clamp(2rem, 4.5vw, 3.6rem), letter-spacing 0.12em */
.hero-title {
    font-size: clamp(2rem, 4.5vw, 3.6rem);
    letter-spacing: 0.12em;
    margin-bottom: 16px;
}

/* Section title: clamp(1.4rem, 2.8vw, 2.2rem), letter-spacing 0.08em */
.section-title {
    font-size: clamp(1.4rem, 2.8vw, 2.2rem);
    letter-spacing: 0.08em;
    margin-bottom: 20px;
}

/* Labels: IBM Plex Mono, uppercase, gold, small */
.label-text {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 400;
    font-size: clamp(0.7rem, 0.85vw, 0.85rem);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #C5A55A;
}

/* Body text: IBM Plex Sans weight 300, bone white */
.body-text {
    color: #E8E4DC;
    margin-bottom: 24px;
}

.body-text:last-of-type {
    margin-bottom: 32px;
}

/* Emphasis within body: Pale Gold, weight 500 */
.body-text strong,
.body-text em {
    color: #D4C089;
    font-weight: 500;
    font-style: normal;
}

/* --- Hero Specifics --- */
.hero-section .section-inner {
    text-align: center;
}

.master-seal {
    margin-bottom: 40px;
}

.master-seal-svg {
    display: inline-block;
}

.hero-subtitle {
    margin-bottom: 32px;
    color: #8B7D5E;
}

.hero-tagline {
    max-width: 520px;
    margin: 0 auto 32px;
    color: #9E9A92;
}

.hero-id {
    color: #8B7D5E;
}

/* --- Section Labels (Tarnished Brass) --- */
.section-label {
    color: #8B7D5E;
    margin-bottom: 12px;
}

/* --- Gold Rule (1px gold line, draws left-to-right via scaleX over 800ms) --- */
.gold-rule {
    width: 100%;
    height: 1px;
    background-color: #C5A55A;
    margin: 24px 0 32px;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.8s ease-out;
}

.gold-rule.revealed {
    transform: scaleX(1);
}

.hero-section .gold-rule {
    width: 80px;
    margin: 24px auto 32px;
    transform-origin: center center;
}

/* --- Seal Dividers (200px pure black spacing between sections) --- */
.seal-divider {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
    position: relative;
    background-color: transparent;
}

/* Phase 1: Expanding circle (0 -> 48px diameter over 400ms) */
.seal-circle {
    position: absolute;
    width: 0;
    height: 0;
    border-radius: 50%;
    border: 1px solid #C5A55A;
    opacity: 0;
    transition: width 0.4s ease-out, height 0.4s ease-out, opacity 0.4s ease-out;
}

.seal-divider.revealed .seal-circle {
    width: 48px;
    height: 48px;
    opacity: 1;
}

/* Phase 3: Circle fades to 50% while icon stays at 100% */
.seal-divider.seal-phase-3 .seal-circle {
    opacity: 0.5;
    transition: opacity 0.4s ease-out;
}

/* Phase 2: Icon appears via stroke-dashoffset draw animation */
.section-seal-icon {
    opacity: 0;
    position: relative;
    z-index: 1;
    transition: opacity 0.6s ease-out 0.4s;
}

.seal-divider.revealed .section-seal-icon {
    opacity: 1;
}

/* Hover: seals increase from 50% to 100% opacity */
.seal-divider .section-seal-icon:hover {
    opacity: 1;
}

/* SVG stroke-dashoffset draw (delayed 400ms to start after circle expands) */
.seal-divider .section-seal-icon path,
.seal-divider .section-seal-icon circle,
.seal-divider .section-seal-icon rect,
.seal-divider .section-seal-icon line,
.seal-divider .section-seal-icon polyline,
.seal-divider .section-seal-icon polygon,
.seal-divider .section-seal-icon ellipse {
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    transition: stroke-dashoffset 0.6s ease-out 0.4s;
}

.seal-divider.revealed .section-seal-icon path,
.seal-divider.revealed .section-seal-icon circle,
.seal-divider.revealed .section-seal-icon rect,
.seal-divider.revealed .section-seal-icon line,
.seal-divider.revealed .section-seal-icon polyline,
.seal-divider.revealed .section-seal-icon polygon,
.seal-divider.revealed .section-seal-icon ellipse {
    stroke-dashoffset: 0;
}

/* --- Revocation Section Deep Crimson Accent (#8B1A1A) --- */
#revocation .inline-stat {
    border-top-color: #8B1A1A;
}

#revocation .stat-number {
    color: #8B1A1A;
}

/* --- Inline Stats --- */
.inline-stat {
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid rgba(197, 165, 90, 0.15);
}

/* Numeric Display: Share Tech Mono, oversized, tabular-nums */
.stat-number {
    display: block;
    font-family: 'Share Tech Mono', monospace;
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 400;
    color: #C5A55A;
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    margin-bottom: 8px;
}

.stat-label {
    display: block;
    color: #8B7D5E;
    margin-top: 8px;
}

/* --- Footer --- */
.footer-section .section-inner {
    text-align: center;
}

.footer-seal {
    margin: 32px 0 24px;
}

.footer-text {
    margin-bottom: 20px;
}

.footer-meta {
    color: #9E9A92;
    font-size: clamp(0.8rem, 0.9vw, 0.9rem);
    max-width: 480px;
    margin: 0 auto 32px;
}

.footer-id {
    color: #8B7D5E;
    font-size: clamp(0.65rem, 0.75vw, 0.75rem);
}

/* --- Fade-Reveal Animation (1200ms ease-out, 20px translateY) --- */
[data-reveal] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}

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

/* --- Character-by-Character Reveal (30ms delay between characters) --- */
[data-char-reveal] .char {
    display: inline-block;
    opacity: 0;
    transition: opacity 0.4s ease-out;
}

[data-char-reveal] .char.space-char {
    width: 0.3em;
}

[data-char-reveal].revealed .char {
    opacity: 1;
}

/* --- Link Styles (D4C089 -> C5A55A on hover) --- */
a {
    color: #D4C089;
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: #C5A55A;
}

/* --- CTA Button (thin gold-bordered rectangle, no fill, opacity shift) --- */
.cta-button {
    display: inline-block;
    padding: 14px 32px;
    border: 1px solid #C5A55A;
    color: #C5A55A;
    font-family: 'IBM Plex Mono', monospace;
    font-size: clamp(0.7rem, 0.85vw, 0.85rem);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    opacity: 0.7;
    transition: opacity 0.3s ease;
    background: none;
    cursor: pointer;
}

.cta-button:hover {
    opacity: 1;
    color: #C5A55A;
}

/* --- Responsive (narrow viewports) --- */
@media (max-width: 680px) {
    .content-section {
        padding: 80px 0;
        min-height: auto;
    }

    .hero-section {
        min-height: 100vh;
    }

    .seal-divider {
        height: 120px;
    }

    .corner-bracket {
        display: none;
    }

    .stat-number {
        font-size: clamp(2rem, 8vw, 3rem);
    }
}

/* --- Selection Color (gold tint) --- */
::selection {
    background-color: rgba(197, 165, 90, 0.3);
    color: #E8E4DC;
}

/* --- Scrollbar Styling (gold on obsidian) --- */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: #08080A;
}

::-webkit-scrollbar-thumb {
    background: #8B7D5E;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #C5A55A;
}