/* ==============================================================
   transactology.org -- The Scholarly Pursuit of Exchange
   Earth-tone luxury museum, gilded curiosity cabinet aesthetic
   ============================================================== */

:root {
    /* palette */
    --c-obsidian-loam: #1A1209;
    --c-espresso: #2C1810;
    --c-antique-gold: #D4A853;
    --c-tarnished-brass: #8B7355;
    --c-parchment: #E8DCC8;
    --c-burnt-sienna: #5C3D2E;
    --c-moss: #3A5F3A;
    --c-terracotta: #C17F59;
    --c-warm-sand: #C4B69C;
    --c-dark-umber: #3D2E1F;

    /* typography */
    --f-display: 'Bebas Neue', 'Impact', sans-serif;
    --f-serif: 'Cormorant Garamond', 'Garamond', 'Georgia', serif;
    --f-body: 'Source Sans 3', 'Inter', system-ui, sans-serif;
    --f-mono: 'IBM Plex Mono', 'Menlo', monospace;

    /* timing */
    --ease-curtain: cubic-bezier(0.22, 0.61, 0.36, 1);
    --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);

    --grid-gap: clamp(16px, 2vw, 32px);
    --container-max: clamp(320px, 92vw, 1440px);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--c-obsidian-loam);
    color: var(--c-warm-sand);
    font-family: var(--f-body);
    font-weight: 400;
    line-height: 1.72;
    letter-spacing: 0.01em;
    overflow-x: hidden;
    min-height: 100%;
}

body {
    background:
        radial-gradient(circle at 18% 12%, rgba(212, 168, 83, 0.04) 0%, transparent 45%),
        radial-gradient(circle at 82% 38%, rgba(193, 127, 89, 0.04) 0%, transparent 50%),
        radial-gradient(circle at 28% 78%, rgba(212, 168, 83, 0.035) 0%, transparent 50%),
        linear-gradient(180deg,
            var(--c-obsidian-loam) 0%,
            var(--c-espresso) 35%,
            var(--c-espresso) 65%,
            var(--c-obsidian-loam) 100%);
    background-attachment: fixed;
}

img, svg, canvas {
    display: block;
    max-width: 100%;
}

a {
    color: var(--c-antique-gold);
    text-decoration: none;
}

/* ============= bokeh canvas ============= */
#bokeh-canvas {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.5s var(--ease-curtain);
}
#bokeh-canvas.is-revealed { opacity: 1; }

/* ============= main layout ============= */
#page-main {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 56px);
}

/* ============= section commons ============= */
.gallery-header {
    text-align: center;
    margin: clamp(72px, 10vh, 140px) auto clamp(40px, 6vh, 72px);
    max-width: 740px;
    padding: 0 16px;
}
.gallery-eyebrow {
    font-family: var(--f-mono);
    font-size: 0.78rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--c-tarnished-brass);
    margin: 0 0 12px;
}
.gallery-title {
    font-family: var(--f-display);
    font-weight: 400;
    font-size: clamp(2.4rem, 5.5vw, 4.6rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-antique-gold);
    margin: 0 0 20px;
    line-height: 1.05;
}
.gallery-lede {
    font-family: var(--f-serif);
    font-style: italic;
    font-size: clamp(1.05rem, 1.6vw, 1.32rem);
    color: var(--c-parchment);
    line-height: 1.6;
    margin: 0 auto;
    max-width: 580px;
}

/* ============= section 1: vestibule ============= */
.vestibule {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: clamp(40px, 8vh, 100px) 0;
    position: relative;
}
.vestibule-inner {
    width: 100%;
    max-width: 820px;
    padding: 0 16px;
    animation: gentle-float 6s ease-in-out infinite;
}
.institution-seal {
    width: clamp(200px, 30vw, 400px);
    margin: 0 auto clamp(20px, 3vh, 36px);
    opacity: 0;
    transform: scale(0.94);
    transition: opacity 1.4s var(--ease-curtain), transform 1.4s var(--ease-curtain);
    transition-delay: 0.8s;
    filter: drop-shadow(0 12px 32px rgba(212, 168, 83, 0.08));
}
.institution-seal.is-revealed { opacity: 1; transform: scale(1); }

.institution-seal svg { width: 100%; height: auto; }

