/* ========================================
   tanso.market - Frutiger Aero Carbon Exchange
   ======================================== */

/* --- Custom Properties --- */
:root {
    --color-amber-resin: #C49148;
    --color-jade-canopy: #5E8C61;
    --color-terracotta-ground: #B35A3A;
    --color-warm-ivory: #F5EDE0;
    --color-frosted-cream: rgba(255, 248, 238, 0.65);
    --color-golden-haze: #E8D5B4;
    --color-deep-loam: #2E2118;
    --color-warm-umber: #6B5744;
    --color-carbon-glow: #D4A843;
    --color-solar-flare: #F0C75E;
    --color-sand-mid: #D4C4A0;
    --ease-frutiger: cubic-bezier(0.23, 1, 0.32, 1);
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Nunito', sans-serif;
    font-weight: 400;
    font-size: clamp(1rem, 1.1vw + 0.3rem, 1.2rem);
    line-height: 1.72;
    color: var(--color-deep-loam);
    background: var(--color-warm-ivory);
    overflow-x: hidden;
    position: relative;
}

/* --- Floating Navigation Pill --- */
#nav-pill {
    position: fixed;
    top: 24px;
    left: 24px;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 0;
    background: rgba(255, 248, 238, 0.75);
    backdrop-filter: blur(20px) saturate(1.2);
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
    border-radius: 50px;
    padding: 10px 14px;
    box-shadow:
        0 4px 20px rgba(196, 145, 72, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: all 0.5s var(--ease-frutiger);
    max-width: 48px;
    overflow: hidden;
    animation: pill-glow 3s ease-in-out infinite;
}

#nav-pill:hover {
    max-width: 600px;
    padding: 10px 20px;
    gap: 12px;
}

@keyframes pill-glow {
    0%, 100% { box-shadow: 0 4px 20px rgba(196, 145, 72, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.6); }
    50% { box-shadow: 0 4px 30px rgba(196, 145, 72, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.6); }
}

.nav-pill-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}

.nav-links {
    display: flex;
    gap: 16px;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.4s var(--ease-frutiger);
}

#nav-pill:hover .nav-links {
    opacity: 1;
}

.nav-links a {
    font-family: 'Exo 2', sans-serif;
    font-weight: 500;
    font-size: clamp(0.7rem, 0.9vw, 0.95rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--color-warm-umber);
    transition: color 0.3s var(--ease-frutiger);
}

.nav-links a:hover {
    color: var(--color-amber-resin);
}

/* --- Parallax Background Layers --- */
#parallax-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.parallax-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.parallax-far {
    background: linear-gradient(135deg, #F5EDE0 0%, #E8D5B4 40%, #D4C4A0 100%);
}

.parallax-mid {
    z-index: 1;
}

.parallax-fore {
    z-index: 2;
}

/* --- Bokeh Circles --- */
.bokeh-circle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.bokeh-1 {
    width: 180px; height: 180px;
    background: radial-gradient(circle, rgba(94, 140, 97, 0.2) 0%, transparent 70%);
    top: 15%; left: 10%;
    animation: bokeh-drift 18s ease-in-out infinite;
}
.bokeh-2 {
    width: 120px; height: 120px;
    background: radial-gradient(circle, rgba(212, 168, 67, 0.18) 0%, transparent 70%);
    top: 30%; left: 65%;
    animation: bokeh-drift 22s ease-in-out infinite reverse;
}
.bokeh-3 {
    width: 200px; height: 200px;
    background: radial-gradient(circle, rgba(94, 140, 97, 0.15) 0%, transparent 70%);
    top: 55%; left: 40%;
    animation: bokeh-drift 25s ease-in-out infinite;
    animation-delay: -5s;
}
.bokeh-4 {
    width: 90px; height: 90px;
    background: radial-gradient(circle, rgba(240, 199, 94, 0.2) 0%, transparent 70%);
    top: 70%; left: 80%;
    animation: bokeh-drift 16s ease-in-out infinite reverse;
    animation-delay: -3s;
}
.bokeh-5 {
    width: 150px; height: 150px;
    background: radial-gradient(circle, rgba(94, 140, 97, 0.12) 0%, transparent 70%);
    top: 80%; left: 15%;
    animation: bokeh-drift 20s ease-in-out infinite;
    animation-delay: -8s;
}
.bokeh-6 {
    width: 100px; height: 100px;
    background: radial-gradient(circle, rgba(212, 168, 67, 0.15) 0%, transparent 70%);
    top: 20%; left: 85%;
    animation: bokeh-drift 19s ease-in-out infinite;
    animation-delay: -2s;
}
.bokeh-7 {
    width: 160px; height: 160px;
    background: radial-gradient(circle, rgba(94, 140, 97, 0.1) 0%, transparent 70%);
    top: 45%; left: 70%;
    animation: bokeh-drift 23s ease-in-out infinite reverse;
    animation-delay: -7s;
}
.bokeh-8 {
    width: 130px; height: 130px;
    background: radial-gradient(circle, rgba(240, 199, 94, 0.14) 0%, transparent 70%);
    top: 60%; left: 25%;
    animation: bokeh-drift 21s ease-in-out infinite;
    animation-delay: -10s;
}

