/* Jigwalk world homepage v2. Brand tokens come from /brand/jigwalk.css and the city skins; this file writes no colour,
   face or easing of its own. Two layouts from one markup:
   - html.fly: the flight. One fixed stage, every scene mounted in it at once, scroll is the camera (home.js).
   - otherwise (reduced motion, no JS): the same scenes as plain sections, top to bottom. Nothing pins, nothing flies. */

:root { --nav-h: 64px; --g: var(--jw-gutter); }
html { background: var(--jw-paper); scrollbar-color: var(--jw-ink-2) var(--jw-paper-2); }
body.jw { margin: 0; overflow-x: hidden; }
.jw h1, .jw h2, .jw h3, .jw p, .jw figure, .jw ul, .jw ol { margin: 0; }
.jw ul { padding: 0; list-style: none; }
.jw ::marker { content: none; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -80px; z-index: 100; padding: 12px 16px; border-radius: var(--jw-r-md); background: var(--jw-ink); color: var(--jw-paper); font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }
.credit { font-size: var(--jw-t-xs); line-height: 1.35; color: var(--city-ink-2); }

/* ---------------------------------------------------------------- nav: the brand bar, the piece tray and the sound pill */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 var(--g); padding-top: env(safe-area-inset-top); color: var(--jw-ink); transition: background-color var(--jw-d-move) var(--jw-ease-out), box-shadow var(--jw-d-move) var(--jw-ease-out); }
.nav.is-solid { background: color-mix(in oklch, var(--jw-paper) 94%, transparent); box-shadow: 0 1px 0 var(--jw-line); }
.nav-brand { display: inline-flex; align-items: center; min-height: 44px; flex: none; }
.nav-brand img { width: clamp(104px, 9vw, 132px); height: auto; }
.nav-end { display: flex; align-items: center; gap: 6px; }
.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: var(--jw-r-pill); font-weight: 700; font-size: var(--jw-t-sm); text-decoration: none; color: var(--jw-ink); }
.nav-links a.is-play { background: var(--jw-ink); color: var(--jw-paper); padding: 0 16px; }
@media (hover: hover) { .nav-links a:not(.is-play):hover { background: color-mix(in oklch, var(--jw-ink) 7%, transparent); } }

.tray, .sound { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; min-width: 44px; padding: 0 12px; border: 0; border-radius: var(--jw-r-pill);
  background: color-mix(in oklch, var(--jw-paper) 90%, transparent); color: var(--jw-ink); font: 700 var(--jw-t-sm)/1 var(--jw-text); cursor: pointer;
  box-shadow: inset 0 0 0 1.5px color-mix(in oklch, var(--jw-ink) 18%, transparent); -webkit-tap-highlight-color: transparent;
  transition: transform var(--jw-d-settle) var(--jw-spring-press), box-shadow var(--jw-d-ui) var(--jw-ease-out); }
.tray:active, .sound:active { transform: scale(0.96); transition-duration: var(--jw-d-press); transition-timing-function: var(--jw-ease-out); }
.tray-slots { display: inline-flex; align-items: center; gap: 3px; }
.slot { width: 22px; height: 22px; flex: none; overflow: visible; transition: transform var(--jw-d-snap) var(--jw-spring-snap); } /* the piece file is already at -8: loose as drawn */
.slot path { fill: transparent; stroke: var(--jw-ink); stroke-width: 6; stroke-linejoin: round; transition: fill var(--jw-d-ui) var(--jw-ease-out); }
.slot.is-found { transform: rotate(8deg); } /* placed: straight */
.slot.is-found path { fill: var(--jw-sun); }
.slot--city { width: 26px; height: 26px; margin-left: 4px; }
.slot--city path { stroke-dasharray: 9 7; stroke: var(--jw-ink-2); }
.slot--city.is-found path { stroke-dasharray: none; stroke: var(--jw-ink); }
.slot.is-pop { animation: slot-pop var(--jw-d-snap) var(--jw-spring-snap); }
@keyframes slot-pop { from { transform: translateY(-6px) scale(1.25); } to { transform: rotate(8deg); } }
.tray-n { display: none; font-variant-numeric: tabular-nums; }
.tray.is-done .slot--city path { stroke: var(--jw-ink); stroke-dasharray: 5 4; }
.sound svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sound svg path:first-child { fill: currentColor; }
.sound .sound-on { display: none; }
.sound[aria-pressed="true"] .sound-on { display: inline; }
.sound[aria-pressed="true"] .sound-off { display: none; }
.sound[aria-pressed="true"] { background: var(--jw-sun); box-shadow: none; }
@media (max-width: 719px) {
  .tray-slots .slot:not(:first-child) { display: none; }
  .tray-n { display: inline; }
  .sound-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .sound { padding: 0; justify-content: center; }
  .nav-links a { padding: 0 10px; }
  .nav-links a.is-play { padding: 0 14px; }
  .nav-end { gap: 4px; }
  .tray { padding: 0 10px 0 8px; gap: 6px; }
}
@media (max-width: 359px) { .nav-brand img { width: 96px; } .nav-links a { padding: 0 8px; } }

/* ---------------------------------------------------------------- shared pieces of the scenes */
.kin .w { display: inline-block; transform-origin: 30% 70%; will-change: transform; }
.jw-display { font-size: var(--jw-t-2xl); }
.jw-btn:focus-visible, .tray:focus-visible, .sound:focus-visible { outline: 3px solid var(--jw-ink); outline-offset: 3px; box-shadow: 0 0 0 7px var(--jw-sun); }
.hero-line, .real-line, .ways-line, .cities-line { font-size: var(--jw-t-lg); line-height: 1.45; color: var(--jw-ink); max-width: 34ch; }

