/* ============================================================
   X Space motion layer — front page scenes
   ============================================================ */

/* ---------- Layout primitives ---------- */
body.motion-on .xsm-main { overflow-x: clip; background: var(--xsm-bg); }
body.motion-on .xsm-container {
  width: min(1200px, calc(100% - 48px));
  margin: 0 auto;
}
/* Section rhythm: adjacent sections stack their paddings, so keep each side
   modest — total gap between sections lands around 130–190px. */
body.motion-on .xsm-section { padding: clamp(64px, 9vh, 96px) 0; position: relative; }
/* (mobile spacing overrides live at the END of this file — they must come
   after every base rule they override, or the base rules win the cascade) */

body.motion-on .xsm-kicker {
  font-family: var(--xsm-font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--xsm-cyan);
  margin-bottom: 18px;
}
body.motion-on .xsm-section-heading {
  font-size: clamp(30px, 4.6vw, 54px);
  line-height: 1.15;
  margin-bottom: 28px;
}

/* ---------- Scene 1: preloader ---------- */
body.motion-on .xsm-preloader {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  background: var(--xsm-bg);
}
body.motion-on .xsm-preloader-logo {
  /* Real brand mark, not a text stand-in: the first thing a visitor sees
     now matches the logo in the header. */
  width: min(300px, 58vw);
  height: auto;
  filter: drop-shadow(0 0 30px rgba(0, 229, 255, 0.42))
          drop-shadow(0 0 68px rgba(123, 47, 247, 0.34));
  /* Fades in via CSS (see critical.css). It must NOT start at opacity:0
     waiting for GSAP — that delayed the largest paint until the whole
     animation stack had downloaded. */
  animation: xsm-pre-in 0.5s ease-out both;
}
@keyframes xsm-pre-in { from { opacity: 0; } to { opacity: 1; } }
body.motion-on .xsm-preloader-bar {
  width: min(280px, 60vw);
  height: 2px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
  border-radius: 2px;
}
body.motion-on .xsm-preloader-bar span {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--xsm-grad);
  animation: xsm-pre-bar 1.5s ease-in-out 0.15s both;
}
@keyframes xsm-pre-bar { from { width: 0%; } to { width: 100%; } }
body.motion-on .xsm-preloader.is-done { display: none; }

/* Safety net: if the animation stack is slow or fails, the preloader must not
   sit on top of the page forever. CSS wipes it away on its own; when JS is
   healthy it adds .is-done well before this fires and the rule never shows. */
body.motion-on .xsm-preloader {
  animation: xsm-pre-out 0.6s ease-in-out 4.2s forwards;
}
@keyframes xsm-pre-out {
  to { clip-path: inset(0 0 100% 0); visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  body.motion-on .xsm-preloader-logo,
  body.motion-on .xsm-preloader-bar span { animation: none; }
}


/* ---------- Scene 2: hero ---------- */
body.motion-on .xsm-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}
body.motion-on .xsm-hero-bg {
  position: absolute;
  inset: -6%;
  background-image: var(--xsm-hero-lg);
  background-size: cover;
  background-position: center;
  filter: saturate(1.15);
  will-change: transform;
}
body.motion-on .xsm-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 900px) {
  body.motion-on .xsm-hero-bg { background-image: var(--xsm-hero-sm); }
}
body.motion-on .xsm-hero-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 110%, rgba(123, 47, 247, 0.32), transparent 55%),
    linear-gradient(180deg, rgba(5, 5, 16, 0.72) 0%, rgba(5, 5, 16, 0.45) 45%, var(--xsm-bg) 100%);
}
body.motion-on .xsm-particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
body.motion-on .xsm-hero-inner {
  position: relative;
  z-index: 2;
  padding: 120px 24px 80px;
  max-width: 980px;
}
body.motion-on .xsm-hero-kicker { color: var(--xsm-cyan); }
body.motion-on .xsm-hero-title {
  font-size: clamp(38px, 7.4vw, 92px);
  font-weight: 800;
  line-height: 1.06;
  margin: 0 0 26px;
  text-shadow: 0 0 60px rgba(123, 47, 247, 0.55);
}
body.motion-on .xsm-hero-title .xsm-char { display: inline-block; }
body.motion-on .xsm-hero-subtitle {
  font-size: clamp(15px, 1.6vw, 19px);
  color: var(--xsm-muted);
  max-width: 640px;
  margin: 0 auto 40px;
}
body.motion-on .xsm-hero-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
body.motion-on .xsm-hero-scroll {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
body.motion-on .xsm-hero-scroll-line {
  width: 1px;
  height: 44px;
  background: linear-gradient(var(--xsm-cyan), transparent);
}
body.motion-on .xsm-hero-scroll-label {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--xsm-muted);
}

