/* Home page: colorful, playful, and built around a one-screen create → share flow. */
body.landing { min-height: 100dvh; overflow-x: hidden; }
.blobs { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.blobs span { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .45; animation: drift 22s ease-in-out infinite alternate; }
.blobs .b1 { width: 520px; height: 520px; background: #ffc9b0; left: -140px; top: -120px; }
.blobs .b2 { width: 460px; height: 460px; background: #c9f2dc; right: -120px; top: 80px; animation-delay: -6s; }
.blobs .b3 { width: 420px; height: 420px; background: #dcd3ff; left: 30%; bottom: -200px; animation-delay: -12s; }
.blobs .b4 { width: 300px; height: 300px; background: #ffe9a8; right: 22%; bottom: 10%; animation-delay: -3s; opacity: .35; }
:root[data-theme="dark"] .blobs span { opacity: .14; }
@keyframes drift { to { transform: translate(40px, 30px) scale(1.08); } }

.land { max-width: 1240px; margin: 0 auto; padding: 22px 24px 72px; }
.land-nav { display: flex; align-items: center; justify-content: space-between; }
.nav-right { display: flex; align-items: center; gap: 10px; }
.nav-link { font-weight: 520; font-size: 14px; text-decoration: none; color: var(--text); padding: 9px 14px; border-radius: 12px; background: color-mix(in srgb, var(--panel) 70%, transparent); border: 1px solid var(--border); backdrop-filter: blur(8px); }
.nav-link:hover { border-color: var(--border-strong); }
.landing .iconbtn.outline { background: color-mix(in srgb, var(--panel) 70%, transparent); backdrop-filter: blur(8px); }

.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; margin-top: 40px; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 999px; background: color-mix(in srgb, var(--panel) 80%, transparent); border: 1px solid var(--border); font-size: 13.5px; font-weight: 520; color: var(--muted); backdrop-filter: blur(8px); animation: rise .6s cubic-bezier(.2, 1, .4, 1) both; }
.eyebrow .pile .av { box-shadow: 0 0 0 2px var(--panel); }
.hero h1 { font-size: clamp(40px, 4.6vw, 62px); line-height: 1; letter-spacing: -.05em; margin: 22px 0 0; font-weight: 620; animation: rise .7s .05s cubic-bezier(.2, 1, .4, 1) both; }
.hl { position: relative; color: var(--accent); white-space: nowrap; }
.hl svg { position: absolute; left: 0; right: 0; bottom: -.12em; width: 100%; height: .28em; overflow: visible; }
.hl path { fill: none; stroke: color-mix(in srgb, var(--accent) 32%, transparent); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 320; stroke-dashoffset: 320; animation: draw .9s .6s cubic-bezier(.6, 0, .2, 1) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.hl-pin { display: inline-grid; place-items: center; width: .62em; height: .62em; margin-left: .12em; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #ff7a45; color: #fff; vertical-align: .08em; animation: pinbob 2.6s 1.4s ease-in-out infinite; }
.hl-pin .i { transform: rotate(45deg); width: .34em; height: .34em; }
@keyframes pinbob { 0%, 100% { transform: rotate(-45deg) translate(0, 0); } 50% { transform: rotate(-45deg) translate(3px, -3px); } }
.sub { font-size: 18.5px; color: var(--muted); margin: 22px 0 0; max-width: 520px; line-height: 1.5; animation: rise .7s .1s cubic-bezier(.2, 1, .4, 1) both; }

/* create flow */
.create { margin-top: 28px; max-width: 560px; position: relative; animation: rise .7s .15s cubic-bezier(.2, 1, .4, 1) both; }
.dest-box { display: flex; align-items: center; gap: 10px; height: 66px; padding: 0 8px 0 20px; border-radius: 20px; background: var(--panel); border: 0; box-shadow: var(--shadow); transition: border-color .2s, box-shadow .2s; cursor: text; }
.dest-box:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent), var(--shadow); }
.dest-ic { color: var(--accent); display: grid; }
.dest-box input { flex: 1; min-width: 0; border: 0; outline: none; background: none; font-size: 18px; font-weight: 520; letter-spacing: -.01em; }
.dest-box input::placeholder { color: var(--faint); font-weight: 500; }
.dest-go { height: 50px; border-radius: 14px; padding: 0 20px; font-size: 15.5px; }
.dest-picked { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 18px; font-weight: 580; }
.dest-picked small { font-size: 14px; font-weight: 500; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dest-picked .change { margin-left: auto; font-size: 13px; font-weight: 520; color: var(--accent); flex: none; padding: 8px 12px; border-radius: 10px; }
.dest-picked .change:hover { background: var(--accent-soft); }
.create .results { top: 74px; }
.dest-ideas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; align-items: center; font-size: 13px; color: var(--muted); }
.idea { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px 0 6px; border-radius: 999px; font-size: 13.5px; font-weight: 520; background: color-mix(in srgb, var(--panel) 80%, transparent); border: 1px solid var(--border); color: var(--text); transition: transform .15s, border-color .15s; }
.idea:hover { transform: translateY(-1px); border-color: var(--border-strong); }
.idea .em { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; }

.step-more { margin-top: 14px; background: var(--panel); border: 1px solid var(--border); border-radius: 22px; padding: 18px 20px 20px; box-shadow: var(--shadow); animation: unfold .45s cubic-bezier(.2, 1, .4, 1) both; transform-origin: top center; }
@keyframes unfold { from { opacity: 0; transform: translateY(-10px) scale(.98); } }
.step-more > .field:first-child { margin-top: 0; }
.step-more .textarea { min-height: 0; }
.extras { display: flex; gap: 10px; margin-top: 12px; align-items: stretch; }
.extra-dates { flex: 1; min-width: 0; }
.extra-photo { width: 50px; height: 50px; border-radius: 14px; border: 1.5px dashed var(--border-strong); display: grid; place-items: center; cursor: pointer; color: var(--muted); overflow: hidden; flex: none; transition: border-color .15s, color .15s; }
.extra-photo:hover { border-color: var(--accent); color: var(--accent); }
.extra-photo img { width: 100%; height: 100%; object-fit: cover; }
.extra-photo.has { border: 2px solid var(--accent); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.opt { color: var(--faint); font-weight: 500; }
.create-go { margin-top: 16px; height: 54px; font-size: 16px; position: relative; overflow: hidden; }
.create-go.loading #createLabel { opacity: 0; }
.create-go.loading::after { content: ''; position: absolute; width: 22px; height: 22px; border-radius: 50%; border: 3px solid color-mix(in srgb, var(--accent-ink) 35%, transparent); border-top-color: var(--accent-ink); animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.fine { margin: 14px 4px 0; font-size: 13px; color: var(--faint); }

/* success */
.step-done { background: var(--panel); border: 1px solid var(--border); border-radius: 26px; padding: 26px; box-shadow: var(--shadow-lg); text-align: center; animation: unfold .5s cubic-bezier(.2, 1, .4, 1) both; }
.done-pin { position: relative; width: 84px; height: 84px; margin: 4px auto 14px; }
.done-pin .pin-head { width: 84px; height: 84px; padding: 5px; animation: drop .7s .1s cubic-bezier(.3, 1.4, .5, 1) both; }
.done-pin .pin-head > .av, .done-pin .pin-head > .ph { width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; font-size: 30px; font-weight: 600; color: #fff; }
.done-pin::after { content: ''; position: absolute; left: 50%; bottom: -10px; width: 44px; height: 10px; margin-left: -22px; border-radius: 50%; background: rgba(15, 23, 42, .15); filter: blur(3px); animation: shadowin .7s .1s both; }
@keyframes shadowin { from { transform: scale(.3); opacity: 0; } }
.step-done h2 { margin: 6px 0 0; font-size: 26px; letter-spacing: -.03em; }
.step-done .lead { color: var(--muted); margin: 6px 0 0; font-size: 15px; }
.done-link { display: flex; gap: 8px; margin-top: 18px; padding: 6px 6px 6px 14px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--border); align-items: center; }
.done-link input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font-size: 14.5px; font-weight: 520; color: var(--text); }
.done-share { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; }
.done-share a, .done-share button { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 4px; border-radius: 14px; border: 1px solid var(--border); font-size: 12.5px; font-weight: 520; text-decoration: none; color: var(--text); transition: transform .15s, background .15s; }
.done-share a:hover, .done-share button:hover { background: var(--surface-3); transform: translateY(-2px); }
.done-share .dot { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; color: #fff; }
.done-open { margin-top: 16px; }
.done-note { font-size: 12.5px; color: var(--faint); margin-top: 12px; }

/* showcase */
.hero-art { position: relative; height: 600px; animation: rise .8s .2s cubic-bezier(.2, 1, .4, 1) both; }
.showcase { position: absolute; inset: 20px 30px 20px 20px; border-radius: 30px; overflow: hidden; background: var(--surface-3); box-shadow: var(--shadow-lg); border: 6px solid var(--panel); transform: rotate(1.2deg); }
.show-map { position: absolute; inset: 0; }
.show-map .maplibregl-ctrl-attrib { display: none; }
.show-head { position: absolute; left: 14px; top: 14px; right: 14px; display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; border-radius: 16px; background: color-mix(in srgb, var(--panel) 88%, transparent); backdrop-filter: blur(10px); box-shadow: var(--shadow-sm); z-index: 3; }
.show-head b { font-size: 15px; letter-spacing: -.01em; }
.show-head small { display: block; font-size: 12px; color: var(--muted); font-weight: 500; }
.show-head .count { margin-left: auto; font-size: 12.5px; font-weight: 580; color: var(--accent); background: var(--accent-soft); padding: 4px 10px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.show-bubble { position: absolute; z-index: 4; max-width: 240px; padding: 10px 12px; border-radius: 16px 16px 16px 4px; background: var(--panel); box-shadow: var(--shadow); font-size: 13px; line-height: 1.35; opacity: 0; transform: translateY(6px) scale(.95); transition: opacity .3s, transform .35s cubic-bezier(.3, 1.4, .5, 1); pointer-events: none; display: flex; gap: 8px; }
.show-bubble.on { opacity: 1; transform: none; }
.show-bubble b { display: block; font-size: 12px; }
.floaty { position: absolute; z-index: 5; color: #ff4d6d; pointer-events: none; animation: floatup 1.4s ease-out forwards; }
.floaty .i { fill: currentColor; }
@keyframes floatup { from { opacity: 1; transform: translate(-50%, 0) scale(.6); } 30% { transform: translate(-50%, -18px) scale(1.2); } to { opacity: 0; transform: translate(-50%, -64px) scale(.9); } }
.showcase .pin { cursor: default; }

.sticker { position: absolute; z-index: 6; background: var(--panel); border-radius: 18px; box-shadow: var(--shadow-lg); padding: 10px 14px; display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 520; animation: bob 5s ease-in-out infinite; }
.sticker small { display: block; color: var(--muted); font-weight: 500; font-size: 12px; }
.s-hearts { left: -18px; bottom: 90px; animation-delay: -1s; }
.s-hearts .ring { width: 38px; height: 38px; border-radius: 12px; background: #ffe4e9; color: #ff4d6d; display: grid; place-items: center; }
.s-hearts .ring .i { fill: currentColor; }
.s-post { right: -6px; top: 150px; padding: 8px; flex-direction: column; align-items: stretch; gap: 6px; width: 150px; transform: rotate(4deg); animation-name: bobr; }
.s-post .ph { height: 84px; border-radius: 12px; background: linear-gradient(135deg, #ffd6a5, #ff9a8b 55%, #a0c4ff); position: relative; overflow: hidden; }
.s-post .ph::after { content: ''; position: absolute; left: 14px; bottom: 12px; width: 60px; height: 34px; border-radius: 50% 50% 0 0; background: rgba(255, 255, 255, .5); box-shadow: 44px -10px 0 -4px rgba(255, 255, 255, .35); }
.s-post .cap { font-size: 12px; padding: 0 4px 2px; }
.s-post .cap span { color: var(--ok); display: inline-flex; vertical-align: -2px; }
.s-chat { right: 40px; bottom: 26px; animation-delay: -2.5s; }
.s-chat .bubbles { display: flex; flex-direction: column; gap: 4px; }
.s-chat .bb { padding: 6px 10px; border-radius: 12px; font-size: 12.5px; font-weight: 520; }
.s-chat .bb.me { background: var(--accent); color: var(--accent-ink); align-self: flex-end; border-bottom-right-radius: 4px; }
.s-chat .bb.them { background: var(--surface-3); border-bottom-left-radius: 4px; }
@keyframes bob { 50% { transform: translateY(-8px); } }
@keyframes bobr { 0%, 100% { transform: rotate(4deg) translateY(0); } 50% { transform: rotate(4deg) translateY(-8px); } }

/* your maps */
.mine { margin-top: 56px; }
.mine h3 { margin: 0 0 12px; font-size: 18px; letter-spacing: -.02em; }
.mine-row { display: flex; gap: 12px; overflow-x: auto; padding: 4px 2px 10px; scrollbar-width: none; }
.mine-card { flex: none; display: flex; gap: 12px; align-items: center; min-width: 250px; padding: 14px 16px 14px 14px; border-radius: 20px; background: color-mix(in srgb, var(--panel) 88%, transparent); backdrop-filter: blur(8px); border: 1px solid var(--border); text-decoration: none; color: var(--text); transition: transform .2s, box-shadow .2s; }
.mine-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.mine-card b { display: block; font-size: 15px; }
.mine-card small { display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.role { font-weight: 580; font-size: 11.5px; padding: 2px 8px; border-radius: 999px; }
.role.owner { background: var(--accent-soft); color: var(--accent); }
.role.helper { background: #ffe4e9; color: #e0325a; }
.role.viewer { background: var(--surface-3); color: var(--muted); }

@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; gap: 28px; margin-top: 20px; }
  .hero-art { height: 420px; }
  .s-post { width: 124px; right: 0; }
  .s-post .ph { height: 64px; }
}
@media (max-width: 560px) {
  .land { padding: 16px 16px 48px; }
  .dest-box { height: 60px; padding-left: 16px; }
  .dest-box input { font-size: 16px; }
  .dest-go { padding: 0 14px; font-size: 14.5px; }
  .row2 { grid-template-columns: 1fr; gap: 0; }
  .hero-art { height: 360px; }
  .showcase { inset: 10px 8px 10px 8px; }
  .s-chat { display: none; }
  .s-hearts { left: 0; bottom: 40px; }
  .done-share { grid-template-columns: repeat(2, 1fr); }
  .nav-link { display: none; }
}

/* ---------- full-bleed map hero ---------- */
body.landing { position: relative; }
.land-nav, .hero-copy { position: relative; z-index: 3; }
.hero { min-height: calc(100dvh - 110px); grid-template-columns: minmax(0, 560px) 1fr; margin-top: 0; }
.hero-art { position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100dvh; min-height: 640px; animation: fade 1s ease both; }
.hero-art::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(90deg, var(--bg) 0%, var(--bg) 30%, color-mix(in srgb, var(--bg) 85%, transparent) 40%, color-mix(in srgb, var(--bg) 40%, transparent) 50%, transparent 60%),
              linear-gradient(0deg, var(--bg) 0%, transparent 16%), linear-gradient(180deg, color-mix(in srgb, var(--bg) 70%, transparent) 0%, transparent 14%); }
.showcase { inset: 0; border-radius: 0; border: 0; transform: none; box-shadow: none; }
.show-head { left: auto; right: max(24px, calc((100vw - 1240px) / 2 + 24px)); top: 96px; width: 340px; }
.hero-art .sticker { z-index: 3; }
.s-post { right: max(24px, calc((100vw - 1240px) / 2 + 24px)); top: 220px; }
.s-hearts { left: 50%; bottom: 14%; }
.s-chat { right: max(24px, calc((100vw - 1240px) / 2 + 24px)); bottom: 7%; }
.blobs { z-index: 0; }
.mine { position: relative; z-index: 3; }
@media (max-width: 980px) {
  .hero { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .hero > * { min-width: 0; }
  .hero-art { position: relative; height: 460px; min-height: 0; margin: 12px -24px 0; width: auto; }
  .hero-art::after { background: linear-gradient(180deg, var(--bg) 0%, transparent 22%), linear-gradient(0deg, var(--bg) 0%, transparent 18%); }
  .show-head { right: 16px; left: 16px; width: auto; top: 40px; }
  .s-post { top: 140px; right: 12px; }
  .s-hearts { left: 12px; bottom: 60px; }
  .s-chat { display: none; }
}
@media (max-width: 560px) { .hero-art { margin: 8px -16px 0; height: 400px; } }

body.leaving-page .hero-copy { opacity: 0; transform: translateX(-12px); transition: opacity .35s, transform .35s; }

.idea-demo { text-decoration: none; color: var(--accent); border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); }
.idea-demo .em { background: var(--accent-soft); color: var(--accent); }
.idea[hidden] { display: none; }

/* The homepage preview links into the example map. */
.to-demo, .showcase .pin { cursor: pointer; }
.to-demo { transition: transform .2s, box-shadow .2s; }
.show-head.to-demo:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
.sticker.to-demo:hover { animation-play-state: paused; box-shadow: var(--shadow-lg), 0 0 0 2px var(--accent-soft); }
.showcase .pin:hover .pin-head { transform: scale(1.08); }

.dest-ideas { flex-wrap: nowrap; overflow: hidden; padding: 4px 4px 6px; margin: 10px -4px -6px; }
.dest-ideas > * { flex: none; }

/* QA pass (Sep 30): breathing room under the nav on stacked layouts; more room for typing on tiny phones. */
@media (max-width: 980px) { .hero-copy { padding-top: 18px; } }
@media (max-width: 380px) {
  .dest-ic { display: none; }
  .dest-box { padding-left: 14px; }
  .dest-go { padding: 0 12px; }
}
.dest-ideas.wrap { flex-wrap: wrap; row-gap: 8px; }

/* Rotating city in the headline (js/headline-anim.js), plus a crossfade on the preview map behind it. */
.hl#heroCity { display: inline-block; vertical-align: bottom; }
.hl#heroCity svg.hl-line { bottom: -.12em; }

/* Prism: a filled box that is the front of a rectangular prism; it tips back and the face underneath comes up. */
.hl-prism { perspective: 1200px; color: #fff; }
.pr-cube { position: relative; display: inline-block; vertical-align: bottom; transform-style: preserve-3d; transform-origin: 50% 50% -.58em; transition: transform .7s cubic-bezier(.6, -.15, .25, 1.15), width .7s cubic-bezier(.45, .05, .25, 1); }
.pr-face { display: block; height: 1.16em; padding: 0 .2em; line-height: 1.16; text-align: center; white-space: nowrap; background: var(--accent); border-radius: .14em; backface-visibility: hidden; box-shadow: inset 0 -.05em 0 rgb(0 0 0 / .12); }
.pr-face::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #000; opacity: 0; transition: opacity .7s ease; pointer-events: none; }
.pr-front { position: relative; }
.pr-bottom { position: absolute; left: 0; right: 0; top: 0; transform-origin: 50% 50% -.58em; transform: rotateX(-90deg); background: color-mix(in srgb, var(--accent) 88%, #000); }
.pr-bottom::after { opacity: .35; }
.pr-cube.rolling { transform: rotateX(90deg); }
.pr-cube.rolling .pr-front::after { opacity: .45; }
.pr-cube.rolling .pr-bottom::after { opacity: 0; }
.pr-cube.grow { transition: transform .7s cubic-bezier(.6, -.15, .25, 1.15), width .28s ease-out; }
.pr-cube.shrink { transition: transform .7s cubic-bezier(.6, -.15, .25, 1.15), width .28s ease-in .4s; }
.pr-cube.settle, .pr-cube.settle .pr-face::after { transition: none; }

/* Split-flap: a departures board, one tile per letter. */
.hl-flap { perspective: 600px; }
.sf-row { display: inline-flex; gap: .05em; vertical-align: bottom; }
.sf { position: relative; display: inline-grid; place-items: center; min-width: .68em; height: 1.06em; padding: 0 .04em; border-radius: .08em; background: #1f2433; color: #ffd84a; font-size: .86em; font-weight: 650; letter-spacing: 0; line-height: 1; overflow: hidden; box-shadow: inset 0 -.04em 0 rgb(0 0 0 / .4); }
.sf::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: .03em; background: rgb(0 0 0 / .55); }
.sf.flip > span { animation: sfflip .09s ease-in; transform-origin: 50% 50%; }
@keyframes sfflip { from { transform: rotateX(-80deg) scaleY(.6); filter: brightness(.6); } to { transform: none; } }

/* Letter roll: each letter rides up out of view and the next rises in behind it. */
.rl-word { display: inline-block; white-space: nowrap; overflow: hidden; vertical-align: bottom; padding-bottom: .06em; margin-bottom: -.06em; }
.rl-ch { display: inline-block; animation: .3s cubic-bezier(.6, 0, .8, .4) var(--d) both; }
.rl-ch.out { animation-name: rlout; }
.rl-ch.in { animation-name: rlin; animation-duration: .42s; animation-timing-function: cubic-bezier(.2, 1.3, .4, 1); }
@keyframes rlout { to { transform: translateY(-1.1em); opacity: 0; } }
@keyframes rlin { from { transform: translateY(1.1em); opacity: 0; } }

/* Scramble keeps the word steady while letters resolve. */
.sc-word { font-variant-numeric: tabular-nums; }

/* Typewriter. */
.tw-caret { display: inline-block; width: .07em; height: .82em; margin-left: .04em; background: currentColor; vertical-align: -.04em; border-radius: 2px; animation: twblink 1s steps(1) infinite; }
.hl-type.tw-busy .tw-caret { animation: none; }
@keyframes twblink { 50% { opacity: 0; } }

/* Marker swipe: a solid bar wipes in over the old city and off the new one. */
.hl-swipe { position: relative; }
.sw-bar { position: absolute; left: -.08em; right: -.08em; top: .04em; bottom: -.04em; border-radius: .1em; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.7, 0, .3, 1); }
.sw-bar.in { transform: scaleX(1); }
.sw-bar.out { transform: scaleX(0); transform-origin: right; }

.showcase .show-map, .showcase .show-head, .hero-art .sticker { transition: opacity .3s ease; }
.showcase.swapping .show-map, .showcase.swapping .show-head { opacity: 0; }
.hero-art:has(.showcase.swapping) .sticker { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .pr-cube, .sw-bar { transition: none; } .rl-ch { animation: none; } .tw-caret { animation: none; } }