/* ============================================================
   X Space motion layer — inner pages (blog, contact, static pages)
   Loaded only when NOT the front page.
   ============================================================ */

/* ---------- Page header / breadcrumb ---------- */
body.motion-on .pxl-page-title,
body.motion-on .pxl-post-title {
  position: relative;
  padding: clamp(120px, 18vh, 190px) 0 clamp(40px, 6vh, 64px);
  background: radial-gradient(ellipse at 50% 0%, rgba(123, 47, 247, 0.22), transparent 62%);
}

/* The theme is configured to build this block from an Elementor title
   template that no longer exists, so it renders empty on every post and page
   — an invisible 228px band pushing all content below the fold. Collapse it
   when there is nothing inside; a block with real content keeps its padding.
   #pxl-main's own 152px top padding then clears the fixed header on its own. */
body.motion-on .pxl-post-title:not(:has(.pxl-post-title-inner > *)),
body.motion-on .pxl-page-title:not(:has(.pxl-page-title-inner > *)) {
  padding: 0;
  min-height: 0;
  background: none;
}

/* Title restored into the article when the post body carries no heading of
   its own (see xspace_motion_restore_post_title). */
body.motion-on .xsm-post-title {
  font-family: var(--xsm-font-display);
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.18;
  color: var(--xsm-text);
  margin: 0 0 26px;
}
body.motion-on .pxl-page-title h1,
body.motion-on .pxl-post-title h1,
body.motion-on .pxl-item--title h1 {
  font-family: var(--xsm-font-display);
  font-size: clamp(30px, 4.4vw, 52px);
  line-height: 1.16;
  margin-bottom: 14px;
}
body.motion-on .pxl-breadcrumb,
body.motion-on .pxl-breadcrumb a,
body.motion-on .pxl-breadcrumb span {
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--xsm-muted);
}
body.motion-on .pxl-breadcrumb a { color: var(--xsm-cyan); }
body.motion-on .pxl-breadcrumb a:hover { color: var(--xsm-magenta); }

/* ---------- Long-form article typography ----------
   The theme ships line-height:normal on body copy and 1.0 on headings,
   which reads as cramped at these sizes. Restore a reading rhythm. */
body.motion-on .pxl-post--content,
body.motion-on .pxl-item--content,
body.motion-on .entry-content {
  font-size: 17px;
  line-height: 1.75;
  color: #d9d7f2;
}
body.motion-on .pxl-post--content p,
body.motion-on .pxl-item--content p,
body.motion-on .entry-content p {
  font-size: 17px;
  line-height: 1.78;
  margin-bottom: 1.35em;
  color: #cfcdea;
}
body.motion-on .pxl-post--content h2,
body.motion-on .pxl-item--content h2,
body.motion-on .entry-content h2 {
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.28;
  margin: 1.9em 0 0.6em;
  color: var(--xsm-text);
}
body.motion-on .pxl-post--content h3,
body.motion-on .pxl-item--content h3,
body.motion-on .entry-content h3 {
  font-size: clamp(20px, 2.1vw, 24px);
  line-height: 1.35;
  margin: 1.6em 0 0.5em;
  color: var(--xsm-text);
}
body.motion-on .pxl-post--content h4,
body.motion-on .pxl-item--content h4,
body.motion-on .entry-content h4 {
  font-size: 19px;
  line-height: 1.4;
  margin: 1.4em 0 0.45em;
}
/* Gradient accent bar before major section headings */
body.motion-on .pxl-post--content h2::before,
body.motion-on .pxl-item--content h2::before {
  content: '';
  display: block;
  width: 46px;
  height: 3px;
  margin-bottom: 16px;
  border-radius: 3px;
  background: var(--xsm-grad);
}

body.motion-on .pxl-post--content ul,
body.motion-on .pxl-post--content ol,
body.motion-on .pxl-item--content ul,
body.motion-on .pxl-item--content ol,
body.motion-on .entry-content ul,
body.motion-on .entry-content ol {
  margin: 0 0 1.35em 0;
  padding-left: 1.4em;
}
body.motion-on .pxl-post--content li,
body.motion-on .pxl-item--content li,
body.motion-on .entry-content li {
  font-size: 17px;
  line-height: 1.75;
  margin-bottom: 0.5em;
  color: #cfcdea;
}
body.motion-on .pxl-post--content ul li::marker,
body.motion-on .pxl-item--content ul li::marker { color: var(--xsm-cyan); }
body.motion-on .pxl-post--content ol li::marker,
body.motion-on .pxl-item--content ol li::marker { color: var(--xsm-cyan); font-weight: 700; }