/* paper clouds: cut from paper, lit from the upper left like the globe */
.cl { position: absolute; display: block; width: 240px; aspect-ratio: 2.6; background: var(--jw-paper);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 100'%3E%3Cpath d='M18 92a22 22 0 0 1 6-43 30 30 0 0 1 46-22 40 40 0 0 1 72-8 34 34 0 0 1 56 20 26 26 0 0 1 40 26 22 22 0 0 1 4 27z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 100'%3E%3Cpath d='M18 92a22 22 0 0 1 6-43 30 30 0 0 1 46-22 40 40 0 0 1 72-8 34 34 0 0 1 56 20 26 26 0 0 1 40 26 22 22 0 0 1 4 27z'/%3E%3C/svg%3E") center / contain no-repeat; }
.clouds { position: absolute; inset: 0; pointer-events: none; }
.clouds .cl { filter: drop-shadow(0 10px 14px rgb(var(--jw-shadow-ink) / 0.14)); }

/* ---------------------------------------------------------------- FLOW LAYOUT (reduced motion, no JS): plain sections */
.stage { position: relative; }
.track, .dive, .wipe, .sky { display: none; }
.scene { position: relative; padding: calc(var(--nav-h) + var(--jw-s-7)) var(--g) var(--jw-s-9); }
html:not(.fly) .nav { background: color-mix(in oklch, var(--jw-paper) 94%, transparent); box-shadow: 0 1px 0 var(--jw-line); }

.scene--hero { display: grid; gap: var(--jw-s-6); align-items: center; min-height: 100svh; }
.scene--hero .globe-host { position: relative; aspect-ratio: 1; width: min(100%, 640px); margin-inline: auto; --globe-fill: 0.9; }
.hero-title { font-size: var(--jw-t-3xl); max-width: 12ch; }
.scene--hero .hero-copy { order: -1; }
.hero-copy { display: grid; gap: var(--jw-s-5); }
.hero-act { display: grid; gap: var(--jw-s-3); justify-items: start; }
.hero-hint { font-size: var(--jw-t-sm); color: var(--jw-ink-2); }
@media (min-width: 900px) { .scene--hero { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } .scene--hero .hero-copy { order: -1; } }

.card { position: absolute; z-index: 6; right: var(--g); bottom: var(--jw-s-6); width: min(360px, calc(100% - 2 * var(--g))); }
.card-in { position: relative; display: grid; gap: 8px; padding: 22px 22px 20px; border-radius: var(--jw-r-lg); background: var(--city-ground); color: var(--city-ink); box-shadow: var(--jw-e-3); }
.card-state { font: 700 var(--jw-t-xs)/1 var(--jw-text); text-transform: none; color: var(--city-ink-2); }
.card-name { font-size: var(--jw-t-xl); padding-right: 40px; }
.card-tag { font-size: var(--jw-t-md); }
.card-facts { font-size: var(--jw-t-sm); color: var(--city-ink-2); }
.card-go { margin-top: 6px; justify-self: start; }
.card-x { position: absolute; right: 8px; top: 8px; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--city-ink); cursor: pointer; }
.card-x svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.card.is-in .card-in { animation: card-in var(--jw-d-settle) var(--jw-spring-settle) both; }
@keyframes card-in { from { opacity: 0; transform: translateY(14px) scale(0.96) rotate(-1.5deg); } }


.scene--real { display: grid; gap: var(--jw-s-6); align-items: center; min-height: 100svh; color: var(--city-ink); background: var(--city-ground); }
.real-photo { position: absolute; inset: 0; overflow: hidden; }
.real-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 40%; }
.real-copy { position: relative; display: grid; gap: var(--jw-s-4); max-width: 36rem; padding: var(--jw-s-6); border-radius: var(--jw-r-lg); background: var(--city-ground); box-shadow: var(--jw-e-2); }
.real-title { font-size: var(--jw-t-2xl); }
.real-golf { font-size: var(--jw-t-md); }
.real-note { font-size: var(--jw-t-sm); color: var(--city-ink-2); }
.real-credit { margin-top: 2px; }
.phone { position: relative; width: min(100%, 390px); justify-self: center; }
.phone-screen { position: relative; overflow: hidden; border-radius: 34px; background: var(--city-deep); }
@media (min-width: 900px) { .scene--real { grid-template-columns: minmax(0, 1fr) 390px; } }

.scene--ways { display: grid; gap: var(--jw-s-5); align-content: center; min-height: 100svh; }
.ways-title { font-size: var(--jw-t-2xl); }
.crews { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--jw-s-2); max-width: 40rem; margin: 0; padding: 0; border: 0; }
.crew { position: relative; display: grid; justify-items: center; gap: 4px; padding: 10px 4px 12px; border-radius: var(--jw-r-lg); cursor: pointer; min-height: 44px; isolation: isolate; -webkit-tap-highlight-color: transparent; }
.crew input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.crew::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--jw-sun); transform: scale(0.9) rotate(var(--jw-tilt)); opacity: 0;
  transition: transform var(--jw-d-snap) var(--jw-spring-snap), opacity var(--jw-d-ui) var(--jw-ease-out); }
.crew:has(input:checked)::before { transform: none; opacity: 1; }
.crew:has(input:focus-visible) { outline: 3px solid var(--jw-ink); outline-offset: 3px; }
.crew-art { width: 100%; max-width: 120px; height: auto; overflow: visible; }
.crew-art .tok { fill: var(--tf, var(--jw-paper)); stroke: var(--jw-ink); stroke-width: 5; stroke-linejoin: round; }
.crew-art .t2 { --tf: var(--jw-paper-2); }
.crew-art .t3 { --tf: var(--jw-line); }
.crew-art .ground { stroke: var(--jw-ink); stroke-width: 2.5; stroke-linecap: round; }
.crew-art .podium { fill: var(--jw-paper); stroke: var(--jw-ink); stroke-width: 2.5; stroke-linejoin: round; }
.crew-art .podium-n, .crew-art .vs-txt { font: 900 18px/1 var(--jw-display); font-stretch: 62%; text-anchor: middle; fill: var(--jw-ink); }
.crew-art .vs-txt { font-size: 22px; }
.crew-name { font: 900 var(--jw-t-lg)/1 var(--jw-display); font-stretch: 62%; text-transform: uppercase; }
.crew-say { font-size: var(--jw-t-md); max-width: 40ch; min-height: 3.1em; }
.help { margin: 0; padding: 0; border: 0; display: grid; gap: var(--jw-s-3); max-width: 40rem; }
.help legend { font-weight: 700; font-size: var(--jw-t-sm); margin-bottom: 8px; padding: 0; }
.help-seg { display: inline-grid; grid-auto-flow: column; justify-content: start; gap: 4px; padding: 4px; border-radius: var(--jw-r-md); background: var(--jw-paper-2); }
.help-seg label { position: relative; }
.help-seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.help-seg span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 9px; font-weight: 700; transition: background-color var(--jw-d-ui) var(--jw-ease-out); }
.help-seg input:checked + span { background: var(--jw-ink); color: var(--jw-paper); }
.help-seg input:focus-visible + span { outline: 3px solid var(--jw-ink); outline-offset: 2px; box-shadow: 0 0 0 6px var(--jw-sun); }
.help[disabled] .help-seg { opacity: 0.45; }
.help-say { font-size: var(--jw-t-md); max-width: 46ch; min-height: 3.1em; }
.ways-quiz { font-size: var(--jw-t-sm); color: var(--jw-ink-2); }
.ways-shot { width: min(300px, 70%); justify-self: center; }
.ways-shot img { border-radius: 28px; box-shadow: var(--jw-e-2), 0 0 0 8px var(--jw-ink); }
.ways-shot figcaption { margin-top: 18px; font-size: var(--jw-t-xs); color: var(--jw-ink-2); text-align: center; }
@media (min-width: 900px) {
  .scene--ways { grid-template-columns: minmax(0, 1fr) 320px; column-gap: var(--jw-s-8); }
  .scene--ways > :not(.ways-shot) { grid-column: 1; }
  .ways-shot { grid-column: 2; grid-row: 1 / span 5; width: 100%; }
}