.seal-ring-symbols {
    transform-origin: 200px 200px;
    animation: seal-rotate-symbols 30s linear infinite;
}
.seal-ring-mid {
    transform-origin: 200px 200px;
    animation: seal-rotate-mid 60s linear infinite reverse;
}
.seal-ring-outer {
    transform-origin: 200px 200px;
    animation: seal-rotate-outer 80s linear infinite;
}
.seal-pulse {
    transform-origin: 200px 200px;
    animation: seal-pulse 3.6s ease-in-out infinite;
}
.seal-spark {
    animation: seal-spark 4s ease-in-out infinite;
}
@keyframes seal-rotate-symbols { to { transform: rotate(360deg); } }
@keyframes seal-rotate-mid { to { transform: rotate(360deg); } }
@keyframes seal-rotate-outer { to { transform: rotate(360deg); } }
@keyframes seal-pulse {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.4); opacity: 0.05; }
}
@keyframes seal-spark {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}

.vestibule-title {
    font-family: var(--f-display);
    font-weight: 400;
    font-size: clamp(2.8rem, 9vw, 7rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-antique-gold);
    margin: 0 0 14px;
    line-height: 0.94;
    text-shadow: 0 0 60px rgba(212, 168, 83, 0.18);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1.2s var(--ease-curtain), transform 1.2s var(--ease-curtain);
    transition-delay: 1.5s;
}
.vestibule-title.is-revealed { opacity: 1; transform: translateY(0); }

.vestibule-subtitle {
    font-family: var(--f-serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.2rem, 2.2vw, 1.7rem);
    color: var(--c-parchment);
    margin: 0 0 22px;
    letter-spacing: 0.02em;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 1.2s var(--ease-curtain), transform 1.2s var(--ease-curtain);
    transition-delay: 2s;
}
.vestibule-subtitle.is-revealed { opacity: 1; transform: translateY(0); }

.vestibule-meta {
    font-family: var(--f-mono);
    font-size: 0.74rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--c-tarnished-brass);
    margin: 0 0 64px;
    opacity: 0;
    transition: opacity 1s var(--ease-curtain);
    transition-delay: 2.4s;
}
.vestibule-meta.is-revealed { opacity: 1; }

.vestibule-scrollcue {
    margin-top: 80px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    opacity: 0;
    transition: opacity 1s var(--ease-curtain);
    transition-delay: 2.8s;
}
.vestibule-scrollcue.is-revealed { opacity: 0.55; }
.vestibule-scrollcue span {
    font-family: var(--f-mono);
    font-size: 0.7rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--c-tarnished-brass);
}
.vestibule-scrollcue svg {
    animation: scrollcue-bob 2.4s ease-in-out infinite;
}
@keyframes scrollcue-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(6px); }
}

/* ============= dividers ============= */
.divider {
    width: 100%;
    margin: clamp(28px, 5vh, 64px) auto;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.85;
}
.divider svg { width: 100%; max-width: 1100px; height: 80px; }
.divider-path path,
.divider-path line,
.divider-path circle,
.divider-path rect {
    stroke-dasharray: 1500;
    stroke-dashoffset: 1500;
    transition: stroke-dashoffset 1.8s var(--ease-curtain);
}
.divider.is-revealed .divider-path path,
.divider.is-revealed .divider-path line,
.divider.is-revealed .divider-path circle,
.divider.is-revealed .divider-path rect {
    stroke-dashoffset: 0;
}

/* ============= card grid (exchange hall) ============= */
.exchange-hall {
    padding: 0 0 clamp(40px, 6vh, 80px);
}
.card-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--grid-gap);
    width: 100%;
}

.card {
    grid-column: span 6;
    background: linear-gradient(145deg, var(--c-espresso) 0%, var(--c-obsidian-loam) 100%);
    border: 1px solid rgba(212, 168, 83, 0.15);
    border-radius: 4px;
    padding: clamp(28px, 3.6vw, 44px);
    position: relative;
    overflow: hidden;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 1px 0 rgba(212, 168, 83, 0.08) inset;
    transition: transform 0.4s var(--ease-soft), box-shadow 0.4s var(--ease-soft);
    will-change: transform;
    transform: translateY(0);
}
.card.card-secondary { grid-column: span 3; padding: clamp(20px, 2.6vw, 32px); }
.card.card-accent { grid-column: span 3; padding: clamp(20px, 2.6vw, 32px); }
.card.card-primary { grid-column: span 6; }