body.motion-on .pxl-post--content strong,
body.motion-on .pxl-item--content strong { color: var(--xsm-text); font-weight: 700; }

body.motion-on .pxl-post--content img,
body.motion-on .pxl-item--content img,
body.motion-on .entry-content img {
  border-radius: var(--xsm-radius);
  margin: 0.6em 0 1.2em;
}
body.motion-on .pxl-post--content blockquote,
body.motion-on .pxl-item--content blockquote {
  margin: 1.6em 0;
  padding: 22px 26px;
  border: 1px solid var(--xsm-glass-border);
  border-left: 3px solid transparent;
  border-image: var(--xsm-grad) 1;
  background: var(--xsm-glass-bg);
  border-radius: 0 var(--xsm-radius) var(--xsm-radius) 0;
}
body.motion-on .pxl-post--content table,
body.motion-on .pxl-item--content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.4em 0;
  font-size: 15px;
  overflow: hidden;
  border-radius: 12px;
}
body.motion-on .pxl-post--content th,
body.motion-on .pxl-item--content th {
  background: rgba(123, 47, 247, 0.22);
  color: var(--xsm-text);
  font-family: var(--xsm-font-display);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-align: left;
  padding: 12px 16px;
}
body.motion-on .pxl-post--content td,
body.motion-on .pxl-item--content td {
  padding: 12px 16px;
  border-top: 1px solid var(--xsm-glass-border);
  color: #cfcdea;
}

/* Inline CTA buttons injected in place of the pasted [BOOK ON …] markers */
body.motion-on .xsm-inline-cta {
  margin: 6px 12px 10px 0;
  font-size: 14px;
  padding: 13px 26px;
}

/* TikTok profile embeds ship a light card — wrap it so it sits in the dark
   theme instead of glaring. (The iframe itself is cross-origin, untouchable.) */
body.motion-on blockquote.tiktok-embed {
  background: var(--xsm-glass-bg) !important;
  border: 1px solid var(--xsm-glass-border) !important;
  border-radius: var(--xsm-radius) !important;
  padding: 10px !important;
  margin: 0 auto 1.4em !important;
  max-width: 100%;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.45);
  border-image: none;
}
body.motion-on blockquote.tiktok-embed iframe {
  border-radius: 12px;
  /* The embed is cross-origin so its white card cannot be restyled; easing the
     brightness stops it glaring against the dark page without distorting the
     thumbnails inside it. */
  filter: brightness(0.93) contrast(1.03);
  transition: filter 0.3s ease;
}
body.motion-on blockquote.tiktok-embed:hover iframe { filter: none; }

/* ---------- Blog / archive cards ----------
   The theme paints these with a flat blue inset glow; swap for brand glass. */
body.motion-on .pxl-post--inner {
  background: var(--xsm-glass-bg) !important;
  border: 1px solid var(--xsm-glass-border) !important;
  box-shadow: none !important;
  border-radius: var(--xsm-radius);
  overflow: hidden;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
body.motion-on .pxl-post--inner:hover {
  transform: translateY(-6px);
  border-color: rgba(0, 229, 255, 0.45) !important;
  box-shadow: 0 18px 44px rgba(123, 47, 247, 0.28) !important;
}
/* Card titles stay white — cyan is reserved for hover and inline links. */
body.motion-on .pxl-post--title,
body.motion-on .pxl-post--title a,
body.motion-on #pxl-main .pxl-post--title a {
  color: var(--xsm-text) !important;
  font-family: var(--xsm-font-body);
  font-weight: 700;
  line-height: 1.4;
}
body.motion-on .pxl-post--title a:hover,
body.motion-on #pxl-main .pxl-post--title a:hover { color: var(--xsm-cyan) !important; }
body.motion-on .pxl-post--featured img,
body.motion-on .pxl-post--thumb img {
  transition: transform 0.6s ease;
}
body.motion-on .pxl-post--item:hover .pxl-post--featured img,
body.motion-on .pxl-grid-item:hover .pxl-post--thumb img { transform: scale(1.05); }
body.motion-on .pxl-post--title a,
body.motion-on .pxl-post-title a {
  color: var(--xsm-text);
  transition: color 0.3s ease;
}
body.motion-on .pxl-post--title a:hover,
body.motion-on .pxl-post-title a:hover { color: var(--xsm-cyan); }