@keyframes bokeh-drift {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(30px, -20px) scale(1.05); }
    50% { transform: translate(-15px, 25px) scale(0.95); }
    75% { transform: translate(20px, 15px) scale(1.02); }
}

/* --- Lens Flare Primary --- */
.lens-flare-primary {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    will-change: transform;
}

.flare-p1 {
    width: 350px; height: 350px;
    background: radial-gradient(circle, #F0C75E 0%, rgba(196, 145, 72, 0.3) 40%, transparent 100%);
    top: 10%; left: 60%;
    animation: flare-drift 20s ease-in-out infinite;
    opacity: 0.5;
}

.flare-p2 {
    width: 250px; height: 250px;
    background: radial-gradient(circle, #F0C75E 0%, rgba(196, 145, 72, 0.25) 35%, transparent 100%);
    top: 45%; left: 20%;
    animation: flare-drift 24s ease-in-out infinite reverse;
    opacity: 0.4;
}

.flare-p3 {
    width: 300px; height: 300px;
    background: radial-gradient(circle, #F0C75E 0%, rgba(196, 145, 72, 0.2) 45%, transparent 100%);
    top: 75%; left: 50%;
    animation: flare-drift 22s ease-in-out infinite;
    animation-delay: -6s;
    opacity: 0.35;
}

@keyframes flare-drift {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(40px, -30px); }
    50% { transform: translate(-20px, 40px); }
    75% { transform: translate(30px, 20px); }
}

/* --- Lens Streaks --- */
.lens-streak {
    position: absolute;
    height: 2px;
    pointer-events: none;
    opacity: 0;
    will-change: transform, opacity;
}

.streak-1 {
    width: 250px;
    background: linear-gradient(90deg, transparent, #D4A843, transparent);
    top: 25%; left: 30%;
    transform: rotate(-25deg);
}

.streak-2 {
    width: 180px;
    background: linear-gradient(90deg, transparent, #D4A843, transparent);
    top: 55%; left: 55%;
    transform: rotate(-30deg);
}

.streak-3 {
    width: 300px;
    background: linear-gradient(90deg, transparent, #D4A843, transparent);
    top: 80%; left: 15%;
    transform: rotate(-20deg);
}

.lens-streak.active {
    animation: streak-sweep 1.5s var(--ease-frutiger) forwards;
}

@keyframes streak-sweep {
    0% { opacity: 0; transform: rotate(-25deg) translateX(-100px); }
    30% { opacity: 0.6; }
    100% { opacity: 0; transform: rotate(-25deg) translateX(200px); }
}

/* --- Hexagonal Lens Flares --- */
.lens-hex {
    position: absolute;
    pointer-events: none;
    width: 50px;
    height: 50px;
    background: rgba(240, 199, 94, 0.15);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    animation: hex-float 15s ease-in-out infinite;
}

.hex-1 { top: 18%; left: 65%; width: 60px; height: 60px; animation-delay: 0s; }
.hex-2 { top: 35%; left: 72%; width: 40px; height: 40px; animation-delay: -3s; }
.hex-3 { top: 50%; left: 25%; width: 55px; height: 55px; animation-delay: -6s; }
.hex-4 { top: 68%; left: 58%; width: 45px; height: 45px; animation-delay: -9s; }
.hex-5 { top: 82%; left: 35%; width: 70px; height: 70px; animation-delay: -12s; }

@keyframes hex-float {
    0%, 100% { transform: translate(0, 0) rotate(0deg); opacity: 0.15; }
    25% { transform: translate(15px, -10px) rotate(15deg); opacity: 0.25; }
    50% { transform: translate(-10px, 15px) rotate(-10deg); opacity: 0.1; }
    75% { transform: translate(10px, 5px) rotate(5deg); opacity: 0.2; }
}

/* --- Glass Spheres --- */
#glass-spheres {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.glass-sphere {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    will-change: transform;
}

.sphere-s1 {
    width: 80px; height: 80px;
    top: 25%; left: 8%;
    background:
        radial-gradient(circle at 35% 30%, rgba(255,255,255,0.7) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(94, 140, 97, 0.3) 0%, rgba(94, 140, 97, 0.1) 50%, rgba(46, 33, 24, 0.15) 100%),
        radial-gradient(circle at 40% 75%, rgba(255,255,255,0.2) 0%, transparent 30%);
    animation: sphere-breathe 7s ease-in-out infinite;
}

.sphere-s2 {
    width: 120px; height: 120px;
    top: 40%; left: 82%;
    background:
        radial-gradient(circle at 35% 30%, rgba(255,255,255,0.65) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(196, 145, 72, 0.25) 0%, rgba(196, 145, 72, 0.1) 50%, rgba(46, 33, 24, 0.12) 100%),
        radial-gradient(circle at 40% 75%, rgba(255,255,255,0.18) 0%, transparent 30%);
    animation: sphere-breathe 8s ease-in-out infinite;
    animation-delay: -2s;
}

.sphere-s3 {
    width: 60px; height: 60px;
    top: 60%; left: 15%;
    background:
        radial-gradient(circle at 35% 30%, rgba(255,255,255,0.6) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(240, 199, 94, 0.2) 0%, rgba(240, 199, 94, 0.08) 50%, rgba(46, 33, 24, 0.1) 100%),
        radial-gradient(circle at 40% 75%, rgba(255,255,255,0.15) 0%, transparent 30%);
    animation: sphere-breathe 6s ease-in-out infinite;
    animation-delay: -4s;
}

.sphere-s4 {
    width: 100px; height: 100px;
    top: 75%; left: 70%;
    background:
        radial-gradient(circle at 35% 30%, rgba(255,255,255,0.7) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(94, 140, 97, 0.25) 0%, rgba(94, 140, 97, 0.08) 50%, rgba(46, 33, 24, 0.12) 100%),
        radial-gradient(circle at 40% 75%, rgba(255,255,255,0.2) 0%, transparent 30%);
    animation: sphere-breathe 9s ease-in-out infinite;
    animation-delay: -1s;
}

.sphere-s5 {
    width: 70px; height: 70px;
    top: 50%; left: 45%;
    background:
        radial-gradient(circle at 35% 30%, rgba(255,255,255,0.6) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(196, 145, 72, 0.2) 0%, rgba(196, 145, 72, 0.08) 50%, rgba(46, 33, 24, 0.1) 100%),
        radial-gradient(circle at 40% 75%, rgba(255,255,255,0.15) 0%, transparent 30%);
    animation: sphere-breathe 7.5s ease-in-out infinite;
    animation-delay: -3s;
}

.sphere-s6 {
    width: 150px; height: 150px;
    top: 85%; left: 30%;
    background:
        radial-gradient(circle at 35% 30%, rgba(255,255,255,0.65) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(94, 140, 97, 0.22) 0%, rgba(94, 140, 97, 0.08) 50%, rgba(46, 33, 24, 0.12) 100%),
        radial-gradient(circle at 40% 75%, rgba(255,255,255,0.18) 0%, transparent 30%);
    animation: sphere-breathe 10s ease-in-out infinite;
    animation-delay: -5s;
}

.sphere-s7 {
    width: 50px; height: 50px;
    top: 15%; left: 55%;
    background:
        radial-gradient(circle at 35% 30%, rgba(255,255,255,0.7) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(240, 199, 94, 0.25) 0%, rgba(240, 199, 94, 0.1) 50%, rgba(46, 33, 24, 0.15) 100%),
        radial-gradient(circle at 40% 75%, rgba(255,255,255,0.2) 0%, transparent 30%);
    animation: sphere-breathe 6.5s ease-in-out infinite;
    animation-delay: -7s;
}

.sphere-s8 {
    width: 200px; height: 200px;
    top: 35%; left: 5%;
    background:
        radial-gradient(circle at 35% 30%, rgba(255,255,255,0.5) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(196, 145, 72, 0.15) 0%, rgba(196, 145, 72, 0.05) 50%, rgba(46, 33, 24, 0.08) 100%),
        radial-gradient(circle at 40% 75%, rgba(255,255,255,0.12) 0%, transparent 30%);
    animation: sphere-breathe 11s ease-in-out infinite;
    animation-delay: -9s;
}

@keyframes sphere-breathe {
    0%, 100% { transform: scale(1) translate(0, 0); opacity: 0.6; }
    50% { transform: scale(1.04) translate(5px, -3px); opacity: 0.8; }
}

/* --- Aqua Reflections --- */
#aqua-reflections {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
}

.aqua-band {
    position: absolute;
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
}

.aqua-1 { top: -6px; animation: aqua-drift 30s linear infinite; }
.aqua-2 { top: -6px; animation: aqua-drift 40s linear infinite; animation-delay: -12s; }
.aqua-3 { top: -6px; animation: aqua-drift 35s linear infinite; animation-delay: -22s; }

@keyframes aqua-drift {
    0% { transform: translateY(0); }
    100% { transform: translateY(calc(100vh + 6px)); }
}

/* --- Data Streams (Rising dots) --- */
#data-streams {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.data-stream {
    position: absolute;
    width: 4px;
    height: 100%;
    bottom: 0;
}

.data-stream::before,
.data-stream::after {
    content: '';
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--color-carbon-glow);
    opacity: 0.25;
}

.stream-1 { left: 12%; }
.stream-1::before { animation: dot-rise 8s linear infinite; }
.stream-1::after { animation: dot-rise 8s linear infinite; animation-delay: -4s; }

.stream-2 { left: 28%; }
.stream-2::before { animation: dot-rise 10s linear infinite; animation-delay: -2s; }
.stream-2::after { animation: dot-rise 10s linear infinite; animation-delay: -7s; }

.stream-3 { left: 52%; }
.stream-3::before { animation: dot-rise 7s linear infinite; animation-delay: -1s; }
.stream-3::after { animation: dot-rise 7s linear infinite; animation-delay: -5s; }

.stream-4 { left: 73%; }
.stream-4::before { animation: dot-rise 9s linear infinite; animation-delay: -3s; }
.stream-4::after { animation: dot-rise 9s linear infinite; animation-delay: -6s; }

.stream-5 { left: 90%; }
.stream-5::before { animation: dot-rise 11s linear infinite; }
.stream-5::after { animation: dot-rise 11s linear infinite; animation-delay: -5.5s; }

@keyframes dot-rise {
    0% { bottom: -10px; opacity: 0; }
    10% { opacity: 0.25; }
    90% { opacity: 0.25; }
    100% { bottom: 100%; opacity: 0; }
}

/* --- Scene Base --- */
.scene {
    position: relative;
    z-index: 5;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- SCENE 1: Hero --- */
.scene-hero {
    flex-direction: column;
    padding: 0;
}

.hero-sphere {
    position: relative;
    width: clamp(280px, 50vw, 550px);
    height: clamp(280px, 50vw, 550px);
    border-radius: 50%;
    background:
        radial-gradient(circle at 40% 35%, rgba(255,255,255,0.4) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(245, 237, 224, 0.7) 0%, rgba(232, 213, 180, 0.4) 60%, rgba(212, 196, 160, 0.2) 100%);
    backdrop-filter: blur(30px) saturate(1.3);
    -webkit-backdrop-filter: blur(30px) saturate(1.3);
    box-shadow:
        0 20px 80px rgba(196, 145, 72, 0.15),
        inset 0 -20px 60px rgba(196, 145, 72, 0.08),
        inset 0 2px 0 rgba(255, 255, 255, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: hero-breathe 6s ease-in-out infinite;
}

.hero-sphere::after {
    content: '';
    position: absolute;
    bottom: 18%;
    left: 20%;
    width: 40%;
    height: 15%;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(255,255,255,0.25) 0%, transparent 70%);
}

@keyframes hero-breathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

.hero-sphere-inner {
    text-align: center;
    padding: 40px;
}

.hero-title {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 700;
    font-size: clamp(2.8rem, 7vw + 0.5rem, 7rem);
    letter-spacing: 0.03em;
    line-height: 1.05;
    color: var(--color-deep-loam);
}

.hero-title-line {
    display: block;
}

.hero-title-accent {
    color: var(--color-amber-resin);
    font-weight: 300;
}

.hero-tagline {
    font-family: 'Exo 2', sans-serif;
    font-weight: 500;
    font-size: clamp(0.7rem, 0.9vw, 0.95rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-warm-umber);
    margin-top: 16px;
}

.scroll-indicator {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    animation: scroll-pulse 2s ease-in-out infinite;
}

@keyframes scroll-pulse {
    0%, 100% { opacity: 0.4; transform: translateX(-50%) translateY(0); }
    50% { opacity: 1; transform: translateX(-50%) translateY(8px); }
}

/* --- Wave Dividers --- */
.wave-divider {
    position: relative;
    z-index: 5;
    margin-top: -2px;
    line-height: 0;
}

.wave-divider svg {
    display: block;
    width: 100%;
    height: 80px;
}

/* --- Frosted Card --- */
.frosted-card {
    position: relative;
    background: var(--color-frosted-cream);
    backdrop-filter: blur(20px) saturate(1.2);
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
    border-radius: 24px;
    padding: 32px;
    box-shadow: 0 8px 40px rgba(196, 145, 72, 0.1);
    transition: box-shadow 0.4s var(--ease-frutiger);
    overflow: hidden;
}

.frosted-card:hover {
    box-shadow:
        0 12px 50px rgba(196, 145, 72, 0.18),
        inset 0 0 60px rgba(196, 145, 72, 0.04);
}

.frosted-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 24px;
    pointer-events: none;
    background: radial-gradient(circle at center, rgba(196, 145, 72, 0.12) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.4s var(--ease-frutiger);
}

.frosted-card:hover::before {
    opacity: 1;
}

/* --- HUD Corner Brackets --- */
.hud-corners {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

.hud-corners::before,
.hud-corners::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border: 1px solid rgba(212, 168, 67, 0.4);
}

.hud-corners::before {
    top: 12px;
    left: 12px;
    border-right: none;
    border-bottom: none;
}

.hud-corners::after {
    bottom: 12px;
    right: 12px;
    border-left: none;
    border-top: none;
}

/* Extra corners via card pseudo-elements would conflict, using JS-added elements instead */

/* --- Scanning Line --- */
.scanning-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--color-carbon-glow), transparent);
    opacity: 0;
    pointer-events: none;
    z-index: 10;
}

