/* ============================================================
   X Space motion layer — global (all pages)
   Active only under body.motion-on (preview cookie / go-live).
   ============================================================ */

/* ---------- Tokens ---------- */
body.motion-on {
  --xsm-bg: #050510;
  --xsm-bg-2: #0b0b22;
  --xsm-text: #f2f1ff;
  --xsm-muted: #9c9ac2;
  --xsm-violet: #7b2ff7;
  --xsm-magenta: #f107a3;
  --xsm-cyan: #00e5ff;
  --xsm-grad: linear-gradient(100deg, var(--xsm-violet), var(--xsm-magenta) 50%, var(--xsm-cyan));
  --xsm-font-display: 'Unbounded', 'Be Vietnam Pro', sans-serif;
  --xsm-font-body: 'Be Vietnam Pro', sans-serif;
  --xsm-radius: 18px;
  --xsm-glass-bg: rgba(20, 18, 48, 0.55);
  --xsm-glass-border: rgba(255, 255, 255, 0.14);

  background-color: var(--xsm-bg);
  color: var(--xsm-text);
  font-family: var(--xsm-font-body);
}

/* ---------- Base typography ---------- */
body.motion-on h1,
body.motion-on h2,
body.motion-on h3,
body.motion-on h4,
body.motion-on .xsm-display {
  font-family: var(--xsm-font-display);
  color: var(--xsm-text);
}
body.motion-on p { color: var(--xsm-muted); }

/* Long-form articles: display face is too heavy for in-article headings. */
body.motion-on.single .pxl-item--content h2,
body.motion-on.single .pxl-item--content h3,
body.motion-on.single .pxl-item--content h4,
body.motion-on.single #pxl-main article h2,
body.motion-on.single #pxl-main article h3,
body.motion-on.single #pxl-main article h4 {
  font-family: var(--xsm-font-body);
  font-weight: 700;
}
body.motion-on ::selection { background: var(--xsm-magenta); color: #fff; }

body.motion-on::-webkit-scrollbar { width: 10px; }
body.motion-on::-webkit-scrollbar-track { background: var(--xsm-bg); }
body.motion-on::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--xsm-violet), var(--xsm-cyan));
  border-radius: 5px;
}

/* ---------- Film-grain noise overlay ---------- */
body.motion-on::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9990;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}

/* ---------- Utilities ---------- */
body.motion-on .xsm-glass {
  background: var(--xsm-glass-bg);
  border: 1px solid var(--xsm-glass-border);
  border-radius: var(--xsm-radius);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

body.motion-on .xsm-gradient-text {
  background: var(--xsm-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

body.motion-on .xsm-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 34px;
  border-radius: 999px;
  font-family: var(--xsm-font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--xsm-text);
  border: 1px solid var(--xsm-glass-border);
  background: var(--xsm-glass-bg);
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}
body.motion-on .xsm-btn:hover {
  transform: translateY(-2px);
  color: #fff;
}
body.motion-on .xsm-btn--primary {
  background: var(--xsm-grad);
  background-size: 160% 100%;
  background-position: 0% 0%;
  border: none;
  color: #fff;
  box-shadow: 0 8px 32px rgba(241, 7, 163, 0.35);
  transition: background-position 0.5s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
body.motion-on .xsm-btn--primary:hover {
  background-position: 100% 0%;
  box-shadow: 0 12px 42px rgba(0, 229, 255, 0.4);
  transform: translateY(-2px);
}

/* Gradient glow border: ::before = glow (z -2), ::after = solid fill (z -1)
   — a single -1 pseudo would paint ABOVE the element's own background. */
body.motion-on .xsm-glow-border { position: relative; z-index: 0; border-radius: var(--xsm-radius); }
body.motion-on .xsm-glow-border::before {
  content: '';
  position: absolute;
  inset: -2px;
  z-index: -2;
  border-radius: inherit;
  background: var(--xsm-grad);
  filter: blur(10px);
  opacity: 0.55;
}
body.motion-on .xsm-glow-border::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: #0d0b22;
}

/* ---------- Header: transparent on top, glass when scrolled ---------- */
body.motion-on .pxl-header-elementor-main,
body.motion-on .pxl-header-mobile-elementor {
  background: transparent;
  transition: background 0.4s ease, backdrop-filter 0.4s ease, border-color 0.4s ease;
  border-bottom: 1px solid transparent;
}
body.motion-on.xsm-scrolled .pxl-header-elementor-main,
body.motion-on.xsm-scrolled .pxl-header-mobile-elementor {
  background: rgba(8, 7, 24, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--xsm-glass-border);
}
body.motion-on .pxl-header-elementor-sticky {
  background: rgba(8, 7, 24, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* ---------- Footer ---------- */
body.motion-on #pxl-footer-elementor {
  position: relative;
  background-color: #0b0b22; /* matches the final-cta fade-out for one continuous surface */
}
/* no top hairline: the final CTA fades into the footer ground, so the seam stays invisible */

/* Footer polish: brand the CTA button, blend the Google map into the theme */
body.motion-on #pxl-footer-elementor .pxl-button .btn {
  background: var(--xsm-grad);
  background-size: 160% 100%;
  color: #fff;
  border: none;
  transition: background-position 0.5s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
body.motion-on #pxl-footer-elementor .pxl-button .btn:hover {
  background-position: 100% 0%;
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(241, 7, 163, 0.4);
}
body.motion-on #pxl-footer-elementor iframe[src*="maps.google"] {
  /* A touch darker so the map settles into the footer ground instead of
     reading as a bright grey panel. */
  filter: invert(0.94) hue-rotate(185deg) saturate(0.55) contrast(0.86) brightness(0.9);
}
body.motion-on #pxl-footer-elementor .elementor-social-icon:hover {
  background: var(--xsm-grad);
}

