/* === sora.markets - Global Exchange Design === */

:root {
    --deep-ocean: #0B1D33;
    --continental-shelf: #162D4A;
    --current-blue: #2A5F8F;
    --signal-blue: #5BA3D9;
    --trade-gold: #FFD166;
    --compass-rose: #D4E4F1;
    --parchment: #F0E6D3;
    --decline-red: #E8746A;
    --latitude-line: #1E3A5C;
    --map-stroke: #2A4A6B;
    --panel-bg: rgba(15, 30, 55, 0.7);
    --panel-border: rgba(61, 122, 181, 0.3); /* #3D7AB5 at 0.3 opacity */
    --ticker-bg: rgba(11, 29, 51, 0.85);
}

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

html {
    scroll-behavior: smooth;
}

body {
    background: var(--deep-ocean);
    color: var(--parchment);
    font-family: 'Source Sans 3', sans-serif;
    font-weight: 400;
    font-size: clamp(0.95rem, 1.8vw, 1.1rem);
    line-height: 1.65;
    letter-spacing: 0.01em;
    overflow-x: hidden;
}

/* === TICKER STRIPS === */

.ticker {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 100;
    background: var(--ticker-bg);
    overflow: hidden;
    white-space: nowrap;
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 400;
    font-size: clamp(0.8rem, 1.4vw, 0.95rem);
    font-variant-numeric: tabular-nums;
}

.ticker-top {
    top: 0;
    border-bottom: 1px solid var(--current-blue);
    height: 36px;
    line-height: 36px;
}

.ticker-bottom {
    bottom: 0;
    border-top: 1px solid var(--current-blue);
    height: 32px;
    line-height: 32px;
}

.ticker-track {
    display: inline-block;
    white-space: nowrap;
}

.ticker-track-top {
    animation: ticker-scroll-top 60s linear infinite;
}

.ticker-track-bottom {
    animation: ticker-scroll-bottom 96s linear infinite;
}

@keyframes ticker-scroll-top {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@keyframes ticker-scroll-bottom {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.ticker-item {
    display: inline-block;
    padding: 0 24px;
    color: var(--compass-rose);
}

.ticker-value {
    color: var(--signal-blue);
    margin: 0 6px;
}

.ticker-positive {
    color: var(--signal-blue);
}

.ticker-negative {
    color: var(--decline-red);
}

/* === WORLD CANVAS === */

#world-canvas {
    position: relative;
    width: 100%;
    min-height: 560vh;
}

/* === GRID SVG === */

#grid-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.grid-line {
    stroke: var(--latitude-line);
    stroke-width: 0.5px;
    opacity: 0.15;
}

.grid-line.heavy {
    stroke-width: 0.8px;
    opacity: 0.2;
}

/* === WORLD MAP SVG === */

#world-map {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.continent {
    fill: none;
    stroke: var(--map-stroke);
    stroke-width: 1.2px;
    opacity: 0.15;
}

.map-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 300;
    font-size: 14px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    fill: var(--compass-rose);
    opacity: 0.15;
    text-anchor: middle;
}

/* === TRADE ROUTE === */

.trade-route {
    fill: none;
    stroke: var(--signal-blue);
    stroke-width: 1.5px;
    stroke-dasharray: 8 4;
    stroke-linecap: round;
    opacity: 0.7;
}

.trade-route-branch {
    fill: none;
    stroke: var(--signal-blue);
    stroke-width: 1px;
    stroke-dasharray: 6 4;
    stroke-linecap: round;
    opacity: 0.4;
}

#progress-dot {
    fill: var(--trade-gold);
    opacity: 0.9;
}

/* === PORT MARKERS === */

.port-dot {
    fill: var(--signal-blue);
    opacity: 0.8;
}

.port-glow {
    fill: var(--signal-blue);
    opacity: 0;
    animation: port-pulse 4s ease-in-out infinite;
}

@keyframes port-pulse {
    0%, 100% { opacity: 0; r: 12; }
    50% { opacity: 0.25; r: 16; }
}

.port-marker:nth-child(2) .port-glow { animation-delay: 0.8s; }
.port-marker:nth-child(3) .port-glow { animation-delay: 1.6s; }
.port-marker:nth-child(4) .port-glow { animation-delay: 2.4s; }
.port-marker:nth-child(5) .port-glow { animation-delay: 3.2s; }

/* === CURRENCY GLYPHS === */

.currency-glyphs {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    pointer-events: none;
    overflow: hidden;
}

.currency-glyph {
    position: absolute;
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    color: var(--compass-rose);
    opacity: 0.06;
    user-select: none;
}

.glyph-1 {
    font-size: 280px;
    top: 15%;
    left: 8%;
    animation: glyph-drift 20s ease-in-out infinite, glyph-rotate 64s linear infinite;
}

