:root {
    --bg-deep: #141218;
    --bg-surface: #1E1A24;
    --neon-magenta: #FF2EAF;
    --neon-cyan: #00F0FF;
    --neon-lime: #ADFF2F;
    --brass: #D4A853;
    --text-cream: #F5F0E8;
    --text-muted: #A89BBF;
    --font-display: 'Outfit', sans-serif;
    --font-sub: 'Plus Jakarta Sans', sans-serif;
    --font-body: 'Source Sans 3', sans-serif;
    --spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --glow-magenta: 0 0 10px rgba(255, 46, 175, 0.4), 0 0 30px rgba(255, 46, 175, 0.2), 0 0 60px rgba(255, 46, 175, 0.1);
    --glow-cyan: 0 0 10px rgba(0, 240, 255, 0.4), 0 0 30px rgba(0, 240, 255, 0.2), 0 0 60px rgba(0, 240, 255, 0.1);
    --glow-brass: 0 0 10px rgba(212, 168, 83, 0.3), 0 0 30px rgba(212, 168, 83, 0.15);
}

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

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    background-color: var(--bg-deep);
    color: var(--text-cream);
    font-family: var(--font-body);
    min-height: 100vh;
    overflow-x: hidden;
}

/* ============================================
   NAVIGATION PILL
   ============================================ */
.nav-pill {
    position: fixed;
    left: 24px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
    background: rgba(212, 168, 83, 0.12);
    border: 1px solid rgba(212, 168, 83, 0.35);
    border-radius: 24px;
    padding: 10px 14px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: box-shadow 0.6s var(--smooth), border-color 0.6s var(--smooth);
}

.nav-pill-number {
    font-family: var(--font-sub);
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--brass);
    letter-spacing: 0.12em;
    display: block;
    text-align: center;
    transition: color 0.4s var(--smooth);
}

.nav-pill.glow {
    box-shadow: var(--glow-brass);
    border-color: rgba(212, 168, 83, 0.6);
}

.nav-pill.glow .nav-pill-number {
    color: #f0d48a;
}

/* ============================================
   PAVILION BASE
   ============================================ */
.pavilion {
    min-height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 8vw;
    overflow: hidden;
    background-color: var(--bg-deep);
}

.pavilion-inner {
    max-width: 1100px;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 4rem;
    position: relative;
    z-index: 2;
}

.pavilion-inner.align-left {
    flex-direction: row;
}

.pavilion-inner.align-right {
    flex-direction: row-reverse;
}

.pavilion-inner.align-center {
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* ============================================
   HERO PAVILION
   ============================================ */
.pavilion-hero {
    position: relative;
}

.hero-blob-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    pointer-events: none;
}

.hero-blob-svg {
    width: clamp(320px, 50vw, 600px);
    height: clamp(320px, 50vw, 600px);
    filter: drop-shadow(0 0 25px rgba(255, 46, 175, 0.15)) drop-shadow(0 0 50px rgba(0, 240, 255, 0.1));
    animation: heroBlobPulse 12s var(--smooth) infinite alternate;
}

@keyframes heroBlobPulse {
    0% { transform: scale(1) rotate(0deg); opacity: 1; }
    50% { transform: scale(1.04) rotate(2deg); opacity: 0.9; }
    100% { transform: scale(0.97) rotate(-1deg); opacity: 1; }
}

.pipe-flow-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.pipe-flow-svg {
    width: 100%;
    height: 100%;
}

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

.hero-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(4rem, 15vw, 14rem);
    color: var(--text-cream);
    letter-spacing: 0.02em;
    line-height: 1;
    margin-bottom: 1.5rem;
    text-shadow: 0 0 60px rgba(255, 46, 175, 0.15), 0 0 120px rgba(0, 240, 255, 0.08);
}

.hero-subtitle {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: clamp(1rem, 2.2vw, 1.5rem);
    color: var(--text-muted);
    letter-spacing: 0.05em;
    line-height: 1.6;
}

.delay-subtitle {
    transition-delay: 1.2s;
}

/* ============================================
   PAVILION TYPOGRAPHY
   ============================================ */
