/* Explo landing page: styles for the interactive layer (interact.js). Loaded after styles.css.
   Same rules as the rest of the web page: Satoshi up to Medium 500, no pure white (cream #d8d8cb), subtle glows. */

/* ───────── nav: current section ───────── */
.links a.on { color: #d8d8cb; background: rgba(216, 216, 203, 0.1); }

/* ───────── hero: live counter + scroll fade ───────── */
.hero-copy { opacity: calc(1 - var(--p, 0) * 1.1); transform: translateY(calc(var(--p, 0) * -48px)); will-change: opacity, transform; }

/* The counter is a flat card: a dark-tinted pane over the globe with a hairline edge, a big cream number,
   and a ring that fills with the countries you have been to (solid) and want to go to (dim). */
.globe-stats { position: absolute; z-index: 2; left: 32px; bottom: 26px; width: 352px; padding: 22px 24px 20px; border-radius: 32px; pointer-events: none; text-align: left; isolation: isolate;
  background: rgba(6, 24, 46, 0.84);
  backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: inset 0 0 0 1px rgba(216, 216, 203, 0.12), 0 14px 30px -20px rgba(0, 0, 0, 0.6);
  opacity: 0; transform: translateY(10px) scale(0.98); transition: opacity .6s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.globe-stats.show { opacity: 1; transform: none; }
.gs-label { font-size: 12.5px; line-height: 1; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(216, 216, 203, 0.8); }
.gs-main { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 14px; }
.gs-count { position: relative; display: flex; align-items: baseline; gap: 9px; }
.gs-n { display: inline-block; min-width: 0.6em; font-size: 100px; line-height: 0.88; letter-spacing: -0.055em; font-variant-numeric: tabular-nums; transform-origin: 0 80%;
  background: linear-gradient(180deg, #f6f5ea 12%, #cfd0c2 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gs-n.bump { animation: gsBump .55s cubic-bezier(.2,.8,.2,1); }
.gs-of { font-size: 24px; letter-spacing: -0.02em; color: rgba(216, 216, 203, 0.66); font-variant-numeric: tabular-nums; }
.gs-delta { position: absolute; right: 0; top: 8px; padding: 2px 7px; border-radius: 99px; font-style: normal; font-size: 12px; line-height: 1.3; color: #d8d8cb; opacity: 0; pointer-events: none;
  background: rgba(216, 216, 203, 0.16); box-shadow: inset 0 0 0 1px rgba(216, 216, 203, 0.28); }
.gs-delta.go { animation: gsDelta 1.1s cubic-bezier(.2,.8,.2,1) both; }
.gs-ring { position: relative; flex: none; width: 88px; height: 88px; }
.gs-ring svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.gs-ring circle { fill: none; stroke-width: 6; stroke-linecap: round; }
.gs-track { stroke: rgba(216, 216, 203, 0.16); }
.gs-arc { stroke-dasharray: 0 100; transition: stroke-dasharray .7s cubic-bezier(.2,.8,.2,1), stroke-dashoffset .7s cubic-bezier(.2,.8,.2,1), opacity .3s ease; }
.gs-av { stroke: #f1f0e4; }
.gs-aw { stroke: #a4a597; opacity: 0.85; }
.gs-pc { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; line-height: 1; }
.gs-pc b { font-size: 24px; letter-spacing: -0.03em; color: #f1f0e4; font-variant-numeric: tabular-nums; }
.gs-pc small { margin: 3px 0 0 1px; font-size: 12px; color: rgba(216, 216, 203, 0.7); }
.gs-legend { display: flex; gap: 10px; margin-top: 20px; font-size: 14px; color: rgba(216, 216, 203, 0.8); }
.gs-legend span { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 10px; border-radius: 99px; white-space: nowrap;
  background: rgba(216, 216, 203, 0.08); box-shadow: inset 0 0 0 1px rgba(216, 216, 203, 0.1); }
.gs-legend b { color: #f1f0e4; font-size: 15px; font-variant-numeric: tabular-nums; }
.gs-legend i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.gs-legend i.w { background: #a4a597; }
.gs-legend i.r { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(216, 216, 203, 0.6); }
@keyframes gsBump { 0% { transform: scale(1); } 35% { transform: scale(1.12); filter: drop-shadow(0 0 14px rgba(216, 216, 203, 0.45)); } 100% { transform: scale(1); } }
@keyframes gsDelta { 0% { opacity: 0; transform: translateY(14px) scale(0.8); } 22% { opacity: 1; transform: translateY(0) scale(1); } 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(-22px) scale(1); } }
@media (prefers-reduced-transparency: reduce) { .globe-stats { backdrop-filter: none; -webkit-backdrop-filter: none; background: #051930; } }
.no-webgl .globe-stats { display: none; }
@media (max-width: 1020px) {
  .globe-stats { left: 50%; bottom: 76px; width: min(340px, calc(100% - 32px)); transform: translate(-50%, 8px); }
  .globe-stats.show { transform: translateX(-50%); }
}

/* ───────── tiles: a soft light that follows the cursor ───────── */
.tile::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s ease;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(216, 216, 203, 0.07), transparent 62%); }
@media (hover: hover) { .tile:hover::before { opacity: 1; } }

/* ───────── story phones lean toward the cursor ───────── */
.phone { transform: perspective(1300px) rotate(var(--tilt, 0deg)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.story:hover .phone { transform: perspective(1300px) rotate(0deg) translateY(-8px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.phone.live { transition: transform .18s ease-out; }

/* ───────── visa tile ───────── */
.pp { position: relative; display: inline-flex; align-items: center; gap: 12px; align-self: flex-start; margin-top: 18px; font-size: 14px; color: var(--muted); }
.pp select { appearance: none; -webkit-appearance: none; height: 38px; padding: 0 40px 0 16px; border-radius: 999px; border: 1px solid var(--border-2); background: var(--soft-2); color: var(--fg); font: inherit; font-size: 15px; cursor: pointer; transition: background-color .2s ease, border-color .2s ease; }
.pp select:hover { background: var(--soft); }
.pp svg { position: absolute; right: 14px; width: 14px; height: 14px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
/* Rows are plain lines: the chosen one is the dark one. No boxes, no chips. */
.t-visa .vrow { margin: 0; padding: 10px 0; cursor: pointer; }
.t-visa .vrow .n, .t-visa .vrow .v { transition: color .2s ease; }
.t-visa .vrow:hover .n, .t-visa .vrow:hover .v, .t-visa .vrow.sel .n, .t-visa .vrow.sel .v { color: var(--fg); }
.t-visa .vrow:focus-visible { outline-offset: 2px; border-radius: 8px; }
.t-visa .vrow .bar { height: 6px; }
.t-visa .vrow .bar i { transition: width .7s cubic-bezier(.2,.8,.2,1), opacity .3s ease; }
.t-visa .vrow:not(.sel) .bar i { opacity: calc(var(--o, 1) * 0.42); }
.t-visa .vrow.sel .bar i { opacity: 1; }
.t-visa .visa-big b { font-variant-numeric: tabular-nums; }

/* ───────── passport globe tile (webgl.js initVisaGlobe mounts the globe into .pg-stage) ─────────
   A night card: cream countries on navy, like the hero. interact.js keeps the caption and key in step with the visa tile. */
.tile.t-globe { color: var(--fg); border-color: rgba(216, 216, 203, 0.12);
  background: radial-gradient(95% 62% at 50% 46%, #092443 0%, #041428 46%, #030c19 80%, #010913 100%);
  box-shadow: inset 0 0 0 1px rgba(160, 200, 255, 0.06), var(--card-shadow); }
.t-globe .pg-cap b { color: var(--fg); font-weight: 500; }
/* the stars: webgl.js initPassportSky puts .pg-sky first in the tile, behind the text and the globe. Its canvases overhang the card
   by 24px on every side (room for the parallax shift) and the tile clips them. */
.tile.t-globe > .pg-sky { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.pg-sky canvas { position: absolute; left: -24px; top: -24px; width: calc(100% + 48px); height: calc(100% + 48px); will-change: transform; }
.pg-stage { flex: 1 1 auto; min-height: 400px; margin: 4px -28px 0; }
.pg-stage > .vglobe { position: absolute; inset: 0; pointer-events: none; }
.vglobe canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.vglobe-hit { position: absolute; left: 50%; top: 50%; height: 80%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: auto; cursor: grab; touch-action: pan-y; }
.vglobe-hit.dragging { cursor: grabbing; }
.pg-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 18px; font-size: 13px; color: var(--faint); }
.pg-key { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); }
.pg-key i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.pg-key i.home { background: #e8e8da; box-shadow: 0 0 0 3px rgba(216, 216, 203, 0.2); }
.pg-key i.on { margin-left: 12px; background: #bcbcaa; box-shadow: 0 0 0 1px rgba(216, 216, 203, 0.55); }
@media (max-width: 1020px) { .pg-stage { min-height: 500px; } }
@media (max-width: 760px) { .pg-stage { min-height: 360px; margin: 4px -22px 0; } }

@media (prefers-reduced-motion: reduce) {
  .hero-copy { opacity: 1; transform: none; }
  .globe-stats, .globe-stats.show { transform: none; }
}
@media (max-width: 1020px) and (prefers-reduced-motion: reduce) {
  .globe-stats, .globe-stats.show { transform: translateX(-50%); }
}