/* NL.Arrival title card ("Welcome to <place>"). Data-driven: colours/fonts come in as --ar-* custom properties from
   data/destinations.js; the per-place title look is .ar-tx-<tx>. Timeline ~7 s (arrival.js T_EXIT). Slow easing, no bounces. */
@property --ex { syntax: '<number>'; inherits: true; initial-value: 1; }
.ar { position: fixed; inset: 0; z-index: 9500; display: flex; justify-content: center; color: var(--ar-ink); font-family: var(--ar-body); overflow: hidden; cursor: pointer; opacity: 0; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
.ar.ar-on { opacity: 1; transition: opacity 1.1s cubic-bezier(.22, 1, .36, 1); }
.ar.ar-cine.ar-on { transition: none; }
.ar:not(.ar-cine).ar-exit { opacity: 0; transition: opacity .65s cubic-bezier(.4, 0, .6, 1); }
.ar:not(.ar-cine).ar-exit.ar-fast { transition-duration: .26s; }
.ar-grade { position: absolute; inset: 0; opacity: 0; }
.ar-on .ar-grade { animation: ar-fade 1.4s .1s ease both; }
/* in the loaded world: a filmic grade (warm top, soft vignette, light pool behind the type) over the live camera */
.ar-cine .ar-grade { background: radial-gradient(62% 46% at 50% 50%, rgba(2, 12, 20, .62), rgba(2, 12, 20, .3) 55%, rgba(2, 12, 20, 0) 85%), radial-gradient(130% 110% at 50% 50%, transparent 48%, rgba(1, 6, 12, .62) 100%), linear-gradient(180deg, rgba(255, 170, 90, .16), rgba(255, 170, 90, .04) 45%, rgba(2, 10, 16, .46) 100%), rgba(4, 12, 20, .14); -webkit-backdrop-filter: blur(1.1px) saturate(1.14) contrast(1.05); backdrop-filter: blur(1.1px) saturate(1.14) contrast(1.05); }
/* otherwise (Miami, Exuma, reduced motion): a still frame, softly blurred, tinted with the place's colours */
.ar:not(.ar-cine) .ar-grade { background: radial-gradient(90% 60% at 50% 38%, color-mix(in srgb, var(--ar-s1) 78%, var(--ar-a) 22%) 0%, transparent 70%), linear-gradient(180deg, var(--ar-s2) 0%, var(--ar-s1) 58%, color-mix(in srgb, var(--ar-s1) 72%, var(--ar-a) 28%) 100%); }
.ar-dip { position: absolute; inset: 0; background: #04080c; opacity: 0; pointer-events: none; z-index: 5; }
.ar-cine.ar-on .ar-dip { animation: ar-dipin 1.3s .3s cubic-bezier(.3, 0, .2, 1) both; }
.ar-cine.ar-exit .ar-dip { animation: none; opacity: 1; transition: opacity .6s cubic-bezier(.4, 0, .6, 1); }
.ar-cine.ar-exit.ar-fast .ar-dip { transition-duration: .24s; }
.ar-cine.ar-reveal .ar-dip { opacity: 0; transition: opacity .75s cubic-bezier(.3, 0, .2, 1); }
.ar-cine.ar-reveal.ar-fast .ar-dip { transition-duration: .3s; }
.ar-art { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.ar-l { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ar-body { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; width: 100%; max-width: 980px; padding: max(70px, 9vh) 20px max(80px, 10vh); margin: 0 auto; }
.ar-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ar-exit .ar-body, .ar-exit .ar-art, .ar-exit .ar-foot { opacity: 0; transition: opacity .6s ease; animation: none !important; }
.ar-cine.ar-exit .ar-grade { opacity: 1; }

.ar-kicker { font: 600 13px/1 var(--ar-body); letter-spacing: .42em; text-transform: uppercase; color: var(--ar-a); display: flex; align-items: center; gap: 16px; margin-bottom: clamp(0px, 1vh, 10px); text-shadow: 0 1px 3px rgba(0, 0, 0, .5), 0 1px 12px rgba(0, 0, 0, .5); }
.ar-kicker::before, .ar-kicker::after { content: ""; width: clamp(24px, 8vw, 58px); height: 1px; background: currentColor; opacity: .65; }
.ar-kicker span { padding-left: .42em; }
.ar-title { margin: 0; font-family: var(--ar-font); font-weight: 400; line-height: 1.05; white-space: nowrap; display: flex; justify-content: center; }
.ar-ch { display: inline-block; position: relative; }
.ar-flourish { margin-top: clamp(6px, 1.4vh, 14px); height: 40px; display: flex; align-items: flex-start; justify-content: center; }
.ar-where { font: 400 13px/1.2 var(--ar-ui); letter-spacing: .28em; text-transform: uppercase; color: var(--ar-ink); margin-top: 4px; padding-left: .28em; text-shadow: 0 1px 3px rgba(0, 0, 0, .45), 0 2px 14px rgba(0, 0, 0, .55); }
.ar-tag { margin: clamp(10px, 2vh, 18px) 0 0; font: 400 clamp(20px, 2.6vw, 26px)/1.3 var(--ar-sub); color: #fff3d0; text-shadow: 0 1px 3px rgba(0, 0, 0, .5), 0 2px 18px rgba(0, 0, 0, .6); }
.ar-line { margin: clamp(16px, 3.2vh, 30px) 0 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 12px; max-width: 640px; font: 400 12px/1.3 var(--ar-ui); letter-spacing: .2em; text-transform: uppercase; text-shadow: 0 1px 3px rgba(0, 0, 0, .5), 0 2px 14px rgba(0, 0, 0, .6); }
.ar-line i { width: 4px; height: 4px; transform: rotate(45deg); background: var(--ar-a); opacity: .9; }
.ar-foot { position: absolute; z-index: 2; left: 0; right: 0; bottom: max(22px, env(safe-area-inset-bottom)); text-align: center; font: 300 12px/1.3 var(--ar-body); letter-spacing: .14em; opacity: 0; text-shadow: 0 1px 8px rgba(0, 0, 0, .5); }
.ar-tx-sticker .ar-tag { font-size: clamp(28px, 3.4vw, 38px); }

/* flourishes */
.ar-fl-line { display: flex; align-items: center; width: min(280px, 56vw); height: 14px; }
.ar-fl-line i { flex: 1; height: 1.4px; opacity: .95; transform-origin: center; }
.ar-fl-line b { width: 8px; height: 8px; flex: none; margin: 0 6px; transform: rotate(45deg); border: 1.2px solid; box-sizing: border-box; }
.ar-fl-svg { width: min(300px, 70vw); height: auto; overflow: visible; }
.ar-cs { transform-box: fill-box; transform-origin: 50% 0; }

/* TITLE: STICKER (Nassau): white brush script on a stacked ocean extrusion, soft shadow, a little foil sheen */
.ar-tx-sticker .ar-title { font-size: min(27vw, 25vh, 230px); }
.ar-word { position: relative; display: inline-block; padding: .06em .2em .24em .1em; margin: 0 -.1em -.2em; color: #fff; -webkit-text-stroke: .075em var(--ar-ex0); paint-order: stroke fill; letter-spacing: .005em;
  text-shadow:
    calc(var(--ex) * 0.0055em) calc(var(--ex) * 0.0105em) 0 color-mix(in srgb, var(--ar-ex0) 100%, var(--ar-ex1)),
    calc(var(--ex) * 0.0110em) calc(var(--ex) * 0.0210em) 0 color-mix(in srgb, var(--ar-ex0) 93%, var(--ar-ex1)),
    calc(var(--ex) * 0.0165em) calc(var(--ex) * 0.0315em) 0 color-mix(in srgb, var(--ar-ex0) 85%, var(--ar-ex1)),
    calc(var(--ex) * 0.0220em) calc(var(--ex) * 0.0420em) 0 color-mix(in srgb, var(--ar-ex0) 77%, var(--ar-ex1)),
    calc(var(--ex) * 0.0275em) calc(var(--ex) * 0.0525em) 0 color-mix(in srgb, var(--ar-ex0) 70%, var(--ar-ex1)),
    calc(var(--ex) * 0.0330em) calc(var(--ex) * 0.0630em) 0 color-mix(in srgb, var(--ar-ex0) 62%, var(--ar-ex1)),
    calc(var(--ex) * 0.0385em) calc(var(--ex) * 0.0735em) 0 color-mix(in srgb, var(--ar-ex0) 54%, var(--ar-ex1)),
    calc(var(--ex) * 0.0440em) calc(var(--ex) * 0.0840em) 0 color-mix(in srgb, var(--ar-ex0) 47%, var(--ar-ex1)),
    calc(var(--ex) * 0.0495em) calc(var(--ex) * 0.0945em) 0 color-mix(in srgb, var(--ar-ex0) 39%, var(--ar-ex1)),
    calc(var(--ex) * 0.0550em) calc(var(--ex) * 0.1050em) 0 color-mix(in srgb, var(--ar-ex0) 31%, var(--ar-ex1)),
    calc(var(--ex) * 0.0605em) calc(var(--ex) * 0.1155em) 0 color-mix(in srgb, var(--ar-ex0) 24%, var(--ar-ex1)),
    calc(var(--ex) * 0.0660em) calc(var(--ex) * 0.1260em) 0 color-mix(in srgb, var(--ar-ex0) 16%, var(--ar-ex1)),
    calc(var(--ex) * 0.0715em) calc(var(--ex) * 0.1365em) 0 color-mix(in srgb, var(--ar-ex0) 8%, var(--ar-ex1)),
    calc(var(--ex) * 0.0770em) calc(var(--ex) * 0.1470em) 0 color-mix(in srgb, var(--ar-ex0) 0%, var(--ar-ex1)),
    0 calc(var(--ex) * .17em) .13em rgba(2, 25, 45, .42);
}
.ar-word::after { content: attr(data-t); position: absolute; left: .1em; top: .06em; padding: 0; color: transparent; -webkit-text-stroke: 0; text-shadow: none; white-space: nowrap;
  background: linear-gradient(100deg, rgba(255, 250, 214, 0) 40%, rgba(255, 250, 214, .95) 50%, rgba(255, 250, 214, 0) 60%) 150% 0 / 260% 100% no-repeat, linear-gradient(180deg, #ffffff 0%, #ffffff 46%, #c9f1fb 100%) 0 0 / 100% 100% no-repeat; -webkit-background-clip: text; background-clip: text; }
/* DECO (Miami): Limelight capitals, pink fill sliced like the sun, teal offset line behind, a thin pink edge light */
.ar-tx-deco .ar-title { font-size: min(16vw, 22vh, 168px); letter-spacing: .12em; text-transform: uppercase; padding-left: .12em; }
.ar-tx-deco .ar-ch { color: var(--ar-b); text-shadow: 0 0 .22em color-mix(in srgb, var(--ar-a) 38%, transparent); }
.ar-tx-deco .ar-ch::after { content: attr(data-c); position: absolute; left: -.035em; top: -.045em; color: transparent; text-shadow: none; background: linear-gradient(180deg, #fff1f8 0, var(--ar-a) 52%, #ff9ac9 100%) top / 100% 56% no-repeat, repeating-linear-gradient(180deg, #ff86bf 0 .075em, transparent .075em .125em) bottom / 100% 44% no-repeat; -webkit-background-clip: text; background-clip: text; }
/* CLEAR (Exuma): rounded Lilita in shallow-water gradient */
.ar-tx-clear .ar-title { font-size: min(21vw, 24vh, 184px); letter-spacing: .02em; }
.ar-tx-clear .ar-ch { color: var(--ar-shadow); -webkit-text-stroke: .09em var(--ar-shadow); text-shadow: 0 .06em 0 var(--ar-shadow); }
.ar-tx-clear .ar-ch::after { content: attr(data-c); position: absolute; left: 0; top: 0; color: transparent; background: linear-gradient(180deg, #ffffff 0, var(--lc) 46%, #0aa3c2 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-stroke: 0; text-shadow: none; }
.ar-tx-rise .ar-title { font-size: min(18vw, 20vh, 150px); }
.ar-tx-rise .ar-ch { color: var(--ar-ink); }

@media (max-width: 519px) { .ar-line { letter-spacing: .12em; font-size: 11px; gap: 6px 9px; } .ar-where { letter-spacing: .2em; font-size: 12px; } }
@media (min-width: 640px) { .ar-where, .ar-line { font-size: 13px; } }

/* ====================================================== MOTION (starts when .ar-on is added; slow, no overshoot) */
.ar-on .ar-kicker { animation: ar-fade 1.1s .9s ease both; }
.ar-on .ar-kicker::before, .ar-on .ar-kicker::after { animation: ar-line 1.2s 1s cubic-bezier(.22, 1, .36, 1) both; }
.ar-on .ar-where { animation: ar-fade 1.2s 3.2s ease both; }
.ar-on .ar-flourish { animation: ar-fade 1s 3s ease both; }
.ar-on .ar-fl-line i { animation: ar-grow 1.4s 3s cubic-bezier(.22, 1, .36, 1) both; }
.ar-on .ar-cord { stroke-dasharray: 340; stroke-dashoffset: 340; animation: ar-draw 1.4s 3s cubic-bezier(.22, 1, .36, 1) forwards; }
.ar-on .ar-cs { animation: ar-fade .9s calc(3.5s + var(--i) * .04s) ease both, ar-sway 2.4s calc(4.2s + var(--i) * .05s) ease-in-out 2; }
.ar-on .ar-tag { animation: ar-up 1.3s 3.5s cubic-bezier(.22, 1, .36, 1) both; }
.ar-on .ar-line { animation: ar-fade 1.4s 4.2s ease both; }
.ar-on .ar-foot { animation: ar-fade 1.4s 4.7s ease forwards; }
.ar-on .ar-foot { opacity: 0; }

/* sticker word: soft wipe-in with a blur clearing, then the extrusion builds up, then one foil sweep */
.ar-on.ar-tx-sticker .ar-word { -webkit-mask-image: linear-gradient(100deg, #000 0 44%, transparent 56%); mask-image: linear-gradient(100deg, #000 0 44%, transparent 56%); -webkit-mask-size: 280% 100%; mask-size: 280% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  animation: ar-st-in 1.7s 1.5s cubic-bezier(.3, .1, .2, 1) both, ar-ex 1.5s 2.5s cubic-bezier(.3, .6, .2, 1) both; }
.ar-on.ar-tx-sticker .ar-word::after { animation: ar-sheen 1.8s 3.6s cubic-bezier(.4, 0, .2, 1) both; }
.ar-on.ar-tx-deco .ar-title { animation: ar-d-track 2.2s 1.4s cubic-bezier(.22, 1, .36, 1) both; }
.ar-on.ar-tx-deco .ar-ch { animation: ar-d-in 1.2s calc(1.5s + var(--i) * .11s) cubic-bezier(.22, 1, .36, 1) both; }
.ar-on.ar-tx-clear .ar-ch { animation: ar-c-in 1.3s calc(1.5s + var(--i) * .12s) cubic-bezier(.22, 1, .36, 1) both; }
.ar-on.ar-tx-rise .ar-ch { animation: ar-up 1s calc(1.5s + var(--i) * .08s) cubic-bezier(.22, 1, .36, 1) both; }

/* art */
.ar-on .ar-l-fronds { animation: ar-fade 2s .7s ease both; }
.ar-fr { transform-box: view-box; }
.ar-on .ar-fr { animation: ar-frond 6s var(--dl) ease-in-out infinite alternate; }
.ar-soft { filter: blur(.6px); }
.ar-on .ar-l-elder { animation: ar-fade 1.8s 2.2s ease both; }
.ar-on .ar-dr { animation: ar-drift 7s calc(var(--i) * .6s) ease-in-out infinite alternate; }
.ar-on .ar-l-flamingo, .ar-on .ar-l-hibiscus { animation: ar-fade 1.8s 2.8s ease both; }
.ar-on .ar-fl { animation: ar-drift 8s ease-in-out infinite alternate; }
.ar-on .ar-sun { animation: ar-sunrise 3s .5s cubic-bezier(.22, 1, .36, 1) both; transform-box: view-box; }
.ar-on .ar-band { animation: ar-grow 1.4s calc(1.2s + var(--i) * .15s) cubic-bezier(.22, 1, .36, 1) both; transform-origin: 50% 50%; transform-box: fill-box; }
.ar-on .ar-rays { animation: ar-fade 2s .5s ease both, ar-spin 60s linear infinite; }
.ar-on .ar-rule { stroke-dasharray: 3000; stroke-dashoffset: 3000; animation: ar-draw 2.2s calc(.7s + var(--k) * .15s) cubic-bezier(.22, 1, .36, 1) forwards; }
.ar-on .ar-rp { transform-box: fill-box; transform-origin: center; animation: ar-ripple 4.4s calc(var(--i) * .32s) ease-out infinite both; }
.ar-on .ar-sb { animation: ar-rise 1.8s .4s cubic-bezier(.22, 1, .36, 1) both; }

@keyframes ar-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ar-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes ar-line { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: .65; } }
@keyframes ar-grow { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }
@keyframes ar-dipin { from { opacity: 1; } to { opacity: 0; } }
@keyframes ar-st-in { from { -webkit-mask-position: 100% 0; mask-position: 100% 0; opacity: .0; filter: blur(10px); transform: translateY(.1em); } 25% { opacity: 1; } to { -webkit-mask-position: 0% 0; mask-position: 0% 0; opacity: 1; filter: blur(0); transform: none; } }
@keyframes ar-ex { from { --ex: 0; } to { --ex: 1; } }
@keyframes ar-sheen { from { background-position: 150% 0, 0 0; } to { background-position: -50% 0, 0 0; } }
@keyframes ar-d-track { from { letter-spacing: .4em; } to { letter-spacing: .12em; } }
@keyframes ar-d-in { from { opacity: 0; transform: translateY(.14em); filter: blur(7px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes ar-c-in { from { opacity: 0; transform: translateY(.25em); filter: blur(8px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes ar-sway { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(var(--sw)); } }
@keyframes ar-frond { from { transform: rotate(0); } to { transform: rotate(var(--sw)); } }
@keyframes ar-drift { from { transform: translate(0, 0) rotate(0); } to { transform: translate(5px, -8px) rotate(1.6deg); } }
@keyframes ar-spin { to { transform: rotate(14deg); } }
@keyframes ar-rise { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ar-sunrise { from { transform: translateY(5%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ar-draw { to { stroke-dashoffset: 0; } }
@keyframes ar-ripple { 0% { transform: scale(.2); opacity: 0; } 20% { opacity: .55; } 100% { transform: scale(3.2); opacity: 0; } }

/* Reduced motion: one plain fade, everything visible at once, no loops, no camera move */
.ar.ar-rm.ar-on { transition-duration: .4s; }
.ar.ar-rm *, .ar.ar-rm *::before, .ar.ar-rm *::after { animation: none !important; }
.ar.ar-rm .ar-grade, .ar.ar-rm .ar-foot { opacity: 1; }
.ar.ar-rm .ar-rule, .ar.ar-rm .ar-cord { stroke-dashoffset: 0; stroke-dasharray: none; }
.ar.ar-rm .ar-rp { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .ar *, .ar *::before, .ar *::after { animation: none !important; } .ar-grade, .ar-foot { opacity: 1; } .ar-rule, .ar-cord { stroke-dashoffset: 0 !important; stroke-dasharray: none !important; } .ar-rp { opacity: 0; } }