.glyph-2 {
    font-size: 200px;
    top: 35%;
    left: 55%;
    opacity: 0.08;
    animation: glyph-drift 24s ease-in-out infinite reverse, glyph-rotate 80s linear infinite reverse;
}

.glyph-3 {
    font-size: 240px;
    top: 55%;
    left: 75%;
    animation: glyph-drift 18s ease-in-out infinite, glyph-rotate 72s linear infinite;
}

.glyph-4 {
    font-size: 160px;
    top: 72%;
    left: 20%;
    opacity: 0.07;
    animation: glyph-drift 22s ease-in-out infinite reverse, glyph-rotate 88s linear infinite;
}

.glyph-5 {
    font-size: 300px;
    top: 10%;
    left: 70%;
    opacity: 0.05;
    animation: glyph-drift 26s ease-in-out infinite, glyph-rotate 96s linear infinite reverse;
}

.glyph-6 {
    font-size: 180px;
    top: 85%;
    left: 45%;
    opacity: 0.06;
    animation: glyph-drift 20s ease-in-out infinite reverse, glyph-rotate 60s linear infinite;
}

@keyframes glyph-drift {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(5px); }
}

@keyframes glyph-rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* === COMPASS ROSE === */

#compass-rose {
    position: fixed;
    bottom: 60px;
    left: 30px;
    width: 160px;
    height: 160px;
    z-index: 50;
    opacity: 0.12;
    animation: compass-spin 120s linear infinite;
    pointer-events: none;
}

.compass-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 300;
    font-size: 10px;
    letter-spacing: 0.18em;
    fill: var(--current-blue);
    text-anchor: middle;
    opacity: 0.6;
}

@keyframes compass-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* === CHAPTERS === */

.chapter {
    position: relative;
    z-index: 10;
}

/* === CHAPTER 1: PORT OF ORIGIN === */

#chapter-1 {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 36px;
}

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

.hero-title {
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: clamp(2rem, 6vw, 3.8rem);
    letter-spacing: -0.02em;
    color: var(--compass-rose);
    margin-bottom: 16px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1),
                transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.hero-subtitle {
    font-family: 'Source Sans 3', sans-serif;
    font-weight: 400;
    font-size: clamp(1rem, 2.2vw, 1.3rem);
    color: var(--parchment);
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.3s,
                transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;
}

.hero-subtitle.visible {
    opacity: 0.8;
    transform: translateY(0);
}

.origin-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--trade-gold);
    margin: 32px auto 0;
    box-shadow: 0 0 20px var(--trade-gold), 0 0 40px rgba(255, 209, 102, 0.3);
    opacity: 0;
    transition: opacity 1.5s cubic-bezier(0.16, 1, 0.3, 1) 0.6s;
}

.origin-dot.visible {
    opacity: 1;
    animation: origin-pulse 3s ease-in-out infinite;
}

@keyframes origin-pulse {
    0%, 100% { box-shadow: 0 0 20px var(--trade-gold), 0 0 40px rgba(255, 209, 102, 0.3); }
    50% { box-shadow: 0 0 30px var(--trade-gold), 0 0 60px rgba(255, 209, 102, 0.4); }
}

/* === BREATHING SECTIONS === */

.breathing-section {
    min-height: 60vh;
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.longitude-marker {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 300;
    font-size: clamp(0.6rem, 1vw, 0.75rem);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--compass-rose);
    opacity: 0.25;
}

/* === CONTENT PANELS === */

.content-panel {
    position: relative;
    max-width: 900px;
    margin: 40px auto;
    border-radius: 4px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.content-panel[data-reveal="left"] {
    transform: perspective(1200px) rotateY(-2deg) translateX(-40px);
}

.content-panel[data-reveal="right"] {
    transform: perspective(1200px) rotateY(2deg) translateX(40px);
}

.content-panel[data-reveal="up"] {
    transform: translateY(40px);
}

.content-panel[data-reveal="center"] {
    transform: scale(0.95);
}

.content-panel.visible {
    opacity: 1;
}

.content-panel.visible[data-reveal="left"],
.content-panel.visible[data-reveal="right"] {
    transform: perspective(1200px) rotateY(0deg) translateX(0);
}

.content-panel.visible[data-reveal="up"] {
    transform: translateY(0);
}

.content-panel.visible[data-reveal="center"] {
    transform: scale(1);
}

.panel-inner {
    display: grid;
    grid-template-columns: 8fr 4fr;
    gap: 24px;
    padding: 40px;
}

.panel-inner > * {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.content-panel.visible .panel-inner > *:nth-child(1) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.15s;
}

.content-panel.visible .panel-inner > *:nth-child(2) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.3s;
}

.panel-headline {
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: clamp(1.4rem, 3.5vw, 2.2rem);
    letter-spacing: -0.02em;
    color: var(--compass-rose);
    margin-bottom: 16px;
}

.panel-body {
    color: var(--parchment);
    margin-bottom: 16px;
    line-height: 1.65;
}

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