.scanning-line.active {
    animation: scan-sweep 3s var(--ease-frutiger) forwards;
}

@keyframes scan-sweep {
    0% { top: 0; opacity: 0; }
    10% { opacity: 0.6; }
    90% { opacity: 0.6; }
    100% { top: 100%; opacity: 0; }
}

/* --- Card Text Styles --- */
.card-label {
    font-family: 'Exo 2', sans-serif;
    font-weight: 500;
    font-size: clamp(0.7rem, 0.9vw, 0.95rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-carbon-glow);
    display: block;
    margin-bottom: 8px;
}

.card-title {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 700;
    font-size: clamp(1.8rem, 4vw + 0.3rem, 3.5rem);
    letter-spacing: 0.03em;
    color: var(--color-deep-loam);
    margin-bottom: 16px;
    line-height: 1.15;
}

.card-body {
    font-family: 'Nunito', sans-serif;
    font-weight: 400;
    font-size: clamp(1rem, 1.1vw + 0.3rem, 1.2rem);
    line-height: 1.72;
    color: var(--color-warm-umber);
}

/* --- SCENE 2: Measurement --- */
.scene-measurement {
    padding: 80px 5%;
    flex-direction: column;
    align-items: flex-start;
    background: linear-gradient(180deg, transparent 0%, rgba(232, 213, 180, 0.3) 100%);
}

