/* recycle.report — Art-Deco Data Observatory */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --obsidian: #0a0a0f;
    --obsidian-light: #141419;
    --gold: #d4a843;
    --copper: #b87333;
    --green: #3a8a5c;
    --red: #c44040;
    --parchment: #e8e0d0;
    --stone: #b0a898;
    --dark-panel: #2a2a2a;
}

html {
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
}

body {
    background: var(--obsidian);
    color: var(--parchment);
    font-family: 'Space Grotesk', sans-serif;
    overflow-x: hidden;
}

/* Chambers */
.chamber {
    min-height: 100vh;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    position: relative;
}

/* Chamber Titles */
.chamber-title {
    font-family: 'Alfa Slab One', serif;
    font-size: clamp(2rem, 5vw, 4.5rem);
    color: var(--gold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 3rem;
    text-align: center;
}

/* Chamber 1 — The Inscription */
.chamber-1 {
    background: radial-gradient(ellipse at center, rgba(20,20,25,1) 0%, var(--obsidian) 70%);
}

.deco-frame {
    text-align: center;
    position: relative;
}

.sunburst {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 500px;
    background: conic-gradient(
        from 0deg,
        transparent 0deg, rgba(212,168,67,0.04) 5deg, transparent 10deg,
        transparent 20deg, rgba(212,168,67,0.04) 25deg, transparent 30deg,
        transparent 40deg, rgba(212,168,67,0.04) 45deg, transparent 50deg,
        transparent 60deg, rgba(212,168,67,0.04) 65deg, transparent 70deg,
        transparent 80deg, rgba(212,168,67,0.04) 85deg, transparent 90deg,
        transparent 100deg, rgba(212,168,67,0.04) 105deg, transparent 110deg,
        transparent 120deg, rgba(212,168,67,0.04) 125deg, transparent 130deg,
        transparent 140deg, rgba(212,168,67,0.04) 145deg, transparent 150deg,
        transparent 160deg, rgba(212,168,67,0.04) 165deg, transparent 170deg,
        transparent 180deg, rgba(212,168,67,0.04) 185deg, transparent 190deg,
        transparent 200deg, rgba(212,168,67,0.04) 205deg, transparent 210deg,
        transparent 220deg, rgba(212,168,67,0.04) 225deg, transparent 230deg,
        transparent 240deg, rgba(212,168,67,0.04) 245deg, transparent 250deg,
        transparent 260deg, rgba(212,168,67,0.04) 265deg, transparent 270deg,
        transparent 280deg, rgba(212,168,67,0.04) 285deg, transparent 290deg,
        transparent 300deg, rgba(212,168,67,0.04) 305deg, transparent 310deg,
        transparent 320deg, rgba(212,168,67,0.04) 325deg, transparent 330deg,
        transparent 340deg, rgba(212,168,67,0.04) 345deg, transparent 350deg
    );
    border-radius: 50%;
    animation: rotateSunburst 120s linear infinite;
    pointer-events: none;
}

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

.site-title {
    font-family: 'Alfa Slab One', serif;
    font-size: clamp(3rem, 7vw, 7rem);
    color: var(--gold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
}

.site-title .dot {
    color: var(--green);
}

.tagline {
    font-family: 'Roboto Slab', serif;
    font-weight: 300;
    font-size: clamp(0.9rem, 1.5vw, 1.3rem);
    color: var(--stone);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-top: 1.5rem;
    position: relative;
    z-index: 1;
}

.scroll-indicator {
    margin-top: 4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    z-index: 1;
}

.scroll-line {
    width: 1px;
    height: 60px;
    background: linear-gradient(to bottom, var(--gold), transparent);
    animation: pulseDown 2s ease-in-out infinite;
}

@keyframes pulseDown {
    0%, 100% { opacity: 0.3; transform: scaleY(0.7); }
    50% { opacity: 1; transform: scaleY(1); }
}

.scroll-text {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--stone);
}

/* Glass Cards */
.glass-card {
    background: rgba(20, 20, 28, 0.65);
    backdrop-filter: blur(24px) saturate(1.2);
    border: 1px solid rgba(212, 168, 67, 0.2);
    border-radius: 4px;
    padding: 2rem;
    position: relative;
    transition: transform 0.4s ease, border-color 0.4s ease;
}

.glass-card::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    border: 1px solid transparent;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(212,168,67,0.4) 0%, transparent 30%, transparent 70%, rgba(212,168,67,0.4) 100%) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    border-radius: 4px;
}

