/* Teaser website: the EXPLORE journey (world.js). Deep space black, sakura pink, white; wide heavy display type. */
@font-face { font-family: "Archivo X"; src: url("/fonts/archivo-x.woff2") format("woff2"); font-weight: 800; font-stretch: 125%; font-display: swap; }
:root {
  --pink: #FF5C93; --pink2: #FFB3CF; --gold: #FFD36E; --ink: #F6F7FB; --mut: #A9B1C7; --bg: #03040A;
  --disp: "Archivo X", "Arial Black", "Segoe UI", sans-serif; --mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: radial-gradient(1400px 900px at 50% 30%, #0b1330 0%, #050816 50%, #020308 100%) fixed var(--bg); font: 16px/1.55 "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
::selection { background: var(--pink); color: #fff; }

/* fixed layers */
#globe { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; transition: opacity .4s; }
#liteglobe { display: none; position: fixed; left: 0; top: 0; z-index: 0; pointer-events: none; border-radius: 50%; background: url("/world/earth.jpg") 0 50% / 200% 100% repeat-x;
  box-shadow: inset -28px -18px 60px rgba(0,0,20,.75), inset 10px 8px 30px rgba(255,255,255,.12), 0 0 60px 8px rgba(70,140,255,.55), 0 0 140px 30px rgba(70,140,255,.22); will-change: transform; }
body.lite #globe { display: none; } body.lite #liteglobe { display: block; } body.lite #labels { display: none; }
#labels { position: fixed; inset: 0; z-index: 2; pointer-events: none; }
.lbl { position: absolute; left: 0; top: 0; padding: 4px 10px 4px 9px; margin: -34px 0 0 10px; border-radius: 8px; background: rgba(6,10,24,.78); border: 1px solid rgba(255,255,255,.22); font: 600 .75rem/1.2 "Segoe UI", system-ui, sans-serif; white-space: nowrap; opacity: 0; backdrop-filter: blur(6px); transition: opacity .25s; }
.lbl::after { content: ""; position: absolute; left: -6px; bottom: -8px; width: 1px; height: 14px; background: rgba(255,255,255,.5); transform: rotate(-35deg); }
.lbl:first-child { background: rgba(255,92,147,.92); border-color: transparent; }
.lbl.home { background: rgba(255,211,110,.95); color: #1a1405; border-color: transparent; }
#burst { position: fixed; inset: -20%; z-index: 40; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 50%, #fff 0 12%, rgba(255,255,255,.96) 22%, rgba(255,238,246,.9) 40%, rgba(225,236,255,.85) 70%),
    repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,.0) 0deg 4deg, rgba(255,255,255,.55) 5deg 7deg);
  background-blend-mode: screen; transform: scale(calc(1.6 - var(--f, 0) * .6)) rotate(calc(var(--f, 0) * 12deg)); }