.scene-content.flow-left {
    display: flex;
    flex-direction: column;
    gap: 32px;
    max-width: 600px;
    margin-left: 5%;
}

.lens-flare-bloom {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.bloom-measurement {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(240, 199, 94, 0.2) 0%, rgba(196, 145, 72, 0.08) 40%, transparent 70%);
    top: 30%;
    right: 10%;
    animation: bloom-pulse 4s ease-in-out infinite;
}

@keyframes bloom-pulse {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.08); opacity: 0.9; }
}

/* --- Animation Classes --- */
.card-anim {
    opacity: 0;
    transition: opacity 0.8s var(--ease-frutiger), transform 0.8s var(--ease-frutiger);
    transition-delay: var(--anim-delay, 0s);
}

.card-anim[data-anim="slide-right"] {
    transform: translateX(-60px);
}

.card-anim[data-anim="slide-left"] {
    transform: translateX(60px);
}

.card-anim[data-anim="scale-in"] {
    transform: scale(0.9);
}

.card-anim.visible {
    opacity: 1;
    transform: translateX(0) scale(1);
}

/* --- SCENE 3: Exchange --- */
.scene-exchange {
    padding: 80px 5%;
    background: linear-gradient(180deg, rgba(212, 196, 160, 0.3) 0%, rgba(232, 213, 180, 0.4) 100%);
    flex-direction: column;
}