.pavilion-heading {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(3rem, 8vw, 7rem);
    color: var(--text-cream);
    letter-spacing: 0.02em;
    line-height: 1.1;
    margin-bottom: 1rem;
}

.pavilion-heading-final {
    font-size: clamp(2.2rem, 6vw, 5rem);
    text-shadow: 0 0 30px rgba(255, 46, 175, 0.15), 0 0 60px rgba(0, 240, 255, 0.1), 0 0 100px rgba(173, 255, 47, 0.05);
    max-width: 18ch;
}

.pavilion-sub {
    font-family: var(--font-sub);
    font-weight: 600;
    font-size: clamp(1rem, 2.5vw, 1.6rem);
    color: var(--neon-cyan);
    margin-bottom: 2rem;
    letter-spacing: 0.02em;
}

.pavilion-body {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: clamp(1rem, 1.8vw, 1.25rem);
    line-height: 1.7;
    color: var(--text-cream);
    max-width: 65ch;
    margin-bottom: 1.5rem;
    letter-spacing: 0.01em;
}

.pavilion-body:last-child {
    margin-bottom: 0;
}

.pavilion-text {
    flex: 1;
    min-width: 0;
}

.align-right .pavilion-text {
    text-align: right;
}

.align-right .pavilion-body {
    margin-left: auto;
}

/* ============================================
   BLOBS
   ============================================ */
.blob {
    flex-shrink: 0;
    position: relative;
}

.blob-svg {
    filter: drop-shadow(0 0 20px rgba(255, 46, 175, 0.15)) drop-shadow(0 0 40px rgba(0, 240, 255, 0.08));
}

.blob-svg.blob-medium {
    width: 260px;
    height: 260px;
}

.blob-svg.blob-final {
    width: 340px;
    height: 340px;
    filter: drop-shadow(0 0 30px rgba(255, 46, 175, 0.2)) drop-shadow(0 0 60px rgba(0, 240, 255, 0.12));
}

.blob-water .blob-svg {
    filter: drop-shadow(0 0 25px rgba(0, 240, 255, 0.25)) drop-shadow(0 0 50px rgba(0, 240, 255, 0.1));
}

.blob-transit .blob-svg {
    filter: drop-shadow(0 0 20px rgba(255, 46, 175, 0.2)) drop-shadow(0 0 40px rgba(0, 240, 255, 0.1));
}

.blob-data .blob-svg {
    filter: drop-shadow(0 0 20px rgba(0, 240, 255, 0.2)) drop-shadow(0 0 40px rgba(255, 46, 175, 0.08));
}

.blob-logistics .blob-svg {
    filter: drop-shadow(0 0 20px rgba(173, 255, 47, 0.15)) drop-shadow(0 0 40px rgba(212, 168, 83, 0.1));
}

.blob-top {
    margin-bottom: -0.5rem;
}

.blob-bottom {
    margin-top: -0.5rem;
}

/* Blob morphing animation applied via JS to .blob-shape paths */
.blob-shape {
    transition: d 0.5s var(--smooth);
}

/* ============================================
   PAVILION-SPECIFIC BACKGROUNDS
   ============================================ */
.pavilion-flow {
    background-color: var(--bg-surface);
}

.pavilion-day {
    padding-top: 10vh;
    padding-bottom: 10vh;
}

/* ============================================
   FLOOR TEXTURES
   ============================================ */
.floor-texture {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 10vh;
    pointer-events: none;
    z-index: 0;
}

