/* Baiyu Curated motion styles. Everything is scoped to html.by-mo, which the head script
   only sets when a style is chosen and the visitor has not asked for reduced motion. */

@property --by-vt-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --by-vt-r { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --by-mo-orbit { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

.by-mo[data-motion="tide"] { --by-mo-accent: #78d6e3; --by-mo-enter: by-mo-surface; }
.by-mo[data-motion="beam"] { --by-mo-accent: #f3d08f; --by-mo-enter: by-mo-lit; }
.by-mo[data-motion="star"] { --by-mo-accent: #b4e1ff; --by-mo-enter: by-mo-warp; }
.by-mo[data-motion="ink"]  { --by-mo-accent: #d0503f; --by-mo-enter: by-mo-bleed; }

/* Running animations make the browser paint before site.js enhances the header; paint it in its final shape. */
.by-mo .by-header:not(.is-enhanced) .by-header-search { display: none; }
@media (max-width: 640px) { .by-mo .by-header:not(.is-enhanced) .by-nav { display: none; } }

/* ---------- Shared: arrival choreography ---------- */
.by-mo .by-hero-content > *,
.by-mo .by-section-tile,
.by-mo .by-section-head,
.by-mo .by-grid > .by-card,
.by-mo .by-breadcrumb,
.by-mo .by-archive-head > *,
.by-mo .by-article-intro > *,
.by-mo .by-article-body,
.by-mo .by-download-panel,
.by-mo .by-download-row,
.by-mo .by-browse-all,
.by-mo .by-pagination {
  animation: var(--by-mo-enter) 680ms cubic-bezier(.2, .75, .2, 1) backwards;
  animation-delay: calc(var(--by-mo-i, 0) * 55ms + var(--by-mo-base, 0ms));
}
.by-mo .by-hero-content > :nth-child(2) { --by-mo-i: 1; }
.by-mo .by-hero-content > :nth-child(3) { --by-mo-i: 2; }
.by-mo .by-hero-content > :nth-child(4) { --by-mo-i: 3; }
.by-mo .by-section-tiles { --by-mo-base: 160ms; }
.by-mo .by-section-tile:nth-child(2) { --by-mo-i: 1; }
.by-mo .by-section-tile:nth-child(3) { --by-mo-i: 2; }
.by-mo .by-section-tile:nth-child(4) { --by-mo-i: 3; }
.by-mo .by-featured, .by-mo .by-archive-head ~ * { --by-mo-base: 260ms; }
.by-mo .by-archive-head > :nth-child(2) { --by-mo-i: 1; }
.by-mo .by-article-intro > :nth-child(2) { --by-mo-i: 1; }
.by-mo .by-article-intro > :nth-child(3) { --by-mo-i: 2; }
.by-mo .by-article-intro > :nth-child(n+4) { --by-mo-i: 3; }
.by-mo .by-article-body { --by-mo-base: 200ms; }
.by-mo .by-download-panel { --by-mo-base: 300ms; }
.by-mo .by-download-row { --by-mo-base: 420ms; }
.by-mo .by-download-row:nth-child(2) { --by-mo-i: 1; }
.by-mo .by-download-row:nth-child(n+3) { --by-mo-i: 2; }
.by-mo .by-grid > .by-card:nth-child(2) { --by-mo-i: 1; }
.by-mo .by-grid > .by-card:nth-child(3) { --by-mo-i: 2; }
.by-mo .by-grid > .by-card:nth-child(4) { --by-mo-i: 3; }
.by-mo .by-grid > .by-card:nth-child(5) { --by-mo-i: 4; }
.by-mo .by-grid > .by-card:nth-child(6) { --by-mo-i: 5; }
.by-mo .by-grid > .by-card:nth-child(7) { --by-mo-i: 6; }
.by-mo .by-grid > .by-card:nth-child(n+8) { --by-mo-i: 7; }
/* Below-the-fold items wait for the viewport (motion.js), then replay with their batch index. */
.by-mo .by-mo-wait { opacity: 0; animation: none !important; }
.by-mo .by-mo-in { --by-mo-base: 0ms !important; --by-mo-i: var(--by-mo-j, 0) !important; }

@keyframes by-mo-surface { from { opacity: 0; transform: translateY(26px) scale(.985); } 60% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes by-mo-lit { from { opacity: 0; clip-path: inset(0 100% 0 0); transform: translateX(-10px); } to { opacity: 1; clip-path: inset(0 0 0 0); transform: none; } }
@keyframes by-mo-warp { from { opacity: 0; transform: translateY(14px) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes by-mo-bleed { from { opacity: 0; filter: blur(7px); transform: scale(1.025); } to { opacity: 1; filter: blur(0); transform: none; } }

/* ---------- Shared: touch feedback ---------- */
.by-mo .by-card, .by-mo .by-section-tile, .by-mo .by-nav a, .by-mo .by-pagination a { -webkit-tap-highlight-color: transparent; }
.by-mo .by-nav a, .by-mo .by-pagination a.page-numbers, .by-mo .by-card-link, .by-mo .by-footer a { transition: color 180ms ease, background 180ms ease, border-color 180ms ease, transform 160ms cubic-bezier(.3, .7, .3, 1.4); }
.by-mo .by-card:active { transform: scale(.982); transition-duration: 90ms; }
.by-mo .by-section-tile:active { transform: scale(.965); transition-duration: 90ms; }
.by-mo .by-nav a:active, .by-mo .by-pagination a.page-numbers:active, .by-mo .by-card-link:active { transform: scale(.92); }
.by-mo .by-view-toggle button { transition: color 180ms ease, background 220ms ease, transform 160ms ease; }
.by-mo .by-view-toggle button[aria-pressed="true"] svg { animation: by-mo-pop 380ms cubic-bezier(.3, .7, .3, 1.6); }
@keyframes by-mo-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }

/* ---------- Shared: covers fade in over a moving sheen ---------- */
.by-mo .by-card-cover img, .by-mo .by-article-cover img { transition: opacity 560ms ease, transform 700ms cubic-bezier(.2, .7, .2, 1), filter 400ms ease; }
.by-mo .by-card-cover img:not(.is-loaded), .by-mo .by-article-cover img:not(.is-loaded) { opacity: 0; transform: scale(1.06); }
.by-mo .by-card-cover:has(img:not(.is-loaded))::before {
  background: linear-gradient(105deg, transparent 30%, rgba(239, 199, 136, .09) 48%, rgba(255, 255, 255, .05) 52%, transparent 70%) 0 0 / 250% 100% no-repeat;
  animation: by-mo-sheen 1.25s linear infinite;
}
@keyframes by-mo-sheen { from { background-position: 130% 0; } to { background-position: -30% 0; } }

/* ---------- Shared: cross-page cover morph and persistent header ---------- */
@media (hover: hover) and (pointer: fine) {
  .by-mo .by-header-inner { view-transition-name: by-header; }
  .by-mo .by-article-cover { view-transition-name: by-cover; }
  .by-mo .by-mo-lab { view-transition-name: by-lab; }
}
html.by-mo::view-transition { background: var(--by-bg, #101719); }
.by-mo::view-transition-group(by-cover) { animation-duration: 620ms; animation-timing-function: cubic-bezier(.2, .85, .2, 1); z-index: 5; }
.by-mo::view-transition-old(by-cover), .by-mo::view-transition-new(by-cover) { height: 100%; object-fit: cover; overflow: clip; border-radius: 10px; }
.by-mo::view-transition-group(by-header) { animation-duration: 380ms; z-index: 6; }
.by-mo::view-transition-group(by-lab) { animation-duration: 0s; z-index: 7; }
.by-mo::view-transition-old(root), .by-mo::view-transition-new(root) { animation-duration: 700ms; }

/* Tide: the new page floods in from below behind a wave front. */
.by-mo[data-motion="tide"]::view-transition-old(root) { animation: by-vt-ebb 640ms cubic-bezier(.4, 0, .2, 1) both; }
.by-mo[data-motion="tide"]::view-transition-new(root) {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 360' preserveAspectRatio='none'%3E%3Cpath d='M0 120 C10 112 20 112 30 120 S50 128 60 120 S80 112 90 120 S110 128 120 120 V360 H0Z'/%3E%3C/svg%3E") 0 0 / 100% 300% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 360' preserveAspectRatio='none'%3E%3Cpath d='M0 120 C10 112 20 112 30 120 S50 128 60 120 S80 112 90 120 S110 128 120 120 V360 H0Z'/%3E%3C/svg%3E") 0 0 / 100% 300% no-repeat;
  animation: by-vt-flood 760ms cubic-bezier(.3, .6, .2, 1) both;
}
@keyframes by-vt-ebb { to { opacity: .35; transform: translateY(-36px) scale(.985); } }
@keyframes by-vt-flood { from { -webkit-mask-position: 0 0; mask-position: 0 0; transform: translateY(24px); } to { -webkit-mask-position: 0 100%; mask-position: 0 100%; transform: none; } }

/* Beam: a lighthouse sweep around the point that was tapped. */
.by-mo[data-motion="beam"]::view-transition-old(root) { animation: by-vt-dim 760ms ease both; }
.by-mo[data-motion="beam"]::view-transition-new(root) {
  -webkit-mask-image: conic-gradient(from -90deg at var(--by-vt-x, 50%) var(--by-vt-y, 40%), #000 var(--by-vt-a), transparent calc(var(--by-vt-a) + 18deg));
  mask-image: conic-gradient(from -90deg at var(--by-vt-x, 50%) var(--by-vt-y, 40%), #000 var(--by-vt-a), transparent calc(var(--by-vt-a) + 18deg));
  animation: by-vt-sweep 760ms cubic-bezier(.55, .05, .25, 1) both;
}
@keyframes by-vt-sweep { from { --by-vt-a: 0deg; filter: brightness(1.5); } to { --by-vt-a: 380deg; filter: brightness(1); } }
@keyframes by-vt-dim { to { filter: brightness(.45) saturate(.7); } }

/* Star: fly through the old page into the new one. */
.by-mo[data-motion="star"]::view-transition-old(root) { transform-origin: var(--by-vt-x, 50%) var(--by-vt-y, 40%); animation: by-vt-through 560ms cubic-bezier(.5, 0, .75, 0) both; }
.by-mo[data-motion="star"]::view-transition-new(root) { transform-origin: var(--by-vt-x, 50%) var(--by-vt-y, 40%); animation: by-vt-arrive 720ms 120ms cubic-bezier(.15, .8, .2, 1) both; }
@keyframes by-vt-through { to { opacity: 0; transform: scale(1.22); filter: blur(6px); } }
@keyframes by-vt-arrive { from { opacity: 0; transform: scale(.86); filter: blur(8px); } to { opacity: 1; transform: none; filter: blur(0); } }

/* Ink: an irregular ink bloom spreads from the tap. */
.by-mo[data-motion="ink"]::view-transition-old(root) { animation: by-vt-fade-ink 820ms ease both; }
.by-mo[data-motion="ink"]::view-transition-new(root) {
  -webkit-mask-image: radial-gradient(circle at var(--by-vt-x, 50%) var(--by-vt-y, 40%), #000 var(--by-vt-r), transparent calc(var(--by-vt-r) + 9vmax)), radial-gradient(circle at calc(var(--by-vt-x, 50%) + 7vmax) calc(var(--by-vt-y, 40%) - 5vmax), #000 calc(var(--by-vt-r) * .8), transparent calc(var(--by-vt-r) * .8 + 7vmax)), radial-gradient(circle at calc(var(--by-vt-x, 50%) - 8vmax) calc(var(--by-vt-y, 40%) + 6vmax), #000 calc(var(--by-vt-r) * .75), transparent calc(var(--by-vt-r) * .75 + 8vmax));
  mask-image: radial-gradient(circle at var(--by-vt-x, 50%) var(--by-vt-y, 40%), #000 var(--by-vt-r), transparent calc(var(--by-vt-r) + 9vmax)), radial-gradient(circle at calc(var(--by-vt-x, 50%) + 7vmax) calc(var(--by-vt-y, 40%) - 5vmax), #000 calc(var(--by-vt-r) * .8), transparent calc(var(--by-vt-r) * .8 + 7vmax)), radial-gradient(circle at calc(var(--by-vt-x, 50%) - 8vmax) calc(var(--by-vt-y, 40%) + 6vmax), #000 calc(var(--by-vt-r) * .75), transparent calc(var(--by-vt-r) * .75 + 8vmax));
  animation: by-vt-bloom 860ms cubic-bezier(.35, .1, .25, 1) both;
}
@keyframes by-vt-bloom { from { --by-vt-r: 0px; } to { --by-vt-r: 160vmax; } }
@keyframes by-vt-fade-ink { to { filter: grayscale(.8) blur(2px); opacity: .6; } }

/* Grid ⇄ list swaps morph each card (motion.js names them for the duration). */
.by-mo::view-transition-group(*.by-mo-card) { animation-duration: 460ms; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }

/* ---------- Shared: overlays built by motion.js ---------- */
.by-mo-fx { position: fixed; inset: 0; z-index: 140; overflow: hidden; pointer-events: none; contain: strict; }
.by-mo-fx > span { position: absolute; left: 0; top: 0; pointer-events: none; will-change: transform, opacity; }
.by-mo-progress { position: fixed; z-index: 70; top: 0; left: 0; right: 0; height: 2px; pointer-events: none; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, transparent, var(--by-mo-accent) 40%, #fff3d8); box-shadow: 0 0 10px var(--by-mo-accent); }
.admin-bar .by-mo-progress { top: 32px; }
@supports (animation-timeline: scroll()) {
  .by-mo-progress { animation: by-mo-grow linear both; animation-timeline: scroll(root); }
}
@keyframes by-mo-grow { to { transform: scaleX(1); } }

.by-mo-top {
  position: fixed; z-index: 60; right: max(22px, env(safe-area-inset-right)); bottom: max(26px, env(safe-area-inset-bottom));
  display: grid; place-items: center; width: 50px; height: 50px; padding: 0; overflow: hidden; isolation: isolate;
  border: 1px solid color-mix(in srgb, var(--by-mo-accent) 45%, transparent); border-radius: 50%;
  color: #fff8ea; background: rgba(17, 29, 35, .88); box-shadow: 0 10px 30px #0006;
  opacity: 0; transform: translateY(18px) scale(.8); pointer-events: none;
  transition: opacity 260ms ease, transform 420ms cubic-bezier(.3, .7, .3, 1.4), border-color 200ms ease;
}
.by-mo-top.is-shown { opacity: 1; transform: none; pointer-events: auto; }
.by-mo-top svg { position: relative; z-index: 2; width: 20px; height: 20px; }
.by-mo-top:hover { border-color: var(--by-mo-accent); }
.by-mo-top-fill, .by-mo-top-seal, .by-mo-top-ray { position: absolute; pointer-events: none; }
.by-mo-top-fill, .by-mo-top-seal, .by-mo-top-ray { display: none; }

.by-mo-hero { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.by-mo-hero.is-paused *, .by-mo-hero.is-paused, .by-mo-hero.is-paused::before, .by-mo-hero.is-paused::after { animation-play-state: paused !important; }
/* Page atmosphere sits above the flat body color and below the header. */
html.by-mo #by-main, html.by-mo .by-footer { position: relative; z-index: 1; }
html.by-mo body::before { content: ""; position: fixed; inset: -8%; z-index: 0; pointer-events: none; }
.by-mo-field { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.by-mo-veil { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.by-mo .by-hero-content { z-index: 1; }
.by-mo .by-hero::after { z-index: 0; background: linear-gradient(180deg, transparent 42%, rgba(16, 23, 25, .28) 74%, var(--by-bg) 100%); }
.by-mo:not([data-motion="star"]) .by-hero { background-image: linear-gradient(90deg, #0d1518 0%, rgba(13, 21, 24, .9) 22%, rgba(13, 21, 24, .55) 48%, rgba(13, 21, 24, .18) 72%, rgba(13, 21, 24, .08) 100%), var(--by-hero-image, url("../images/hero.png")); }
.by-mo .by-card,
.by-mo .by-section-tile,
.by-mo .by-article-hero,
.by-mo .by-article-body,
.by-mo .by-download-panel,
.by-mo .by-download-row {
  border-color: transparent;
  box-shadow: 0 22px 50px rgba(0, 0, 0, .28), 0 0 0 1px rgba(176, 198, 208, .05);
}
.by-mo .by-card,
.by-mo .by-section-tile { border-radius: 18px; }
.by-mo .by-article-hero,
.by-mo .by-article-body,
.by-mo .by-download-panel { border-radius: 22px; }
.by-mo .by-search { border-color: rgba(218, 225, 226, .1); box-shadow: 0 14px 40px rgba(0, 0, 0, .28); }
.by-mo .by-archive-head { border-bottom-color: transparent; box-shadow: inset 0 -1px rgba(176, 198, 208, .06); }
.by-mo .by-card-cover { -webkit-mask-image: linear-gradient(#000 0 93%, transparent 100%); mask-image: linear-gradient(#000 0 93%, transparent 100%); }
@media (hover: hover) and (pointer: fine) {
  .by-mo .by-card:hover { border-color: transparent; box-shadow: 0 26px 56px rgba(0, 0, 0, .38), 0 0 0 1px rgba(213, 170, 106, .2); }
  .by-mo .by-section-tile:hover { border-color: transparent; box-shadow: 0 18px 42px rgba(0, 0, 0, .34), 0 0 0 1px rgba(213, 170, 106, .16); }
}

/* Toast and favourites */
.by-mo .by-status:not(:empty) { animation: by-mo-toast 420ms cubic-bezier(.3, .7, .3, 1.3); }
@keyframes by-mo-toast { from { opacity: 0; transform: translate(-50%, 16px) scale(.92); } to { opacity: 1; transform: translate(-50%, 0); } }
.by-mo .byu-fav-btn[aria-pressed="true"] svg { animation: by-mo-heart 620ms cubic-bezier(.3, .7, .3, 1.6); color: #f08f86; fill: currentColor; }
@keyframes by-mo-heart { 0% { transform: scale(.4); } 35% { transform: scale(1.45); } 60% { transform: scale(.9); } 100% { transform: scale(1); } }

/* ---------- 潮汐 Tide ---------- */
.by-mo-waves { position: absolute; left: 0; right: 0; bottom: -2px; height: 78%; min-height: 120px; }
.by-mo-waves svg { position: absolute; left: 0; bottom: 0; width: 200%; height: 100%; will-change: transform; }
.by-mo-waves .w1 { height: 100%; fill: rgba(120, 214, 227, .16); stroke: rgba(190, 245, 252, .55); stroke-width: 1.4; animation: by-mo-drift 16s linear infinite; }
.by-mo-waves .w2 { height: 72%; fill: rgba(28, 72, 84, .72); stroke: rgba(160, 232, 242, .6); stroke-width: 1.3; animation: by-mo-drift 11s linear infinite reverse; }
.by-mo-waves .w3 { height: 46%; fill: rgba(16, 23, 25, .92); stroke: rgba(220, 250, 255, .7); stroke-width: 1.5; animation: by-mo-drift 7.5s linear infinite; }
.by-mo-waves path { vector-effect: non-scaling-stroke; }
@keyframes by-mo-drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.by-mo-bubble { position: absolute; bottom: -10px; width: var(--s, 5px); height: var(--s, 5px); border-radius: 50%; background: radial-gradient(circle at 35% 35%, #e9fbffcc, #78d6e322 60%, transparent 70%); animation: by-mo-rise var(--d, 9s) linear var(--w, 0s) infinite; opacity: 0; }
@keyframes by-mo-rise { 0% { opacity: 0; transform: translate(0, 0); } 15% { opacity: .9; } 100% { opacity: 0; transform: translate(var(--x, 12px), -260px); } }
html.by-mo[data-motion="tide"] body::before { background: radial-gradient(52vmax 42vmax at 0% 110%, rgba(46, 168, 186, .55), transparent 62%), radial-gradient(46vmax 36vmax at 100% -10%, rgba(18, 78, 102, .5), transparent 58%), radial-gradient(30vmax 24vmax at 55% 40%, rgba(120, 214, 227, .16), transparent 70%); animation: by-mo-depth 14s ease-in-out infinite alternate; }
@keyframes by-mo-depth { to { transform: translate3d(-4%, -3%, 0) scale(1.12); } }
html.by-mo[data-motion="tide"] .by-mo-veil { inset: -20%; background-image: radial-gradient(closest-side at 30% 40%, rgba(210, 255, 255, .34), transparent 70%), radial-gradient(closest-side at 72% 62%, rgba(120, 220, 235, .26), transparent 68%), radial-gradient(closest-side at 48% 18%, rgba(255, 255, 255, .16), transparent 66%); background-size: 150% 150%, 170% 170%, 130% 130%; background-repeat: no-repeat; animation: by-mo-caustic 7s ease-in-out infinite alternate; }
@keyframes by-mo-caustic { from { background-position: 0% 30%, 80% 0%, 10% 90%; } to { background-position: 40% 80%, 8% 70%, 75% 8%; } }
.by-mo-sea { position: absolute; left: -10%; right: -10%; bottom: -8px; height: 24vh; min-height: 140px; }
.by-mo-sea svg { position: absolute; left: 0; bottom: 0; width: 200%; height: 100%; }
.by-mo-sea .w1 { height: 100%; fill: rgba(120, 214, 227, .14); stroke: rgba(190, 245, 252, .4); stroke-width: 1.2; animation: by-mo-drift 18s linear infinite; }
.by-mo-sea .w2 { height: 64%; fill: rgba(36, 90, 104, .45); stroke: rgba(160, 232, 242, .45); stroke-width: 1.2; animation: by-mo-drift 12s linear infinite reverse; }
.by-mo-field .by-mo-bubble.is-page { animation-name: by-mo-rise-page; }
@keyframes by-mo-rise-page { 0% { opacity: 0; transform: translate(0, 12vh) scale(.6); } 12% { opacity: .9; } 100% { opacity: 0; transform: translate(var(--x, 16px), -108vh) scale(1); } }
.by-mo[data-motion="tide"] .by-card { transition: transform 420ms cubic-bezier(.2, .7, .2, 1), border-color 300ms ease, box-shadow 300ms ease; }
.by-mo[data-motion="tide"] .by-card-cover img.is-watery { filter: url(#by-mo-water); }
.by-mo[data-motion="tide"] .by-section-tile::after { opacity: 1; inset: auto 0 0 0; height: 140%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 20' preserveAspectRatio='none'%3E%3Cpath d='M0 10 C20 2 40 2 60 10 S100 18 120 10 S150 4 160 10 V20 H0Z' fill='%2378d6e3' fill-opacity='.14'/%3E%3C/svg%3E") 0 0 / 160px 20px repeat-x, linear-gradient(transparent 19px, rgba(120, 214, 227, .1) 19px); transform: translateY(100%); transition: transform 700ms cubic-bezier(.2, .7, .2, 1); }
@keyframes by-mo-tilewave { to { background-position: 160px 0, 0 0; } }
.by-mo[data-motion="tide"] .by-section-tile:active::after { transform: translateY(45%); animation: by-mo-tilewave 2.8s linear infinite; }
@media (hover: hover) and (pointer: fine) {
  .by-mo[data-motion="tide"] .by-card:hover { animation: by-mo-bob 2.6s ease-in-out infinite; border-color: rgba(120, 214, 227, .55); box-shadow: 0 18px 36px #0005, 0 0 0 1px rgba(120, 214, 227, .12), 0 0 28px rgba(120, 214, 227, .08); }
  .by-mo[data-motion="tide"] .by-section-tile:hover::after { transform: translateY(45%); animation: by-mo-tilewave 2.8s linear infinite; }
  .by-mo[data-motion="tide"] .by-section-tile:hover .by-tile-icon { animation: by-mo-bob 2.4s ease-in-out infinite; }
}
@keyframes by-mo-bob { 0%, 100% { transform: translateY(-5px); } 50% { transform: translateY(-9px) rotate(-.25deg); } }
.by-mo[data-motion="tide"] .by-mo-ring { width: 16px; height: 16px; margin: -8px 0 0 -8px; border: 1.5px solid rgba(160, 232, 242, .75); border-radius: 50%; animation: by-mo-ring 760ms cubic-bezier(.2, .7, .3, 1) forwards; }
.by-mo[data-motion="tide"] .by-mo-ring.r2 { animation-delay: 120ms; border-color: rgba(160, 232, 242, .45); opacity: 0; }
@keyframes by-mo-ring { from { opacity: 1; transform: translate(var(--x), var(--y)) scale(.3); } to { opacity: 0; transform: translate(var(--x), var(--y)) scale(5.5); } }
.by-mo[data-motion="tide"] .by-mo-top { border-radius: 50%; }
.by-mo[data-motion="tide"] .by-mo-top-fill { display: block; inset: 0; z-index: 1; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 8' preserveAspectRatio='none'%3E%3Cpath d='M0 4 C8 0 17 0 25 4 S42 8 50 4 V8 H0Z' fill='%2378d6e3' fill-opacity='.55'/%3E%3C/svg%3E") 0 0 / 50px 8px repeat-x, linear-gradient(transparent 7px, rgba(120, 214, 227, .55) 7px); transform: translateY(100%); animation: by-mo-tilewave 2s linear infinite; }
@supports (animation-timeline: scroll()) {
  .by-mo[data-motion="tide"] .by-mo-top-fill { animation: by-mo-tilewave 2s linear infinite, by-mo-level linear both; animation-timeline: auto, scroll(root); }
}
@keyframes by-mo-level { from { transform: translateY(100%); } to { transform: translateY(8%); } }
.by-mo[data-motion="tide"] .by-mo-top.is-launch svg { animation: by-mo-launch 620ms cubic-bezier(.5, 0, .3, 1); }
@keyframes by-mo-launch { 40% { transform: translateY(-30px); opacity: 0; } 41% { transform: translateY(30px); } 100% { transform: none; opacity: 1; } }
.by-mo[data-motion="tide"] .by-footer { position: relative; }
.by-mo[data-motion="tide"] .by-footer::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 26px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 26' preserveAspectRatio='none'%3E%3Cpath d='M0 16 C30 6 60 6 90 14 S150 26 180 16 S220 8 240 14 V26 H0Z' fill='%230d1417'/%3E%3C/svg%3E") 0 0 / 480px 26px repeat-x; animation: by-mo-footwave 14s linear infinite; }
@keyframes by-mo-footwave { to { background-position: 480px 0; } }
.by-mo[data-motion="tide"] .by-preview[open] { animation: by-mo-swell 520ms cubic-bezier(.3, .7, .3, 1.15) both; }
@keyframes by-mo-swell { from { opacity: 0; transform: translateX(40px) skewY(1.2deg); } to { opacity: 1; transform: none; } }

/* ---------- 灯塔 Beam ---------- */
/* The lantern is cropped by the hero, so the beam leaves from the top-right edge. */
.by-mo-lamp { position: absolute; right: 7%; top: 2px; width: 0; height: 0; }
.by-mo-beam, .by-mo-beam-core { position: absolute; right: 0; transform-origin: 100% 50%; mix-blend-mode: screen; will-change: transform; animation: by-mo-sweep 9s cubic-bezier(.45, .05, .55, .95) infinite; }
.by-mo-beam { top: -70px; width: min(110vw, 1500px); height: 150px; clip-path: polygon(0 16%, 100% 42%, 100% 58%, 0 84%); background: linear-gradient(270deg, rgba(255, 248, 226, .95), rgba(255, 214, 140, .62) 24%, rgba(255, 196, 110, .34) 58%, rgba(255, 186, 100, .12) 86%, transparent); filter: blur(2px); }
.by-mo-beam-core { top: -8px; width: min(100vw, 1360px); height: 16px; background: linear-gradient(270deg, rgba(255, 252, 240, 1), rgba(255, 226, 160, .62) 42%, transparent 90%); filter: blur(.6px); }
@keyframes by-mo-sweep { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(22deg); } }
html.by-mo[data-motion="beam"] body::before { background: radial-gradient(70vmax 48vmax at 100% -8%, rgba(186, 124, 48, .42), transparent 58%), radial-gradient(40vmax 30vmax at 70% 80%, rgba(90, 60, 24, .2), transparent 70%); animation: by-mo-depth 18s ease-in-out infinite alternate; }
html.by-mo[data-motion="beam"] .by-mo-veil { inset: -45%; transform-origin: 86% 18%; background: conic-gradient(from 206deg at 86% 18%, transparent 0deg 4deg, rgba(255, 244, 214, .55) 9deg, rgba(255, 210, 140, .22) 15deg, transparent 24deg 34deg, rgba(255, 236, 190, .38) 40deg, transparent 50deg 72deg, rgba(255, 220, 160, .28) 80deg, transparent 90deg 360deg), radial-gradient(rgba(255, 236, 200, .75) 0 1.1px, transparent 1.7px) 0 0 / 170px 210px; animation: by-mo-rays 9s ease-in-out infinite alternate; }
@keyframes by-mo-rays { from { transform: rotate(-14deg); } to { transform: rotate(18deg); } }
.by-mo-glow { position: absolute; left: -28px; top: -28px; width: 56px; height: 56px; border-radius: 50%; background: radial-gradient(circle, #fff6dd 0 8%, rgba(255, 214, 140, .7) 22%, transparent 70%); mix-blend-mode: screen; animation: by-mo-flare 5.5s ease-in-out infinite; }
@keyframes by-mo-flare { 0%, 100% { transform: scale(.7); opacity: .65; } 50% { transform: scale(1.25); opacity: 1; } }
.by-mo[data-motion="beam"] .by-hero-title, .by-mo[data-motion="beam"] .by-article-intro h1 { background: linear-gradient(100deg, var(--by-text) 42%, #ffe6b3 49%, #fff 50%, #ffe6b3 51%, var(--by-text) 58%) 0 0 / 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: by-mo-lit 680ms cubic-bezier(.2, .75, .2, 1) backwards, by-mo-glint 5.5s 900ms ease-in-out infinite; }
@keyframes by-mo-glint { 0%, 55% { background-position: 100% 0; } 85%, 100% { background-position: 0 0; } }
.by-mo[data-motion="beam"] .by-mo-spot { position: fixed; z-index: 0; left: 0; top: 0; width: 720px; height: 720px; margin: -360px 0 0 -360px; border-radius: 50%; pointer-events: none; opacity: 0; background: radial-gradient(circle, rgba(255, 220, 160, .28), transparent 62%); transition: opacity 400ms ease; will-change: transform; }
.by-mo[data-motion="beam"] .by-mo-spot.is-on { opacity: 1; }
.by-mo[data-motion="beam"] .by-card::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; border-radius: inherit; background: radial-gradient(460px circle at var(--by-mo-gx, 50%) var(--by-mo-gy, 0%), rgba(255, 232, 186, .17), transparent 42%); transition: opacity 320ms ease; }
.by-mo[data-motion="beam"] .by-card.is-tilting::after, .by-mo[data-motion="beam"] .by-card.is-glint::after { opacity: 1; }
.by-mo[data-motion="beam"] .by-card.is-tilting, .by-mo[data-motion="beam"] .by-section-tile.is-tilting { transform: perspective(1100px) rotateX(var(--by-mo-rx, 0deg)) rotateY(var(--by-mo-ry, 0deg)) translateY(-6px); transition: transform 140ms linear, border-color 240ms ease, box-shadow 240ms ease; border-color: rgba(243, 208, 143, .7); box-shadow: 0 22px 44px #0006, 0 0 0 1px rgba(243, 208, 143, .14); }
.by-mo[data-motion="beam"] .by-btn-primary, .by-mo[data-motion="beam"] .by-search button { transition: transform 200ms cubic-bezier(.3, .7, .3, 1.4), background 160ms ease; }
.by-mo[data-motion="beam"] .by-search:focus-within { animation: by-mo-searchlight 1.2s ease-out; }
@keyframes by-mo-searchlight { 0% { box-shadow: 0 0 0 0 rgba(243, 208, 143, .5); } 100% { box-shadow: 0 0 0 14px rgba(243, 208, 143, 0); } }
.by-mo[data-motion="beam"] .by-mo-flash { width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 244, 214, .55), rgba(243, 208, 143, .16) 34%, transparent 66%); mix-blend-mode: screen; animation: by-mo-flash 520ms ease-out forwards; }
@keyframes by-mo-flash { from { opacity: 1; transform: translate(var(--x), var(--y)) scale(.2); } to { opacity: 0; transform: translate(var(--x), var(--y)) scale(1.6); } }
.by-mo[data-motion="beam"] .by-mo-top-ray { display: block; inset: -50%; z-index: 0; background: conic-gradient(from 0deg, transparent 0 300deg, rgba(243, 208, 143, .45) 330deg, transparent 360deg); animation: by-mo-spin 3.6s linear infinite; }
@keyframes by-mo-spin { to { transform: rotate(360deg); } }
.by-mo[data-motion="beam"] .by-mo-top::after { content: ""; position: absolute; inset: 3px; z-index: 1; border-radius: 50%; background: rgba(17, 29, 35, .94); }
.by-mo[data-motion="beam"] .by-preview[open] { animation: by-mo-slit 520ms cubic-bezier(.2, .8, .2, 1) both; }
@keyframes by-mo-slit { from { opacity: 0; clip-path: inset(48% 0 48% 0 round 14px); filter: brightness(1.8); } 45% { opacity: 1; clip-path: inset(30% 0 30% 0 round 14px); } to { clip-path: inset(0 0 0 0 round 14px); filter: none; } }
.by-mo[data-motion="beam"] .by-footer { background: radial-gradient(70% 140% at 50% 0%, rgba(243, 208, 143, .07), transparent 70%), #0d1417; }

/* ---------- 星图 Star ---------- */
.by-mo-stars, .by-mo-meteors { position: absolute; inset: 0; width: 100%; height: 100%; }
.by-mo[data-motion="star"] .by-hero { background: transparent; }
.by-mo[data-motion="star"] .by-hero::after { background: none; }
.by-mo[data-motion="star"] .by-mo-hero {
  background-image: linear-gradient(158deg, #0d131b 0%, #1c2840 48%, #121820 100%);
}
/* Edge fade is painted on top. A mask here flashes black on tap in mobile browsers. */
.by-mo[data-motion="star"] .by-mo-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg, var(--by-bg) 0%, transparent 24%, transparent 58%, var(--by-bg) 100%),
    linear-gradient(90deg, var(--by-bg) 0%, transparent 7%, transparent 93%, var(--by-bg) 100%);
}
/* Two matching halves, so sliding by half the strip loops without a jump. */
.by-mo[data-motion="star"] .by-mo-hero::before {
  content: "";
  position: absolute;
  left: 0;
  top: -45%;
  width: 200%;
  height: 190%;
  background:
    radial-gradient(circle at 12% 42%, rgba(176, 112, 236, .82), transparent 27%),
    radial-gradient(circle at 30% 68%, rgba(46, 128, 214, .7), transparent 26%),
    radial-gradient(circle at 46% 36%, rgba(255, 176, 110, .5), transparent 24%),
    radial-gradient(circle at 62% 42%, rgba(176, 112, 236, .82), transparent 27%),
    radial-gradient(circle at 80% 68%, rgba(46, 128, 214, .7), transparent 26%),
    radial-gradient(circle at 96% 36%, rgba(255, 176, 110, .5), transparent 24%);
  animation: by-mo-current 14s linear infinite;
}
@keyframes by-mo-current { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
html.by-mo[data-motion="star"] body::before {
  inset: -22%;
  background: radial-gradient(40vmax 30vmax at 16% 28%, rgba(78, 108, 230, .78), transparent 68%), radial-gradient(36vmax 28vmax at 82% 70%, rgba(190, 60, 120, .58), transparent 70%), radial-gradient(48vmax 22vmax at 46% 88%, rgba(255, 186, 120, .34), transparent 72%);
  animation: by-mo-skytravel 18s linear infinite alternate;
}
@keyframes by-mo-skytravel { from { transform: translate3d(10%, -8%, 0) scale(1.08); } to { transform: translate3d(-16%, 12%, 0) scale(1.24); } }
html.by-mo[data-motion="star"] .by-mo-veil {
  inset: -30% auto -30% 0;
  width: 200%;
  background:
    radial-gradient(circle at 10% 30%, rgba(120, 90, 230, .42), transparent 24%),
    radial-gradient(circle at 28% 72%, rgba(40, 130, 210, .36), transparent 22%),
    radial-gradient(circle at 44% 46%, rgba(255, 180, 120, .22), transparent 20%),
    radial-gradient(circle at 60% 30%, rgba(120, 90, 230, .42), transparent 24%),
    radial-gradient(circle at 78% 72%, rgba(40, 130, 210, .36), transparent 22%),
    radial-gradient(circle at 94% 46%, rgba(255, 180, 120, .22), transparent 20%);
  animation: by-mo-current 20s linear infinite;
}
@supports (animation-timeline: scroll()) {
  html.by-mo[data-motion="star"] body::before { animation: by-mo-skytravel 18s linear infinite alternate, by-mo-parallax linear both; animation-timeline: auto, scroll(root); }
}
@keyframes by-mo-parallax { to { transform: translate3d(0, -14vh, 0); } }
.by-mo[data-motion="star"] .by-card::before { content: ""; position: absolute; inset: 0; z-index: 4; padding: 1px; border-radius: inherit; pointer-events: none; opacity: .9; background: conic-gradient(from var(--by-mo-orbit), transparent 0 62%, rgba(180, 225, 255, .95) 78%, #fff 82%, rgba(239, 199, 136, .95) 88%, transparent 96%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation: by-mo-orbit 4.8s linear infinite; }
.by-mo[data-motion="star"] .by-card::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none; opacity: 0; background: radial-gradient(260px circle at var(--by-mo-gx, 50%) var(--by-mo-gy, 40%), rgba(186, 220, 255, .2), transparent 46%); transition: opacity 220ms ease; }
.by-mo[data-motion="star"] .by-card.is-aimed::after { opacity: 1; }
.by-mo[data-motion="star"] .by-card:focus-within::before, .by-mo[data-motion="star"] .by-card.is-glint::before { opacity: 1; animation-duration: 2.2s; }
@media (hover: hover) and (pointer: fine) { .by-mo[data-motion="star"] .by-card:hover::before { opacity: 1; animation-duration: 2.2s; } }
@keyframes by-mo-orbit { to { --by-mo-orbit: 360deg; } }
.by-mo[data-motion="star"] .by-section-tile::before { opacity: .9; background-image: radial-gradient(1.6px 1.6px at 18% 30%, #cfe9ff, transparent), radial-gradient(1.4px 1.4px at 62% 22%, #ffe9c0, transparent), radial-gradient(1.8px 1.8px at 82% 64%, #fff, transparent), radial-gradient(1.2px 1.2px at 40% 78%, #b4e1ff, transparent), radial-gradient(1.3px 1.3px at 90% 30%, #fff, transparent), radial-gradient(1px 1px at 28% 70%, #fff, transparent); background-size: 140% 140%; animation: by-mo-twinkle 2.8s ease-in-out infinite alternate, by-mo-stardrift 16s linear infinite; }
@keyframes by-mo-stardrift { to { background-position: 40px -24px; } }
@keyframes by-mo-twinkle { from { opacity: .35; } to { opacity: 1; } }
.by-mo[data-motion="star"] .by-tile-count { font-variant-numeric: tabular-nums; }
.by-mo[data-motion="star"] .by-mo-spark { width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px 1px var(--c, #b4e1ff); animation: by-mo-spark 640ms cubic-bezier(.15, .7, .3, 1) forwards; }
@keyframes by-mo-spark { from { opacity: 1; transform: translate(var(--x), var(--y)) scale(1.4); } to { opacity: 0; transform: translate(calc(var(--x) + var(--dx)), calc(var(--y) + var(--dy))) scale(.2); } }
.by-mo[data-motion="star"] .by-mo-top { border-radius: 16px; }
.by-mo[data-motion="star"] .by-mo-top.is-launch { animation: by-mo-comet 900ms cubic-bezier(.5, -0.2, .3, 1); }
@keyframes by-mo-comet { 0% { transform: none; } 35% { transform: translateY(-110vh); box-shadow: 0 60px 40px -10px rgba(180, 225, 255, .5); } 36% { transform: translateY(40px); opacity: 0; } 100% { transform: none; opacity: 1; } }
.by-mo[data-motion="star"] .by-preview[open] { animation: by-vt-arrive 460ms cubic-bezier(.15, .8, .2, 1) both; }
.by-mo[data-motion="star"] .by-section-title::before { animation: by-mo-pulse 3.2s ease-in-out infinite; }
@keyframes by-mo-pulse { 50% { box-shadow: 0 0 18px rgba(239, 199, 136, .55); } }

/* ---------- 水墨 Ink ---------- */
html.by-mo[data-motion="ink"] body::before { background: radial-gradient(44vmax 36vmax at 100% 100%, rgba(208, 80, 63, .28), transparent 64%), radial-gradient(40vmax 34vmax at -10% 20%, rgba(214, 220, 222, .16), transparent 68%), radial-gradient(36vmax 28vmax at 40% 110%, rgba(80, 86, 90, .35), transparent 70%); animation: by-mo-depth 18s ease-in-out infinite alternate; }
.by-mo-inkmark { position: absolute; right: -6vw; bottom: -12vh; color: rgba(208, 80, 63, .13); font: 700 46vw/1 "Noto Serif SC", "Songti SC", serif; letter-spacing: -.06em; transform: rotate(-16deg); animation: by-mo-depth 24s ease-in-out infinite alternate; user-select: none; }
.by-mo-bloom { position: absolute; width: 52vmax; height: 44vmax; margin: -22vmax 0 0 -26vmax; border-radius: 48% 52% 44% 56% / 54% 46% 56% 44%; background: radial-gradient(circle at 40% 40%, rgba(232, 236, 238, .28), rgba(208, 80, 63, .12) 42%, transparent 72%); filter: blur(6px); animation: by-mo-bloom 4.2s ease-out forwards; }
@keyframes by-mo-bloom { 0% { opacity: 0; transform: translate(var(--x), var(--y)) scale(.12) rotate(0deg); } 28% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(1.2) rotate(18deg); } }
.by-mo-mist { position: absolute; width: 80%; height: 160%; border-radius: 50%; filter: blur(26px); opacity: 1; background: radial-gradient(closest-side, rgba(230, 236, 238, .34), transparent); animation: by-mo-mist 16s ease-in-out infinite alternate; }
.by-mo-ridge { position: absolute; left: -4%; bottom: 0; width: 70%; height: 78%; will-change: transform; }
.by-mo-ridge.r1 { animation: by-mo-ridge 30s ease-in-out infinite alternate; }
.by-mo-ridge.r2 { left: -8%; width: 62%; height: 54%; animation: by-mo-ridge 22s ease-in-out infinite alternate-reverse; }
@keyframes by-mo-ridge { to { transform: translate3d(5%, 0, 0); } }
.by-mo-mist.m1 { left: -10%; top: 30%; }
.by-mo-mist.m2 { left: 40%; top: 10%; width: 60%; animation-duration: 31s; animation-direction: alternate-reverse; opacity: .4; }
@keyframes by-mo-mist { to { transform: translate3d(18%, -10%, 0) scale(1.15); } }
.by-mo[data-motion="ink"] .by-hero-title, .by-mo[data-motion="ink"] .by-article-intro h1, .by-mo[data-motion="ink"] .by-archive-head h1 { animation: by-mo-brush 1500ms 150ms cubic-bezier(.6, .1, .25, 1) backwards; }
@keyframes by-mo-brush {
  from { -webkit-mask-image: linear-gradient(90deg, #000 40%, transparent 56%); mask-image: linear-gradient(90deg, #000 40%, transparent 56%); -webkit-mask-size: 260% 100%; mask-size: 260% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: 100% 0; mask-position: 100% 0; filter: blur(2px); }
  to { -webkit-mask-image: linear-gradient(90deg, #000 40%, transparent 56%); mask-image: linear-gradient(90deg, #000 40%, transparent 56%); -webkit-mask-size: 260% 100%; mask-size: 260% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: 0 0; mask-position: 0 0; filter: blur(0); }
}
.by-mo[data-motion="ink"] .by-hero .by-kicker, .by-mo[data-motion="ink"] .by-article-intro .by-kicker { display: inline-block; padding: 3px 8px 2px; color: #f2a497; border: 1.5px solid rgba(208, 80, 63, .8); border-radius: 3px; background: rgba(208, 80, 63, .1); font-family: "Noto Serif SC", "Songti SC", serif; animation: by-mo-stamp 520ms 900ms cubic-bezier(.3, .6, .3, 1.4) backwards; }
@keyframes by-mo-stamp { from { opacity: 0; transform: scale(2.1) rotate(-14deg); } 70% { opacity: 1; transform: scale(.94) rotate(-3deg); } to { opacity: 1; transform: rotate(-2deg); } }
.by-mo[data-motion="ink"] .by-card-cover::after { content: "白屿"; inset: 10px 10px auto auto; z-index: 2; width: 24px; padding: 4px 0; writing-mode: vertical-rl; display: grid; place-items: center; color: #ffd8cf; font: 600 11px/1.15 "Noto Serif SC", "Songti SC", serif; letter-spacing: .1em; border: 1.5px solid rgba(232, 108, 90, .9); border-radius: 3px; background: rgba(170, 52, 38, .55); opacity: 0; transform: scale(1.9) rotate(-16deg); }
.by-mo[data-motion="ink"] .by-card:focus-within .by-card-cover::after, .by-mo[data-motion="ink"] .by-card.is-glint .by-card-cover::after { animation: by-mo-stamp 460ms cubic-bezier(.3, .6, .3, 1.4) forwards; }
.by-mo[data-motion="ink"] .by-card-title a { background: linear-gradient(90deg, rgba(208, 80, 63, .85), rgba(213, 170, 106, .7)) no-repeat 0 100% / 0 2px; transition: background-size 520ms cubic-bezier(.6, .1, .25, 1), color 200ms ease; }
.by-mo[data-motion="ink"] .by-card-cover img { filter: saturate(.82) contrast(1.04); }
.by-mo[data-motion="ink"] .by-section-tile::after { opacity: 1; background: radial-gradient(circle at 44px 44px, rgba(213, 170, 106, .16), rgba(208, 80, 63, .07) 40%, transparent 72%); clip-path: circle(0 at 44px 44px); transition: clip-path 760ms cubic-bezier(.5, .1, .25, 1); }
.by-mo[data-motion="ink"] .by-section-tile:active::after { clip-path: circle(150% at 44px 44px); }
@media (hover: hover) and (pointer: fine) {
  .by-mo[data-motion="ink"] .by-card:hover .by-card-cover::after { animation: by-mo-stamp 460ms 120ms cubic-bezier(.3, .6, .3, 1.4) forwards; }
  .by-mo[data-motion="ink"] .by-card:hover .by-card-title a { background-size: 100% 2px; }
  .by-mo[data-motion="ink"] .by-card:hover .by-card-cover img { filter: saturate(1.12) contrast(1.06); }
  .by-mo[data-motion="ink"] .by-section-tile:hover::after { clip-path: circle(150% at 44px 44px); }
}
.by-mo[data-motion="ink"] .by-section-title::before { transform-origin: 50% 0; animation: by-mo-stroke 700ms 300ms cubic-bezier(.6, .1, .25, 1) backwards; background: linear-gradient(180deg, #e0705f, #b4803e); }
@keyframes by-mo-stroke { from { transform: scaleY(0); } }
.by-mo[data-motion="ink"] .by-mo-blot { width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 46% 54% 42% 58% / 55% 45% 55% 45%; background: radial-gradient(circle at 40% 40%, rgba(225, 230, 232, .3), rgba(160, 170, 175, .12) 55%, transparent 72%); filter: blur(1.5px); animation: by-mo-blot 820ms cubic-bezier(.2, .7, .3, 1) forwards; }
.by-mo[data-motion="ink"] .by-mo-blot.b2 { width: 12px; height: 12px; margin: -6px 0 0 -6px; animation-duration: 640ms; }
@keyframes by-mo-blot { from { opacity: 1; transform: translate(var(--x), var(--y)) scale(.2) rotate(0); } to { opacity: 0; transform: translate(calc(var(--x) + var(--dx, 0px)), calc(var(--y) + var(--dy, 0px))) scale(2.6) rotate(40deg); } }
.by-mo[data-motion="ink"] .by-mo-top { border-radius: 6px; border: 1.5px solid rgba(232, 108, 90, .9); background: rgba(150, 44, 32, .85); color: #ffe3dc; }
.by-mo[data-motion="ink"] .by-mo-top svg { display: none; }
.by-mo[data-motion="ink"] .by-mo-top-seal { display: grid; position: static; place-items: center; font: 700 20px/1 "Noto Serif SC", "Songti SC", serif; }
.by-mo[data-motion="ink"] .by-mo-top.is-shown { transform: rotate(-4deg); }
.by-mo[data-motion="ink"] .by-mo-top.is-launch { animation: by-mo-press 460ms cubic-bezier(.3, .6, .3, 1.4); }
@keyframes by-mo-press { 0% { transform: rotate(-4deg); } 40% { transform: scale(.82) rotate(-4deg); box-shadow: 0 0 0 0 rgba(208, 80, 63, .6); } 100% { transform: rotate(-4deg); box-shadow: 0 0 0 22px rgba(208, 80, 63, 0); } }
.by-mo[data-motion="ink"] .by-footer { position: relative; }
.by-mo[data-motion="ink"] .by-footer::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 70px; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 70' preserveAspectRatio='none'%3E%3Cpath d='M0 70 L0 52 C40 40 70 22 110 30 S170 58 220 40 S300 6 350 24 S430 54 480 36 S560 18 600 34 V70Z' fill='%23182226'/%3E%3Cpath d='M0 70 L0 60 C50 50 90 44 140 52 S230 66 290 54 S380 40 440 52 S540 64 600 56 V70Z' fill='%230d1417'/%3E%3C/svg%3E") 0 100% / 100% 100% no-repeat; }
.by-mo[data-motion="ink"] .by-preview[open] { animation: by-mo-unroll 560ms cubic-bezier(.6, .1, .25, 1) both; }
@keyframes by-mo-unroll { from { clip-path: inset(0 0 100% 0 round 14px); filter: blur(4px); } to { clip-path: inset(0 0 0 0 round 14px); filter: none; } }
.by-mo[data-motion="ink"] .by-status:not(:empty) { border-color: rgba(232, 108, 90, .6); animation: by-mo-unroll 460ms cubic-bezier(.6, .1, .25, 1); }

/* Same-page swaps only morph the cards; the page itself must not flood or sweep. */
.by-mo.by-mo-swapping::view-transition-old(root) { display: none; }
.by-mo.by-mo-swapping::view-transition-new(root) { animation: none; -webkit-mask: none; mask: none; filter: none; transform: none; }

/* Touch: no scale, no mask, no orbit border. Those layers snapshot as a black patch on tap. */
@media (hover: none), (pointer: coarse) {
  .by-mo .by-card:active,
  .by-mo .by-section-tile:active,
  .by-mo .by-nav a:active,
  .by-mo .by-pagination a.page-numbers:active,
  .by-mo .by-card-link:active { transform: none; }
  .by-mo .by-card-cover { -webkit-mask-image: none; mask-image: none; }
  .by-mo[data-motion="star"] .by-card::before { content: none; animation: none; }
  html.by-mo[data-motion="star"] body::before { animation: by-mo-skytravel 32s ease-in-out infinite alternate; animation-timeline: auto; }
  .by-mo[data-motion="star"] .by-section-tile::before { animation: none; opacity: .65; }
  .by-mo[data-motion="star"] .by-section-title::before { animation: none; }
  .by-mo .by-hero-content > *,
  .by-mo .by-section-tile,
  .by-mo .by-section-head,
  .by-mo .by-grid > .by-card,
  .by-mo .by-breadcrumb,
  .by-mo .by-archive-head > *,
  .by-mo .by-article-intro > *,
  .by-mo .by-article-body,
  .by-mo .by-download-panel,
  .by-mo .by-download-row,
  .by-mo .by-browse-all,
  .by-mo .by-pagination { animation: none; }
  .by-mo[data-motion="star"] .by-card,
  .by-mo[data-motion="star"] .by-section-tile { box-shadow: 0 0 0 1px rgba(180, 225, 255, .2); }
}

/* Mobile sheets rise rather than slide. */
@media (max-width: 640px) {
  .by-mo[data-motion="tide"] .by-preview[open] { animation-name: by-mo-swell-up; }
  .by-mo[data-motion="star"] .by-preview[open] { animation-name: by-sheet-in; }
  .by-mo-top { width: 46px; height: 46px; right: 16px; bottom: max(18px, env(safe-area-inset-bottom)); }
  .by-mo-lamp { right: 2%; }
  .by-mo-beam { width: 140vw; height: 90px; top: -40px; }
  html.by-mo[data-motion="beam"] .by-mo-veil { animation-duration: 12s; }
  .by-mo-inkmark { font-size: 70vw; }
}
@keyframes by-mo-swell-up { from { opacity: 0; transform: translateY(70px) scaleY(.96); } 70% { transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---------- Comparison panel (?motion-lab=1) ---------- */
.by-mo-lab { position: fixed; z-index: 160; top: 102px; left: 50%; width: min(420px, calc(100vw - 32px)); padding: 12px 12px 10px; border: 1px solid rgba(213, 170, 106, .35); border-radius: 14px; color: var(--by-text); background: rgba(16, 26, 31, .94); box-shadow: 0 18px 50px #0008; font-size: 12px; transform: translateX(-50%); }
@supports (backdrop-filter: blur(10px)) { .by-mo-lab { background: rgba(16, 26, 31, .8); backdrop-filter: blur(14px); } }
.by-mo-lab-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.by-mo-lab-head strong { font-size: 13px; letter-spacing: .06em; }
.by-mo-lab-head strong small { margin-left: 6px; color: var(--by-subtle); font-weight: 400; letter-spacing: 0; }
.by-mo-lab-head div { display: flex; gap: 6px; }
.by-mo-lab-head button { min-height: 28px; padding: 3px 9px; border: 1px solid var(--by-border-strong); border-radius: 6px; color: var(--by-muted); background: transparent; font-size: 11px; }
.by-mo-lab-head button:hover { color: var(--by-gold-light); border-color: var(--by-gold); }
.by-mo-lab-opts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.by-mo-lab-opts button { min-height: 40px; padding: 6px 4px; border: 1px solid var(--by-border); border-radius: 8px; color: var(--by-muted); background: rgba(255, 255, 255, .03); font-size: 13px; font-weight: 600; letter-spacing: .04em; transition: color 160ms ease, border-color 160ms ease, background 160ms ease; }
.by-mo-lab-opts button:hover { color: var(--by-text); border-color: var(--by-border-strong); }
.by-mo-lab-opts button[aria-checked="true"] { color: #241b0f; border-color: #deb77c; background: linear-gradient(135deg, #ebc17f, #c99a59); }
.by-mo-lab-desc { margin: 8px 2px 0; color: var(--by-subtle); line-height: 1.6; }
.by-mo-lab.is-min { top: auto; bottom: max(16px, env(safe-area-inset-bottom)); left: max(16px, env(safe-area-inset-left)); width: auto; padding: 0; border-radius: 22px; transform: none; }
.by-mo-lab.is-min > :not(.by-mo-lab-pill) { display: none; }
.by-mo-lab-pill { display: none; min-height: 40px; padding: 8px 15px; border: 0; border-radius: 22px; color: var(--by-gold-light); background: transparent; font-size: 12px; font-weight: 600; letter-spacing: .05em; }
.by-mo-lab.is-min .by-mo-lab-pill { display: block; }
@media (max-width: 640px) {
  .by-mo-lab { top: 86px; width: min(420px, calc(100vw - 24px)); padding: 10px 9px 8px; }
  .by-mo-lab-opts button { min-height: 38px; font-size: 12px; padding-inline: 2px; }
  .by-mo-lab-desc { display: none; }
}