/* ---------- Pagination ---------- */
body.motion-on .pxl-pagination .page-numbers,
body.motion-on .page-numbers {
  border-radius: 12px;
  border: 1px solid var(--xsm-glass-border);
  background: var(--xsm-glass-bg);
  color: var(--xsm-text);
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
body.motion-on .pxl-pagination .page-numbers:hover,
body.motion-on .page-numbers:hover {
  border-color: transparent;
  background: var(--xsm-grad);
  transform: translateY(-2px);
}
body.motion-on .pxl-pagination .page-numbers.current,
body.motion-on .page-numbers.current {
  background: var(--xsm-grad);
  border-color: transparent;
  color: #fff;
}

/* ---------- Related posts / next-prev ---------- */
body.motion-on .pxl-post--related .pxl-post--title a { font-family: var(--xsm-font-body); }

/* ---------- Contact page: keep the content column readable ---------- */
body.motion-on.page-id-423 #pxl-main iframe[src*="maps.google"],
body.motion-on.page-id-423 #pxl-main iframe[src*="google.com/maps"] {
  border-radius: var(--xsm-radius);
  filter: invert(0.92) hue-rotate(185deg) saturate(0.7) contrast(0.92);
}

/* ---------- 404 ----------
   The theme renders 404s through #pxl-page-title-default, which carries a
   near-white background — white text on white. Repaint it as a brand void. */
