/* Arriving on a city page from the homepage's Pick your city: the page's first frame is the homepage wipe's last one (the
   city's lead colour, its name in the middle), drawn here before anything else paints; arrive.js then breaks it into
   jigsaw pieces that fall away to show the page. Only when html[data-arrive] is set (a fresh pick, never a direct visit,
   a reload or Back; never with reduced motion). */
@font-face { font-family: "JW Arrive Danang"; src: url(/brand/fonts/bevietnampro-800-latin.woff2) format("woff2"); font-weight: 800; font-display: block; unicode-range: U+0000-00FF; }
@font-face { font-family: "JW Arrive Danang"; src: url(/brand/fonts/bevietnampro-800-vietnamese.woff2) format("woff2"); font-weight: 800; font-display: block; unicode-range: U+0102-0103, U+0110-0111, U+0300-0301, U+0303, U+0309, U+0323, U+1EA0-1EF9; }
@font-face { font-family: "JW Arrive Auckland"; src: url(/brand/fonts/besley-800-latin.woff2) format("woff2"); font-weight: 800; font-display: block; unicode-range: U+0000-00FF; }
@font-face { font-family: "JW Arrive Melbourne"; src: url(/brand/fonts/abrilfatface-latin.woff2) format("woff2"); font-weight: 400; font-display: block; unicode-range: U+0000-00FF; }
html[data-arrive] { overflow: hidden; }
html[data-arrive]::before, .jw-arrive-face { position: fixed; inset: 0; z-index: 2147483646; display: grid; place-items: center; background: var(--arrive-lead); }
html[data-arrive]::after, .jw-arrive-name { position: fixed; left: 0; right: 0; top: 50%; z-index: 2147483647; translate: 0 -50%; margin: 0; text-align: center; color: var(--arrive-on);
  font: 800 clamp(48px, 12vw, 144px)/0.92 var(--arrive-font); letter-spacing: var(--arrive-track); text-transform: var(--arrive-case); white-space: nowrap; pointer-events: none; }
html[data-arrive]::before { content: ""; }
html[data-arrive="danang"], .jw-arrive[data-city="danang"] { --arrive-lead: oklch(0.855 0.17 90); --arrive-on: oklch(0.21 0.03 90); --arrive-font: "JW Arrive Danang", "Arial Narrow", sans-serif; --arrive-track: -0.01em; --arrive-case: uppercase; }
html[data-arrive="auckland"], .jw-arrive[data-city="auckland"] { --arrive-lead: oklch(0.42 0.165 22); --arrive-on: oklch(0.985 0.006 215); --arrive-font: "JW Arrive Auckland", Georgia, serif; --arrive-track: -0.015em; --arrive-case: none; }
html[data-arrive="melbourne"], .jw-arrive[data-city="melbourne"] { --arrive-lead: oklch(0.43 0.075 150); --arrive-on: oklch(0.955 0.025 85); --arrive-font: "JW Arrive Melbourne", Georgia, serif; --arrive-track: 0; --arrive-case: none; }
html[data-arrive="melbourne"]::after, .jw-arrive[data-city="melbourne"] .jw-arrive-name { font-weight: 400; }
html[data-arrive="danang"]::after { content: "Đà Nẵng"; }
html[data-arrive="auckland"]::after { content: "Auckland"; }
html[data-arrive="melbourne"]::after { content: "Melbourne"; }
.jw-arrive { position: fixed; inset: 0; z-index: 2147483646; pointer-events: none; }
.jw-arrive i { position: absolute; display: block; overflow: hidden; will-change: transform; }
.jw-arrive i > b { position: absolute; display: block; } /* the whole cover, offset so each piece shows its own part of it */
.jw-arrive .jw-arrive-face, .jw-arrive .jw-arrive-name { position: absolute; z-index: auto; }