/* ---------- Custom cursor (injected by motion.js, desktop only) ---------- */
body.motion-on .xsm-cursor-dot,
body.motion-on .xsm-cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  pointer-events: none;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
body.motion-on .xsm-cursor-dot {
  width: 8px;
  height: 8px;
  background: var(--xsm-cyan);
}
body.motion-on .xsm-cursor-ring {
  width: 36px;
  height: 36px;
  border: 1.5px solid rgba(0, 229, 255, 0.55);
  transition: width 0.25s ease, height 0.25s ease, border-color 0.25s ease;
}
body.motion-on.xsm-cursor-hover .xsm-cursor-ring {
  width: 58px;
  height: 58px;
  border-color: var(--xsm-magenta);
}
@media (pointer: fine) {
  body.motion-on.xsm-has-cursor,
  body.motion-on.xsm-has-cursor a,
  body.motion-on.xsm-has-cursor button { cursor: none; }
}

/* ---------- Floating contact widgets (theme's CTA bars) ---------- */
body.motion-on .desktop-cta {
  background: rgba(13, 11, 34, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--xsm-glass-border);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.5);
}
body.motion-on .desktop-cta::before {
  box-shadow: inset 0 0 8px 0 rgba(123, 47, 247, 0.5);
}
body.motion-on .desktop-cta .cta-element span { color: var(--xsm-text); }
body.motion-on .cta-datlich hr { background: var(--xsm-grad); }

body.motion-on .footer-cta {
  background: rgba(8, 7, 24, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--xsm-glass-border);
  box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.55);
}
body.motion-on .footer-cta .cta-element span { color: var(--xsm-text); }
body.motion-on .footer-cta .btn-linkbook { background: var(--xsm-grad); }
body.motion-on .footer-cta .btncircle.bg-white {
  background: var(--xsm-grad);
  box-shadow: 0 6px 22px rgba(241, 7, 163, 0.5);
}
body.motion-on .footer-cta .btncircle img { filter: brightness(0) invert(1); }

/* Mobile slide-in menu (hidden panel popup) */
body.motion-on .pxl-hidden-panel-popup .pxl-popup--conent {
  background: rgba(8, 7, 24, 0.92);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
body.motion-on .pxl-popup--overlay { background: rgba(5, 5, 16, 0.6); }
body.motion-on .pxl-hidden-panel-popup .pxl-menu-primary a {
  font-family: var(--xsm-font-display);
  color: var(--xsm-text);
}
body.motion-on .pxl-hidden-panel-popup .elementor-button,
body.motion-on .pxl-hidden-panel-popup .pxl-button a,
body.motion-on .pxl-hidden-panel-popup a.btn-gradient {
  background: var(--xsm-grad);
  border: none;
}

/* ---------- Inner pages (Elementor content) polish ---------- */
/* Contact page: the content column is narrower than its section and ends up
   left-of-centre. Centre the column itself (align-items alone loses to the
   child's own align-self/width rules). */
body.motion-on.page-id-423 #pxl-main .e-con-boxed > .e-con-inner {
  align-items: center;
}
body.motion-on.page-id-423 #pxl-main .e-con-boxed > .e-con-inner > .e-con {
  margin-left: auto !important;
  margin-right: auto !important;
  align-self: center !important;
}