/* Terrazzo: random small dots in brass, magenta, cyan */
[data-floor="terrazzo"] .floor-texture {
    background:
        radial-gradient(circle at 12% 35%, var(--brass) 1px, transparent 1px),
        radial-gradient(circle at 28% 75%, var(--neon-magenta) 0.6px, transparent 0.6px),
        radial-gradient(circle at 45% 45%, var(--neon-cyan) 0.5px, transparent 0.5px),
        radial-gradient(circle at 62% 20%, var(--brass) 0.8px, transparent 0.8px),
        radial-gradient(circle at 78% 65%, var(--neon-magenta) 0.5px, transparent 0.5px),
        radial-gradient(circle at 88% 40%, var(--brass) 1px, transparent 1px),
        radial-gradient(circle at 35% 90%, var(--neon-cyan) 0.7px, transparent 0.7px),
        radial-gradient(circle at 55% 15%, var(--brass) 0.6px, transparent 0.6px),
        radial-gradient(circle at 92% 80%, var(--neon-magenta) 0.5px, transparent 0.5px),
        radial-gradient(circle at 8% 60%, var(--neon-cyan) 0.8px, transparent 0.8px);
    background-size: 140px 90px;
    opacity: 0.18;
}

/* Brass Grid: fine 1px lines at 10% opacity forming 40px grid */
[data-floor="brass"] .floor-texture {
    background:
        repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(212, 168, 83, 0.1) 39px, rgba(212, 168, 83, 0.1) 40px),
        repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(212, 168, 83, 0.1) 39px, rgba(212, 168, 83, 0.1) 40px);
}

/* Brushed Steel: extremely fine horizontal lines in cool gray */
[data-floor="steel"] .floor-texture {
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(168, 155, 191, 0.06) 2px,
        rgba(168, 155, 191, 0.06) 3px
    );
}

/* Polished Concrete: subtle speckle pattern */
[data-floor="concrete"] .floor-texture {
    background:
        radial-gradient(circle at 15% 40%, rgba(168, 155, 191, 0.06) 1px, transparent 1px),
        radial-gradient(circle at 42% 25%, rgba(168, 155, 191, 0.05) 0.8px, transparent 0.8px),
        radial-gradient(circle at 68% 60%, rgba(168, 155, 191, 0.04) 1px, transparent 1px),
        radial-gradient(circle at 85% 35%, rgba(168, 155, 191, 0.06) 0.7px, transparent 0.7px),
        radial-gradient(circle at 30% 75%, rgba(168, 155, 191, 0.05) 0.9px, transparent 0.9px),
        radial-gradient(circle at 55% 85%, rgba(168, 155, 191, 0.04) 1px, transparent 1px),
        radial-gradient(circle at 78% 15%, rgba(168, 155, 191, 0.05) 0.8px, transparent 0.8px);
    background-size: 60px 60px;
}

/* ============================================
   INTERSTITIALS
   ============================================ */
.interstitial {
    height: 20vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, var(--bg-deep) 0%, rgba(30, 26, 36, 0.6) 50%, var(--bg-deep) 100%);
}

.interstitial-svg {
    width: 100%;
    max-width: 1000px;
    height: auto;
    padding: 0 2vw;
}

/* ============================================
   GRID PULSE ANIMATION
   ============================================ */
.interstitial.active .pulse-ring.ring-1 { animation: pulseExpand 2.5s ease-out 0.1s forwards; }
.interstitial.active .pulse-ring.ring-2 { animation: pulseExpand 2.5s ease-out 0.35s forwards; }
.interstitial.active .pulse-ring.ring-3 { animation: pulseExpand 2.5s ease-out 0.6s forwards; }
.interstitial.active .pulse-ring.ring-4 { animation: pulseExpand 2.5s ease-out 0.85s forwards; }
.interstitial.active .pulse-ring.ring-5 { animation: pulseExpand 2.5s ease-out 1.1s forwards; }

@keyframes pulseExpand {
    0% { opacity: 0; transform-origin: center; }
    20% { opacity: 0.7; }
    100% { opacity: 0.15; }
}

/* ============================================
   ROUTE TRACE ANIMATION
   ============================================ */
.interstitial.active .trace-path {
    animation: traceDraw 3s ease-in-out forwards;
}

.interstitial.active .trace-branch.branch-1 { animation: traceDraw 0.5s ease-out 1.2s forwards; }
.interstitial.active .trace-branch.branch-2 { animation: traceDraw 0.5s ease-out 2.2s forwards; }

