/* The Arrival (2026-09-30). A first-visit flight over the painted map. Loaded last. */
.arr-open,.arr-open body{overflow:hidden}
.arr{position:fixed;inset:0;z-index:500;overflow:hidden;background:radial-gradient(120% 90% at 50% 30%,#12241c 0%,#070d0b 70%);color:#f3ead2;outline:none;font-family:var(--sans,system-ui,sans-serif);transition:opacity .45s ease}
.arr.is-gone{opacity:0;pointer-events:none}
.arr.is-burning{background:transparent}
.arr-gl,.arr-fx{position:absolute;inset:0;width:100%;height:100%;display:block}
.arr-gl{opacity:0;transition:opacity .9s ease}
.arr.is-flying .arr-gl,.arr.is-title .arr-gl{opacity:1}
.arr-fx{pointer-events:none}

/* ---------- The loader: the map paints itself ---------- */
.arr-loader{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:34px;padding:24px;transition:opacity .9s ease,transform 1.2s cubic-bezier(.6,0,.2,1)}
.arr.is-flying .arr-loader,.arr.is-title .arr-loader{opacity:0;transform:scale(2.6);pointer-events:none}
.arr-mosaic{display:grid;grid-template-columns:repeat(5,1fr);width:min(250px,48vw);aspect-ratio:5/6;border-radius:6px;overflow:hidden;box-shadow:0 30px 80px #000c,0 0 0 1px #e8c27a44,0 0 80px #e8c27a18;background:#0b1511}
.arr-mosaic i{display:block;background:#0f1c17 center/cover no-repeat;opacity:.18;transform:scale(.6);transition:opacity .6s ease,transform .7s cubic-bezier(.34,1.56,.64,1)}
.arr-mosaic i.is-in{opacity:1;transform:none}
.arr.is-ready .arr-mosaic{animation:arr-breathe 3.6s ease-in-out infinite}
@keyframes arr-breathe{50%{box-shadow:0 30px 80px #000c,0 0 0 1px #e8c27a88,0 0 120px #e8c27a40}}
.arr-load-copy{display:grid;justify-items:center;gap:14px;text-align:center}
.arr-seal{display:grid;place-items:center;width:48px;height:48px;border-radius:12px;background:linear-gradient(145deg,#f3d58f,#c99a45);color:#1b241d;font-family:var(--serif,Georgia,serif);font-size:26px;box-shadow:0 0 40px #e8c27a55;animation:arr-seal 2.4s ease-in-out infinite}
@keyframes arr-seal{50%{transform:translateY(-3px);box-shadow:0 0 60px #e8c27a88}}
.arr-load-line{margin:0;font-size:.8rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:#cfc6ad}
.arr-load-line b{color:#f3d58f;font-variant-numeric:tabular-nums}
.arr-choose{display:grid;justify-items:center;gap:16px;animation:arr-up .8s cubic-bezier(.2,.75,.25,1) both}
.arr-ready{margin:0;font-family:var(--serif,Georgia,serif);font-size:clamp(1.8rem,4vw,2.8rem);line-height:1.1;color:#fff6dc;text-shadow:0 0 40px #e8c27a55}
.arr-buttons{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.arr-go{position:relative;overflow:hidden;display:grid;justify-items:center;gap:2px;min-width:210px;padding:15px 26px;border:1px solid #f3d58f;border-radius:999px;background:linear-gradient(180deg,#f6dc98,#d8ab55);color:#1b241d;font:inherit;font-weight:700;font-size:1.02rem;cursor:pointer;box-shadow:0 14px 40px #0009,0 0 40px #e8c27a44;transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .35s}
.arr-go small{font-size:.68rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;opacity:.7}
.arr-go:before{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,#ffffff70 50%,transparent 70%);transform:translateX(-120%);animation:arr-shine 3.2s 1s ease-in-out infinite}
@keyframes arr-shine{40%,100%{transform:translateX(120%)}}
.arr-go:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 20px 50px #000a,0 0 60px #e8c27a66}
.arr-go.is-quiet{background:#0d1813cc;color:#f3ead2;border-color:#e8c27a66;box-shadow:0 14px 40px #0008}
.arr-go.is-quiet:before{display:none}
.arr-go:focus-visible,.arr-skip:focus-visible,.arr-enter:focus-visible,.arr-again:focus-visible,.arr-mute:focus-visible{outline:3px solid #fff3cf;outline-offset:3px}
@keyframes arr-up{from{opacity:0;transform:translateY(16px)}}

/* ---------- Captions, labels and the HUD ---------- */
.arr-caption{position:absolute;left:clamp(20px,5vw,72px);bottom:clamp(40px,9vh,90px);max-width:min(760px,calc(100vw - 40px));pointer-events:none;opacity:0;transition:opacity .5s ease}
.arr-caption.is-on{opacity:1}
.arr-eyebrow{display:block;margin-bottom:10px;font-size:.78rem;font-weight:700;letter-spacing:.32em;color:#f3d58f;text-shadow:0 2px 12px #000}
.arr-line{margin:0;font-family:var(--serif,Georgia,serif);font-size:clamp(1.7rem,3.6vw,3.1rem);line-height:1.12;color:#fff8e6;text-shadow:0 3px 30px #000c,0 1px 3px #000}
.arr-line span{display:inline-block;animation:arr-word .8s cubic-bezier(.2,.75,.25,1) both;animation-delay:calc(var(--i) * 55ms)}
@keyframes arr-word{from{opacity:0;transform:translateY(18px);filter:blur(8px)}}
.arr-caption:before{content:'';position:absolute;inset:-40px -80px -40px -60px;z-index:-1;background:radial-gradient(closest-side,#0008,transparent);pointer-events:none}
.arr-labels{position:absolute;inset:0;pointer-events:none}
.arr-label{position:absolute;left:0;top:0;display:flex;flex-direction:column;align-items:center;opacity:0;transition:opacity .5s ease;will-change:transform}
.arr-label.is-on{opacity:1}
.arr-label b{order:0;transform:translate(-50%,-100%) translateY(-34px);position:absolute;left:0;top:0;padding:5px 11px;border-radius:999px;background:#0a1511d0;border:1px solid color-mix(in srgb,var(--c,#e8c27a) 70%,transparent);color:#fff6dc;font-size:.78rem;font-weight:700;letter-spacing:.04em;white-space:nowrap;box-shadow:0 8px 20px #0008;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.arr-label i{position:absolute;left:0;top:0;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--c,#f3d58f);box-shadow:0 0 0 3px #0008,0 0 16px var(--c,#f3d58f)}
.arr-label i:before{content:'';position:absolute;left:4px;bottom:9px;width:1.5px;height:25px;background:linear-gradient(0deg,var(--c,#f3d58f),transparent)}
.arr-label i:after{content:'';position:absolute;inset:-6px;border-radius:50%;border:1.5px solid var(--c,#f3d58f);animation:arr-ping 1.8s ease-out infinite}
@keyframes arr-ping{from{transform:scale(.4);opacity:1}to{transform:scale(2.2);opacity:0}}
.arr-label.is-on b{animation:arr-pop .6s cubic-bezier(.34,1.56,.64,1) both}
@keyframes arr-pop{from{opacity:0;transform:translate(-50%,-100%) translateY(-20px) scale(.8)}}
.arr-label.is-big b{font-family:var(--serif,Georgia,serif);font-weight:400;font-size:1.3rem;padding:8px 18px;letter-spacing:.02em;border-color:#f3d58f}
.arr-hud{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;gap:16px;padding:18px clamp(16px,3vw,32px);background:linear-gradient(180deg,#000a,transparent);pointer-events:none}
.arr-hud>*{pointer-events:auto}
.arr-brand{display:flex;align-items:center;gap:10px;font-size:.72rem;font-weight:700;letter-spacing:.28em;color:#f3d58f}
.arr-brand b{display:grid;place-items:center;width:26px;height:26px;border-radius:7px;background:linear-gradient(145deg,#f3d58f,#c99a45);color:#1b241d;font-family:var(--serif,Georgia,serif);font-size:15px;letter-spacing:0}
.arr-progress{flex:1;max-width:320px;height:2px;border-radius:1px;background:#ffffff22;overflow:hidden;opacity:0;transition:opacity .5s}
.arr.is-flying .arr-progress{opacity:1}
.arr-progress i{display:block;height:100%;background:linear-gradient(90deg,#e8c27a,#fff3cf);transform-origin:0 50%;transform:scaleX(0)}
.arr-mute,.arr-skip{margin-left:auto;padding:9px 16px;border:1px solid #ffffff38;border-radius:999px;background:#0a151199;color:#f3ead2;font:inherit;font-size:.82rem;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .25s,border-color .25s}
.arr-mute:not([hidden])+.arr-skip{margin-left:0}
.arr-mute:hover,.arr-skip:hover{background:#ffffff1c;border-color:#f3d58f}

/* ---------- Every phone buzzes ---------- */
.arr-notes{position:absolute;right:clamp(16px,3vw,32px);top:78px;display:grid;gap:10px;width:min(360px,calc(100vw - 32px));margin:0;padding:0;list-style:none;pointer-events:none}
.arr-notes li{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:18px;background:#f5ecd6f2;color:#1b241d;font-size:.84rem;line-height:1.35;box-shadow:0 14px 34px #000a;opacity:0;transform:translateY(-30px) scale(.94)}
.arr-notes.is-on li{animation:arr-note .7s cubic-bezier(.34,1.56,.64,1) both;animation-delay:calc(var(--i) * .35s)}
.arr.is-title .arr-notes li{animation:arr-note-out .6s ease both;animation-delay:calc(2.6s + var(--i) * .2s)}
@keyframes arr-note{from{opacity:0;transform:translateY(-30px) scale(.94)}to{opacity:1;transform:none}}
@keyframes arr-note-out{from{opacity:1;transform:none}to{opacity:0;transform:translateX(40px)}}
.arr-notes b{display:block;font-size:.64rem;letter-spacing:.14em}
.arr-note-seal{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:linear-gradient(145deg,#f0d08a,#c99a45);font-family:var(--serif,Georgia,serif);font-size:17px;color:#1b241d}

/* ---------- The cover, then the courtyard ---------- */
.arr-flashout{position:absolute;inset:0;background:#fff8e6;opacity:0;pointer-events:none}
.arr-flashout.is-on{animation:arr-flash 1.4s ease-out both}
@keyframes arr-flash{0%{opacity:0}12%{opacity:.95}100%{opacity:0}}
.arr-title{position:absolute;left:0;right:0;bottom:clamp(20px,5vh,48px);display:grid;justify-items:center;gap:14px;padding:0 20px;text-align:center;animation:arr-up 1s .8s cubic-bezier(.2,.75,.25,1) both}
.arr-title[hidden]{display:none}
.arr-title-eyebrow{font-size:.74rem;font-weight:700;letter-spacing:.34em;color:#f3d58f;text-shadow:0 2px 12px #000}
.arr-title-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.arr-enter{position:relative;overflow:hidden;padding:15px 30px;border:1px solid #f3d58f;border-radius:999px;background:linear-gradient(180deg,#f6dc98,#d8ab55);color:#1b241d;font:inherit;font-weight:700;font-size:1.05rem;cursor:pointer;box-shadow:0 14px 40px #000a,0 0 50px #e8c27a55;animation:arr-glow 2.4s ease-in-out infinite}
.arr-enter:before{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,#ffffff70 50%,transparent 70%);transform:translateX(-120%);animation:arr-shine 3s .6s ease-in-out infinite}
@keyframes arr-glow{50%{box-shadow:0 14px 40px #000a,0 0 80px #e8c27a88}}
.arr-again{padding:15px 22px;border:1px solid #ffffff44;border-radius:999px;background:#0a1511aa;color:#f3ead2;font:inherit;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.arr.is-burning .arr-title,.arr.is-burning .arr-hud,.arr.is-burning .arr-notes{opacity:0;transition:opacity .3s}
.arr-replay span{display:inline-grid;place-items:center;width:22px;height:22px;margin-right:4px;border-radius:50%;border:1px solid currentColor;font-size:.6rem}

@media(max-width:640px){
 .arr-hud{gap:10px;padding:12px 14px}.arr-brand{font-size:.62rem;letter-spacing:.2em}.arr-progress{display:none}
 .arr-mute,.arr-skip{padding:8px 12px;font-size:.76rem}
 .arr-notes{top:64px}
 .arr-go{min-width:0;width:100%}
 .arr-buttons{width:min(320px,100%)}
 .arr-label b{font-size:.7rem;padding:4px 9px}
}
@media(prefers-reduced-motion:reduce){.arr{display:none!important}}
:root[data-motion=off] .arr{display:none!important}
@media print{.arr{display:none!important}}