/* Twelve pieces share one local snapshot. No video or extra image downloads. */
:root { --arrival-snapshot: url("/static/legacy-home-desktop.webp"); --arrival-duration: 5s; }
html[data-arrival] { overflow: hidden; }
html[data-arrival="pending"]::before {
    content: ""; position: fixed; inset: 0; z-index: 1000; pointer-events: none;
    background: #faf4f4 var(--arrival-snapshot) center top / 100% auto no-repeat;
    animation: arrival-failsafe 0s 7s forwards;
}
.platform-arrival {
    position: fixed; inset: 0; width: 100%; height: 100%; height: 100dvh;
    max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
    overflow: hidden; background: transparent; color: #fff; color-scheme: dark;
}
.platform-arrival::backdrop { background: transparent; }
.arrival-snapshot { position: absolute; inset: 0; perspective: 1200px; }
.arrival-tile {
    --col: 0; --row: 0; --dx: -48vw; --dy: -55vh; --rx: 24deg; --ry: -24deg; --rz: -5deg;
    position: absolute; left: calc(var(--col) * 25%); top: calc(var(--row) * 100% / 3);
    width: calc(25% + 1px); height: calc(100% / 3 + 1px);
    background: #faf4f4 var(--arrival-snapshot) no-repeat;
    background-size: 100vw auto;
    background-position: calc(var(--col) * -25vw) calc(var(--row) * -100dvh / 3);
    backface-visibility: hidden;
    animation: arrival-unfold var(--arrival-duration) cubic-bezier(.4, 0, .15, 1) var(--delay, 0s) both;
}
.tile-1, .tile-5, .tile-9 { --col: 1; --dx: -25vw; --ry: -36deg; --rz: -3deg; }
.tile-2, .tile-6, .tile-10 { --col: 2; --dx: 25vw; --ry: 36deg; --rz: 3deg; }
.tile-3, .tile-7, .tile-11 { --col: 3; --dx: 48vw; --ry: 24deg; --rz: 5deg; }
.tile-4, .tile-5, .tile-6, .tile-7 { --row: 1; --dy: 0vh; --rx: 0deg; }
.tile-8, .tile-9, .tile-10, .tile-11 { --row: 2; --dy: 55vh; --rx: -24deg; }
.tile-0, .tile-3, .tile-8, .tile-11 { --delay: .18s; }
.tile-1, .tile-2, .tile-9, .tile-10 { --delay: .09s; }
.arrival-portal {
    position: absolute; left: 50%; top: 44%; width: 150vmax; height: 150vmax;
    border: 2px solid #fff0c799; border-radius: 50%; pointer-events: none;
    box-shadow: 0 0 35px 16px #ffd18a77, inset 0 0 30px 10px #ffb34c33;
    animation: arrival-portal var(--arrival-duration) cubic-bezier(.25, .1, .25, 1) both;
}
.arrival-portal::before, .arrival-portal::after {
    content: ""; position: absolute; inset: 2%; border: 2px dashed #e9a13e88; border-radius: 50%;
}
.arrival-portal::after { inset: -3%; border: 1px solid #d8324b66; }
.arrival-seed {
    position: absolute; left: 50%; top: 44%; display: grid; place-items: center;
    width: 110px; height: 110px; border-radius: 50%; pointer-events: none;
    color: #fff0c1; font-size: 68px; text-shadow: 0 0 24px #ffae28;
    background: radial-gradient(circle, #fff4d322, #ffc7730a 55%, transparent 70%);
    animation: arrival-seed var(--arrival-duration) ease both;
}
.arrival-symbol {
    --sx: -34vw; --sy: -30vh; --spin: -35deg;
    position: absolute; left: 50%; top: 44%; pointer-events: none;
    color: #c88921; font: 700 clamp(25px, 4vw, 58px)/1 "Trebuchet MS", sans-serif;
    text-shadow: 0 0 14px #ffd78788;
    animation: arrival-symbol var(--arrival-duration) cubic-bezier(.2, .65, .2, 1) both;
}
.symbol-1 { --sx: -13vw; --sy: -35vh; --spin: 22deg; color: #b51d34; }
.symbol-2 { --sx: 18vw; --sy: -32vh; --spin: 28deg; }
.symbol-3 { --sx: 39vw; --sy: -21vh; --spin: 65deg; color: #b51d34; }
.symbol-4 { --sx: 37vw; --sy: 8vh; --spin: 16deg; }
.symbol-5 { --sx: 30vw; --sy: 32vh; --spin: -45deg; color: #b51d34; }
.symbol-6 { --sx: 7vw; --sy: 35vh; --spin: 18deg; }
.symbol-7 { --sx: -22vw; --sy: 33vh; --spin: -18deg; color: #b51d34; }
.symbol-8 { --sx: -40vw; --sy: 13vh; --spin: -20deg; }
.symbol-9 { --sx: -29vw; --sy: -5vh; --spin: 90deg; }
.symbol-10 { --sx: 5vw; --sy: -20vh; --spin: -22deg; color: #b51d34; }
.symbol-11 { --sx: 21vw; --sy: 5vh; --spin: -90deg; }
.arrival-message {
    position: absolute; left: 50%; bottom: max(110px, 12vh);
    display: flex; align-items: center; gap: 18px;
    width: max-content; max-width: calc(100% - 40px); padding: 22px 30px;
    border: 1px solid #ffdaa766; border-radius: 22px;
    background: #202636f5; box-shadow: 0 20px 70px #11182730;
    animation: arrival-message var(--arrival-duration) ease both;
}
.arrival-message > img { flex-shrink: 0; border-radius: 9px; }
.arrival-eyebrow { display: block; margin-bottom: 7px; color: #ffd990; font-size: 10px; font-weight: 700; letter-spacing: .19em; }
.arrival-message h2 { color: #fff; font-size: clamp(19px, 2vw, 26px); line-height: 1.25; font-weight: 400; letter-spacing: -.025em; }
.arrival-message strong { font-weight: 700; }
.arrival-skip {
    position: absolute; right: max(24px, env(safe-area-inset-right)); bottom: max(24px, env(safe-area-inset-bottom));
    display: inline-flex; align-items: center; gap: 14px; min-height: 44px;
    padding: 10px 18px; border: 1px solid #ffffff55; border-radius: 999px;
    background: #202636; color: #fff; font-size: 13px; font-weight: 600;
    box-shadow: 0 4px 16px #0002; overflow: hidden;
}
.arrival-countdown { position: absolute; inset: auto 0 0; height: 2px; background: #ffd990; transform-origin: left; animation: arrival-countdown var(--arrival-duration) linear both; }
.arrival-skip:hover { background: #363e50; }
.arrival-skip:focus-visible { outline: 3px solid #e9a934; outline-offset: 4px; }
@keyframes arrival-unfold {
    0%, 22% { opacity: 1; transform: translate3d(0, 0, 0) rotateX(0) rotateY(0) rotateZ(0); box-shadow: none; }
    32% { opacity: 1; box-shadow: 0 0 22px #f6bc6355, inset 0 0 0 1px #ffd59988; }
    72%, 100% { opacity: 0; transform: translate3d(var(--dx), var(--dy), 160px) rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz)); box-shadow: 0 0 30px #f6bc6344; }
}
@keyframes arrival-portal {
    0%, 20% { opacity: 0; transform: translate(-50%, -50%) scale(.012); }
    30% { opacity: .85; }
    70% { opacity: .65; }
    86%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}
@keyframes arrival-seed {
    0%, 20% { opacity: 0; transform: translate(-50%, -50%) scale(.1) rotate(-45deg); }
    32% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); }
    62%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.8) rotate(75deg); }
}
@keyframes arrival-symbol {
    0%, 27% { opacity: 0; transform: translate(-50%, -50%) scale(.12) rotate(0); }
    41%, 58% { opacity: .95; }
    86%, 100% { opacity: 0; transform: translate(calc(-50% + var(--sx)), calc(-50% + var(--sy))) scale(1) rotate(var(--spin)); }
}
@keyframes arrival-message {
    0%, 29% { opacity: 0; transform: translate(-50%, 20px) scale(.96); }
    42%, 83% { opacity: 1; transform: translate(-50%, 0) scale(1); }
    98%, 100% { opacity: 0; transform: translate(-50%, -12px) scale(1); }
}
@keyframes arrival-countdown { to { transform: scaleX(0); } }
@keyframes arrival-failsafe { to { visibility: hidden; } }
@media (max-width: 700px) {
    :root { --arrival-snapshot: url("/static/legacy-home-mobile.webp"); }
    .arrival-message { gap: 12px; padding: 19px 21px; bottom: 110px; }
    .arrival-message > img { width: 35px; height: 35px; }
    .arrival-eyebrow { font-size: 9px; }
    .arrival-skip { right: 20px; bottom: max(24px, env(safe-area-inset-bottom)); }
    .arrival-tile { --rx: 12deg; }
}
@media (max-height: 480px) { .arrival-message { bottom: 80px; padding-block: 14px; } }
/* Cover a preference that changes while the welcome is already open. */
@media (prefers-reduced-motion: reduce), (forced-colors: active) {
    html[data-arrival="pending"]::before, .platform-arrival { display: none; }
    html[data-arrival] { overflow: auto; }
}