.scene--cities { display: grid; gap: var(--jw-s-6); }
.cities-title { font-size: var(--jw-t-2xl); }
.plates { display: grid; gap: var(--jw-s-5); }
@media (min-width: 900px) { .plates { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.plate { position: relative; display: grid; overflow: hidden; border-radius: var(--jw-r-xl); background: var(--city-ground); color: var(--city-ink); box-shadow: var(--jw-e-2); isolation: isolate; }
.plate::before { opacity: 0.9; }
.plate-pic { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.plate-pic img { width: 100%; height: 100%; object-fit: cover; }
.plate--soon .plate-pic img { filter: grayscale(1) contrast(1.05) brightness(1.04); opacity: 0.85; }
.plate-body { display: grid; gap: 8px; padding: 18px 22px 20px; align-content: start; }
.plate-state { font-weight: 700; font-size: var(--jw-t-sm); color: var(--city-ink-2); }
.plate--open .plate-state::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 8px; vertical-align: -1px; border-radius: 3px; background: var(--jw-sun); box-shadow: inset 0 0 0 1.5px var(--jw-ink); transform: rotate(var(--jw-tilt)); }
.plate--soon .plate-state::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 8px; vertical-align: -1px; border-radius: 3px; box-shadow: inset 0 0 0 1.5px var(--city-ink-2); transform: rotate(var(--jw-tilt)); }
.plate-name { font-size: var(--jw-t-xl); }
.plate-tag { font-size: var(--jw-t-md); }
.plate-facts { font-size: var(--jw-t-sm); font-weight: 700; }
.plate-go { justify-self: start; margin-top: 4px; }

.scene--faq { display: grid; gap: var(--jw-s-6); }
.faq-title { font-size: var(--jw-t-2xl); }
.qs { display: grid; max-width: 46rem; border-top: 2px solid var(--jw-ink); }
.qs details { border-bottom: 1px solid var(--jw-line); }
.qs summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; padding: 10px 0; font-weight: 700; font-size: var(--jw-t-md); cursor: pointer; list-style: none; }
.qs summary::-webkit-details-marker { display: none; }
.qs summary::after { content: ""; flex: none; width: 18px; height: 18px; background: var(--jw-ink); transform: rotate(var(--jw-tilt));
  -webkit-mask: url(/brand/mark/jigwalk-mark-mono.svg) center / contain no-repeat; mask: url(/brand/mark/jigwalk-mark-mono.svg) center / contain no-repeat;
  transition: transform var(--jw-d-snap) var(--jw-spring-snap), background-color var(--jw-d-ui) var(--jw-ease-out); }
.qs details[open] summary::after { transform: none; background: var(--jw-sun-deep); }
.qs details p { padding: 0 0 18px; max-width: 58ch; }
.qs summary:focus-visible { outline: 3px solid var(--jw-ink); outline-offset: 2px; box-shadow: 0 0 0 7px var(--jw-sun); border-radius: 6px; }

.scene--pick { display: grid; gap: var(--jw-s-6); justify-items: start; padding-bottom: var(--jw-s-6); }
.pick-globe { width: min(70vw, 360px); height: auto; mix-blend-mode: multiply; justify-self: center; }
.pick-copy { display: grid; gap: var(--jw-s-5); justify-items: start; }
.pick-title { font-size: var(--jw-t-2xl); max-width: 12ch; }
.big-tray { display: flex; align-items: center; gap: 8px; }
.big-tray .slot { width: 40px; height: 40px; }
.big-tray .slot--city { width: 58px; height: 58px; margin-left: 10px; }
.pick-go { display: flex; flex-wrap: wrap; gap: 12px; }
.pick-btn { --b-bg: var(--city-lead); --b-fg: var(--city-on-lead); min-width: 170px; }
.pick-btn .jw-city-name { font-size: 1.375rem; line-height: 1; }
.pick-soon { font-size: var(--jw-t-sm); color: var(--jw-ink-2); }
.pick-code a { font-weight: 700; }
.foot { display: grid; gap: 10px 24px; width: 100%; padding-top: var(--jw-s-5); border-top: 1px solid var(--jw-line); grid-template-columns: auto 1fr; align-items: center; }
.foot nav { display: flex; gap: 4px; justify-self: end; }
.foot nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; font-weight: 700; font-size: var(--jw-t-sm); text-decoration: none; }
.foot-fine { grid-column: 1 / -1; font-size: var(--jw-t-xs); color: var(--jw-ink); max-width: 90ch; }

/* ---------------------------------------------------------------- THE FLIGHT: one fixed stage, scroll is the camera */
html.fly { scrollbar-width: thin; }
.fly .track { display: block; height: 1400vh; }
.fly .stage { position: fixed; inset: 0; z-index: 1; overflow: clip; background: var(--jw-paper); contain: strict; }
.fly .scene { position: absolute; inset: 0; padding: 0; min-height: 0; display: block; background: none; }
.fly .scene { pointer-events: none; }
.fly .scene:not(.scene--hero) { visibility: hidden; } /* until the camera reaches them; home.js opens each scene in turn */ /* every scene is mounted at once: only what is on screen takes a tap */
.fly .scene > *, .fly .sky { pointer-events: auto; }
.fly .real-photo, .fly .how-bg, .fly .hole-town { pointer-events: none; }
.fly .sky { display: block; position: absolute; inset: -12vh 0; } /* taller than the screen, so its drift never shows an edge */
.fly .sky-sun { position: absolute; inset: 0; background:
  radial-gradient(60vmax 60vmax at 12% 6%, color-mix(in oklch, var(--jw-sun) 46%, transparent), transparent 70%),
  radial-gradient(90vmax 70vmax at 80% 110%, var(--jw-paper-2), transparent 70%); }
.fly .clouds--far .c1 { left: 6%; top: 64%; width: 260px; }
.fly .clouds--far .c2 { left: 40%; top: 9%; width: 190px; }
.fly .clouds--far .c3 { right: 3%; top: 72%; width: 300px; }
.fly .sky, .fly .clouds--far, .fly .globe-host, .fly .trap, .fly .real-photo img, .fly .phone, .fly .plate, .fly .crew { will-change: transform; }