/* === PANEL DATA === */

.panel-data {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-left: 24px;
    border-left: 1px solid var(--panel-border);
}

.data-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.data-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 300;
    font-size: clamp(0.6rem, 1vw, 0.75rem);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--compass-rose);
    opacity: 0.5;
}

.data-value {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 400;
    font-size: clamp(0.9rem, 1.6vw, 1.1rem);
    font-variant-numeric: tabular-nums;
}

.data-value.positive {
    color: var(--signal-blue);
}

.data-value.negative {
    color: var(--decline-red);
}

.data-value.highlight {
    color: var(--trade-gold);
}

/* === PANEL POSITIONS === */

.panel-left {
    margin-left: 5%;
    margin-right: auto;
}

.panel-right {
    margin-left: auto;
    margin-right: 5%;
}

.panel-center {
    margin-left: auto;
    margin-right: auto;
    max-width: 800px;
    margin-top: 80px;
}

.panel-depth-back {
    z-index: 10;
}

.panel-depth-front {
    z-index: 12;
}

/* === CHAPTER 2 === */

#chapter-2 {
    min-height: 120vh;
    display: flex;
    align-items: center;
    padding: 80px 20px;
    padding-top: 36px;
}

/* === CHAPTER 3: THE CROSSING === */

#chapter-3 {
    min-height: 120vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 60px;
}

.crossing-data {
    text-align: center;
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 1.5s cubic-bezier(0.16, 1, 0.3, 1),
                transform 1.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.crossing-data.visible {
    opacity: 0.3;
    transform: scale(1);
}

.crossing-value {
    display: block;
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: clamp(2.5rem, 7vw, 5rem);
    letter-spacing: -0.02em;
    color: var(--trade-gold);
    margin-bottom: 12px;
}

.crossing-label {
    display: block;
    font-family: 'Source Sans 3', sans-serif;
    font-weight: 400;
    font-size: clamp(0.9rem, 1.8vw, 1.1rem);
    color: var(--parchment);
    opacity: 0.6;
}

.crossing-marker-right {
    position: absolute;
    right: 10%;
    top: 50%;
}

/* === CHAPTER 4: EASTERN MARKETS === */

#chapter-4 {
    min-height: 140vh;
    padding: 80px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* === CHAPTER 5: GLOBAL CONVERGENCE === */

#chapter-5 {
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    padding-bottom: 60px;
}

.panel-convergence {
    max-width: 760px;
    text-align: center;
}

.panel-convergence .panel-inner {
    display: block;
    padding: 60px 48px;
}

.convergence-text {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.content-panel.visible .convergence-text {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.15s;
}

.convergence-statement {
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    font-size: clamp(1.1rem, 2.5vw, 1.5rem);
    line-height: 1.7;
    color: var(--compass-rose);
}

.gold-phrase {
    color: var(--trade-gold);
}

.final-destination {
    margin-top: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.destination-marker {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--trade-gold);
    box-shadow: 0 0 24px var(--trade-gold), 0 0 48px rgba(255, 209, 102, 0.4);
    animation: destination-pulse 3s ease-in-out infinite;
}

@keyframes destination-pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 24px var(--trade-gold), 0 0 48px rgba(255, 209, 102, 0.4); }
    50% { transform: scale(1.15); box-shadow: 0 0 32px var(--trade-gold), 0 0 64px rgba(255, 209, 102, 0.5); }
}

/* === TRADE ROUTE ANIMATION === */

.trade-route {
    stroke-dasharray: 8 4;
    animation: route-flow 3s linear infinite;
}

@keyframes route-flow {
    0% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -24; }
}

.trade-route-branch {
    animation: route-flow 4s linear infinite;
}

/* === RESPONSIVE === */

@media (max-width: 768px) {
    .panel-inner {
        grid-template-columns: 1fr;
        padding: 28px;
    }

    .panel-data {
        padding-left: 0;
        padding-top: 16px;
        border-left: none;
        border-top: 1px solid var(--panel-border);
        flex-direction: row;
        flex-wrap: wrap;
    }

    .data-block {
        flex: 1;
        min-width: 100px;
    }

    .panel-left,
    .panel-right {
        margin-left: 16px;
        margin-right: 16px;
    }

    .panel-center {
        margin-left: 16px;
        margin-right: 16px;
    }

    #compass-rose {
        width: 100px;
        height: 100px;
        bottom: 50px;
        left: 15px;
    }

    .panel-convergence .panel-inner {
        padding: 36px 28px;
    }
}

@media (max-width: 480px) {
    .ticker-top {
        height: 30px;
        line-height: 30px;
    }

    .ticker-bottom {
        height: 28px;
        line-height: 28px;
    }

    .ticker-item {
        padding: 0 16px;
    }

    .crossing-value {
        font-size: clamp(2rem, 10vw, 3.5rem);
    }
}