/* ============================================================
   LORDLY.DEV - Art Deco Developer Platform
   ============================================================ */

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

html {
    overflow: hidden;
    height: 100%;
}

body {
    height: 100%;
    overflow: hidden;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 400;
    font-size: clamp(16px, 1.6vw, 19px);
    line-height: 1.7;
    color: #e8dcc0;
    background: #0a1a14;
}

/* --- Progress Bar --- */
#progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    width: 0%;
    background: linear-gradient(90deg, #c4a030, #e8c840, #c4a030);
    z-index: 1000;
    transition: width 0.1s linear;
}

/* --- Scroll Container --- */
#scroll-container {
    display: flex;
    height: 100vh;
    width: 400vw;
    overflow: visible;
}

/* --- Typography Helpers --- */
.gold-text {
    color: #c4a030;
}

.gold-text-dim {
    color: #c4a030;
    opacity: 0.7;
}

.cream-text {
    color: #e8dcc0;
}

/* --- Hall Base --- */
.hall {
    position: relative;
    width: 100vw;
    height: 100vh;
    flex-shrink: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hall-emerald {
    background-color: #0a1a14;
}

/* Hall transition doorway effect: brief #000 black gap between halls */
.hall::after {
    content: '';
    position: absolute;
    top: 0;
    right: -2px;
    width: 4px;
    height: 100%;
    background: #000;
    z-index: 50;
    pointer-events: none;
}

.hall-sapphire {
    background-color: #0a0a2a;
}

.hall-ruby {
    background-color: #2a0a0a;
}

.hall-amber {
    background-color: #2a1a0a;
}

/* --- Sunburst Backgrounds --- */
.hall-sunburst {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.hall-sunburst.visible {
    opacity: 1;
}

.hall-emerald .hall-sunburst {
    background: conic-gradient(
        from 0deg at 50% 50%,
        transparent 0deg,
        rgba(196, 160, 48, 0.08) 10deg,
        transparent 20deg,
        rgba(196, 160, 48, 0.08) 30deg,
        transparent 40deg,
        rgba(196, 160, 48, 0.08) 50deg,
        transparent 60deg,
        rgba(196, 160, 48, 0.08) 70deg,
        transparent 80deg,
        rgba(196, 160, 48, 0.08) 90deg,
        transparent 100deg,
        rgba(196, 160, 48, 0.08) 110deg,
        transparent 120deg,
        rgba(196, 160, 48, 0.08) 130deg,
        transparent 140deg,
        rgba(196, 160, 48, 0.08) 150deg,
        transparent 160deg,
        rgba(196, 160, 48, 0.08) 170deg,
        transparent 180deg,
        rgba(196, 160, 48, 0.08) 190deg,
        transparent 200deg,
        rgba(196, 160, 48, 0.08) 210deg,
        transparent 220deg,
        rgba(196, 160, 48, 0.08) 230deg,
        transparent 240deg,
        rgba(196, 160, 48, 0.08) 250deg,
        transparent 260deg,
        rgba(196, 160, 48, 0.08) 270deg,
        transparent 280deg,
        rgba(196, 160, 48, 0.08) 290deg,
        transparent 300deg,
        rgba(196, 160, 48, 0.08) 310deg,
        transparent 320deg,
        rgba(196, 160, 48, 0.08) 330deg,
        transparent 340deg,
        rgba(196, 160, 48, 0.08) 350deg,
        transparent 360deg
    );
}

.hall-sapphire .hall-sunburst {
    background: conic-gradient(
        from 45deg at 30% 30%,
        transparent 0deg,
        rgba(196, 160, 48, 0.06) 15deg,
        transparent 30deg,
        rgba(196, 160, 48, 0.06) 45deg,
        transparent 60deg,
        rgba(196, 160, 48, 0.06) 75deg,
        transparent 90deg,
        rgba(196, 160, 48, 0.06) 105deg,
        transparent 120deg,
        rgba(196, 160, 48, 0.06) 135deg,
        transparent 150deg,
        rgba(196, 160, 48, 0.06) 165deg,
        transparent 180deg,
        rgba(196, 160, 48, 0.06) 195deg,
        transparent 210deg,
        rgba(196, 160, 48, 0.06) 225deg,
        transparent 240deg,
        rgba(196, 160, 48, 0.06) 255deg,
        transparent 270deg,
        rgba(196, 160, 48, 0.06) 285deg,
        transparent 300deg,
        rgba(196, 160, 48, 0.06) 315deg,
        transparent 330deg,
        rgba(196, 160, 48, 0.06) 345deg,
        transparent 360deg
    );
}

.hall-ruby .hall-sunburst {
    background: conic-gradient(
        from 90deg at 70% 50%,
        transparent 0deg,
        rgba(196, 160, 48, 0.06) 12deg,
        transparent 24deg,
        rgba(196, 160, 48, 0.06) 36deg,
        transparent 48deg,
        rgba(196, 160, 48, 0.06) 60deg,
        transparent 72deg,
        rgba(196, 160, 48, 0.06) 84deg,
        transparent 96deg,
        rgba(196, 160, 48, 0.06) 108deg,
        transparent 120deg,
        rgba(196, 160, 48, 0.06) 132deg,
        transparent 144deg,
        rgba(196, 160, 48, 0.06) 156deg,
        transparent 168deg,
        rgba(196, 160, 48, 0.06) 180deg,
        transparent 192deg,
        rgba(196, 160, 48, 0.06) 204deg,
        transparent 216deg,
        rgba(196, 160, 48, 0.06) 228deg,
        transparent 240deg,
        rgba(196, 160, 48, 0.06) 252deg,
        transparent 264deg,
        rgba(196, 160, 48, 0.06) 276deg,
        transparent 288deg,
        rgba(196, 160, 48, 0.06) 300deg,
        transparent 312deg,
        rgba(196, 160, 48, 0.06) 324deg,
        transparent 336deg,
        rgba(196, 160, 48, 0.06) 348deg,
        transparent 360deg
    );
}

.hall-amber .hall-sunburst {
    background: conic-gradient(
        from 180deg at 50% 70%,
        transparent 0deg,
        rgba(196, 160, 48, 0.07) 12deg,
        transparent 24deg,
        rgba(196, 160, 48, 0.07) 36deg,
        transparent 48deg,
        rgba(196, 160, 48, 0.07) 60deg,
        transparent 72deg,
        rgba(196, 160, 48, 0.07) 84deg,
        transparent 96deg,
        rgba(196, 160, 48, 0.07) 108deg,
        transparent 120deg,
        rgba(196, 160, 48, 0.07) 132deg,
        transparent 144deg,
        rgba(196, 160, 48, 0.07) 156deg,
        transparent 168deg,
        rgba(196, 160, 48, 0.07) 180deg,
        transparent 192deg,
        rgba(196, 160, 48, 0.07) 204deg,
        transparent 216deg,
        rgba(196, 160, 48, 0.07) 228deg,
        transparent 240deg,
        rgba(196, 160, 48, 0.07) 252deg,
        transparent 264deg,
        rgba(196, 160, 48, 0.07) 276deg,
        transparent 288deg,
        rgba(196, 160, 48, 0.07) 300deg,
        transparent 312deg,
        rgba(196, 160, 48, 0.07) 324deg,
        transparent 336deg,
        rgba(196, 160, 48, 0.07) 348deg,
        transparent 360deg
    );
}

/* --- Parallax Layers --- */
.parallax-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    will-change: transform;
}

/* --- Circuit Patterns (Abstract-tech) --- */
.circuit-pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.05;
}