/* hero */
.fly .scene--hero .globe-host { position: absolute; inset: 0; width: auto; aspect-ratio: auto; margin: 0; z-index: 3; transform-origin: 50% 50%; }
.fly .hero-copy { position: absolute; z-index: 4; left: var(--g); top: calc(var(--nav-h) + (100% - var(--nav-h)) / 2); translate: 0 -50%; width: min(47vw, 860px); } /* the left half: a hero-scale headline, the line and the button under it */
.fly .hero-title { font-size: clamp(3.4rem, min(7vw, 13.5vh), 9rem); max-width: 14ch; line-height: 0.86; }
.fly .hero-act { position: relative; }
.fly .card { z-index: 9; }
.scene--hero .globe-host .jwg-tag { font-family: var(--jw-text); color: var(--jw-ink); background: var(--jw-paper); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: var(--jw-e-2); }
.scene--hero .globe-host .jwg-tag.jwg-live { flex-direction: row-reverse; }
.scene--hero .globe-host .jwg-tag.jwg-live i { width: auto; height: auto; padding: 3px 6px; border-radius: 6px; background: var(--jw-sun); box-shadow: none; font: 700 11px/1 var(--jw-text); font-style: normal; }
.scene--hero .globe-host .jwg-tag.jwg-live i::before { content: "Open"; }
.scene--hero .globe-host .jwg-tag.jwg-soon { background: color-mix(in oklch, var(--jw-paper) 88%, transparent); color: var(--jw-ink); box-shadow: var(--jw-e-1), inset 0 0 0 1.5px var(--jw-ink-2); }
.scene--hero .globe-host .jwg-tag.jwg-soon i { box-shadow: inset 0 0 0 1.5px var(--jw-ink-2); }
.scene--hero .globe-host .jwg-tag small { color: var(--jw-ink-2); }
@media (max-width: 899px), (max-aspect-ratio: 5/4) {
  .fly .hero-copy { left: var(--g); right: var(--g); top: calc(var(--nav-h) + 12px); translate: none; width: auto; gap: 10px; }
  .fly .hero-title { max-width: none; font-size: clamp(3rem, 13.6vw, 5.6rem); }
  .fly .hero-line { font-size: var(--jw-t-md); max-width: 40ch; }
  .fly .hero-act { position: fixed; left: var(--g); right: var(--g); bottom: calc(18px + env(safe-area-inset-bottom)); justify-items: center; text-align: center; }
  .fly .hero-act .jw-btn { width: min(100%, 340px); }
  .fly .card { left: var(--g); right: var(--g); bottom: calc(96px + env(safe-area-inset-bottom)); width: auto; }
}

/* the fall */
.fly .dive { display: block; position: absolute; inset: 0; z-index: 4; pointer-events: none; perspective: 1100px; }
.trap { position: absolute; left: 0; top: 0; width: 200px; height: 200px; transform-style: preserve-3d; transform-origin: 50% 50%; visibility: hidden; }
.trap-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  -webkit-mask: url(/brand/mark/jigwalk-mark-mono.svg) center / contain no-repeat; mask: url(/brand/mark/jigwalk-mark-mono.svg) center / contain no-repeat; }
.trap-front { background: url(/home/img/sea-piece.webp) center / cover; filter: brightness(1.35) saturate(1.05); }
.trap-back { background: url(/home/img/town-wide.webp) center / cover; transform: rotateX(180deg); } /* the underside: where you are going, Puzzle Town from above */
@media (max-aspect-ratio: 4/5) { .trap-back { background-image: url(/home/img/town-tall.webp); } }
.trap-label { position: absolute; left: 50%; top: 40%; translate: -50% -50%; padding: 0.3em 0.6em 0.25em; border-radius: 0.4em; background: var(--jw-sun); color: var(--jw-ink); font: 900 1em/1 var(--jw-display); font-stretch: 62%; text-transform: uppercase; white-space: nowrap; }
.town.is-diving:not(:has(.jt-ready)) .town-poster { visibility: visible !important; z-index: 1; } /* the still stands in only if the live town is not ready yet: it is the town's own first frame */
.trap-cut { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.trap-cut path { fill: none; stroke: var(--jw-sun); stroke-width: var(--sw, 2); stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: var(--cut, 1); }
.trap-glow { position: absolute; inset: -6%; -webkit-mask: url(/brand/mark/jigwalk-mark-mono.svg) center / contain no-repeat; mask: url(/brand/mark/jigwalk-mark-mono.svg) center / contain no-repeat; background: var(--jw-sun); opacity: 0; }
.dive-clip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; }
.dive-clip.is-on { display: block; }