/* card hover (raises during float oscillation) */
.card:hover {
    transform: translateY(calc(var(--float-current, 0px) - 4px));
    box-shadow:
        0 16px 48px rgba(0, 0, 0, 0.55),
        0 0 36px rgba(212, 168, 83, 0.10),
        0 1px 0 rgba(212, 168, 83, 0.18) inset;
}
.card:hover .specimen-label {
    transform: rotate(0deg) translateY(-2px);
}

/* card content */
.card-eyebrow {
    font-family: var(--f-mono);
    font-size: 0.7rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--c-tarnished-brass);
    margin-bottom: 12px;
}
.card-title {
    font-family: var(--f-display);
    font-weight: 400;
    font-size: clamp(1.4rem, 2.6vw, 2.1rem);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-antique-gold);
    margin: 0 0 8px;
    line-height: 1.1;
    max-width: 80%;
}
.card-subtitle {
    font-family: var(--f-serif);
    font-style: italic;
    font-size: clamp(1rem, 1.4vw, 1.18rem);
    color: var(--c-parchment);
    margin: 0 0 18px;
    line-height: 1.5;
}
.card-body {
    font-family: var(--f-body);
    color: var(--c-warm-sand);
    font-size: clamp(0.95rem, 1.1vw, 1.04rem);
    line-height: 1.72;
    margin: 0;
}
.card-foot {
    margin-top: 24px;
    display: flex;
    align-items: center;
    gap: 14px;
}
.foot-rule {
    flex: 0 0 36px;
    height: 1px;
    background: linear-gradient(90deg, var(--c-burnt-sienna), transparent);
}
.foot-mono {
    font-family: var(--f-mono);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--c-tarnished-brass);
}

/* specimen label (pinned card) */
.specimen-label {
    position: absolute;
    top: 14px;
    right: 14px;
    background: var(--c-parchment);
    color: var(--c-dark-umber);
    border: 1px solid var(--c-tarnished-brass);
    padding: 6px 10px 5px;
    font-family: var(--f-mono);
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.3;
    transform: rotate(var(--label-rotation, 2deg));
    transform-origin: top right;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
    transition: transform 0.4s var(--ease-soft);
    display: flex;
    flex-direction: column;
    gap: 1px;
    max-width: 180px;
    z-index: 2;
    pointer-events: none;
}
.specimen-label .label-code {
    color: var(--c-burnt-sienna);
    font-weight: 400;
    letter-spacing: 0.12em;
}
.specimen-label .label-class {
    color: var(--c-dark-umber);
    font-size: 0.56rem;
    letter-spacing: 0.04em;
    text-transform: none;
    font-style: italic;
    font-family: var(--f-serif);
}
.specimen-label.small { font-size: 0.56rem; padding: 4px 8px 3px; max-width: 140px; }
.specimen-label.small .label-class { font-size: 0.52rem; }

/* ============= reveal-on-scroll for cards ============= */
.card,
.curiosa-card,
.card-grid-curiosa article {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.6s var(--ease-curtain), transform 0.6s var(--ease-curtain);
}
.card.is-revealed,
.curiosa-card.is-revealed { opacity: 1; transform: translateY(var(--float-current, 0px)); }

/* ============= floating animations ============= */
.float-1 { animation: float-a 5.4s ease-in-out infinite; }
.float-2 { animation: float-b 6.2s ease-in-out infinite; animation-delay: -0.4s; }
.float-3 { animation: float-c 4.8s ease-in-out infinite; animation-delay: -0.8s; }
.float-4 { animation: float-a 6.6s ease-in-out infinite; animation-delay: -1.2s; }
.float-5 { animation: float-b 5.0s ease-in-out infinite; animation-delay: -1.6s; }
.float-6 { animation: float-c 5.8s ease-in-out infinite; animation-delay: -2.0s; }
.float-7 { animation: float-a 4.6s ease-in-out infinite; animation-delay: -2.4s; }
.float-8 { animation: float-b 6.8s ease-in-out infinite; animation-delay: -2.8s; }
.float-9 { animation: float-c 5.2s ease-in-out infinite; animation-delay: -3.2s; }