.circuit-1 {
    background-image:
        linear-gradient(to right, #c4a030 1px, transparent 1px),
        linear-gradient(to bottom, #c4a030 1px, transparent 1px);
    background-size: 80px 80px;
    background-position: 20px 20px;
}

.circuit-1::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(circle 3px, #c4a030 100%, transparent 100%);
    background-size: 80px 80px;
    background-position: 20px 20px;
}

.circuit-2 {
    background-image:
        linear-gradient(to right, #c4a030 1px, transparent 1px),
        linear-gradient(to bottom, #c4a030 1px, transparent 1px);
    background-size: 60px 60px;
    background-position: 10px 10px;
}

.circuit-3 {
    background-image:
        linear-gradient(90deg, #c4a030 1px, transparent 1px),
        linear-gradient(0deg, #c4a030 1px, transparent 1px),
        linear-gradient(45deg, transparent 49.5%, #c4a030 49.5%, #c4a030 50.5%, transparent 50.5%);
    background-size: 100px 100px, 100px 100px, 141px 141px;
}

.circuit-4 {
    background-image:
        linear-gradient(to right, #c4a030 1px, transparent 1px),
        linear-gradient(to bottom, #c4a030 1px, transparent 1px);
    background-size: 50px 50px;
    background-position: 25px 25px;
}

/* --- Geometric Ornaments --- */
.geo-ornament {
    position: absolute;
    width: 60px;
    height: 60px;
    border: 1px solid rgba(196, 160, 48, 0.2);
    transform: rotate(45deg);
}

.geo-ornament::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    bottom: 8px;
    border: 1px solid rgba(196, 160, 48, 0.15);
}

.geo-ornament::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    background: rgba(196, 160, 48, 0.2);
    transform: translate(-50%, -50%);
}

.geo-top-left {
    top: clamp(40px, 6vw, 100px);
    left: clamp(40px, 6vw, 100px);
}

.geo-top-right {
    top: clamp(40px, 6vw, 100px);
    right: clamp(40px, 6vw, 100px);
}

.geo-bottom-left {
    bottom: clamp(40px, 6vw, 100px);
    left: clamp(40px, 6vw, 100px);
}

.geo-bottom-right {
    bottom: clamp(40px, 6vw, 100px);
    right: clamp(40px, 6vw, 100px);
}

/* --- Hall Content --- */
.hall-content {
    position: relative;
    z-index: 10;
    padding: clamp(40px, 6vw, 100px);
    text-align: center;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.hall-title {
    font-family: 'Rokkitt', 'Rockwell', serif;
    font-weight: 600;
    font-size: clamp(28px, 4vw, 52px);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 0.3em;
}

.hall-subtitle {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 400;
    font-size: clamp(16px, 1.8vw, 22px);
    opacity: 0.8;
    margin-bottom: 2em;
    font-style: italic;
}

/* ============================================================
   HALL 1: Hero / Entrance
   ============================================================ */

.deco-frame {
    position: relative;
    width: min(600px, 80vw);
    height: min(400px, 60vh);
    display: flex;
    align-items: center;
    justify-content: center;
}

.frame-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.frame-line {
    fill: none;
    stroke: #c4a030;
    stroke-width: 1.5;
    stroke-dasharray: 1920;
    stroke-dashoffset: 1920;
    transition: stroke-dashoffset 0.8s ease;
}

.frame-line.drawn {
    stroke-dashoffset: 0;
}

.frame-step {
    stroke: #c4a030;
    stroke-width: 1;
    opacity: 0.5;
}

.corner-ornament rect {
    fill: #c4a030;
    opacity: 0;
    transform: scale(0);
    transform-origin: center;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.corner-ornament.visible rect {
    opacity: 0.8;
    transform: scale(1);
}

.hero-text {
    position: relative;
    z-index: 5;
    text-align: center;
}

#hero-title {
    font-family: 'Rokkitt', 'Rockwell', serif;
    font-weight: 800;
    font-size: clamp(36px, 7vw, 84px);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #c4a030;
    opacity: 0;
}

#hero-title.visible {
    opacity: 1;
}

#hero-title .char {
    display: inline-block;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

#hero-title .char.visible {
    opacity: 1;
    transform: translateY(0);
}

#hero-subtitle {
    font-family: 'Rokkitt', 'Rockwell', serif;
    font-weight: 600;
    font-size: clamp(24px, 4vw, 48px);
    letter-spacing: 0.12em;
    opacity: 0;
    transition: opacity 0.3s ease;
}

#hero-subtitle.visible {
    opacity: 0.7;
}

.hero-tagline {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 400;
    font-size: clamp(14px, 1.4vw, 18px);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-top: 1.5em;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.hero-tagline.visible {
    opacity: 0.6;
}

/* --- Scroll Indicator --- */
.scroll-indicator {
    position: absolute;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.scroll-indicator.visible {
    opacity: 1;
}

.chevron-stack {
    display: flex;
    flex-direction: row;
    gap: 4px;
}

.chevron {
    display: block;
    width: 12px;
    height: 20px;
    border-right: 2px solid #c4a030;
    border-bottom: 2px solid #c4a030;
    transform: rotate(-45deg);
    animation: chevronPulse 1.5s ease-in-out infinite;
}

.chevron-2 {
    animation-delay: 0.15s;
    opacity: 0.7;
}

.chevron-3 {
    animation-delay: 0.3s;
    opacity: 0.4;
}

@keyframes chevronPulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

/* ============================================================
   HALL 2: The Gallery (Data Viz)
   ============================================================ */

.dataviz-grid {
    display: flex;
    gap: clamp(20px, 3vw, 50px);
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 90vw;
}

.dataviz-card {
    flex: 0 0 auto;
    width: clamp(240px, 22vw, 320px);
}

.deco-frame-small {
    position: relative;
    padding: 20px;
}

.frame-svg-small {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.frame-svg-small .frame-line {
    fill: none;
    stroke: #c4a030;
    stroke-width: 1;
    stroke-dasharray: none;
    stroke-dashoffset: 0;
}

.frame-svg-small .corner-ornament rect {
    fill: #c4a030;
    opacity: 0.7;
    transform: scale(1);
}

.chart-container {
    min-height: 180px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.chart-title {
    font-family: 'Rokkitt', 'Rockwell', serif;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-top: 12px;
    text-align: center;
}

/* Bar Chart */
.bar-chart {
    gap: clamp(8px, 1vw, 16px);
    padding: 10px 0;
    align-items: flex-end;
}

.bar-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.bar {
    width: clamp(24px, 2.5vw, 36px);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.bar-fill {
    width: 100%;
    background: linear-gradient(to top, #8a6a1a, #c4a030, #e8c840);
    border-top: 1px solid #e8c840;
    height: 0;
    transition: height 1s ease;
}

.bar-crown {
    width: 30px;
    height: 15px;
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.5s ease;
}

.bar-crown.visible {
    opacity: 1;
}

.bar-label {
    font-family: 'Fira Mono', monospace;
    font-size: 10px;
    color: #c4a030;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* Radial Chart */
.radial-chart {
    justify-content: center;
    align-items: center;
    min-height: 200px;
}

.radial-svg {
    width: clamp(140px, 14vw, 200px);
    height: clamp(140px, 14vw, 200px);
}

.pie-segment {
    transform-origin: center;
    opacity: 0;
    transition: opacity 0.8s ease;
}

.pie-segment.visible {
    opacity: 1;
}

/* Line Chart */
.line-chart {
    justify-content: center;
    align-items: center;
    min-height: 160px;
}

.line-svg {
    width: 100%;
    max-width: 260px;
    height: auto;
}

.chart-line {
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
    transition: stroke-dashoffset 1.5s ease;
}

.chart-line.drawn {
    stroke-dashoffset: 0;
}

.data-point {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.data-point.visible {
    opacity: 1;
}

/* ============================================================
   HALL 3: The Workshop (Code)
   ============================================================ */

.code-showcase {
    display: flex;
    gap: clamp(20px, 3vw, 40px);
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 90vw;
}

.code-card {
    flex: 0 0 auto;
    width: clamp(320px, 35vw, 500px);
}

.deco-frame-code {
    position: relative;
    padding: 0;
    background: rgba(0, 0, 0, 0.3);
}

.frame-svg-code {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
}

.frame-svg-code .frame-line {
    fill: none;
    stroke: #c4a030;
    stroke-width: 1;
    stroke-dasharray: none;
    stroke-dashoffset: 0;
}

.frame-svg-code .corner-ornament rect {
    fill: #c4a030;
    opacity: 0.7;
    transform: scale(1);
}

.accent-line {
    stroke-width: 3;
}

.accent-emerald {
    stroke: #2a8a4a;
}

.accent-sapphire {
    stroke: #3a4a8a;
}

.accent-ruby {
    stroke: #8a2a2a;
}

.accent-amber {
    stroke: #8a6a1a;
}

.code-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 16px 8px;
    border-bottom: 1px solid rgba(196, 160, 48, 0.15);
    position: relative;
    z-index: 3;
}

.code-dot {
    width: 8px;
    height: 8px;
    border-radius: 0;
    display: inline-block;
}

.dot-emerald {
    background: #2a8a4a;
}

.dot-sapphire {
    background: #3a4a8a;
}

.dot-amber {
    background: #8a6a1a;
}

.code-filename {
    font-family: 'Fira Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.05em;
    margin-left: 8px;
    opacity: 0.7;
}

.code-block {
    font-family: 'Fira Mono', monospace;
    font-size: 13px;
    line-height: 1.7;
    padding: 16px 20px 20px;
    overflow-x: auto;
    color: #c4a030;
    position: relative;
    z-index: 3;
    white-space: pre;
}

.code-keyword {
    color: #e8c840;
}

.code-type {
    color: #2a8a4a;
}

.code-string {
    color: #8a6a1a;
}

.code-var {
    color: #e8dcc0;
}

.code-prop {
    color: #3a4a8a;
    filter: brightness(2);
}

.code-func {
    color: #e8c840;
}

.code-comment {
    color: rgba(232, 220, 192, 0.35);
    font-style: italic;
}

.code-number {
    color: #8a2a2a;
    filter: brightness(2.5);
}

/* Tech circuit overlay */
.tech-circuit-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30%;
    background:
        linear-gradient(90deg, transparent 49px, rgba(196, 160, 48, 0.03) 49px, rgba(196, 160, 48, 0.03) 50px, transparent 50px) 0 0 / 50px 50px,
        linear-gradient(0deg, transparent 49px, rgba(196, 160, 48, 0.03) 49px, rgba(196, 160, 48, 0.03) 50px, transparent 50px) 0 0 / 50px 50px;
    pointer-events: none;
    mask-image: linear-gradient(to top, rgba(0,0,0,0.5), transparent);
    -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0.5), transparent);
}

/* ============================================================
   HALL 4: The Archive
   ============================================================ */

.archive-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(16px, 2vw, 30px);
    max-width: min(700px, 80vw);
    width: 100%;
    margin-bottom: 2em;
}

.archive-card {
    position: relative;
    border: 1px solid rgba(196, 160, 48, 0.3);
    background: rgba(196, 160, 48, 0.03);
    transition: border-color 0.3s ease, background 0.3s ease;
}

.archive-card:hover {
    border-color: rgba(196, 160, 48, 0.6);
    background: rgba(196, 160, 48, 0.06);
}

.archive-card::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    border: 1px solid transparent;
    pointer-events: none;
}

.archive-card-inner {
    padding: clamp(20px, 2vw, 30px);
    text-align: left;
}

.archive-icon {
    margin-bottom: 12px;
}

.archive-card-title {
    font-family: 'Rokkitt', 'Rockwell', serif;
    font-weight: 600;
    font-size: clamp(16px, 1.4vw, 20px);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 0.5em;
}

.archive-card-desc {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(14px, 1.2vw, 16px);
    line-height: 1.6;
    opacity: 0.75;
}

/* --- Keystone --- */
.keystone-container {
    margin-top: 2em;
    display: flex;
    justify-content: center;
}

.keystone {
    position: relative;
    width: 120px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.keystone-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.keystone-text {
    position: relative;
    z-index: 5;
    font-family: 'Rokkitt', 'Rockwell', serif;
    font-weight: 800;
    font-size: 22px;
    letter-spacing: 0.2em;
    margin-top: 10px;
}

/* ============================================================
   ANIMATIONS
   ============================================================ */

/* Hall entrance animations */
.hall-content {
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.hall.active .hall-content {
    opacity: 1;
    transform: translateX(0);
}

/* Stagger archive cards */
.archive-card {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s ease, border-color 0.3s ease, background 0.3s ease;
}

.hall.active .archive-card:nth-child(1) { transition-delay: 0.1s; opacity: 1; transform: translateY(0); }
.hall.active .archive-card:nth-child(2) { transition-delay: 0.2s; opacity: 1; transform: translateY(0); }
.hall.active .archive-card:nth-child(3) { transition-delay: 0.3s; opacity: 1; transform: translateY(0); }
.hall.active .archive-card:nth-child(4) { transition-delay: 0.4s; opacity: 1; transform: translateY(0); }

/* Dataviz cards stagger */
.dataviz-card {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.hall.active .dataviz-card:nth-child(1) { transition-delay: 0.2s; opacity: 1; transform: translateY(0); }
.hall.active .dataviz-card:nth-child(2) { transition-delay: 0.4s; opacity: 1; transform: translateY(0); }
.hall.active .dataviz-card:nth-child(3) { transition-delay: 0.6s; opacity: 1; transform: translateY(0); }

/* Code cards stagger */
.code-card {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.hall.active .code-card:nth-child(1) { transition-delay: 0.2s; opacity: 1; transform: translateY(0); }
.hall.active .code-card:nth-child(2) { transition-delay: 0.4s; opacity: 1; transform: translateY(0); }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {
    .dataviz-grid {
        flex-direction: column;
    }

    .code-showcase {
        flex-direction: column;
        align-items: center;
    }

    .archive-grid {
        grid-template-columns: 1fr;
    }

    .scroll-indicator {
        right: 20px;
    }

    .chevron {
        width: 8px;
        height: 14px;
    }
}

@media (max-height: 500px) {
    .hall-content {
        padding: 20px;
    }

    .dataviz-grid,
    .code-showcase {
        flex-direction: row;
        overflow-x: auto;
    }
}