.exchange-streams {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    width: 100%;
    max-width: 1200px;
    flex-wrap: wrap;
}

.stream-left, .stream-right {
    display: flex;
    flex-direction: column;
    gap: 24px;
    flex: 0 0 auto;
}

.exchange-center {
    flex: 1;
    min-width: 300px;
    max-width: 500px;
}

.exchange-main-card .card-title {
    font-size: clamp(1.6rem, 3vw + 0.3rem, 2.8rem);
}

/* --- Droplet Cards --- */
.droplet-card {
    position: relative;
    background: var(--color-frosted-cream);
    backdrop-filter: blur(20px) saturate(1.2);
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
    border-radius: 47% 53% 49% 51% / 52% 48% 53% 47%;
    width: 180px;
    height: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 30px rgba(196, 145, 72, 0.12);
    text-align: center;
    padding: 20px;
}

.data-value {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 700;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    color: var(--color-amber-resin);
    line-height: 1.1;
}

.data-label {
    font-family: 'Exo 2', sans-serif;
    font-weight: 500;
    font-size: clamp(0.65rem, 0.8vw, 0.85rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-warm-umber);
    margin-top: 8px;
}

/* --- Radial Target Circles --- */
.radial-target {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200%;
    height: 200%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.radial-target::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 130%;
    height: 130%;
    transform: translate(-50%, -50%);
    border: 1px dashed rgba(212, 168, 67, 0.25);
    border-radius: 50%;
    animation: target-rotate 60s linear infinite;
}