/* ---------- Scenes 2+3 share one pinned background ---------- */
body.motion-on .xsm-opening { position: relative; }

/* ---------- Scene 3: intro ---------- */
body.motion-on .xsm-intro { text-align: center; padding-top: clamp(44px, 7vh, 80px); }
/* Desktop: intro overlays the hero scene; the pin timeline fades it in. */
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  body.motion-on .xsm-intro {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    background: radial-gradient(ellipse at 50% 60%, rgba(5, 5, 16, 0.68), rgba(5, 5, 16, 0.35) 70%);
  }
}
body.motion-on .xsm-intro-heading {
  font-size: clamp(30px, 4.6vw, 56px);
  line-height: 1.15;
  max-width: 820px;
  margin: 0 auto 26px;
}
body.motion-on .xsm-intro-body {
  max-width: 680px;
  margin: 0 auto 64px;
  font-size: clamp(15px, 1.5vw, 18px);
}
body.motion-on .xsm-counters {
  display: flex;
  justify-content: center;
  gap: clamp(32px, 7vw, 96px);
  flex-wrap: wrap;
}
body.motion-on .xsm-counter-value {
  font-size: clamp(46px, 6vw, 78px);
  font-weight: 800;
  line-height: 1;
}
body.motion-on .xsm-counter-label {
  margin-top: 10px;
  font-size: 14px;
  color: var(--xsm-muted);
}

/* ---------- Scene 4: rooms (horizontal journey) ---------- */
body.motion-on .xsm-rooms { position: relative; }
body.motion-on .xsm-rooms-pin { padding: clamp(60px, 9vh, 100px) 0; overflow: hidden; }
body.motion-on .xsm-rooms-head {
  width: min(1200px, calc(100% - 48px));
  margin: 0 auto clamp(36px, 6vh, 64px);
}
body.motion-on .xsm-rooms-heading { font-size: clamp(32px, 5vw, 60px); margin: 0; }
body.motion-on .xsm-rooms-track {
  display: flex;
  gap: clamp(18px, 2.4vw, 32px);
  padding-left: max(24px, calc((100vw - 1200px) / 2));
  padding-right: 24px;
  will-change: transform;
  width: max-content;
}
body.motion-on .xsm-room-card {
  flex: 0 0 auto;
  width: clamp(240px, 24vw, 330px);
  border-radius: var(--xsm-radius);
  overflow: hidden;
  position: relative;
  background: var(--xsm-bg-2);
  border: 1px solid var(--xsm-glass-border);
  transform-style: preserve-3d;
}
body.motion-on .xsm-room-img {
  aspect-ratio: 29 / 34;
  overflow: hidden;
  position: relative;
}
/* Photos fade into the card surface at the bottom, like the original renders did */
body.motion-on .xsm-room-img::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(11, 11, 34, 0) 8%,
    rgba(11, 11, 34, 0.55) 45%,
    var(--xsm-bg-2) 92%
  );
}
body.motion-on .xsm-room-img img {
  display: block;
  /* oversize + centre so the ±7% parallax swing never exposes an edge and
     the photo's centre sits in the middle of the frame at rest */
  width: 118%;
  margin-left: -9%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  will-change: transform;
}
/* Per-photo framing: keep the subject in the middle of the card */
body.motion-on .xsm-room-card:nth-child(1) .xsm-room-img img { object-position: 50% 70%; } /* LED tunnel: red-shirt visitor */
body.motion-on .xsm-room-card:nth-child(3) .xsm-room-img img {                              /* dome: its centre is at 46% of the photo */
  width: 130%;
  margin-left: -9.8%;
  object-position: 50% 0;
}
body.motion-on .xsm-room-body {
  padding: 23px 22px 26px;
  position: relative;
  z-index: 2; /* above the image fade so the number stays visible */
  /* overlap the photo's bottom edge by 3px with a solid ground: hides the
     sub-pixel seam the composited parallax layer leaves under the image */
  margin-top: -3px;
  background: var(--xsm-bg-2);
}
body.motion-on .xsm-room-num {
  position: absolute;
  top: -30px;
  right: 18px;
  font-size: 44px;
  font-weight: 800;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.6);
}
body.motion-on .xsm-room-title { font-size: 19px; margin: 0 0 8px; }
body.motion-on .xsm-room-desc { font-size: 13.5px; line-height: 1.55; margin: 0; }