.grain { position: fixed; inset: 0; z-index: 45; pointer-events: none; opacity: .06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* top bar */
.top { position: fixed; z-index: 50; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px clamp(14px, 2.6vw, 32px); background: linear-gradient(180deg, rgba(3,4,10,.7), rgba(3,4,10,0)); }
.logo { display: flex; align-items: center; gap: 9px; text-decoration: none; }
.logo span { font: 800 .9rem/1 var(--disp); letter-spacing: .14em; }
.logo em { font: 600 .625rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--pink2); padding: 4px 7px; border: 1px solid rgba(255,179,207,.35); border-radius: 999px; }
.top-r { display: flex; align-items: center; gap: 8px; }
.pill { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 15px; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); color: var(--ink); text-decoration: none; font: 700 .8125rem/1 "Segoe UI", system-ui, sans-serif; backdrop-filter: blur(10px); cursor: pointer; white-space: nowrap; }
.pill.skip { background: linear-gradient(135deg, #FFE08A, #FFB547); color: #2a1a00; border: 0; }
.pill.lite[aria-pressed=true] { background: var(--ink); color: #111; }
.pill.from small { font: 600 .5625rem/1 var(--mono); letter-spacing: .14em; color: var(--mut); }
.pill.from select { background: transparent; color: var(--ink); border: 0; font: 700 .8125rem/1 "Segoe UI", system-ui, sans-serif; cursor: pointer; padding: 0; }
.pill.from option, .fromcard option { color: #111; }
.pill.cta { background: linear-gradient(135deg, #FF8FB8, #E8508A); border: 0; box-shadow: 0 8px 26px rgba(232,80,138,.4); }

/* rail */
.rail { position: fixed; z-index: 35; left: clamp(12px, 2vw, 28px); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 2px; opacity: 0; transition: opacity .5s; }
body.past-hero .rail { opacity: 1; }
.rail a { display: flex; gap: 12px; align-items: baseline; padding: 5px 0; text-decoration: none; color: rgba(255,255,255,.42); font-size: .8125rem; transition: color .3s; }
.rail a span { font: 600 .6875rem/1 var(--mono); }
.rail a b { font-weight: 600; max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; transition: max-width .4s, opacity .4s; }
.rail:hover a b, .rail a.on b { max-width: 160px; opacity: 1; }
.rail a.on { color: #fff; } .rail a.on span { color: var(--pink); }
body.in-photo .rail a { color: rgba(255,255,255,.7); text-shadow: 0 1px 6px rgba(0,0,0,.6); }

/* Sakura buddy */
.buddy { position: fixed; z-index: 36; right: clamp(12px, 2.4vw, 30px); bottom: clamp(12px, 3vh, 28px); display: flex; align-items: flex-end; gap: 8px; flex-direction: row-reverse; pointer-events: none; transition: opacity .4s, transform .4s; }
.buddy img { animation: float 3.2s ease-in-out infinite; filter: drop-shadow(0 8px 18px rgba(0,0,0,.5)); }
.buddy p { margin: 0 0 30px; max-width: 220px; padding: 10px 14px; border-radius: 16px 16px 4px 16px; background: #fff; color: #1B1F3B; font-weight: 800; font-size: .875rem; line-height: 1.3; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.buddy p.pop { animation: pop .45s cubic-bezier(.2,1.6,.4,1) both; }
body.in-photo .buddy { opacity: 0; transform: translateY(20px); }
@keyframes float { 50% { transform: translateY(-7px); } }
@keyframes pop { from { opacity: 0; transform: scale(.6) translateY(10px); transform-origin: right bottom; } }

/* hero */
main { position: relative; z-index: 10; }
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 90px 16px 40px; }
.kicker { margin: 0 0 18px; font: 600 .6875rem/1.4 var(--mono); letter-spacing: .32em; color: var(--pink2); }
.mark { margin: 0; display: flex; align-items: center; justify-content: center; font: 800 clamp(3.2rem, 15.5vw, 15rem)/1 var(--disp); font-stretch: 125%; letter-spacing: -.01em; white-space: nowrap; }
.mark span:not(.o) { background: linear-gradient(180deg, #ffffff 0%, #f1f3fb 38%, #9ea8c4 52%, #e9ecf8 70%, #ffffff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 12px 30px rgba(0,0,0,.55)); animation: rise 1.2s cubic-bezier(.16,1,.3,1) both; }
.mark span:last-child { animation-delay: .1s; }
.mark .o { display: inline-block; width: .74em; height: .74em; margin: 0 .03em; flex: none; }
@keyframes rise { from { opacity: 0; transform: translateY(.25em) scale(.96); filter: blur(10px); } }
.fromcard { display: flex; align-items: center; gap: 14px; margin-top: clamp(18px, 4vh, 40px); padding: 10px 10px 10px 20px; border-radius: 18px; background: rgba(8,12,28,.62); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(14px); animation: rise 1.2s .25s cubic-bezier(.16,1,.3,1) both; max-width: 100%; }
.fc-l, .fc-r { font: 600 .625rem/1 var(--mono); letter-spacing: .16em; color: var(--mut); white-space: nowrap; }
.fromcard select { background: transparent; border: 0; color: var(--ink); font: 800 1rem/1 "Segoe UI", system-ui, sans-serif; cursor: pointer; }
.fc-dots { width: 90px; height: 1px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.4) 0 4px, transparent 4px 9px); }
.fc-go { padding: 12px 18px; border-radius: 12px; background: linear-gradient(135deg, #FFE08A, #FFB547); color: #2a1a00; font: 800 .875rem/1 var(--disp); letter-spacing: .06em; text-decoration: none; }
.skiplink { margin-top: 16px; color: var(--mut); font-size: .8125rem; text-decoration: none; animation: rise 1.2s .4s both; } .skiplink:hover { color: #fff; }
.scrollhint { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); margin: 0; font: 600 .625rem/1 var(--mono); letter-spacing: .3em; color: var(--mut); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.scrollhint span { width: 1px; height: 38px; background: linear-gradient(180deg, transparent, #fff); animation: drip 1.8s ease-in-out infinite; }
@keyframes drip { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* chapters: tall section, sticky stage; everything is driven by --info / --photo / --q from world.js */
.ch { position: relative; height: 440vh; }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.info { position: absolute; left: 47vw; top: 50%; width: min(50vw, 680px); transform: translateY(-50%); opacity: var(--info, 0); pointer-events: none; }
.num { margin: 0 0 6px; font: 600 .75rem/1 var(--mono); letter-spacing: .24em; color: var(--mut); transform: translateX(calc((1 - var(--info, 0)) * 40px)); }
.num b { color: var(--pink); }
.country { margin: 0 0 22px; font: 800 clamp(2.6rem, 6.4vw, 6.6rem)/.95 var(--disp); font-stretch: 125%; letter-spacing: -.01em; white-space: nowrap; text-shadow: 0 10px 40px rgba(0,0,0,.6); }
.country span { display: inline-block; transform: translateX(calc((1 - var(--info, 0)) * (60px + var(--k) * 26px))); opacity: calc(var(--info, 0) * 1.4 - var(--k) * .04); }
.stats { display: flex; gap: clamp(16px, 2.6vw, 38px); margin: 0 0 22px; padding: 14px 0; border-top: 1px solid rgba(255,255,255,.14); border-bottom: 1px solid rgba(255,255,255,.14); }
.stats dt { font: 600 .625rem/1 var(--mono); letter-spacing: .18em; color: var(--mut); margin-bottom: 7px; }
.stats dd { margin: 0; font: 600 1rem/1.2 var(--mono); }
.spots { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 10px 34px; margin: 0; padding: 0; list-style: none; }
.spots li { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.spots li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 0 4px rgba(255,92,147,.2), 0 0 14px var(--pink); }
.spots li:first-child::before { background: #fff; }

.photo { position: absolute; inset: 0; z-index: 3; opacity: var(--photo, 0); pointer-events: none; overflow: hidden; background: #000; }
.ch.photo-on .photo { pointer-events: auto; }
.img { position: absolute; inset: -6%; background: var(--src) center / cover no-repeat; transform: scale(calc(1.32 - var(--q, 0) * .24 - var(--p, 0) * .06)); filter: blur(calc((1 - var(--q, 0)) * 16px)) saturate(calc(.8 + var(--q, 0) * .35)); will-change: transform, filter; }
.photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 52%, rgba(0,0,0,.82) 100%); pointer-events: none; }
.word { position: absolute; z-index: 2; left: 0; right: 0; top: 13vh; margin: 0; text-align: center; white-space: nowrap; font: 800 min(18vw, calc(90vw / var(--n)))/.86 var(--disp); font-stretch: 125%; letter-spacing: -.015em; color: #fff; text-shadow: 0 14px 50px rgba(0,0,0,.45); }
.word span { display: inline-block; transform: translateY(calc((1 - var(--q, 0)) * (60px + var(--k) * 22px))) scale(calc(.9 + var(--q, 0) * .1)); opacity: clamp(0, calc(var(--q, 0) * 2.2 - var(--k) * .12), 1); }
.story { position: absolute; z-index: 2; left: clamp(70px, 9vw, 140px); bottom: 9vh; max-width: min(520px, 46vw); opacity: var(--k2, 0); transform: translateY(calc((1 - var(--k2, 0)) * 26px)); }
.story p { margin: 0 0 10px; font-size: clamp(1rem, 1.35vw, 1.25rem); font-weight: 600; text-shadow: 0 2px 14px rgba(0,0,0,.8); }
.story .mono { font: 600 .75rem/1.4 var(--mono); letter-spacing: .12em; color: rgba(255,255,255,.75); text-transform: uppercase; }
.route { position: absolute; z-index: 2; right: clamp(16px, 4vw, 60px); bottom: 9vh; width: min(340px, 86vw); padding: 18px; border-radius: 20px; background: rgba(6,9,20,.6); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(18px) saturate(1.3); opacity: var(--k2, 0); transform: translateY(calc((1 - var(--k2, 0)) * 40px)); }
.rt-top { display: flex; align-items: center; gap: 12px; font: 800 1.6rem/1 var(--disp); letter-spacing: .04em; }
.rt-top i { flex: 1; position: relative; height: 1px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.5) 0 4px, transparent 4px 8px); font-style: normal; }
.rt-top i span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -54%); font-size: 1rem; color: var(--gold); }
.rt-names { display: flex; justify-content: space-between; margin: 6px 0 12px; color: var(--mut); font-size: .8125rem; }
.rt-fly { margin: 0 0 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.12); font: 500 .8125rem/1.4 var(--mono); color: rgba(255,255,255,.85); }
.rt-fly b { color: #fff; }
.route .btn { width: 100%; justify-content: center; }
.credit { position: absolute; z-index: 2; left: 50%; transform: translateX(-50%); bottom: 12px; color: rgba(255,255,255,.55); font-size: .6875rem; white-space: nowrap; }

.btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; border-radius: 999px; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.07); color: var(--ink); text-decoration: none; font: 700 .9375rem/1 "Segoe UI", system-ui, sans-serif; cursor: pointer; transition: transform .2s, box-shadow .2s; }
.btn:hover { transform: translateY(-2px); }
.btn.p { border: 0; background: linear-gradient(135deg, #FF8FB8, #E8508A); color: #fff; box-shadow: 0 10px 30px rgba(232,80,138,.45); }

/* phones */
@media (max-width: 760px) {
  .top { padding: 10px 12px; gap: 6px; } .logo span, .logo em, .pill.skip { display: none; }
  .pill { height: 34px; padding: 0 11px; font-size: .75rem; } .pill.from small { display: none; } .pill.from select { font-size: .75rem; max-width: 110px; }
  .rail { display: none; }
  .mark { font-size: 13.4vw; }
  .fromcard { flex-wrap: wrap; justify-content: center; gap: 8px 12px; padding: 12px 14px; } .fc-dots { display: none; } .fc-r { display: none; }
  .info { left: 50%; top: auto; bottom: 7vh; width: calc(100vw - 32px); transform: translateX(-50%); text-align: center; }
  .num { transform: none; }
  .country { font-size: min(10.5vw, 3.2rem); margin-bottom: 14px; }
  .stats { justify-content: center; gap: 14px; flex-wrap: wrap; } .stats dd { font-size: .8125rem; }
  .spots { grid-template-columns: repeat(2, max-content); justify-content: center; gap: 8px 20px; } .spots li { font-size: .875rem; }
  .word { top: 15vh; font-size: min(19vw, calc(90vw / var(--n))); }
  .story { left: 16px; right: 16px; bottom: auto; top: 34vh; max-width: none; text-align: center; }
  .route { left: 16px; right: 16px; width: auto; bottom: 5vh; }
  .credit { bottom: 6px; font-size: .625rem; }
  .buddy img { width: 50px; height: 50px; } .buddy p { font-size: .8125rem; max-width: 190px; margin-bottom: 22px; }
}
@media (prefers-reduced-motion: reduce) { .mark span, .fromcard, .skiplink, .buddy img, .scrollhint span { animation: none; } html { scroll-behavior: auto; } }