.glass-card:hover {
    transform: translateY(-4px);
    border-color: rgba(212, 168, 67, 0.4);
}

/* Chamber 2 — Card Grid */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2rem;
    max-width: 1000px;
    width: 100%;
}

.card-grid .glass-card {
    text-align: center;
    padding: 2.5rem 1.5rem;
}

.card-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 1.5rem;
}

.material-svg {
    width: 100%;
    height: 100%;
}

.card-grid h3 {
    font-family: 'Roboto Slab', serif;
    font-weight: 400;
    font-size: 1.2rem;
    color: var(--parchment);
    margin-bottom: 1.2rem;
    letter-spacing: 0.05em;
}

.metric-bar {
    width: 100%;
    height: 4px;
    background: rgba(212, 168, 67, 0.15);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 0.8rem;
}

.metric-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--green), var(--gold));
    border-radius: 2px;
    width: 0%;
    transition: width 1.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.metric-label {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.75rem;
    color: var(--stone);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* Chamber 3 — Lifecycle */
.lifecycle-track {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 3rem;
    flex-wrap: wrap;
}

.lifecycle-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    cursor: pointer;
    padding: 1rem;
    transition: transform 0.3s ease;
}

.lifecycle-node:hover {
    transform: scale(1.1);
}

.node-ring {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid var(--stone);
    position: relative;
    transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

.lifecycle-node.active .node-ring {
    border-color: var(--gold);
    box-shadow: 0 0 20px rgba(212, 168, 67, 0.3);
}

.lifecycle-node.active .node-ring::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--gold);
}

.lifecycle-node span {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.75rem;
    color: var(--stone);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: color 0.4s ease;
}

.lifecycle-node.active span {
    color: var(--gold);
}

.lifecycle-connector {
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, var(--stone), rgba(176, 168, 152, 0.3));
}

.stage-detail {
    max-width: 600px;
    width: 100%;
    text-align: center;
}

.stage-title {
    font-family: 'Alfa Slab One', serif;
    font-size: 1.5rem;
    color: var(--gold);
    margin-bottom: 1rem;
    letter-spacing: 0.05em;
}

.stage-desc {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.95rem;
    color: var(--stone);
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.stage-stat {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.5rem;
}

.stat-value {
    font-family: 'Alfa Slab One', serif;
    font-size: 2.5rem;
    color: var(--green);
}

.stat-unit {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.8rem;
    color: var(--stone);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* Chamber 4 — Metrics */
.metrics-dashboard {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    max-width: 800px;
    width: 100%;
}

.metric-panel {
    text-align: center;
    padding: 2rem;
}

.fan-arc {
    width: 120px;
    height: 120px;
    margin: 0 auto 1.5rem;
}

.fan-arc svg {
    width: 100%;
    height: 100%;
}

.panel-label {
    font-family: 'Roboto Slab', serif;
    font-weight: 300;
    font-size: 0.85rem;
    color: var(--stone);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* Chamber 5 — Manifest */
.manifest-content {
    max-width: 700px;
    text-align: center;
    margin-bottom: 3rem;
}

.manifest-text {
    font-family: 'Roboto Slab', serif;
    font-weight: 300;
    font-size: 1.1rem;
    color: var(--parchment);
    line-height: 1.8;
    margin-bottom: 2.5rem;
}

.manifest-stats {
    display: flex;
    justify-content: center;
    gap: 3rem;
    flex-wrap: wrap;
}

.manifest-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
}

.stat-number {
    font-family: 'Alfa Slab One', serif;
    font-size: 2.5rem;
    color: var(--gold);
}

.stat-label {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.7rem;
    color: var(--stone);
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

/* Footer */
.site-footer {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
}

.footer-text {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.7rem;
    color: var(--stone);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity: 0.6;
}

/* Reveal animations */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

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

/* Responsive */
@media (max-width: 768px) {
    .lifecycle-track {
        flex-direction: column;
    }
    .lifecycle-connector {
        width: 2px;
        height: 30px;
        background: linear-gradient(to bottom, var(--stone), rgba(176, 168, 152, 0.3));
    }
    .manifest-stats {
        gap: 1.5rem;
    }
}