/* Mobile: natural swipe with snap */
@media (max-width: 767px) {
  body.motion-on .xsm-rooms-track {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 12px;
    width: auto;
  }
  body.motion-on .xsm-room-card { scroll-snap-align: center; width: 76vw; }
}
@media (prefers-reduced-motion: reduce) {
  body.motion-on .xsm-rooms-track { overflow-x: auto; width: auto; }
}

/* ---------- Scene 5: special ---------- */
body.motion-on .xsm-special-mosaic {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 215px;
  grid-auto-flow: dense;
  gap: 16px;
  margin-top: 44px;
}
body.motion-on .xsm-tile {
  position: relative;
  margin: 0;
  border-radius: var(--xsm-radius);
  overflow: hidden;
  border: 1px solid var(--xsm-glass-border);
}
body.motion-on .xsm-tile--lg { grid-column: span 2; grid-row: span 2; }
body.motion-on .xsm-tile--tall { grid-row: span 2; }
/* Poster still and video are stacked, not sequential: the still carries the
   tile until the video has actually started, so nothing jumps. */
body.motion-on .xsm-tile img,
body.motion-on .xsm-tile video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
body.motion-on .xsm-tile-video {
  opacity: 0;
  transition: opacity 0.45s ease, transform 0.6s ease;
}
body.motion-on .xsm-tile-video.is-playing { opacity: 1; }
body.motion-on .xsm-tile:hover img,
body.motion-on .xsm-tile:hover video { transform: scale(1.06); }
body.motion-on .xsm-tile-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 32px 18px 14px;
  background: linear-gradient(180deg, transparent, rgba(5, 5, 16, 0.88));
}
body.motion-on .xsm-tile-title {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}
@media (max-width: 900px) {
  body.motion-on .xsm-special-mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 170px; }
}
body.motion-on .xsm-special-more {
  display: inline-block;
  margin-top: 36px;
  font-weight: 600;
  font-size: 16px;
}

/* ---------- Scene 6: tiktok ---------- */
body.motion-on .xsm-tiktok { overflow: hidden; padding-top: 0; /* the marquee IS the section opener */ }
body.motion-on .xsm-marquee {
  overflow: hidden;
  border-top: 1px solid var(--xsm-glass-border);
  border-bottom: 1px solid var(--xsm-glass-border);
  padding: 18px 0;
  margin-bottom: clamp(48px, 7vh, 72px);
}
body.motion-on .xsm-marquee-track {
  display: flex;
  gap: 48px;
  width: max-content;
  animation: xsm-marquee 26s linear infinite;
}
body.motion-on .xsm-marquee-item {
  font-size: clamp(20px, 2.6vw, 32px);
  font-weight: 800;
  letter-spacing: 0.06em;
  white-space: nowrap;
  color: var(--xsm-text);
}
body.motion-on .xsm-marquee-item--outline {
  color: transparent;
  -webkit-text-stroke: 1px var(--xsm-muted);
}
@keyframes xsm-marquee {
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  body.motion-on .xsm-marquee-track { animation: none; }
}
body.motion-on .xsm-tiktok-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
body.motion-on .xsm-tiktok-head > div:first-child { flex: 1 1 420px; }
body.motion-on .xsm-tiktok-nav { display: flex; gap: 12px; padding-bottom: 12px; }
body.motion-on .xsm-arrow {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--xsm-glass-border);
  background: var(--xsm-glass-bg);
  color: var(--xsm-text);
  font-size: 20px;
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
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-tiktok-row {
  display: flex;
  gap: 18px;
  margin-top: 40px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 14px;
  scrollbar-width: none;        /* hide scrollbar: arrows are the affordance */
}
body.motion-on .xsm-tiktok-row::-webkit-scrollbar { display: none; }
body.motion-on .xsm-tiktok-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
body.motion-on .xsm-tiktok-placeholder::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(5, 5, 16, 0.75));
}
body.motion-on .xsm-tiktok-play,
body.motion-on .xsm-tiktok-user { position: relative; z-index: 1; }
body.motion-on .xsm-tiktok-card {
  flex: 0 0 auto;
  width: clamp(200px, 22vw, 260px);
  aspect-ratio: 9 / 16;
  overflow: hidden;
  scroll-snap-align: center;
  position: relative;
  cursor: pointer;
}
body.motion-on .xsm-tiktok-card iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
body.motion-on .xsm-tiktok-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background:
    radial-gradient(circle at 30% 20%, rgba(123, 47, 247, 0.35), transparent 60%),
    radial-gradient(circle at 75% 85%, rgba(0, 229, 255, 0.25), transparent 55%),
    var(--xsm-bg-2);
}
/* TikTok-native play: bare white triangle with a soft shadow, no circle. */
body.motion-on .xsm-tiktok-play {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}
body.motion-on .xsm-tiktok-card:hover .xsm-tiktok-play { transform: scale(1.1); }
body.motion-on .xsm-tiktok-play svg {
  display: block;
  width: 46px;
  height: 46px;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.65));
}
body.motion-on .xsm-arrow { display: inline-flex; align-items: center; justify-content: center; }
body.motion-on .xsm-arrow svg { display: block; }
body.motion-on .xsm-tiktok-user { font-size: 13px; color: var(--xsm-text); }