.float-c1 { animation: float-fast-a 3.4s ease-in-out infinite; }
.float-c2 { animation: float-fast-b 3.8s ease-in-out infinite; animation-delay: -0.3s; }
.float-c3 { animation: float-fast-c 3.2s ease-in-out infinite; animation-delay: -0.6s; }
.float-c4 { animation: float-fast-a 3.6s ease-in-out infinite; animation-delay: -0.9s; }
.float-c5 { animation: float-fast-b 4.0s ease-in-out infinite; animation-delay: -1.2s; }
.float-c6 { animation: float-fast-c 3.0s ease-in-out infinite; animation-delay: -1.5s; }
.float-c7 { animation: float-fast-a 3.7s ease-in-out infinite; animation-delay: -1.8s; }
.float-c8 { animation: float-fast-b 3.3s ease-in-out infinite; animation-delay: -2.1s; }
.float-c9 { animation: float-fast-c 4.0s ease-in-out infinite; animation-delay: -2.4s; }
.float-c10 { animation: float-fast-a 3.5s ease-in-out infinite; animation-delay: -2.7s; }
.float-c11 { animation: float-fast-b 3.6s ease-in-out infinite; animation-delay: -3.0s; }
.float-c12 { animation: float-fast-c 3.2s ease-in-out infinite; animation-delay: -3.3s; }

.card.is-revealed.float-1, .card.is-revealed.float-2, .card.is-revealed.float-3,
.card.is-revealed.float-4, .card.is-revealed.float-5, .card.is-revealed.float-6,
.card.is-revealed.float-7, .card.is-revealed.float-8, .card.is-revealed.float-9 {
    /* keep animation; reveal handled by opacity */
}

@keyframes float-a {
    0%, 100% { transform: translateY(0px); box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 1px 0 rgba(212,168,83,0.08) inset; }
    50% { transform: translateY(-7px); box-shadow: 0 14px 40px rgba(0,0,0,0.5), 0 1px 0 rgba(212,168,83,0.12) inset; }
}
@keyframes float-b {
    0%, 100% { transform: translateY(-2px); box-shadow: 0 10px 34px rgba(0,0,0,0.42), 0 1px 0 rgba(212,168,83,0.08) inset; }
    50% { transform: translateY(5px); box-shadow: 0 6px 26px rgba(0,0,0,0.36), 0 1px 0 rgba(212,168,83,0.05) inset; }
}
@keyframes float-c {
    0%, 100% { transform: translateY(3px); box-shadow: 0 6px 28px rgba(0,0,0,0.38), 0 1px 0 rgba(212,168,83,0.06) inset; }
    50% { transform: translateY(-6px); box-shadow: 0 14px 42px rgba(0,0,0,0.55), 0 1px 0 rgba(212,168,83,0.13) inset; }
}
@keyframes float-fast-a {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-5px); }
}
@keyframes float-fast-b {
    0%, 100% { transform: translateY(-2px); }
    50% { transform: translateY(4px); }
}
@keyframes float-fast-c {
    0%, 100% { transform: translateY(2px); }
    50% { transform: translateY(-4px); }
}

@keyframes gentle-float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-5px); }
}

/* ============= section 3: vault corridor ============= */
.vault-corridor {
    position: relative;
    margin: clamp(40px, 6vh, 80px) auto;
    padding: clamp(40px, 8vh, 96px) 16px;
    max-width: 720px;
    overflow: hidden;
}
#dust-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    opacity: 0.85;
}
.vault-inner {
    position: relative;
    z-index: 1;
    text-align: center;
}
.vault-title {
    font-size: clamp(2rem, 4.5vw, 3.6rem);
    margin-bottom: 36px;
}
.vault-essay {
    font-family: var(--f-serif);
    font-size: clamp(1.18rem, 1.6vw, 1.42rem);
    line-height: 1.86;
    color: var(--c-parchment);
    text-align: left;
}
.vault-essay p {
    margin: 0 0 1.4em;
}
.vault-essay em {
    color: var(--c-antique-gold);
    font-style: italic;
}
.vault-attribution {
    margin-top: 36px;
    font-family: var(--f-mono);
    font-size: 0.74rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--c-tarnished-brass);
}