.interstitial.active .trace-node.node-1 { animation: nodeGlow 0.5s ease-out 0.6s forwards; }
.interstitial.active .trace-node.node-2 { animation: nodeGlow 0.5s ease-out 1.3s forwards; }
.interstitial.active .trace-node.node-3 { animation: nodeGlow 0.5s ease-out 2.0s forwards; }
.interstitial.active .trace-node.node-4 { animation: nodeGlow 0.5s ease-out 2.6s forwards; }
.interstitial.active .trace-node.node-5 { animation: nodeGlow 0.5s ease-out 1.4s forwards; }
.interstitial.active .trace-node.node-6 { animation: nodeGlow 0.5s ease-out 2.4s forwards; }

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

@keyframes nodeGlow {
    0% { opacity: 0; r: 0; }
    60% { opacity: 0.9; }
    100% { opacity: 0.75; }
}

/* ============================================
   SIGNAL WAVE ANIMATION
   ============================================ */
.interstitial.active .wave-circle.wave-a1 { animation: waveExpand 2.2s ease-out 0.2s forwards; }
.interstitial.active .wave-circle.wave-a2 { animation: waveExpand 2.2s ease-out 0.6s forwards; }
.interstitial.active .wave-circle.wave-a3 { animation: waveExpand 2.2s ease-out 1.0s forwards; }
.interstitial.active .wave-circle.wave-b1 { animation: waveExpand 2.2s ease-out 0.3s forwards; }
.interstitial.active .wave-circle.wave-b2 { animation: waveExpand 2.2s ease-out 0.7s forwards; }
.interstitial.active .wave-circle.wave-b3 { animation: waveExpand 2.2s ease-out 1.1s forwards; }
.interstitial.active .wave-circle.wave-c1 { animation: waveExpand 2.2s ease-out 0.5s forwards; }
.interstitial.active .wave-circle.wave-c2 { animation: waveExpand 2.2s ease-out 0.9s forwards; }

@keyframes waveExpand {
    0% { r: 0; opacity: 0.7; }
    100% { r: 90; opacity: 0; }
}

/* ============================================
   MESH BUILD ANIMATION
   ============================================ */
.interstitial.active .mesh-node.mn-1 { animation: meshNodeAppear 0.4s ease-out 0.15s forwards; }
.interstitial.active .mesh-node.mn-2 { animation: meshNodeAppear 0.4s ease-out 0.3s forwards; }
.interstitial.active .mesh-node.mn-3 { animation: meshNodeAppear 0.4s ease-out 0.45s forwards; }
.interstitial.active .mesh-node.mn-4 { animation: meshNodeAppear 0.4s ease-out 0.6s forwards; }
.interstitial.active .mesh-node.mn-5 { animation: meshNodeAppear 0.4s ease-out 0.75s forwards; }
.interstitial.active .mesh-node.mn-6 { animation: meshNodeAppear 0.4s ease-out 0.9s forwards; }
.interstitial.active .mesh-node.mn-7 { animation: meshNodeAppear 0.4s ease-out 1.05s forwards; }
.interstitial.active .mesh-node.mn-8 { animation: meshNodeAppear 0.4s ease-out 1.2s forwards; }

.interstitial.active .mesh-line.ml-1 { animation: meshLineAppear 0.5s ease-out 0.35s forwards; }
.interstitial.active .mesh-line.ml-2 { animation: meshLineAppear 0.5s ease-out 0.5s forwards; }
.interstitial.active .mesh-line.ml-3 { animation: meshLineAppear 0.5s ease-out 0.65s forwards; }
.interstitial.active .mesh-line.ml-4 { animation: meshLineAppear 0.5s ease-out 0.8s forwards; }
.interstitial.active .mesh-line.ml-5 { animation: meshLineAppear 0.5s ease-out 0.85s forwards; }
.interstitial.active .mesh-line.ml-6 { animation: meshLineAppear 0.5s ease-out 0.95s forwards; }
.interstitial.active .mesh-line.ml-7 { animation: meshLineAppear 0.5s ease-out 1.0s forwards; }
.interstitial.active .mesh-line.ml-8 { animation: meshLineAppear 0.5s ease-out 1.1s forwards; }
.interstitial.active .mesh-line.ml-9 { animation: meshLineAppear 0.5s ease-out 1.15s forwards; }
.interstitial.active .mesh-line.ml-10 { animation: meshLineAppear 0.5s ease-out 1.25s forwards; }
.interstitial.active .mesh-line.ml-11 { animation: meshLineAppear 0.5s ease-out 1.0s forwards; }
.interstitial.active .mesh-line.ml-12 { animation: meshLineAppear 0.5s ease-out 1.1s forwards; }
.interstitial.active .mesh-line.ml-13 { animation: meshLineAppear 0.5s ease-out 1.2s forwards; }

