/* ===== Custom Properties ===== */
:root {
    --dark: #0b2027;
    --gold: #c9a84c;
    --cream: #f2ead3;
    --text-on-dark: #ede4cc;
    --text-on-light: #132e35;
    --border: #8a7340;
    --code-bg: #091a1f;
    --hover-gold: #e0be5a;
}

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: 2rem;
}

body {
    background: var(--dark);
    color: var(--text-on-dark);
    font-family: 'Commissioner', sans-serif;
    font-weight: 400;
    font-size: clamp(1rem, 1.6vw, 1.15rem);
    line-height: 1.75;
    letter-spacing: 0.02em;
    font-variation-settings: 'FLAR' 50;
    overflow-x: hidden;
}

/* ===== Grid-Lines Overlay ===== */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    background:
        repeating-linear-gradient(0deg, rgba(201,168,76,0.08) 0px, rgba(201,168,76,0.08) 1px, transparent 1px, transparent 60px),
        repeating-linear-gradient(90deg, rgba(201,168,76,0.08) 0px, rgba(201,168,76,0.08) 1px, transparent 1px, transparent 60px),
        repeating-linear-gradient(45deg, rgba(201,168,76,0.04) 0px, rgba(201,168,76,0.04) 1px, transparent 1px, transparent 42px);
    animation: gridPulse 8s ease-in-out infinite;
}

@keyframes gridPulse {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

/* ===== The Foyer ===== */
.foyer {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--dark);
}

.sunburst {
    position: absolute;
    inset: 0;
    background: conic-gradient(
        from 0deg at 50% 100%,
        rgba(201,168,76,0.6) 0deg, rgba(11,32,39,1) 10deg,
        rgba(201,168,76,0.6) 10deg, rgba(11,32,39,1) 20deg,
        rgba(201,168,76,0.6) 20deg, rgba(11,32,39,1) 30deg,
        rgba(201,168,76,0.6) 30deg, rgba(11,32,39,1) 40deg,
        rgba(201,168,76,0.6) 40deg, rgba(11,32,39,1) 50deg,
        rgba(201,168,76,0.6) 50deg, rgba(11,32,39,1) 60deg,
        rgba(201,168,76,0.6) 60deg, rgba(11,32,39,1) 70deg,
        rgba(201,168,76,0.6) 70deg, rgba(11,32,39,1) 80deg,
        rgba(201,168,76,0.6) 80deg, rgba(11,32,39,1) 90deg,
        rgba(201,168,76,0.6) 90deg, rgba(11,32,39,1) 100deg,
        rgba(201,168,76,0.6) 100deg, rgba(11,32,39,1) 110deg,
        rgba(201,168,76,0.6) 110deg, rgba(11,32,39,1) 120deg,
        rgba(201,168,76,0.6) 120deg, rgba(11,32,39,1) 130deg,
        rgba(201,168,76,0.6) 130deg, rgba(11,32,39,1) 140deg,
        rgba(201,168,76,0.6) 140deg, rgba(11,32,39,1) 150deg,
        rgba(201,168,76,0.6) 150deg, rgba(11,32,39,1) 160deg,
        rgba(201,168,76,0.6) 160deg, rgba(11,32,39,1) 170deg,
        rgba(201,168,76,0.6) 170deg, rgba(11,32,39,1) 180deg,
        rgba(11,32,39,1) 180deg, rgba(11,32,39,1) 360deg
    );
    opacity: 0;
    transition: opacity 2s ease;
}

.sunburst.visible {
    opacity: 0.6;
}

.foyer-content {
    position: relative;
    z-index: 2;
    text-align: center;
}

.foyer-title {
    font-family: 'Commissioner', sans-serif;
    font-weight: 700;
    font-size: clamp(2.2rem, 5.5vw, 4.8rem);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--gold);
    font-variation-settings: 'FLAR' 50;
}

.foyer-title .char {
    display: inline-block;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.foyer-title .char.visible {
    opacity: 1;
    transform: scale(1);
}

.foyer-subtitle {
    font-family: 'Commissioner', sans-serif;
    font-weight: 500;
    font-size: clamp(1rem, 2vw, 1.4rem);
    letter-spacing: 0.14em;
    color: var(--text-on-dark);
    margin-top: 1.5rem;
    opacity: 0;
    transition: opacity 0.8s ease;
}

.foyer-subtitle.visible {
    opacity: 1;
}

/* ===== Chevron Borders ===== */
.chevron-border {
    width: 100%;
    height: 40px;
    background:
        repeating-linear-gradient(
            30deg,
            transparent,
            transparent 10px,
            rgba(201,168,76,0.15) 10px,
            rgba(201,168,76,0.15) 12px
        ),
        repeating-linear-gradient(
            -30deg,
            transparent,
            transparent 10px,
            rgba(201,168,76,0.15) 10px,
            rgba(201,168,76,0.15) 12px
        );
    position: relative;
    overflow: hidden;
}

.chevron-border::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(201,168,76,0.3) 0%, transparent 20%);
    opacity: 0;
    transform: translateX(-100%);
}