body.motion-on.error404 #pxl-page-title-default {
  background: radial-gradient(ellipse at 50% 40%, rgba(123, 47, 247, 0.32), transparent 62%),
              radial-gradient(ellipse at 80% 85%, rgba(0, 229, 255, 0.14), transparent 55%),
              var(--xsm-bg) !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
}
/* The title area is a 6+6 bootstrap row — collapse it to one centred column. */
body.motion-on.error404 #pxl-page-title-default .row { flex-direction: column; align-items: center; }
body.motion-on.error404 #pxl-page-title-default .row > div {
  width: 100%;
  max-width: 100%;
  flex: 0 0 100%;
  justify-content: center;
}
body.motion-on.error404 .xsm-404-actions {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 30px;
}
body.motion-on.error404 #pxl-page-title-default .pxl-breadcrumb {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  width: auto;
}
body.motion-on.error404 #pxl-page-title-default h1 {
  font-family: var(--xsm-font-display);
  font-size: clamp(46px, 8vw, 96px);
  line-height: 1.05;
  background: var(--xsm-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
body.motion-on.error404 #pxl-page-title-default .pxl-breadcrumb,
body.motion-on.error404 #pxl-page-title-default ul { justify-content: center; }

body.motion-on .pxl-content--404 {
  background-image: none !important;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(123, 47, 247, 0.3), transparent 62%),
    radial-gradient(ellipse at 80% 80%, rgba(0, 229, 255, 0.14), transparent 55%),
    var(--xsm-bg);
  min-height: 72vh;
  display: flex;
  align-items: center;
  padding: clamp(80px, 12vh, 140px) 24px;
}
body.motion-on .pxl-error-inner,
body.motion-on .pxl-error-holder,
body.motion-on .wrap-error-holder { width: 100%; text-align: center; }
body.motion-on .pxl-error-heading {
  font-family: var(--xsm-font-display);
  font-size: clamp(64px, 12vw, 148px);
  font-weight: 800;
  line-height: 1;
  margin-bottom: 18px;
  background: var(--xsm-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
body.motion-on .pxl-error-description {
  font-size: clamp(15px, 1.6vw, 19px);
  color: var(--xsm-muted);
  margin-bottom: 34px;
}
body.motion-on .btn-404 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 34px;
  border-radius: 999px;
  background: var(--xsm-grad);
  background-size: 160% 100%;
  color: #fff !important;
  border: none;
  font-family: var(--xsm-font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 8px 32px rgba(241, 7, 163, 0.35);
  transition: background-position 0.5s ease, transform 0.3s ease;
}
body.motion-on .btn-404:hover { background-position: 100% 0%; transform: translateY(-2px); }

/* ---------- Mobile rhythm ---------- */
@media (max-width: 767px) {
  body.motion-on .pxl-page-title,
  body.motion-on .pxl-post-title { padding: 104px 0 32px; }
  body.motion-on .pxl-post--content,
  body.motion-on .pxl-item--content,
  body.motion-on .entry-content { font-size: 16.5px; }
  body.motion-on .pxl-post--content p,
  body.motion-on .pxl-item--content p { font-size: 16.5px; }
}

/* ---------- "What's New?" related posts ---------- */
/* The card forces a 331x279 (≈1.19) window onto 16:9 featured artwork, so
   object-fit: cover shaves the title text off both edges — these thumbnails
   are infographics whose text sits near the margins. Match the window to the
   artwork so the whole image reads. */
body.motion-on .pxl-related-post .pxl-post--featured {
  height: auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
body.motion-on .pxl-related-post .pxl-post--featured a,
body.motion-on .pxl-related-post .pxl-post--featured .pxl-post--featured-inner {
  display: block;
  width: 100%;
  height: 100%;
}
body.motion-on .pxl-related-post .pxl-post--featured img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* An in-body heading promoted to <h1> because it repeated the post title
   (see xspace_motion_restore_post_title). Match .xsm-post-title so every
   article opens with the same title treatment. */
body.motion-on .xsm-promoted-title {
  font-family: var(--xsm-font-display);
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.18;
  color: var(--xsm-text);
  margin: 0 0 26px;
}
body.motion-on .xsm-promoted-title::before { content: none; }

/* ---------- Brand gradient ----------
   The theme builds every gradient button from two :root variables, which were
   still the old blue/cyan pair — so "Book Tickets" in the header changed colour
   the moment a visitor left the coded front page. Redefining the variables
   fixes the header button and every other themed gradient in one place. */
body.motion-on {
  --gradient-color-from: #7b2ff7;
  --gradient-color-to: #f107a3;
}
body.motion-on .pxl-header-elementor .pxl-button a.btn,
body.motion-on .pxl-header-mobile-elementor .pxl-button a.btn {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 8px 26px rgba(241, 7, 163, 0.26);
}
body.motion-on .pxl-header-elementor .pxl-button a.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(241, 7, 163, 0.42);
}

/* ---------- Long page right column ----------
   The TikTok panel (template 429) sits at the top of a full-height column, so
   on Introduction / The Experience / How to Book Tickets everything below the
   first screen was empty white space beside the text. Let it follow the reader
   instead. Desktop only — on narrow screens the column stacks under the copy. */
@media (min-width: 1025px) {
  body.motion-on #pxl-main .elementor-429 {
    position: sticky;
    top: 108px;
  }
}

/* ---------- One title scale ----------
   Page and post titles were arriving in three sizes and two typefaces — posts
   and Introduction at 52px Unbounded, Contact at 30px Unbounded, and What's New
   still on the theme's Goldman at 30px. Put every top-level title on the brand
   display face and one responsive scale. */
body.motion-on #pxl-main h1,
body.motion-on h1.pxl-item--title,
body.motion-on .xsm-post-title,
body.motion-on .xsm-promoted-title {
  font-family: var(--xsm-font-display) !important;
  font-size: clamp(28px, 3.6vw, 46px) !important;
  line-height: 1.18;
  font-weight: 600;
  color: var(--xsm-text);
}

/* ---------- Visual blocks on /the-experience/ ----------
   Rendered by xspace_motion_experience_blocks() in motion-fixes.php. The page
   was 1.700 words of prose with no photography; these grids give the eight
   rooms and the highlight reel something to look at. Static by design — the
   front page's pinned horizontal scroll needs home.js, which inner pages
   never load. */
body.motion-on .xsm-exp-block {
  margin: 58px 0 52px;
  clear: both;
}
body.motion-on .xsm-exp-kicker {
  font-family: var(--xsm-font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--xsm-cyan);
  margin: 0 0 8px;
}
body.motion-on .xsm-exp-heading {
  font-family: var(--xsm-font-display) !important;
  font-size: clamp(24px, 2.9vw, 34px) !important;
  line-height: 1.2;
  color: var(--xsm-text);
  margin: 0 0 26px !important;
}
body.motion-on .xsm-exp-heading::before { content: none !important; }

/* ---- room grid ---- */
body.motion-on .xsm-exp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
body.motion-on .xsm-exp-card {
  margin: 0;
  border: 1px solid var(--xsm-glass-border);
  border-radius: var(--xsm-radius);
  overflow: hidden;
  background: var(--xsm-glass-bg);
  transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
body.motion-on .xsm-exp-card:hover {
  transform: translateY(-5px);
  border-color: rgba(0, 229, 255, 0.42);
  box-shadow: 0 16px 40px rgba(123, 47, 247, 0.26);
}
body.motion-on .xsm-exp-shot {
  position: relative;
  aspect-ratio: 720 / 848;
  overflow: hidden;
}
body.motion-on .xsm-exp-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0 !important;
  border-radius: 0 !important;
  transition: transform 0.6s ease;
}
body.motion-on .xsm-exp-card:hover .xsm-exp-shot img { transform: scale(1.05); }
body.motion-on .xsm-exp-num {
  position: absolute;
  top: 12px;
  left: 12px;
  font-family: var(--xsm-font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 4px 9px;
  border-radius: 999px;
  color: #fff;
  background: rgba(5, 5, 16, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
body.motion-on .xsm-exp-card figcaption {
  display: block;
  padding: 15px 16px 18px;
}
body.motion-on .xsm-exp-name {
  display: block;
  font-family: var(--xsm-font-display);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--xsm-text);
  margin-bottom: 6px;
}
body.motion-on .xsm-exp-desc {
  display: block;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--xsm-muted);
}

/* ---- highlight reel ---- */
body.motion-on .xsm-exp-reel {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
body.motion-on .xsm-exp-tile {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: var(--xsm-radius);
  overflow: hidden;
  border: 1px solid var(--xsm-glass-border);
}
body.motion-on .xsm-exp-tile img,
body.motion-on .xsm-exp-tile video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0 !important;
  border-radius: 0 !important;
}
body.motion-on .xsm-exp-video {
  opacity: 0;
  transition: opacity 0.45s ease;
}
body.motion-on .xsm-exp-video.is-playing { opacity: 1; }
body.motion-on .xsm-exp-tile figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 30px 14px 12px;
  font-family: var(--xsm-font-display);
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.65);
  background: linear-gradient(180deg, transparent, rgba(5, 5, 16, 0.88));
}
body.motion-on .xsm-exp-more {
  margin: 22px 0 0;
  font-family: var(--xsm-font-display);
  font-size: 15px;
  font-weight: 600;
  background: var(--xsm-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media (max-width: 900px) {
  body.motion-on .xsm-exp-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  body.motion-on .xsm-exp-reel { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}
@media (max-width: 520px) {
  body.motion-on .xsm-exp-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  body.motion-on .xsm-exp-reel { grid-template-columns: 1fr; }
  body.motion-on .xsm-exp-desc { display: none; }
  body.motion-on .xsm-exp-card figcaption { padding: 11px 12px 13px; }
}
@media (prefers-reduced-motion: reduce) {
  body.motion-on .xsm-exp-card,
  body.motion-on .xsm-exp-shot img,
  body.motion-on .xsm-exp-video { transition: none; }
}

/* A seventh tile would sit alone on its own row; let it run the full width
   instead so the reel ends deliberately rather than looking unfinished. */
body.motion-on .xsm-exp-tile:last-child:nth-child(3n + 1) {
  grid-column: 1 / -1;
  aspect-ratio: 21 / 8;
}
@media (max-width: 900px) {
  body.motion-on .xsm-exp-tile:last-child:nth-child(3n + 1) { grid-column: auto; aspect-ratio: 4 / 3; }
  body.motion-on .xsm-exp-tile:last-child:nth-child(2n + 1) { grid-column: 1 / -1; aspect-ratio: 21 / 9; }
}
@media (max-width: 520px) {
  body.motion-on .xsm-exp-tile:last-child:nth-child(2n + 1) { aspect-ratio: 4 / 3; }
}

/* ---------- TikTok reviews on /whats-new/ ----------
   Rendered by xspace_motion_tiktok_grid() in motion-fixes.php. Reuses the
   .xsm-exp-block heading treatment so it reads as part of the same page
   rather than a bolted-on widget. Nine 9:16 thumbnails stacked into a grid
   swamped the post list they sit under, so they ride a single arrow-driven
   row instead — the same shape as the front page, minus home.css/home.js. */

/* On What's New the entry-content is full-bleed while the post grid above sits
   in the theme's container, so the block rebuilds that column: the numbers put
   it on exactly the same left and right edges as the post cards — 1180px once
   there is room, 15px of breathing space either side before that. Elementor
   also closes the blog section with 160px of empty padding, which left the
   reviews stranded far below the list; the negative top margin claws most of
   that back, and the bottom margin leaves air before the footer map. */
body.motion-on .xsm-tt-block--page {
  width: min(1180px, 100% - 30px);
  margin: -76px auto 80px;
}
/* At the foot of a post (single.php) the block is already inside that same
   container, right above the "What's New?" related posts — it only needs to
   part company with the article above and sit close to the posts below. */
body.motion-on .xsm-tt-block--post {
  margin: 0 0 26px;
}
body.motion-on .xsm-tt-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
body.motion-on .xsm-tt-head > div:first-child { flex: 1 1 320px; }
/* The heading carries the block's bottom margin; the rail sets its own. */
body.motion-on .xsm-tt-head .xsm-exp-heading { margin-bottom: 0 !important; }
body.motion-on .xsm-tt-nav { display: flex; gap: 10px; }
/* The theme's floating contact bar (footer.php, .desktop-cta) is fixed over
   the last ~95px of the viewport from 550px up. Wider than ~1370px the column
   ends clear of it; below that the arrows have to step in or they sit behind
   it. */
@media (min-width: 550px) and (max-width: 1370px) {
  body.motion-on .xsm-tt-nav { margin-right: 80px; }
}
body.motion-on .xsm-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--xsm-glass-border);
  background: var(--xsm-glass-bg);
  color: var(--xsm-text);
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
body.motion-on .xsm-arrow svg { display: block; }
body.motion-on .xsm-arrow:hover {
  background: var(--xsm-grad);
  border-color: transparent;
  transform: translateY(-2px);
}
body.motion-on .xsm-arrow:disabled { opacity: 0.35; cursor: default; transform: none; }
body.motion-on .xsm-arrow:disabled:hover { background: var(--xsm-glass-bg); border-color: var(--xsm-glass-border); }
body.motion-on .xsm-arrow:focus-visible { outline: 2px solid var(--xsm-cyan); outline-offset: 3px; }

/* One row, scrolled by the arrows (or a swipe/trackpad). The vertical padding
   leaves room for the card's hover lift, which the scroller would clip. */
body.motion-on .xsm-tt-rail {
  display: flex;
  /* Not stretch: the playing card grows on phones and would drag the whole
     row's height with it. */
  align-items: flex-start;
  gap: 16px;
  margin-top: 24px;
  padding: 6px 0 10px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;        /* hide scrollbar: the arrows are the affordance */
}
body.motion-on .xsm-tt-rail::-webkit-scrollbar { display: none; }
body.motion-on .xsm-tt-rail:focus-visible { outline: 2px solid var(--xsm-cyan); outline-offset: 4px; }
body.motion-on .xsm-tt-card {
  position: relative;
  display: block;
  /* Fixed width in a flex row: ~5 fit an article column, the sixth peeks in
     so the row visibly continues past the edge. */
  flex: 0 0 auto;
  width: clamp(150px, 19vw, 200px);
  scroll-snap-align: start;
  aspect-ratio: 9 / 16;
  border-radius: var(--xsm-radius);
  overflow: hidden;
  border: 1px solid var(--xsm-glass-border);
  background: var(--xsm-glass-bg);
  transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
body.motion-on .xsm-tt-card:hover,
body.motion-on .xsm-tt-card:focus-visible {
  transform: translateY(-5px);
  border-color: rgba(0, 229, 255, 0.45);
  box-shadow: 0 16px 40px rgba(123, 47, 247, 0.28);
}
body.motion-on .xsm-tt-card:focus-visible {
  outline: 2px solid var(--xsm-cyan);
  outline-offset: 3px;
}
body.motion-on .xsm-tt-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0 !important;
  border-radius: 0 !important;
  transition: transform 0.6s ease;
}
body.motion-on .xsm-tt-card:hover img { transform: scale(1.06); }

/* Playing: motion.js swaps the link for this, holding TikTok's own player.
   It keeps the card's size and place in the row, but none of its hover
   behaviour — the pointer belongs to the video's controls now. */
body.motion-on .xsm-tt-card--playing {
  cursor: default;
  background: #000;
  border-color: rgba(0, 229, 255, 0.45);
}
body.motion-on .xsm-tt-card--playing:hover {
  transform: none;
  box-shadow: none;
}
body.motion-on .xsm-tt-card--playing iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
body.motion-on .xsm-tt-close {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(5, 5, 16, 0.62);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background 0.3s ease, border-color 0.3s ease;
}
body.motion-on .xsm-tt-close:hover {
  background: var(--xsm-grad);
  border-color: transparent;
}
body.motion-on .xsm-tt-close:focus-visible {
  outline: 2px solid var(--xsm-cyan);
  outline-offset: 2px;
}

/* Play badge sits centre; the gradient behind the handle keeps it readable
   whatever the thumbnail happens to be. */
body.motion-on .xsm-tt-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(5, 5, 16, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  transition: background 0.3s ease, transform 0.3s ease;
}
body.motion-on .xsm-tt-card:hover .xsm-tt-play {
  background: var(--xsm-grad);
  border-color: transparent;
  transform: translate(-50%, -50%) scale(1.08);
}
body.motion-on .xsm-tt-user {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 26px 12px 11px;
  font-family: var(--xsm-font-body);
  font-size: 12.5px;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7);
  background: linear-gradient(180deg, transparent, rgba(5, 5, 16, 0.85));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 620px) {
  /* Roughly two and a half cards wide: enough to read the thumbnails and to
     show the row keeps going. Swipe carries it; the arrows still work. */
  body.motion-on .xsm-tt-rail { gap: 10px; }
  body.motion-on .xsm-tt-card { width: 38vw; }
  /* A thumbnail that size is fine to browse but far too small to watch, so
     the card grows once it becomes the player; motion.js scrolls it into
     view. */
  body.motion-on .xsm-tt-card--playing { width: min(300px, 76vw); }
  body.motion-on .xsm-arrow { width: 38px; height: 38px; }
  body.motion-on .xsm-tt-play { width: 34px; height: 34px; }
  body.motion-on .xsm-tt-user { font-size: 11px; padding: 20px 8px 8px; }
}
@media (prefers-reduced-motion: reduce) {
  body.motion-on .xsm-tt-rail { scroll-behavior: auto; }
  body.motion-on .xsm-tt-close,
  body.motion-on .xsm-arrow,
  body.motion-on .xsm-tt-card,
  body.motion-on .xsm-tt-card img,
  body.motion-on .xsm-tt-play { transition: none; }
}

/* ---------- Review-platform logos on Introduction / Contact ----------
   Rendered by xspace_motion_platforms_block() in motion-fixes.php. Centred
   rather than the front page's six-column grid: on an article column six
   equal cells would leave each chip too narrow to read. */
/* Introduction runs in a narrower article column than Contact, so the row is
   sized against its own container, not the viewport: three across in the
   narrow column (a clean 3 + 3), all six in one row where there is room. */
body.motion-on .xsm-plat-block { container-type: inline-size; }
body.motion-on .xsm-plat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-content: center;
  gap: 14px;
}
@container (min-width: 900px) {
  body.motion-on .xsm-plat-row { grid-template-columns: repeat(6, 1fr); }
}
body.motion-on .xsm-plat-block .xsm-exp-kicker,
body.motion-on .xsm-plat-block .xsm-exp-heading { text-align: center; }
body.motion-on .xsm-plat-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  min-width: 0;
  padding: 0 14px;
  border-radius: 999px;
  /* The OTA marks are all drawn for light backgrounds. */
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--xsm-glass-border);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
body.motion-on a.xsm-plat-chip:hover,
body.motion-on a.xsm-plat-chip:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 14px 38px rgba(0, 229, 255, 0.25);
}
body.motion-on a.xsm-plat-chip:focus-visible {
  outline: 2px solid var(--xsm-cyan);
  outline-offset: 3px;
}
body.motion-on .xsm-plat-chip img {
  height: 24px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  margin: 0 !important;
  border-radius: 0 !important;
}
/* GetYourGuide's mark reads small at equal cap-height. */
body.motion-on .xsm-plat-chip img[src*="getyourguide"] { height: 30px; }

@media (max-width: 600px) {
  body.motion-on .xsm-plat-row { gap: 9px; }
  body.motion-on .xsm-plat-chip { height: 50px; padding: 0 10px; }
  body.motion-on .xsm-plat-chip img { height: 20px; }
  body.motion-on .xsm-plat-chip img[src*="getyourguide"] { height: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  body.motion-on .xsm-plat-chip { transition: none; }
}