.radial-target::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 160%;
    height: 160%;
    transform: translate(-50%, -50%);
    border: 1px dashed rgba(212, 168, 67, 0.15);
    border-radius: 50%;
    animation: target-rotate 60s linear infinite reverse;
}

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

/* --- Hex Lattice Background --- */
.hex-lattice {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    opacity: 0.6;
}

/* --- SCENE 4: Impact --- */
.scene-impact {
    padding: 120px 5%;
    flex-direction: column;
    background: linear-gradient(180deg, rgba(232, 213, 180, 0.4) 0%, rgba(245, 237, 224, 0.3) 100%);
}

.impact-radial {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 32px;
    max-width: 1100px;
    width: 100%;
}

.impact-card {
    grid-column: 1 / -1;
    text-align: center;
}

.impact-card .card-title {
    font-size: clamp(1.8rem, 4vw + 0.3rem, 3rem);
}

.impact-satellite .frosted-card {
    padding: 24px;
}

.impact-satellite .card-label {
    color: var(--color-jade-canopy);
}

.sat-3 {
    grid-column: 1 / -1;
    max-width: 500px;
    justify-self: center;
}

/* --- Leaf Vein Background --- */
.leaf-vein-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
}

/* --- SCENE 5: Convergence (Footer) --- */
.scene-convergence {
    min-height: 80vh;
    padding: 80px 5%;
    background: var(--color-warm-ivory);
}