.chevron-border.ripple::after {
    animation: chevronRipple 0.8s ease forwards;
}

@keyframes chevronRipple {
    0% { opacity: 1; transform: translateX(-100%); }
    100% { opacity: 0; transform: translateX(100%); }
}

/* ===== Lot Panels ===== */
.lot {
    min-height: 90vh;
    padding: 6rem 0;
    display: flex;
    align-items: center;
    position: relative;
}

.lot-left {
    margin-left: 8vw;
    margin-right: 2vw;
}

.lot-right {
    margin-left: 2vw;
    margin-right: 8vw;
}

.lot-inner {
    background: rgba(11,32,39,0.85);
    padding: clamp(2rem, 4vw, 4rem);
    clip-path: polygon(3% 0%, 97% 0%, 100% 100%, 0% 100%);
    width: 100%;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.lot-inner.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Alternate lots use cream bg */
.lot-right .lot-inner {
    background: var(--cream);
    color: var(--text-on-light);
}

.lot-right .lot-inner h2 {
    color: var(--text-on-light);
}

.lot-right .lot-inner .mini-sunburst {
    background: conic-gradient(
        from 0deg,
        rgba(11,32,39,0.8) 0deg, rgba(201,168,76,0.6) 10deg,
        rgba(11,32,39,0.8) 10deg, rgba(201,168,76,0.6) 20deg,
        rgba(11,32,39,0.8) 20deg, rgba(201,168,76,0.6) 30deg,
        rgba(11,32,39,0.8) 30deg, rgba(201,168,76,0.6) 40deg,
        rgba(11,32,39,0.8) 40deg, transparent 40deg
    );
}

/* ===== Lot Headings with Pediment ===== */
.lot-heading {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
    position: relative;
}

.lot-heading h2 {
    font-family: 'Commissioner', sans-serif;
    font-weight: 700;
    font-size: clamp(1.6rem, 3.5vw, 2.8rem);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--gold);
    font-variation-settings: 'FLAR' 50;
}

.mini-sunburst {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
    background: conic-gradient(
        from 0deg,
        rgba(201,168,76,0.6) 0deg, rgba(11,32,39,1) 10deg,
        rgba(201,168,76,0.6) 10deg, rgba(11,32,39,1) 20deg,
        rgba(201,168,76,0.6) 20deg, rgba(11,32,39,1) 30deg,
        rgba(201,168,76,0.6) 30deg, rgba(11,32,39,1) 40deg,
        rgba(201,168,76,0.6) 40deg, transparent 40deg
    );
}

.pediment {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin-right: 0.5rem;
}

.pediment-step {
    display: block;
    height: 4px;
    background: var(--gold);
    transform: scaleX(0);
    transition: transform 0.4s ease;
}

.pediment-bottom { width: 40px; }
.pediment-middle { width: 30px; }
.pediment-top { width: 20px; }

.lot-inner.visible .pediment-bottom {
    transform: scaleX(1);
    transition-delay: 0s;
}
.lot-inner.visible .pediment-middle {
    transform: scaleX(1);
    transition-delay: 0.15s;
}
.lot-inner.visible .pediment-top {
    transform: scaleX(1);
    transition-delay: 0.3s;
}

/* ===== Lot Text ===== */
.lot-text {
    margin-bottom: 1.5rem;
    max-width: 65ch;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.lot-inner.visible .lot-text {
    opacity: 1;
    transform: translateY(0);
}

.lot-inner.visible .lot-text:nth-child(3) { transition-delay: 0.2s; }
.lot-inner.visible .lot-text:nth-child(4) { transition-delay: 0.3s; }

/* ===== Lists with Diamond Bullets ===== */
.lot-list {
    list-style: none;
    padding-left: 1.5rem;
    margin-bottom: 1.5rem;
}

.lot-list li {
    position: relative;
    padding-left: 1.2rem;
    margin-bottom: 0.75rem;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.lot-inner.visible .lot-list li:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0.3s; }
.lot-inner.visible .lot-list li:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 0.4s; }
.lot-inner.visible .lot-list li:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 0.5s; }

.lot-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 8px;
    height: 8px;
    background: var(--gold);
    transform: rotate(45deg);
}

.lot-right .lot-list li::before {
    background: var(--text-on-light);
}

/* ===== Code Blocks ===== */
.code-block {
    background: var(--code-bg);
    border: 1px solid var(--border);
    padding: 1.5rem;
    margin-top: 1rem;
    position: relative;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.5s ease 0.4s;
}

.lot-inner.visible .code-block {
    opacity: 1;
}

.code-block code {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 1.6;
    letter-spacing: 0.04em;
    color: var(--text-on-dark);
    white-space: pre;
    display: block;
}

.code-comment {
    color: var(--border);
}