/* ---------- Scene 7: pricing ---------- */
body.motion-on .xsm-pricing-note { color: var(--xsm-muted); margin-bottom: 44px; }
body.motion-on .xsm-pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 26px;
}
body.motion-on .xsm-pricing-card { padding: 36px 32px; }
body.motion-on .xsm-pricing-card--vip {
  background: #0d0b22; /* fully opaque: backdrop-filter would pull the glow gradient through */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-color: rgba(241, 7, 163, 0.4);
}
body.motion-on .xsm-pricing-badge {
  position: absolute;
  top: 18px;
  right: 18px;
  padding: 7px 16px;
  border-radius: 999px;
  background: var(--xsm-grad);
  color: #fff;
  font-family: var(--xsm-font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: 0 6px 20px rgba(241, 7, 163, 0.45);
}
body.motion-on .xsm-pricing-footnote {
  margin-top: 30px;
  font-size: 13.5px;
  color: var(--xsm-muted);
}
body.motion-on .xsm-pricing-footnote-hl {
  /* brand gradient (not cyan: cyan is the "Vietnamese" group colour in the price cards) */
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.01em;
}
body.motion-on .xsm-pricing-footnote-sep { opacity: 0.5; }
body.motion-on .xsm-pricing-tag {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--xsm-cyan);
}
body.motion-on .xsm-pricing-card--vip .xsm-pricing-tag { color: var(--xsm-magenta); }
body.motion-on .xsm-pricing-name { font-size: 24px; margin: 12px 0 22px; }
body.motion-on .xsm-pricing-features {
  list-style: none;
  padding: 0;
  margin: 0 0 26px;
  border-bottom: 1px solid var(--xsm-glass-border);
}
body.motion-on .xsm-pricing-features li {
  padding: 7px 0 7px 26px;
  position: relative;
  font-size: 14px;
  color: var(--xsm-muted);
}
body.motion-on .xsm-pricing-features li::before {
  content: '✦';
  position: absolute;
  left: 2px;
  color: var(--xsm-cyan);
}
body.motion-on .xsm-price-group--alt {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--xsm-glass-border); /* separator between VN / International */
}
body.motion-on .xsm-price-group-label {
  display: block;
  font-family: var(--xsm-font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--xsm-cyan);
  margin-bottom: 6px;
}
body.motion-on .xsm-price-group--alt .xsm-price-group-label { color: var(--xsm-magenta); }
body.motion-on .xsm-pricing-prices { list-style: none; padding: 0; margin: 0; }
body.motion-on .xsm-pricing-prices li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
}
body.motion-on .xsm-price-label { font-size: 13.5px; color: var(--xsm-muted); }
body.motion-on .xsm-price-value { font-size: 20px; font-weight: 800; white-space: nowrap; }
body.motion-on .xsm-pricing-actions {
  margin-top: 46px;
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}
/* (OTA text links removed here — the platforms row below already lists them) */

/* ---------- Scene 7b: OTA platforms ---------- */
/* Sits between the final CTA and the footer map, so it is centred like the
   CTA above it and carries the same ground colour through to the footer. */
body.motion-on .xsm-platforms {
  text-align: center;
  padding: clamp(20px, 3vh, 36px) 0 clamp(56px, 8vh, 84px);
}
/* This line introduces the logo row; it is not a section title of its own.
   At full heading size it competed with the closing CTA right above it, so it
   drops to body type and muted colour and the CTA keeps the emphasis. */
body.motion-on .xsm-platforms .xsm-section-heading {
  font-family: var(--xsm-font-body);
  font-size: clamp(15px, 1.5vw, 18px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--xsm-muted);
  margin-bottom: 0;
}
/* A grid, not a wrapping flex row: the pills used to size themselves to each
   logo (146px to 181px wide) so the strip read as uneven. Equal cells make it
   scan as one row of partners. */
body.motion-on .xsm-platforms-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  max-width: 1120px;
  margin: 34px auto 0;
}
body.motion-on .xsm-platform-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 62px; /* equal pill height for every brand, whatever the logo size */
  width: 100%;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94); /* the OTA logos are designed for light backgrounds */
  border: 1px solid var(--xsm-glass-border);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