/* ============= section 4: curiosa wing ============= */
.card-grid-curiosa {
    grid-template-columns: repeat(12, 1fr);
}
.curiosa-card {
    grid-column: span 4;
    background: linear-gradient(145deg, var(--c-espresso) 0%, var(--c-obsidian-loam) 60%, var(--c-burnt-sienna) 240%);
    border: 1px solid rgba(193, 127, 89, 0.18);
    border-radius: 4px;
    padding: clamp(20px, 2.4vw, 30px) clamp(20px, 2.4vw, 28px) clamp(22px, 2.6vw, 32px);
    position: relative;
    overflow: hidden;
    box-shadow:
        0 6px 24px rgba(0, 0, 0, 0.35),
        0 1px 0 rgba(212, 168, 83, 0.08) inset;
    transition: transform 0.4s var(--ease-soft), box-shadow 0.4s var(--ease-soft);
    will-change: transform;
}
.curiosa-card:nth-child(4n+2) { transform: translateY(30px); }
.curiosa-card:nth-child(4n+4) { transform: translateY(30px); }
.curiosa-card:hover {
    box-shadow:
        0 16px 40px rgba(0, 0, 0, 0.5),
        0 0 28px rgba(193, 127, 89, 0.12),
        0 1px 0 rgba(212, 168, 83, 0.16) inset;
}
.curiosa-card h4 {
    font-family: var(--f-serif);
    font-weight: 600;
    font-style: italic;
    font-size: clamp(1.05rem, 1.5vw, 1.32rem);
    color: var(--c-parchment);
    margin: 8px 0 8px;
    line-height: 1.25;
    max-width: 80%;
}
.curiosa-card p {
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--c-warm-sand);
    margin: 0;
}

/* ============= section 5: seal room (footer) ============= */
.seal-room {
    text-align: center;
    padding: clamp(72px, 10vh, 140px) 16px clamp(48px, 8vh, 80px);
    margin-top: clamp(40px, 6vh, 80px);
    border-top: 1px solid rgba(139, 115, 85, 0.18);
}
.seal-room-rules {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-bottom: 28px;
}
.seal-rule {
    flex: 0 0 110px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--c-tarnished-brass), transparent);
}
.seal-mini {
    flex: 0 0 60px;
    width: 60px;
    height: 60px;
    animation: gentle-float 6s ease-in-out infinite;
}
.charter-mono {
    font-family: var(--f-mono);
    font-size: 0.78rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--c-tarnished-brass);
    margin: 4px 0;
}
.seal-nav {
    margin: 36px 0 28px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: clamp(20px, 4vw, 56px);
}
.seal-link {
    font-family: var(--f-serif);
    font-style: italic;
    font-size: 0.96rem;
    color: var(--c-tarnished-brass);
    position: relative;
    padding-bottom: 4px;
    transition: color 0.3s var(--ease-soft);
}
.seal-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 1px;
    background: var(--c-antique-gold);
    transition: width 0.45s var(--ease-curtain);
}
.seal-link:hover { color: var(--c-parchment); }
.seal-link:hover::after { width: 100%; }
.charter-attribution {
    font-family: var(--f-serif);
    font-style: italic;
    font-size: 0.92rem;
    color: var(--c-tarnished-brass);
    margin-top: 24px;
    opacity: 0.72;
}

/* ============================== */
/* responsive */
/* ============================== */
@media (max-width: 1200px) {
    .card-grid {
        grid-template-columns: repeat(6, 1fr);
    }
    .card.card-primary { grid-column: span 6; }
    .card.card-secondary { grid-column: span 3; }
    .card.card-accent { grid-column: span 3; }

    .card-grid-curiosa { grid-template-columns: repeat(6, 1fr); }
    .curiosa-card { grid-column: span 3; }
}

@media (max-width: 768px) {
    #page-main { padding: 0 18px; }
    .card-grid,
    .card-grid-curiosa {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .card,
    .card.card-primary,
    .card.card-secondary,
    .card.card-accent,
    .curiosa-card {
        grid-column: span 1;
    }
    .curiosa-card:nth-child(4n+2),
    .curiosa-card:nth-child(4n+4) {
        transform: none;
    }
    .specimen-label { font-size: 0.58rem; max-width: 130px; }
    .vestibule-title { font-size: clamp(2.4rem, 14vw, 4rem); }
    .gallery-title { font-size: clamp(2rem, 9vw, 3.4rem); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}