.code-sweep {
    position: absolute;
    top: 0;
    left: 0;
    height: 2px;
    width: 100%;
    background: var(--gold);
    transform: translateX(-100%);
    transition: transform 0.4s ease 0.4s;
}

.lot-inner.visible .code-sweep {
    transform: translateX(0);
}

/* ===== Provenance Hall ===== */
.provenance {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.provenance-emblem {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: spin 60s linear infinite;
}

.emblem-hexagon {
    width: 80px;
    height: 80px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: transparent;
    border: 2px solid var(--gold);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.emblem-circle {
    width: 56px;
    height: 56px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid var(--gold);
    border-radius: 50%;
}

.emblem-diamond {
    width: 30px;
    height: 30px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    border: 2px solid var(--gold);
}

@keyframes spin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Arcs */
.arc {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.arc-name {
    position: absolute;
    font-family: 'Commissioner', sans-serif;
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--gold);
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.arc-name.visible {
    opacity: 1;
}

/* Inner arc - radius ~120px */
.arc-inner .arc-name:nth-child(1) { transform: rotate(-60deg) translateY(-120px) rotate(60deg); }
.arc-inner .arc-name:nth-child(2) { transform: rotate(-30deg) translateY(-120px) rotate(30deg); }
.arc-inner .arc-name:nth-child(3) { transform: rotate(0deg) translateY(-120px) rotate(0deg); }
.arc-inner .arc-name:nth-child(4) { transform: rotate(30deg) translateY(-120px) rotate(-30deg); }
.arc-inner .arc-name:nth-child(5) { transform: rotate(60deg) translateY(-120px) rotate(-60deg); }

/* Middle arc - radius ~200px */
.arc-middle .arc-name:nth-child(1) { transform: rotate(-54deg) translateY(-200px) rotate(54deg); }
.arc-middle .arc-name:nth-child(2) { transform: rotate(-36deg) translateY(-200px) rotate(36deg); }
.arc-middle .arc-name:nth-child(3) { transform: rotate(-18deg) translateY(-200px) rotate(18deg); }
.arc-middle .arc-name:nth-child(4) { transform: rotate(0deg) translateY(-200px) rotate(0deg); }
.arc-middle .arc-name:nth-child(5) { transform: rotate(18deg) translateY(-200px) rotate(-18deg); }
.arc-middle .arc-name:nth-child(6) { transform: rotate(36deg) translateY(-200px) rotate(-36deg); }
.arc-middle .arc-name:nth-child(7) { transform: rotate(54deg) translateY(-200px) rotate(-54deg); }

/* Outer arc - radius ~300px */
.arc-outer .arc-name:nth-child(1) { transform: rotate(-56deg) translateY(-300px) rotate(56deg); }
.arc-outer .arc-name:nth-child(2) { transform: rotate(-42deg) translateY(-300px) rotate(42deg); }
.arc-outer .arc-name:nth-child(3) { transform: rotate(-28deg) translateY(-300px) rotate(28deg); }
.arc-outer .arc-name:nth-child(4) { transform: rotate(-14deg) translateY(-300px) rotate(14deg); }
.arc-outer .arc-name:nth-child(5) { transform: rotate(0deg) translateY(-300px) rotate(0deg); }
.arc-outer .arc-name:nth-child(6) { transform: rotate(14deg) translateY(-300px) rotate(-14deg); }
.arc-outer .arc-name:nth-child(7) { transform: rotate(28deg) translateY(-300px) rotate(-28deg); }
.arc-outer .arc-name:nth-child(8) { transform: rotate(42deg) translateY(-300px) rotate(-42deg); }
.arc-outer .arc-name:nth-child(9) { transform: rotate(56deg) translateY(-300px) rotate(-56deg); }

.provenance-label {
    position: absolute;
    bottom: 8vh;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Commissioner', sans-serif;
    font-weight: 500;
    font-size: 1rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--border);
    opacity: 0;
    transition: opacity 0.8s ease;
}

.provenance-label.visible {
    opacity: 1;
}

/* ===== Concentric Arc Ornaments ===== */
.provenance::before,
.provenance::after {
    content: '';
    position: absolute;
    border: 1px solid rgba(201,168,76,0.2);
    border-bottom: none;
    border-radius: 50% 50% 0 0;
    left: 50%;
    top: 50%;
    pointer-events: none;
}

.provenance::before {
    width: 500px;
    height: 250px;
    transform: translate(-50%, -50%);
}

.provenance::after {
    width: 650px;
    height: 325px;
    transform: translate(-50%, -50%);
}

/* ===== Return Diamond ===== */
.return-diamond {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 100;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.return-diamond.visible {
    opacity: 1;
}

.diamond-shape {
    display: block;
    width: 20px;
    height: 20px;
    background: var(--gold);
    transform: rotate(45deg);
    transition: background 0.2s ease;
}

.return-diamond:hover .diamond-shape {
    background: var(--hover-gold);
}