/* Explain: Styles for the interactive hero journey section with space and Earth visuals. */
/* ScrollTrigger supplies the pin spacer; the section itself stays in document flow. */
.journey { position: relative; min-height: 100svh; background: var(--background-color); }
.journey-viewport { position: relative; width: 100%; height: 100svh; overflow: hidden; isolation: isolate; }
.space-field, .globe-canvas, .journey-vignette, .market-label-layer,
.journey-exit-glow, .journey-exit-veil { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.space-field {
    z-index: 0;
    background:
        radial-gradient(ellipse at 18% 18%, color-mix(in srgb, var(--sun-glow-color) 7%, transparent), transparent 35%),
        radial-gradient(ellipse at 78% 35%, color-mix(in srgb, var(--nebula-violet) 35%, transparent), transparent 55%),
        var(--background-color);
}
.space-field::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.35;
    background-image:
        radial-gradient(1px 1px at 17% 23%, var(--star-color) 50%, transparent 100%),
        radial-gradient(1px 1px at 73% 68%, var(--star-color) 50%, transparent 100%),
        radial-gradient(1px 1px at 42% 47%, var(--star-color) 50%, transparent 100%);
    background-size: 283px 257px, 391px 317px, 463px 409px;
}
.globe-canvas { z-index: 2; opacity: 0; transition: opacity 1.4s ease; }
.journey.is-webgl .globe-canvas { opacity: 1; }
.journey.is-webgl .space-field::after { opacity: 0; }
.journey-vignette {
    z-index: 3;
    background: linear-gradient(to bottom, var(--header-scrim), transparent 23%, transparent 79%, var(--header-scrim));
}
.journey-copy {
    position: absolute;
    z-index: 4;
    top: 50%;
    left: 20px;
    right: 20px;
    transform: translateY(-50%);
    text-align: center;
    pointer-events: none;
}
.journey-copy-scrim {
    position: absolute;
    z-index: -1;
    inset: -70px -20px;
    background: radial-gradient(ellipse at center, var(--overlay-color) 0%, var(--header-scrim) 30%, transparent 72%);
}
.journey-eyebrow { color: var(--text-muted); font-size: 10px; font-weight: 500; letter-spacing: 0.25em; line-height: 1.7; text-transform: uppercase; }
.journey-headline {
    margin-top: 23px;
    color: var(--text-color);
    font-size: clamp(3.25rem, 7.2vw, 7.35rem);
    font-weight: 500;
    letter-spacing: -0.06em;
    line-height: 1.1;
}
.headline-line { display: block; padding-bottom: 0.08em; margin-bottom: -0.08em; will-change: transform, opacity; }
.headline-line:last-child { color: var(--accent-color); }
.scroll-cue {
    position: absolute;
    z-index: 5;
    bottom: max(24px, env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 13px;
    color: var(--text-muted);
    font-size: 9px;
    letter-spacing: 0.21em;
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
}
.scroll-line { position: relative; width: 1px; height: 32px; background: var(--border-color); overflow: hidden; }
.scroll-line::after { content: ""; position: absolute; inset: -100% 0 100%; background: var(--accent-color); animation: explore-line 3.4s ease-in-out infinite; }
@keyframes explore-line { 0% { transform: translateY(0); } 70%, 100% { transform: translateY(200%); } }
.market-label-layer { z-index: 5; }
.market-label {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    width: max-content;
    max-width: 170px;
    padding: 8px 11px;
    background: var(--header-scrim);
    border-radius: var(--radius-control);
    border-left: 1px solid var(--glow-color);
    will-change: transform, opacity;
}
.market-country { display: block; color: var(--text-color); font-size: 12px; line-height: 1.5; font-weight: 400; letter-spacing: 0.025em; }
.market-city { display: block; margin-top: 2px; color: var(--accent-color); font-size: 8px; line-height: 1.6; letter-spacing: 0.18em; text-transform: uppercase; }
.journey-exit-glow {
    z-index: 6;
    opacity: 0;
    background:
        radial-gradient(ellipse at 45% 48%, color-mix(in srgb, var(--atmosphere-color) 24%, transparent), transparent 68%),
        radial-gradient(ellipse at 65% 65%, var(--glow-color), transparent 70%);
}
.journey-exit-veil { z-index: 7; opacity: 0; background: var(--background-color); }
.earth-fallback {
    position: absolute;
    z-index: 1;
    width: min(88svh, 92vw);
    aspect-ratio: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: opacity 1.4s ease;
}
.journey.is-webgl .earth-fallback { opacity: 0; }
.earth-fallback::before { content: ""; position: absolute; inset: -0.5%; border-radius: 50%; box-shadow: 0 0 30px var(--ocean-color), 0 0 6px var(--atmosphere-color); pointer-events: none; }
.earth-fallback::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset -20px -15px 60px var(--background-color); pointer-events: none; }
.fallback-image { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; filter: saturate(0.6) brightness(0.7); }
.fallback-network, .fallback-label-layer { display: none; position: absolute; inset: 0; width: 100%; height: 100%; }
.fallback-network { z-index: 1; overflow: visible; }
.fallback-border { stroke: var(--accent-color); stroke-width: 1.6; fill: var(--accent-color); fill-opacity: 0.16; }
.fallback-route { fill: none; stroke: var(--accent-color); stroke-width: 1.3; opacity: 0.8; }
.fallback-dot { fill: var(--accent-color); }
.fallback-ring { stroke: var(--accent-color); stroke-width: 1; fill: none; opacity: 0.55; }
.fallback-label-layer { z-index: 2; }
.fallback-label { position: absolute; transform: translate(-50%, -125%); width: max-content; max-width: 145px; background: var(--header-scrim); padding: 5px 9px; border-radius: var(--radius-control); }
.fallback-label .market-country { font-size: 11px; }
.journey-native { min-height: 500svh; }
.journey-native .journey-viewport { position: sticky; top: 0; }
.journey-static { min-height: max(100svh, 760px); }
.journey-static .journey-viewport { position: relative; height: max(100svh, 760px); }
.journey-static .journey-copy { top: max(116px, 14%); transform: none; }
.journey-static .journey-headline { font-size: clamp(1.85rem, 4vw, 3.2rem); margin-top: 16px; }
.journey-static .journey-copy-scrim { inset: -30px -20px; }
.journey-static .scroll-cue, .journey-static .journey-exit-glow, .journey-static .journey-exit-veil { display: none; }
.journey-static .earth-fallback { width: min(60svh, 84vw, 560px); top: auto; bottom: 4%; transform: translateX(-50%); }
.journey-static .fallback-network, .journey-static .fallback-label-layer { display: block; }
.journey-followup {
    --paper-color: var(--background-color);
    --paper-ink: var(--text-color);
    --paper-muted: var(--text-muted);
    --paper-border: var(--border-color);
}
body.has-journey-motion .journey-followup { margin-top: -60svh; }
@media (max-width: 767px) {
    .journey-copy { left: 16px; right: 16px; }
    .journey-headline { font-size: clamp(2rem, 8.9vw, 4rem); line-height: 1.16; letter-spacing: -0.055em; }
    .journey-eyebrow { font-size: 8px; letter-spacing: 0.18em; }
    .journey-copy-scrim { inset: -55px -16px; }
    .market-label { padding: 6px 8px; max-width: 146px; }
    .market-country { font-size: 11px; }
    .market-city { font-size: 7px; }
    .journey-native { min-height: 350svh; }
    .journey-static, .journey-static .journey-viewport { min-height: max(100svh, 700px); height: auto; }
    .journey-static .journey-viewport { height: max(100svh, 700px); }
    .journey-static .journey-copy { top: 112px; }
    .journey-static .journey-headline { font-size: clamp(1.8rem, 7.6vw, 2.75rem); }
    .journey-static .earth-fallback { width: min(60svh, 84vw); bottom: 9%; }
    body.has-journey-motion .journey-followup { margin-top: -37.5svh; }
}
@media (max-height: 550px) and (min-width: 768px) {
    .journey-copy { top: 53%; }
    .journey-headline { font-size: clamp(2rem, 9svh, 3.4rem); margin-top: 12px; }
    .scroll-cue { bottom: 12px; gap: 7px; }
    .scroll-line { height: 20px; }
}
@media (prefers-reduced-motion: reduce) {
    .globe-canvas, .earth-fallback { transition: none; }
    .scroll-cue { display: none; }
    .headline-line, .market-label { will-change: auto; }
    body.has-journey-motion .journey-followup { margin-top: 0; }
}