/* archaic.works - Gold-Black Archaeological Glamour
   Dopamine-rich line-illustration narrative. Fraunces + Lora + DM Mono.
   No photography. No filled shapes. Only stroke-weight illustration and gold.
*/

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

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: #0A0A0A;
}

body {
    background-color: #0A0A0A;
    color: #D4C9A8;
    font-family: 'Lora', Georgia, serif;
    font-weight: 400;
    font-size: 19px;
    line-height: 1.8;
    overflow-x: hidden;
}

::selection {
    background: #C9A84C;
    color: #0A0A0A;
}

/* ===== Section Base ===== */
.section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

/* ===== Fade-Reveal System =====
   Elements start with opacity 0 and translateY(24px). On intersection,
   they animate to visible with a staggered 120ms per --index delay.
*/
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 800ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 800ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition-delay: calc(var(--index, 0) * 120ms);
    will-change: opacity, transform;
}

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

/* ===== Section 1: The Seal ===== */
.section--seal {
    background-color: #0A0A0A;
    min-height: 100vh;
    flex-direction: column;
    padding: 80px 24px;
}

.seal-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    text-align: center;
}

.seal-svg {
    width: 300px;
    height: 300px;
    filter: drop-shadow(0 0 18px rgba(201, 168, 76, 0.15));
}

.seal-path {
    stroke-dasharray: var(--path-length, 1000);
    stroke-dashoffset: var(--path-length, 1000);
    animation: sealDraw 2.8s cubic-bezier(0.65, 0, 0.35, 1) forwards;
    will-change: stroke-dashoffset;
}

.seal-outer { --path-length: 820; animation-delay: 0s; }
.seal-inner { --path-length: 600; animation-delay: 0.2s; }
.seal-crack { --path-length: 400; animation-delay: 0.5s; }
.seal-glyph { --path-length: 600; animation-delay: 0.8s; }
.seal-marks { --path-length: 300; animation-delay: 1.2s; }
.seal-fragments { --path-length: 200; animation-delay: 1.6s; }

@keyframes sealDraw {
    to {
        stroke-dashoffset: 0;
    }
}

.seal-title {
    font-family: 'Fraunces', Georgia, serif;
    font-size: clamp(40px, 8vw, 120px);
    color: #C9A84C;
    letter-spacing: -0.03em;
    line-height: 1;
    opacity: 0;
    font-variation-settings: 'wght' 100, 'SOFT' 50, 'WONK' 1, 'opsz' 144;
    animation: titleReveal 0.4s ease forwards 3.2s,
               titleWeight 1.2s ease forwards 3.2s;
    will-change: font-variation-settings, opacity;
}

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

@keyframes titleWeight {
    0%   { font-variation-settings: 'wght' 100, 'SOFT' 50, 'WONK' 1, 'opsz' 144; }
    100% { font-variation-settings: 'wght' 700, 'SOFT' 50, 'WONK' 1, 'opsz' 144; }
}

.seal-subtitle {
    font-family: 'DM Mono', 'Courier New', monospace;
    font-size: 13px;
    letter-spacing: 0.25em;
    color: #8A7D5A;
    text-transform: uppercase;
    opacity: 0;
    animation: titleReveal 1s ease forwards 4.2s;
}

/* ===== Section 2: The Corridor ===== */
.section--corridor {
    flex-direction: column;
    padding: 140px 24px;
    min-height: 100vh;
    background-color: #0A0A0A;
}

/* Organic Blob Backgrounds (atmospheric torchlight) */
.blob {
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    animation: blobMorph 25s ease-in-out infinite;
    pointer-events: none;
    will-change: border-radius;
    z-index: 0;
}

.blob--1 {
    top: 8%;
    left: -120px;
    width: 520px;
    height: 520px;
    background: radial-gradient(circle, rgba(201, 168, 76, 0.08) 0%, transparent 70%);
    animation-delay: 0s;
}

.blob--2 {
    top: 42%;
    right: -100px;
    width: 360px;
    height: 360px;
    background: radial-gradient(circle, rgba(232, 212, 139, 0.06) 0%, transparent 70%);
    animation-delay: -8s;
    animation-duration: 30s;
}

.blob--3 {
    bottom: 6%;
    left: 12%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(201, 168, 76, 0.1) 0%, transparent 70%);
    animation-delay: -16s;
    animation-duration: 28s;
}

.blob--4 {
    bottom: 25%;
    right: 18%;
    width: 240px;
    height: 240px;
    background: radial-gradient(circle, rgba(232, 212, 139, 0.07) 0%, transparent 70%);
    animation-delay: -22s;
    animation-duration: 34s;
}