.globe-host.is-holed { -webkit-mask: var(--hole) , linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: var(--hole) exclude, linear-gradient(#000 0 0); }

/* the real thing: the Dragon Bridge in layers, and the phone */
.fly .scene--real { z-index: 5; display: block; color: var(--city-ink); }
.fly .real-photo { visibility: hidden; }
.fly .real-photo img { transform-origin: var(--pivot, 45% 90%); object-position: 30% 50%; }
.fly .real-copy { position: absolute; z-index: 3; left: var(--g); bottom: clamp(16px, 4vh, 40px); width: min(38vw, 540px); max-width: none; padding: clamp(20px, 2.2vw, 30px); }
.fly .phone { position: absolute; z-index: 4; left: 0; top: 0; width: 390px; height: 800px; transform-origin: 0 0; visibility: hidden; }
.fly .phone::before { content: ""; position: absolute; inset: -12px; border-radius: 48px; background: var(--jw-ink); box-shadow: var(--jw-e-3); }
.fly .phone::after { content: ""; position: absolute; left: 50%; top: 2px; width: 92px; height: 22px; margin-left: -46px; border-radius: 0 0 14px 14px; background: var(--jw-ink); }
.fly .phone-screen { position: absolute; inset: 0; border-radius: 36px; isolation: isolate; background: var(--jw-paper); }

/* ways */
.fly .scene--ways { z-index: 6; }
.fly .ways-copy, .fly .crews, .fly .crew-say, .fly .help, .fly .ways-quiz { position: absolute; left: var(--g); width: min(46vw, 620px); }
.fly .ways-copy { top: calc(var(--nav-h) + clamp(16px, 6vh, 72px)); display: grid; gap: 14px; }
.fly .crews { top: calc(var(--nav-h) + clamp(16px, 6vh, 72px) + 230px); }
.fly .crew-say { top: calc(var(--nav-h) + clamp(16px, 6vh, 72px) + 400px); }
.fly .help { top: calc(var(--nav-h) + clamp(16px, 6vh, 72px) + 470px); }
.fly .ways-quiz { top: calc(var(--nav-h) + clamp(16px, 6vh, 72px) + 640px); }
.fly .ways-shot { display: none; }

/* cities: four plates fly out of the planet and travel past */
.fly .scene--cities { z-index: 7; }
.fly .cities-copy { position: absolute; left: var(--g); top: calc(var(--nav-h) + clamp(12px, 4vh, 48px)); display: grid; gap: 10px; width: min(60vw, 760px); }
.fly .plates { position: absolute; left: 0; top: 0; display: block; }
.fly .plate { position: absolute; left: 0; top: 0; width: var(--pw, 420px); height: var(--ph, 600px); grid-template-rows: 46% 1fr; visibility: hidden; }
.fly .plate-pic { aspect-ratio: auto; height: 100%; }

/* faq */
.fly .scene--faq { z-index: 7; }
.fly .faq-title { position: absolute; left: var(--g); top: calc(var(--nav-h) + clamp(16px, 7vh, 80px)); max-width: 7ch; font-size: var(--jw-t-3xl); }
.fly .qs { position: absolute; right: var(--g); top: calc(var(--nav-h) + clamp(16px, 7vh, 80px)); width: min(52vw, 720px); max-height: calc(100svh - var(--nav-h) - 60px); overflow: auto; padding: 8px 28px 12px; border-top: 0; border-radius: var(--jw-r-xl); background: var(--jw-paper); box-shadow: var(--jw-e-2); }

/* the close */
.fly .scene--pick { z-index: 7; display: block; }
.fly .pick-globe { display: none; }
.fly .pick-copy { position: absolute; left: var(--g); top: calc(var(--nav-h) + clamp(16px, 8vh, 90px)); width: min(44vw, 620px); }
.fly .pick-title { font-size: clamp(3rem, 1rem + 4.2vw, 5.25rem); max-width: 13ch; }
.fly .pick-copy { gap: 16px; }
.fly .foot { position: absolute; left: var(--g); right: var(--g); bottom: 0; padding: 14px 0 calc(14px + env(safe-area-inset-bottom)); background: none; }

/* the wipe into a city */
.fly .wipe, .wipe.is-on { display: grid; place-items: center; position: fixed; inset: 0; z-index: 80; pointer-events: none; visibility: hidden; background: var(--city-lead); color: var(--city-on-lead); }
.wipe.is-on { visibility: visible; pointer-events: auto; }
.wipe-name { font-size: clamp(3rem, 12vw, 9rem); opacity: 0; }

/* every scene layer the JS has not placed yet stays out of sight */
.fly [data-o="0"] { visibility: hidden; }

/* ---------------------------------------------------------------- phone compositions of the flight */
@media (max-width: 899px), (max-aspect-ratio: 5/4) {
  .fly .real-copy { left: var(--g); right: var(--g); width: auto; top: calc(var(--nav-h) + 10px); bottom: auto; padding: 18px; gap: 8px; }
  .fly .real-copy .real-golf, .fly .real-copy .real-note { display: none; }
  .fly .real-title { font-size: clamp(2.4rem, 11vw, 4rem); }
  .fly .real-line { font-size: var(--jw-t-md); }
  .fly .ways-copy, .fly .crews, .fly .crew-say, .fly .help, .fly .ways-quiz { left: var(--g); right: var(--g); width: auto; }
  .fly .ways-copy { top: calc(var(--nav-h) + 8px); gap: 8px; }
  .fly .ways-line { font-size: var(--jw-t-md); }
  .fly .crews { top: calc(var(--nav-h) + 160px); }
  .fly .crew-name { font-size: var(--jw-t-md); }
  .fly .crew-say { top: calc(var(--nav-h) + 296px); font-size: var(--jw-t-md); }
  .fly .help { top: calc(var(--nav-h) + 370px); }
  .fly .ways-quiz { top: auto; bottom: calc(14px + env(safe-area-inset-bottom)); }
  .fly .cities-copy { left: var(--g); right: var(--g); width: auto; top: calc(var(--nav-h) + 8px); }
  .fly .cities-line { font-size: var(--jw-t-md); }
  .fly .faq-title { font-size: clamp(2.6rem, 12vw, 4.5rem); max-width: none; top: calc(var(--nav-h) + 8px); }
  .fly .qs { left: var(--g); right: var(--g); width: auto; top: calc(var(--nav-h) + 8px + 1.1 * clamp(2.6rem, 12vw, 4.5rem)); max-height: calc(100svh - var(--nav-h) - 120px); padding: 4px 18px 8px; }
  .fly .pick-copy { left: var(--g); right: var(--g); width: auto; top: auto; bottom: calc(150px + env(safe-area-inset-bottom)); gap: 14px; }
  .fly .pick-title { font-size: clamp(2rem, 9vw, 3.2rem); max-width: none; }
  .fly .pick-btn { min-width: 0; flex: 1; }
  .fly .pick-go { width: 100%; }
  .fly .foot { grid-template-columns: 1fr; gap: 4px; }
  .fly .foot nav { justify-self: start; margin-left: -10px; }
  .fly .foot-fine { line-height: 1.35; }
}

/* ---------------------------------------------------------------- Puzzle Town: a full-screen place you fly into */
.town[hidden] { display: none; }
.town { position: fixed; inset: 0; z-index: 40; background: var(--jw-paper-2); }
.town-host, .town-poster { position: absolute; left: 0; right: 0; bottom: 0; top: var(--nav-h); width: 100%; height: calc(100% - var(--nav-h)); }
.town-poster { object-fit: cover; object-position: 50% 50%; } /* the town's first live frame, rendered from its own arrival camera: it crops the same way */
.town:has(.town-host.jt-ready) .town-poster, .town.is-live .town-poster { visibility: hidden; }
.town-parked { position: absolute; z-index: 3; width: 44px; height: auto; left: calc(var(--kx, 74%) - 22px); top: calc(var(--ky, 32%) - 64px); pointer-events: none; visibility: hidden; }
.rm .town-parked { visibility: visible; }
.town-back { position: absolute; z-index: 5; left: var(--g); bottom: calc(var(--jw-s-5) + env(safe-area-inset-bottom)); gap: 10px; }
.town-back svg { width: 20px; height: 26px; }
.in-town, .paused { overflow: hidden; }
.in-town .town { animation: town-in var(--jw-d-move) var(--jw-ease-out); }
@keyframes town-in { from { opacity: 0; } }
.fly.in-town .town { animation: none; }

/* the balloon trip */

.tray-balloon { width: 15px; height: 22px; flex: none; color: var(--jw-ink); }
@media (max-width: 719px) { .tray-slots { display: none; } .tray { gap: 5px; } }
.pick-trip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--jw-ink); font: 700 var(--jw-t-sm)/1 var(--jw-text); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.25em; cursor: pointer; }
.pick-trip svg { width: 15px; height: 22px; }
.hole-town { display: none; }
.fly .hole-town { display: block; position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: cover; visibility: hidden; }
.town-poster:not([src]) { visibility: hidden; }

.carp-piece { display: none; }
.fly .carp-piece { display: block; position: absolute; left: 0; top: 0; z-index: 3; visibility: hidden; background: url(/home/demo/carp-560.webp) 50% 30% / 260% auto;
  -webkit-mask: url(/brand/mark/jigwalk-mark-mono.svg) center / contain no-repeat; mask: url(/brand/mark/jigwalk-mark-mono.svg) center / contain no-repeat; }

/* the stop demo wears Da Nang's skin here: the Han River for the table, Dragon yellow for the one big action, the brand's faces */
#demo .jwd { --jwd-felt: var(--city-deep); --jwd-felt-deep: oklch(0.31 0.07 215); --jwd-on-felt-2: oklch(0.88 0.04 215); --jwd-sun: var(--city-lead); --jwd-sun-deep: oklch(0.7 0.15 85);
  --jwd-paper: var(--jw-paper); --jwd-ink: var(--city-ink); --jwd-display: "Archivo", "Arial Narrow", sans-serif; --jwd-text: var(--jw-text); }