@keyframes meshNodeAppear {
    0% { opacity: 0; }
    100% { opacity: 0.8; }
}

@keyframes meshLineAppear {
    0% { opacity: 0; }
    100% { opacity: 0.5; }
}

/* ============================================
   FADE REVEAL
   ============================================ */
.fade-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.9s ease-out, transform 0.9s var(--spring);
}

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

/* ============================================
   INFRASTRUCTURE LAYER CYCLING (Pavilion 5)
   ============================================ */
.infra-layer {
    transition: opacity 1.5s var(--smooth);
}

.infra-layer.layer-active {
    opacity: 0.25;
}

/* ============================================
   PREFERS REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .fade-reveal {
        transition: none;
        opacity: 1;
        transform: none;
    }

    .hero-blob-svg {
        animation: none;
    }

    .pipe-dot,
    .pipe-dot-1,
    .pipe-dot-2,
    .pipe-dot-3 {
        display: none;
    }

    .interstitial.active .pulse-ring,
    .interstitial.active .trace-path,
    .interstitial.active .trace-branch,
    .interstitial.active .trace-node,
    .interstitial.active .wave-circle,
    .interstitial.active .mesh-node,
    .interstitial.active .mesh-line {
        animation: none;
        opacity: 0.25;
    }

    .blob-shape {
        transition: none;
    }
}

/* ============================================
   RESPONSIVE: TABLET
   ============================================ */
@media (max-width: 768px) {
    .pavilion {
        padding: 0 5vw;
    }

    .pavilion-inner {
        flex-direction: column !important;
        text-align: left;
        gap: 2.5rem;
    }

    .align-right .pavilion-text {
        text-align: left;
    }

    .align-right .pavilion-body {
        margin-left: 0;
    }

    .blob-svg.blob-medium {
        width: 200px;
        height: 200px;
    }

    .blob-svg.blob-final {
        width: 260px;
        height: 260px;
    }

    .hero-blob-svg {
        width: 300px;
        height: 300px;
    }

    .nav-pill {
        left: 12px;
        padding: 8px 10px;
    }

    .interstitial {
        height: 12vh;
    }

    .pavilion-heading {
        font-size: clamp(2.5rem, 7vw, 5rem);
    }
}

/* ============================================
   RESPONSIVE: MOBILE
   ============================================ */
@media (max-width: 480px) {
    .pavilion {
        min-height: auto;
        padding: 60px 5vw;
    }

    .pavilion-hero {
        min-height: 100vh;
        padding: 0 5vw;
    }

    .hero-title {
        font-size: clamp(3rem, 18vw, 5rem);
    }

    .hero-subtitle {
        font-size: 0.95rem;
    }

    .pavilion-heading {
        font-size: 2.5rem;
    }

    .pavilion-heading-final {
        font-size: 2rem;
    }

    .pavilion-sub {
        font-size: 1rem;
    }

    .pavilion-body {
        font-size: 1rem;
    }

    .interstitial {
        height: 10vh;
    }

    .blob-svg.blob-medium {
        width: 160px;
        height: 160px;
    }

    .blob-svg.blob-final {
        width: 200px;
        height: 200px;
    }

    .hero-blob-svg {
        width: 220px;
        height: 220px;
    }

    .nav-pill {
        left: 8px;
        padding: 6px 8px;
    }

    .nav-pill-number {
        font-size: 0.7rem;
    }

    .pavilion-day {
        padding-top: 6vh;
        padding-bottom: 6vh;
    }
}