body.motion-on a.xsm-platform-chip:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 38px rgba(0, 229, 255, 0.25);
}
body.motion-on .xsm-platform-chip img {
  height: 24px;
  width: auto;
  max-width: calc(100% - 8px);
  object-fit: contain;
}
/* GetYourGuide's mark is narrow at equal cap-height — enlarge for balance. */
body.motion-on .xsm-platform-chip img[src*="getyourguide"] { height: 30px; }
@media (max-width: 600px) {
  body.motion-on .xsm-platform-chip { height: 48px; padding: 0 20px; }
  body.motion-on .xsm-platform-chip img { height: 20px; }
  body.motion-on .xsm-platform-chip img[src*="getyourguide"] { height: 24px; }
}

/* ---------- Scene 8: guides ---------- */
body.motion-on .xsm-guides-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
  margin-top: 40px;
}
body.motion-on .xsm-guide-card {
  display: block;
  overflow: hidden;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
body.motion-on .xsm-guide-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 48px rgba(0, 229, 255, 0.18);
}
body.motion-on .xsm-guide-img { aspect-ratio: 16 / 9; overflow: hidden; }
body.motion-on .xsm-guide-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
body.motion-on .xsm-guide-card:hover .xsm-guide-img img { transform: scale(1.06); }
body.motion-on .xsm-guide-body { padding: 20px 22px 24px; }
body.motion-on .xsm-guide-title {
  font-family: var(--xsm-font-body);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.45;
  margin: 0 0 14px;
  color: var(--xsm-text);
}
body.motion-on .xsm-guide-more { font-size: 13px; font-weight: 600; }

/* ---------- Scene 9: final CTA ---------- */
/* The closing block paints one continuous ground for the CTA and the platform
   logos, and clips the glow — otherwise the glow ended abruptly at the CTA
   boundary and the two sections read as different backgrounds. */
body.motion-on .xsm-closing {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, transparent 12%, rgba(11, 11, 34, 0.88) 68%, rgb(11, 11, 34));
}
body.motion-on .xsm-final {
  text-align: center;
  padding-bottom: clamp(56px, 9vh, 104px);
}
@media (max-width: 767px) {
  body.motion-on .xsm-final { padding-bottom: 64px; }
}
body.motion-on .xsm-final-glow {
  position: absolute;
  inset: 0 0 -70%;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(123, 47, 247, 0.35), transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(0, 229, 255, 0.12), transparent 50%);
  animation: xsm-final-pulse 7s ease-in-out infinite alternate;
}
@keyframes xsm-final-pulse {
  from { opacity: 0.65; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  body.motion-on .xsm-final-glow { animation: none; }
}
body.motion-on .xsm-final .xsm-container { position: relative; z-index: 1; }
body.motion-on .xsm-final-heading {
  font-size: clamp(30px, 5.4vw, 66px);
  line-height: 1.12; /* the theme sets a fixed px line-height on h2 — must override */
  margin-bottom: 22px;
}
body.motion-on .xsm-final-sub { margin-bottom: 38px; }

/* Pricing carousel arrows: desktop shows all three cards, no nav needed. */
body.motion-on .xsm-pricing-nav { display: none; }

/* ---------- Mobile spacing overrides (keep LAST in file) ---------- */
@media (max-width: 767px) {
  body.motion-on .xsm-section { padding: 44px 0; }
  /* rooms: the swipe cards carry their own visual weight — no bottom slack */
  body.motion-on .xsm-rooms-pin { padding: 44px 0 8px; }
  body.motion-on .xsm-rooms-head { margin-bottom: 24px; }
  body.motion-on .xsm-marquee { margin-bottom: 44px; }
  body.motion-on .xsm-final { padding-bottom: 64px; }

  /* Pricing: one swipeable row, VIP centered first, arrows to browse. */
  body.motion-on .xsm-pricing-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    gap: 14px;
    margin: 0 -24px;
    padding: 6px 24px 10px;
    scrollbar-width: none;
  }
  body.motion-on .xsm-pricing-grid::-webkit-scrollbar { display: none; }
  body.motion-on .xsm-pricing-card {
    flex: 0 0 auto;
    width: 80vw;
    scroll-snap-align: center;
  }
  body.motion-on .xsm-pricing-nav {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-top: 18px;
  }
}

/* Logo strip responsive columns — keeps the cells square-ish rather than
   letting six pills squeeze onto one narrow row. */
@media (max-width: 1024px) {
  body.motion-on .xsm-platforms-row { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  body.motion-on .xsm-platforms-row { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}