#demo .jwd :is(.jwd-where b, .jwd-clue-n, .jwd-answer-h, .jwd-stamp, .jwd-caption b, .jwd-stat > span, .jwd-num, .jwd-plus, .jwd-golf) { font-stretch: 62%; font-weight: 900; text-transform: uppercase; }
.fly #demo .jwd { min-height: 100%; border-radius: 0; box-shadow: none; }

/* ---------------------------------------------------------------- the invitation: a boarding pass */
.scene--invite { display: grid; place-items: center; min-height: 70svh; background: var(--jw-paper-2); }
.ticket { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; width: min(100%, 720px); border-radius: var(--jw-r-lg); background: var(--jw-paper); color: var(--jw-ink); box-shadow: var(--jw-e-3); text-align: left; overflow: hidden; }
.ticket-main { display: grid; gap: 12px; padding: 26px 28px 26px; }
.ticket-kick { font: 700 0.75rem/1 var(--jw-text); letter-spacing: 0.12em; text-transform: uppercase; color: var(--jw-ink-2); }
.ticket-title { font-size: clamp(2.2rem, 1.4rem + 2.6vw, 3.6rem); }
.ticket-route { display: flex; flex-wrap: wrap; gap: 6px 26px; margin: 2px 0 0; }
.ticket-route dt { font: 700 0.6875rem/1.2 var(--jw-text); letter-spacing: 0.1em; text-transform: uppercase; color: var(--jw-ink-2); }
.ticket-route dd { margin: 0; font-weight: 700; font-size: var(--jw-t-md); }
.ticket-line { font-size: var(--jw-t-md); max-width: 40ch; }
.ticket-stub { position: relative; display: grid; align-content: center; gap: 12px; padding: 24px 26px; background: var(--jw-sun); }
.ticket-stub::before { content: ""; position: absolute; left: -1px; top: 12px; bottom: 12px; border-left: 2px dashed color-mix(in oklch, var(--jw-ink) 40%, transparent); }
.ticket-stub .jw-btn { min-width: 172px; }
.ticket-stub .jw-btn--quiet { --b-fg: var(--jw-ink); }
.toast { position: fixed; z-index: 60; right: var(--g); top: calc(var(--nav-h) + 8px); padding: 10px 14px; border-radius: var(--jw-r-md); background: var(--jw-ink); color: var(--jw-paper); font-weight: 700; font-size: var(--jw-t-sm); box-shadow: var(--jw-e-2); opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity var(--jw-d-ui) var(--jw-ease-out), transform var(--jw-d-ui) var(--jw-ease-out); }
.toast.is-on { opacity: 1; transform: none; }
@media (max-width: 600px) { .ticket { grid-template-columns: 1fr; } .ticket-main { padding: 20px 20px 16px; } .ticket-stub { grid-auto-flow: column; padding: 14px 16px; } .ticket-stub::before { left: 14px; right: 14px; top: -1px; bottom: auto; border-left: 0; border-top: 2px dashed color-mix(in oklch, var(--jw-ink) 40%, transparent); } .ticket-stub .jw-btn { min-width: 0; } }
.fly .scene--invite { z-index: 8; display: block; background: none; }
.fly .ticket { position: absolute; left: 50%; top: 68%; width: min(720px, calc(100vw - 32px)); visibility: hidden; }
@media (max-width: 899px), (max-aspect-ratio: 5/4) { .fly .ticket { top: 62%; } }
.tray-label { display: none; }
@media (min-width: 1100px) { .tray-label { display: inline; } }