.convergence-focal {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.convergence-glow {
    position: absolute;
    width: clamp(400px, 60vw, 800px);
    height: clamp(400px, 60vw, 800px);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212, 168, 67, 0.2) 0%, rgba(196, 145, 72, 0.08) 40%, transparent 70%);
    pointer-events: none;
    animation: convergence-pulse 6s ease-in-out infinite;
}

@keyframes convergence-pulse {
    0%, 100% { transform: scale(1); opacity: 0.7; }
    50% { transform: scale(1.05); opacity: 1; }
}

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

.convergence-title {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 700;
    font-size: clamp(2rem, 5vw, 4rem);
    letter-spacing: 0.03em;
    color: var(--color-deep-loam);
    margin-bottom: 12px;
}

.convergence-subtitle {
    font-family: 'Nunito', sans-serif;
    font-weight: 400;
    font-size: clamp(1rem, 1.5vw, 1.3rem);
    color: var(--color-warm-umber);
    margin-bottom: 32px;
}

.convergence-links {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

/* --- Glossy Pill Buttons --- */
.glossy-pill {
    display: inline-block;
    font-family: 'Exo 2', sans-serif;
    font-weight: 500;
    font-size: clamp(0.75rem, 0.9vw, 0.9rem);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--color-deep-loam);
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.5) 0%,
        rgba(255, 255, 255, 0.1) 50%,
        rgba(196, 145, 72, 0.12) 100%
    );
    border: 1px solid rgba(196, 145, 72, 0.25);
    border-top-color: rgba(255, 255, 255, 0.5);
    border-radius: 50px;
    padding: 10px 24px;
    box-shadow:
        0 4px 15px rgba(196, 145, 72, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
    transition: all 0.3s var(--ease-frutiger);
    cursor: pointer;
}

.glossy-pill:hover {
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.65) 0%,
        rgba(255, 255, 255, 0.2) 50%,
        rgba(196, 145, 72, 0.2) 100%
    );
    box-shadow:
        0 6px 25px rgba(196, 145, 72, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
    transform: translateY(-2px);
}

.convergence-kanji {
    font-family: 'Josefin Sans', serif;
    font-size: clamp(3rem, 8vw, 8rem);
    color: rgba(196, 145, 72, 0.12);
    letter-spacing: 0.1em;
    user-select: none;
    line-height: 1;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .exchange-streams {
        flex-direction: column;
        gap: 24px;
    }

    .stream-left, .stream-right {
        flex-direction: row;
        gap: 16px;
        justify-content: center;
    }

    .droplet-card {
        width: 140px;
        height: 140px;
    }

    .impact-radial {
        grid-template-columns: 1fr;
    }

    .sat-3 {
        grid-column: 1;
    }

    .scene-content.flow-left {
        margin-left: 0;
    }

    #nav-pill {
        top: 12px;
        left: 12px;
    }
}

@media (max-width: 480px) {
    .hero-sphere {
        width: 260px;
        height: 260px;
    }

    .hero-sphere-inner {
        padding: 20px;
    }

    .stream-left, .stream-right {
        flex-direction: column;
        align-items: center;
    }
}