/* The theme's blue blur decorations predate the brand palette — retint them. */
body.motion-on #pxl-main img[src*="home-blur"],
body.motion-on #pxl-footer-elementor img[src*="home-blur"] {
  filter: hue-rotate(48deg) saturate(1.15); /* theme blue ~220° -> brand violet ~268° */
  opacity: 0.5;
}

/* Links: old theme blues -> brand cyan, magenta on hover */
body.motion-on #pxl-main a:not(.btn):not(.xsm-btn):not(.elementor-button) { color: var(--xsm-cyan); }
body.motion-on #pxl-main a:not(.btn):not(.xsm-btn):not(.elementor-button):hover { color: var(--xsm-magenta); }

/* Theme buttons (Read More, form submits...) -> brand gradient pill */
body.motion-on #pxl-main .btn,
body.motion-on #pxl-main .btn-default,
body.motion-on #pxl-main input[type="submit"],
body.motion-on #pxl-main .wp-block-button__link {
  background: var(--xsm-grad);
  background-size: 160% 100%;
  color: #fff;
  border: none;
  border-radius: 999px;
  transition: background-position 0.5s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
body.motion-on #pxl-main .btn:hover,
body.motion-on #pxl-main .btn-default:hover,
body.motion-on #pxl-main input[type="submit"]:hover,
body.motion-on #pxl-main .wp-block-button__link:hover {
  background-position: 100% 0%;
  transform: translateY(-2px);
  box-shadow: 0 8px 26px rgba(241, 7, 163, 0.35);
  color: #fff;
}

/* Content headings that still carry the old blue tones */
body.motion-on.page #pxl-main h1 span,
body.motion-on.page #pxl-main h2 span { color: inherit; }

/* Forms: dark glass inputs */
body.motion-on #pxl-main input[type="text"],
body.motion-on #pxl-main input[type="email"],
body.motion-on #pxl-main input[type="tel"],
body.motion-on #pxl-main textarea,
body.motion-on #pxl-main select {
  background: var(--xsm-glass-bg);
  border: 1px solid var(--xsm-glass-border);
  border-radius: 12px;
  color: var(--xsm-text);
}
body.motion-on #pxl-main input:focus,
body.motion-on #pxl-main textarea:focus {
  border-color: var(--xsm-cyan);
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.15);
}

/* Mobile: footer melts into the page instead of floating as a bright card —
   the final CTA fades to #0b0b22 and the footer continues that surface. */
@media (max-width: 767px) {
  body.motion-on #pxl-footer-elementor { background: var(--xsm-bg); padding-bottom: 88px; }
  body.motion-on #pxl-footer-elementor .elementor-element-0583021 {
    border-radius: 0 !important;
    background: linear-gradient(180deg, #0b0b22, #050510) !important;
    box-shadow: none !important;
    border: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
}

/* Mobile: lift the scroll-top button clear of the fixed bottom CTA bar. */
@media (max-width: 767px) {
  body.motion-on .pxl-scroll-top,
  body.motion-on .pxl-scroll-top.pxl-on {
    bottom: 96px !important;
    right: 14px !important;
  }
}

/* ---------- Page transition veil ---------- */
body.motion-on .xsm-veil {
  position: fixed;
  inset: 0;
  z-index: 9995;
  background: var(--xsm-bg);
  pointer-events: none;
  opacity: 0;
}
body.motion-on .xsm-veil.is-active { pointer-events: all; }

/* ---------- Reveal: reduced-motion guard ---------- */
@media (prefers-reduced-motion: reduce) {
  body.motion-on .xsm-reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ---------- Wand-trail sparks ----------
   Particles that stream off the cursor. Pooled and animated by motion.js;
   they only exist on a fine pointer with motion enabled. */
body.motion-on .xsm-spark {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9998;
  pointer-events: none;
  border-radius: 50%;
  opacity: 0;
  will-change: transform, opacity;
  transform: translate(-50%, -50%);
}

/* The footer card sits over the map with a 60px inner glow that was still the
   old blue. Retint to brand violet and soften it. */
body.motion-on #pxl-footer-elementor .elementor-element-0583021 {
  box-shadow: inset 0 0 70px rgba(123, 47, 247, 0.42) !important;
}