/* ---------------------------------------------------------------- how a Jigwalk works: seven steps, one phone */
.steps { display: grid; gap: var(--jw-s-5); margin: var(--jw-s-4) 0 0; padding: 0; list-style: none; }
.step { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; align-items: start; }
.step-n { position: relative; display: grid; place-items: center; width: 52px; height: 52px; padding: 6px 6px 0 0; }
.step-n svg, .fact-p { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--city-lead); }
.step-n b { position: relative; font: 900 1.375rem/1 var(--jw-display); font-stretch: 62%; color: var(--city-on-lead); }
.step-h { font-size: var(--jw-t-xl); margin-bottom: 6px; }
.step p { font-size: var(--jw-t-md); max-width: 44ch; }
.real-open { display: grid; gap: 10px; }
.ps:not(.phone-demo) { display: none; }
.how-bg, .how-scrim { display: none; }
.fly .how-bg { display: block; position: absolute; inset: 0; overflow: hidden; visibility: hidden; }
.fly .how-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fly .how-carp img { object-position: 50% 35%; }
.fly .how-scrim { display: block; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, color-mix(in oklch, var(--city-deep, #005264) 97%, transparent) 0%, color-mix(in oklch, var(--city-deep, #005264) 95%, transparent) 34%, color-mix(in oklch, var(--city-deep, #005264) 60%, transparent) 44%, transparent 60%); }
.pic-grid { position: absolute; inset: 0; } /* the warm light of the next act waits behind the pieces */
.fly .how-pic { background: radial-gradient(120% 90% at 10% 0%, color-mix(in oklch, var(--jw-sun) 55%, var(--jw-paper)), var(--jw-paper) 70%); }
.pic-grid i { position: absolute; display: block; background: url(/play/themes/img/a/dragon-bridge-1080.webp) no-repeat; filter: var(--city-grade); will-change: transform; }
.pic-cuts { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .pic-cuts path { fill: none; stroke: rgb(255 255 255 / 0.55); stroke-width: 1.2px; vector-effect: non-scaling-stroke; }
.fly .real-copy { position: absolute; z-index: 3; left: var(--g); top: 50%; bottom: auto; width: min(36vw, 520px); max-width: none; padding: 0; background: none; box-shadow: none; color: var(--jw-paper); transform: translateY(-50%); }
.fly .real-copy .real-line, .fly .real-copy .step p { color: var(--jw-paper); }
.fly .real-copy .credit { color: color-mix(in oklch, var(--jw-paper) 80%, transparent); margin-top: 18px; }
.fly .real-open { position: absolute; left: 0; right: 0; bottom: 100%; padding-bottom: 8px; }
.fly .real-title { font-size: var(--jw-t-2xl); color: var(--jw-paper); }
.fly .steps { position: relative; display: block; margin-top: 0; }
.fly .step { position: absolute; inset: 0 0 auto; }
.fly .step-h { font-size: clamp(2.2rem, 1.4rem + 2.6vw, 3.75rem); color: var(--jw-paper); }
.fly .ps { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; background: var(--jw-paper); }
.carp-piece { display: none; }
.fly .carp-piece { display: block; position: absolute; left: 0; top: 0; z-index: 3; visibility: hidden; background: url(/home/demo/carp-560.webp) 50% 30% / 260% auto;
  -webkit-mask: url(/brand/mark/jigwalk-mark-mono.svg) center / contain no-repeat; mask: url(/brand/mark/jigwalk-mark-mono.svg) center / contain no-repeat; }
@media (max-width: 899px), (max-aspect-ratio: 5/4) {
  .fly .how-scrim { background: linear-gradient(0deg, color-mix(in oklch, var(--city-deep, #005264) 97%, transparent) 0%, color-mix(in oklch, var(--city-deep, #005264) 94%, transparent) 32%, color-mix(in oklch, var(--city-deep, #005264) 50%, transparent) 44%, transparent 58%); }
  .fly .real-copy { left: var(--g); right: var(--g); width: auto; top: auto; bottom: calc(14px + env(safe-area-inset-bottom)); transform: none; padding: 0; }
  .fly .real-open { bottom: 100%; }
  .fly .real-title { font-size: clamp(2.2rem, 10vw, 3.4rem); }
  .fly .step { grid-template-columns: 40px minmax(0, 1fr); gap: 10px; }
  .fly .step-n { width: 40px; height: 40px; }
  .fly .step-n b { font-size: 1.1rem; }
  .fly .step-h { font-size: clamp(1.7rem, 7.6vw, 2.4rem); margin-bottom: 4px; }
  .fly .step p { font-size: 1.0625rem; line-height: 1.42; }
  .fly .real-copy .credit { margin-top: 8px; font-size: 11px; }
}

/* ---------------------------------------------------------------- good to know: plain answers */
.scene--know { display: grid; gap: var(--jw-s-6); }
.know-title { font-size: var(--jw-t-2xl); }
.facts { display: grid; gap: var(--jw-s-5) var(--jw-s-7); grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); max-width: 76rem; }
.fact { position: relative; padding-left: 40px; }
.fact-p { inset: 2px auto auto 0; width: 26px; height: 26px; fill: var(--jw-ink); }
.fact h3 { font: 700 var(--jw-t-lg)/1.25 var(--jw-text); margin-bottom: 4px; }
.fact p { font-size: var(--jw-t-md); max-width: 46ch; }
.fly .scene--know { z-index: 7; display: block; }
.fly .know-title { position: absolute; left: var(--g); top: calc(var(--nav-h) + clamp(16px, 5vh, 56px)); }
.fly .facts { position: absolute; left: var(--g); right: var(--g); top: calc(var(--nav-h) + clamp(16px, 5vh, 56px) + 1.05 * var(--jw-t-2xl) + 22px); grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 40px; }
.fly .fact p { font-size: 1rem; }
@media (max-width: 899px), (max-aspect-ratio: 5/4) {
  .fly .know-title { top: calc(var(--nav-h) + 8px); }
  .fly .facts { grid-template-columns: 1fr; gap: 18px; top: calc(var(--nav-h) + 8px + 1.05 * var(--jw-t-2xl) + 12px); }
  .fly .fact { grid-column: 1; }
  .fly .fact p { font-size: var(--jw-t-md); }
}
.pick-line { font-size: var(--jw-t-lg); font-weight: 700; }
.fly .scene:not(.near) img[loading="lazy"], .fly .scene--real:not(.near) .pic-grid i { display: none; }

/* into a city: browsers with cross-document View Transitions carry the wipe colour straight into the city page */

/* flow layout: grid tracks never grow past the screen */
.scene--know, .scene--cities, .scene--pick, .scene--invite { grid-template-columns: minmax(0, 1fr); }

.fly .foot { width: auto; max-width: calc(100vw - 2 * var(--g)); }
.foot nav { flex-wrap: wrap; justify-content: flex-end; }
.fly .real-copy .credit { font-size: 13px; }
.scene--hero .globe-host .jwg-tag { min-height: 44px; padding: 0 14px; font-size: 15px; }
.scene--hero .globe-host .jwg-tag.jwg-soon { background: var(--jw-paper); opacity: 1; }
.pick-code a { display: inline-flex; align-items: center; min-height: 44px; }
.tray-n { position: relative; display: none; place-items: center; width: 34px; height: 34px; padding: 4px 4px 0 0; isolation: isolate; color: var(--jw-ink); font: 900 0.875rem/1 var(--jw-display); font-stretch: 62%; }
.tray-n::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--jw-line);
  -webkit-mask: url(/brand/mark/jigwalk-mark-mono.svg) center / contain no-repeat; mask: url(/brand/mark/jigwalk-mark-mono.svg) center / contain no-repeat; }
@media (max-width: 719px) { .tray-n { display: grid; } .tray-balloon { display: none; } .tray { padding: 0 6px; } .nav-links a { white-space: nowrap; } }
.fly .real-photo img { inset: -8vh 0 auto; height: calc(100% + 16vh); }
.town.is-staged { transform: translateY(160vh); visibility: hidden; pointer-events: none; }
.jw [lang="vi"] { font-family: "Archivo", var(--jw-text); }

.fly :is(.real-title, .cities-title) { font-size: clamp(2.8rem, 0.8rem + 3.6vw, 4.25rem); line-height: 0.88; }
.fly :is(.ways-title, .know-title) { font-size: clamp(2rem, 1rem + 1.8vw, 2.75rem); }
.fly .pick-title { font-size: clamp(2.4rem, 1rem + 3vw, 4rem); }
@media (max-width: 899px), (max-aspect-ratio: 5/4) { .fly :is(.real-title, .cities-title) { font-size: clamp(2.3rem, 10.5vw, 4rem); } .fly :is(.ways-title, .know-title) { font-size: clamp(1.7rem, 7vw, 2.4rem); } .fly .step p { font-size: 1.125rem; } }
/* the sixth slot is the city's: larger, drawn in sun-deep, so it reads as a different kind of slot */
.slot--city { width: 30px; height: 30px; }
.slot--city path { stroke: var(--jw-sun-deep); stroke-width: 7; }
.big-tray .slot--city { width: 70px; height: 70px; }
.big-tray .slot--city path { stroke-width: 5; }
.fly .clouds--far .cl { filter: drop-shadow(0 12px 16px rgb(var(--jw-shadow-ink) / 0.16)); }

/* coming-soon plates keep their city: the name and a rule in the city's lead colour over the greyed photo */
.plate--soon .plate-name { color: var(--city-lead); }
.plate--soon .plate-pic { box-shadow: inset 0 -6px 0 var(--city-lead); }
/* the near cloud plane: passes in front of the planet, faster than everything else */
.clouds--near { display: none; }
.fly .clouds--near { display: block; z-index: 3; }
.fly .clouds--near .n1 { left: -4%; bottom: 6%; width: 340px; }
.fly .clouds--near .n2 { right: 2%; bottom: 14%; width: 260px; }
@media (max-width: 899px), (max-aspect-ratio: 5/4) { .fly .clouds--near .n1 { left: -14%; bottom: 13%; width: 220px; } .fly .clouds--near .n2 { right: -10%; bottom: 22%; width: 170px; } }

/* round 4 */
.tray-n.is-some::before { background: var(--jw-sun); } /* sun means found */
.tray-n:not(.is-some)::before { background: transparent; } .tray-n:not(.is-some) { background: url(/home/img/piece-outline.svg) center / contain no-repeat; }
/* Đà Nẵng in running text: Atkinson has no Vietnamese stacked marks, so those few letters come from Archivo */
@font-face { font-family: "Atkinson Next"; src: url(/brand/fonts/archivo-vietnamese.woff2) format("woff2"); font-weight: 200 800; font-display: swap; unicode-range: U+1EA0-1EF9; }
/* answers beside the planet on wide screens: two columns on the left, the globe turning on the right */
@media (min-width: 900px) and (min-aspect-ratio: 5/4) { .fly.facts-two .facts { right: 40vw; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 36px; } }
/* the one big type moment: Now a real city, set across the photo */
@media (max-width: 719px) and (max-height: 760px) { .fly .pick-soon { display: none; } } /* short phones: the plates already said it */
/* the trip: the pass's stamp, and clouds streaking past the lens */
.stamp { position: absolute; z-index: 2; left: 50%; top: 50%; translate: -50% -50%; padding: 6px 12px; border: 3px solid var(--jw-ink); border-radius: 8px; color: var(--jw-ink); font: 900 1.5rem/1 var(--jw-display); font-stretch: 62%; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0; pointer-events: none; transform: rotate(-8deg); }
.streaks { position: fixed; inset: 0; z-index: 41; overflow: hidden; pointer-events: none; }
.streaks i { position: absolute; left: 50%; top: 50%; width: 46vmax; height: 7vmax; margin-top: -3.5vmax; transform-origin: 0 50%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in oklch, var(--jw-paper) 92%, transparent), transparent); }
/* round 5 */
@media (max-width: 719px) { .hero-hint, .ways-quiz, .plate-facts, .pick-soon, .card-facts { font-size: 1.125rem; } }
.crew:has(input:focus-visible) { box-shadow: 0 0 0 7px var(--jw-sun); border-radius: 12px; }
.ticket-stub .jw-btn:focus-visible { box-shadow: 0 0 0 7px var(--jw-ink); outline-color: var(--jw-paper); }
.phone:focus-visible { outline: 3px solid var(--jw-ink); outline-offset: 6px; box-shadow: 0 0 0 10px var(--jw-sun); border-radius: 44px; }
/* the headline's face: wait for it (it is preloaded) rather than swap and shift the layout */
@font-face { font-family: "Archivo"; src: url(/brand/fonts/archivo-latin.woff2) format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: block;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* short screens (a phone with its toolbars showing): less on screen at once */
@media (max-width: 719px) and (max-height: 720px) { /* short screens (toolbars showing): less on screen at once */
  .fly .ways-quiz { display: none; }
  .fly .plate { grid-template-rows: 30% 1fr; }
  .fly .plate-tag { font-size: 1rem; }
}
.fly:not(.tags-on) .globe-host .jwg-tag { visibility: hidden !important; }
/* the photo credit: small, in the bottom-right corner, legible over any photo */
.fly .real-credit { position: absolute; z-index: 6; right: var(--g); bottom: calc(8px + env(safe-area-inset-bottom)); max-width: min(46ch, 60vw); margin: 0; text-align: right; font-size: 12px; line-height: 1.3; color: var(--jw-paper); text-shadow: 0 1px 2px rgb(0 0 0 / 0.85), 0 0 10px rgb(0 0 0 / 0.55); pointer-events: none; }
@media (max-width: 899px), (max-aspect-ratio: 5/4) { .fly .crew-say { right: calc(var(--g) + 76px); } } /* room at the right for the tucked-in phone */
/* the opening: the headline over the planet's left edge, held legible by a soft paper glow */
.fly .scene--hero .hero-line { text-shadow: 0 0 0.5em var(--jw-paper), 0 0 1em var(--jw-paper), 0 0 2em color-mix(in oklch, var(--jw-paper) 80%, transparent); }
.fly .scene--hero .hero-title { filter: drop-shadow(0 0 10px var(--jw-paper)) drop-shadow(0 0 26px var(--jw-paper)); } /* one glow behind the whole headline: a glow per word painted over the line above and greyed it */
.fly .scene--hero .hero-hint { color: var(--jw-ink); text-shadow: 0 0 6px var(--jw-paper), 0 0 14px var(--jw-paper); }
@media (max-width: 899px), (max-aspect-ratio: 5/4) { .fly .scene--hero .hero-line { text-shadow: 0 0 6px var(--jw-paper), 0 0 14px var(--jw-paper), 0 0 28px var(--jw-paper); } } /* phones: a soft paper glow, no box */ /* phones: the line on solid paper wherever the planet runs under it */
.help-seg label:has(input:disabled) { opacity: 0.4; cursor: not-allowed; } /* Competitive and VS: only Hard */
@media (max-width: 899px), (max-aspect-ratio: 5/4) { .fly .real-copy { padding-bottom: 30px; } } /* room for the photo credit under the step */
/* the hand-off to Đà Nẵng's page: its yellow panel, the headline in ink, the Dragon Bridge photo beside (wide) or above (phones) */
.wipe-photo { position: fixed; inset: 0; z-index: 79; pointer-events: none; background: url(/danang/img/dragon-1200.webp) 50% 30% / cover no-repeat; }
@media (min-width: 900px) and (min-aspect-ratio: 5/4) { .wipe-photo { left: 44.03%; } }
@media (max-width: 899px), (max-aspect-ratio: 5/4) { .wipe-photo { bottom: 22.04%; background-image: url(/danang/img/dragon-720.webp); } }
.wipe-name.is-landing { position: fixed; margin: 0; font-family: var(--jw-display); font-weight: 850; font-stretch: 62%; text-transform: uppercase; color: oklch(0.21 0.03 90); white-space: pre; text-align: left; letter-spacing: 0; }
.piece-label { position: absolute; left: 0; top: 0; z-index: 3; padding: 0.3em 0.6em 0.25em; border-radius: 0.4em; background: var(--jw-sun); color: var(--jw-ink); font: 900 1em/1 var(--jw-display); font-stretch: 62%; text-transform: uppercase; white-space: nowrap; visibility: hidden; pointer-events: none; }
.fly .scene--hero .hero-line { min-height: 3lh; } /* its height is held while the Vietnamese face loads: no shift */
.jumping .globe-host .jwg-tag { visibility: hidden !important; } /* the planet travels clean to the cities */
@media (max-width: 719px) { .scene--hero .globe-host .jwg-tag { padding: 0 10px; gap: 5px; font-size: 14px; } } /* phones: four city tags fit across the opening planet */
@media (max-width: 600px) { /* phones: the boarding pass route on one row, so the pass and both buttons fit */
  .ticket-route { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 4px 10px; }
  .ticket-route dd { font-size: 0.9375rem; }
  .ticket-main { gap: 8px; }
  .fly .crew-name { font-size: 0.875rem; letter-spacing: 0; } /* COMPETITIVE fits inside its card's highlight */
  .fly .crew { padding: 8px 2px 10px; }
}