@keyframes blobMorph {
    0%   { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; transform: translate(0, 0) rotate(0deg); }
    25%  { border-radius: 58% 42% 34% 66% / 63% 68% 32% 37%; transform: translate(10px, -14px) rotate(6deg); }
    50%  { border-radius: 40% 60% 54% 46% / 49% 36% 64% 51%; transform: translate(-8px, 12px) rotate(-4deg); }
    75%  { border-radius: 67% 33% 48% 52% / 37% 56% 44% 63%; transform: translate(14px, 8px) rotate(3deg); }
    100% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; transform: translate(0, 0) rotate(0deg); }
}

/* Marginalia along the left edge */
.marginalia {
    position: absolute;
    left: 24px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 36px;
    z-index: 1;
    pointer-events: none;
}

.marginalia-item {
    font-family: 'DM Mono', 'Courier New', monospace;
    font-size: 11px;
    color: #8A7D5A;
    opacity: 0.2;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

/* Corridor Content */
.corridor-content {
    max-width: 640px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.corridor-heading {
    font-family: 'Fraunces', Georgia, serif;
    font-size: clamp(32px, 5vw, 64px);
    font-variation-settings: 'wght' 500, 'SOFT' 50, 'WONK' 1, 'opsz' 144;
    color: #C9A84C;
    letter-spacing: -0.03em;
    margin-bottom: 56px;
    line-height: 1.1;
    transition: color 400ms ease, font-variation-settings 600ms ease;
}

.corridor-heading:hover {
    color: #E8D48B;
    font-variation-settings: 'wght' 700, 'SOFT' 50, 'WONK' 1, 'opsz' 144;
}

.corridor-text {
    margin-bottom: 36px;
    color: #D4C9A8;
    font-size: clamp(17px, 1.4vw, 19px);
    line-height: 1.8;
}

.corridor-text:last-child {
    margin-bottom: 0;
}

.corridor-text strong,
.corridor-text em {
    color: #E8D48B;
    font-weight: 600;
    font-style: normal;
}

/* Ember-red drop cap (spot color, appears exactly once) */
.drop-cap {
    float: left;
    font-family: 'Fraunces', Georgia, serif;
    font-size: 84px;
    font-variation-settings: 'wght' 800, 'SOFT' 50, 'WONK' 1, 'opsz' 144;
    line-height: 0.85;
    color: #A0522D;
    margin-right: 12px;
    margin-top: 10px;
    letter-spacing: -0.05em;
}

/* ===== Section 3: The Chamber ===== */
.section--chamber {
    flex-direction: column;
    padding: 120px 24px;
    min-height: auto;
    background-color: #0A0A0A;
}

.chamber-content {
    max-width: 960px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 96px;
}

.chamber-header {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.chamber-eyebrow {
    font-family: 'DM Mono', 'Courier New', monospace;
    font-size: 12px;
    letter-spacing: 0.3em;
    color: #8A7D5A;
    text-transform: uppercase;
}

.chamber-heading {
    font-family: 'Fraunces', Georgia, serif;
    font-size: clamp(28px, 4vw, 52px);
    font-variation-settings: 'wght' 400, 'SOFT' 50, 'WONK' 1, 'opsz' 144;
    color: #C9A84C;
    letter-spacing: -0.03em;
    line-height: 1.15;
    max-width: 640px;
}

.chamber-panel {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.chamber-illustration {
    width: 100%;
    max-width: 960px;
    height: auto;
    display: block;
    transition: filter 500ms ease;
}

.chamber-illustration:hover {
    filter: drop-shadow(0 0 24px rgba(232, 212, 139, 0.25));
}

.chamber-illustration:hover .illustration-line path,
.chamber-illustration:hover .illustration-line line,
.chamber-illustration:hover .illustration-line rect,
.chamber-illustration:hover .illustration-line circle,
.chamber-illustration:hover .illustration-line ellipse {
    stroke: #E8D48B;
    transition: stroke 400ms ease;
}

.illustration-line path,
.illustration-line line,
.illustration-line rect,
.illustration-line circle,
.illustration-line ellipse {
    transition: stroke 400ms ease;
}

.chamber-caption {
    font-family: 'DM Mono', 'Courier New', monospace;
    font-size: 13px;
    color: #8A7D5A;
    text-align: center;
    letter-spacing: 0.04em;
    max-width: 560px;
}

.caption-ref {
    color: #C9A84C;
    margin-right: 8px;
    font-weight: 400;
}

/* ===== Section 4: The Inscription ===== */
.section--inscription {
    background: linear-gradient(180deg, #1A1409 0%, #2A2010 100%);
    padding: 140px 24px;
    min-height: 90vh;
    flex-direction: column;
    gap: 48px;
}

.inscription-ornament {
    width: clamp(160px, 25vw, 260px);
    opacity: 0.7;
}

.inscription-ornament svg {
    width: 100%;
    height: auto;
    display: block;
}

.inscription-content {
    max-width: 900px;
    text-align: center;
}

.inscription-quote {
    font-family: 'Fraunces', Georgia, serif;
    font-size: clamp(28px, 5.5vw, 72px);
    font-variation-settings: 'wght' 900, 'SOFT' 50, 'WONK' 1, 'opsz' 144;
    color: #C9A84C;
    letter-spacing: -0.04em;
    line-height: 1.18;
    border: none;
    padding: 0;
    margin: 0;
    quotes: none;
}

.inscription-quote::selection {
    background: #0A0A0A;
    color: #E8D48B;
}

.inscription-cite {
    display: block;
    margin-top: 36px;
    font-family: 'DM Mono', 'Courier New', monospace;
    font-size: 13px;
    font-style: normal;
    color: #8A7D5A;
    letter-spacing: 0.08em;
}

/* ===== Section 5: The Exit ===== */
.section--exit {
    background-color: #0A0A0A;
    min-height: 70vh;
    flex-direction: column;
    padding: 120px 24px;
}

.exit-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    max-width: 560px;
}

.exit-text {
    font-family: 'Lora', Georgia, serif;
    font-size: 19px;
    color: #D4C9A8;
    line-height: 1.7;
    font-style: italic;
}

/* Exit domain — echo at hairline weight, with the ember-red underline */
.exit-domain {
    font-family: 'Fraunces', Georgia, serif;
    font-size: clamp(28px, 5vw, 56px);
    font-variation-settings: 'wght' 100, 'SOFT' 50, 'WONK' 1, 'opsz' 144;
    color: #C9A84C;
    letter-spacing: -0.02em;
    text-decoration: none;
    border-bottom: 1px solid #A0522D;
    padding-bottom: 6px;
    line-height: 1.1;
    transition: font-variation-settings 800ms ease, color 400ms ease;
}

.exit-domain:hover {
    font-variation-settings: 'wght' 500, 'SOFT' 50, 'WONK' 1, 'opsz' 144;
    color: #E8D48B;
}

.exit-coord {
    font-family: 'DM Mono', 'Courier New', monospace;
    font-size: 11px;
    color: #8A7D5A;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    opacity: 0.5;
}

/* ===== Responsive ===== */
@media (max-width: 900px) {
    .marginalia {
        left: 12px;
        gap: 28px;
    }

    .marginalia-item {
        font-size: 10px;
    }

    .section--corridor {
        padding: 100px 28px;
    }

    .chamber-content {
        gap: 72px;
    }
}

@media (max-width: 768px) {
    .marginalia {
        display: none;
    }

    .section--corridor {
        padding: 96px 20px;
    }

    .section--chamber {
        padding: 96px 20px;
    }

    .chamber-content {
        gap: 64px;
    }

    .chamber-illustration {
        overflow-x: auto;
    }

    .drop-cap {
        font-size: 64px;
        margin-right: 10px;
        margin-top: 6px;
    }

    .inscription-ornament {
        width: 140px;
    }

    .section--inscription {
        padding: 96px 20px;
        gap: 32px;
    }
}

@media (max-width: 480px) {
    body {
        font-size: 17px;
    }

    .corridor-heading {
        font-size: 30px;
        margin-bottom: 40px;
    }

    .seal-svg {
        width: 220px;
        height: 220px;
    }

    .seal-container {
        gap: 32px;
    }

    .chamber-caption {
        font-size: 12px;
    }

    .exit-content {
        gap: 28px;
    }
}

/* ===== Motion Preferences =====
   Even without accessibility features requested, respecting reduced-motion
   keeps the page from causing literal nausea — considered part of correctness.
*/
@media (prefers-reduced-motion: reduce) {
    .seal-path,
    .seal-title,
    .seal-subtitle {
        animation-duration: 0.001ms !important;
        animation-delay: 0ms !important;
    }

    .blob {
        animation: none;
    }

    .reveal {
        transition-duration: 0.001ms;
    }
}