/*
 * Creadifity English homepage — reference-backed motion scene.
 *
 * The globe and buildings retain the exact colors of the supplied PNGs.
 * JavaScript only drives the custom properties declared below and the
 * per-billboard inline opacity/transform values.
 */

html.creadifity-home-motion-ready {
  --creadifity-scene-opacity: 1;
  --creadifity-globe-opacity: 1;
  --creadifity-globe-scale: 1;
  --creadifity-globe-x-px: 0px;
  --creadifity-globe-y-px: 0px;
  --creadifity-buildings-opacity: 0;
  --creadifity-buildings-x-px: 0px;
  --creadifity-buildings-y-px: 0px;
  --creadifity-buildings-scale: 1;
  --creadifity-hero-text-scale: 1;
  --creadifity-hero-text-x-px: 0px;
  background: #000;
  overflow-x: hidden !important;
}

html.creadifity-home-motion-ready,
html.creadifity-home-motion-ready body,
html.creadifity-home-motion-ready
  body[data-wsb-page-id="EC8042D2-A0AC-45D5-8730-764C855208A2"] {
  background-color: #000 !important;
  background-image: none !important;
}

/* One.com's desktop runtime restores overflow-x:auto after initial load. */
html.creadifity-home-motion-ready
  body[data-wsb-page-id="EC8042D2-A0AC-45D5-8730-764C855208A2"] {
  overflow-x: hidden !important;
}

html.creadifity-home-motion-ready
  body[data-wsb-page-id="EC8042D2-A0AC-45D5-8730-764C855208A2"]::before {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: #000;
  content: "";
  pointer-events: none;
}

/*
 * The scene sits behind the existing site. Relevant section backgrounds are
 * transparent so the fixed imagery is visible, while the body remains black.
 */
html.creadifity-home-motion-ready body > .template,
html.creadifity-home-motion-ready body > .publishOnlyComponents {
  position: relative !important;
  z-index: 2 !important;
}

html.creadifity-home-motion-ready #wsb-mobile-header,
html.creadifity-home-motion-ready #mm,
html.creadifity-home-motion-ready #mm-overlay,
html.creadifity-home-motion-ready .announcement-banner-container,
html.creadifity-home-motion-ready .announcement-popup-container,
html.creadifity-home-motion-ready [data-id="template-back-to-top-button"] {
  z-index: 20 !important;
}

/* The navigation sits on a fully opaque black header. */
html.creadifity-home-motion-ready
  #Header
  > [class*="Background_backgroundComponent"] {
  background-color: #000 !important;
  background-image: none !important;
}

html.creadifity-home-motion-ready
  #Header
  > [class*="Background_backgroundComponent"]
  > [class*="parallax_scrollEffectContainer"]
  > [class*="bgImageContainer"] {
  opacity: 0 !important;
  visibility: hidden !important;
}

html.creadifity-home-motion-ready #Home > [class*="Background_backgroundComponent"],
html.creadifity-home-motion-ready
  [data-id="58916D2D-11A1-42F1-A451-D6879ED309CF"][data-kind="Block"]
  [class*="Background_backgroundComponent"],
html.creadifity-home-motion-ready
  [data-id="4F7C755E-968B-4945-B911-EB797A1D01D1"][data-kind="Block"]
  > [class*="Background_backgroundComponent"] {
  background-color: transparent !important;
  background-image: none !important;
}

html.creadifity-home-motion-ready
  [data-id="4F7C755E-968B-4945-B911-EB797A1D01D1"][data-kind="Block"]
  > [class*="Background_backgroundComponent"] {
  border-top-color: transparent !important;
  border-bottom-color: transparent !important;
}

html.creadifity-home-motion-ready #Home > [class*="Background_backgroundComponent"] > [class*="parallax_"],
html.creadifity-home-motion-ready
  [data-id="58916D2D-11A1-42F1-A451-D6879ED309CF"][data-kind="Block"]
  [class*="parallax_scrollEffectContainer"],
html.creadifity-home-motion-ready
  [data-id="4F7C755E-968B-4945-B911-EB797A1D01D1"][data-kind="Block"]
  > [class*="Background_backgroundComponent"]
  > [class*="parallax_"] {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Only the health story between the white rules uses the glass-card material. */
html.creadifity-home-motion-ready
  [data-id="04B91D04-5120-44DD-8826-F18D81C87D74"][data-kind="Block"][data-specific-kind="STRIP"]
  > [class*="Background_backgroundComponent"]
  > [class*="parallax_scrollEffectContainer"] {
  opacity: 1 !important;
  visibility: visible !important;
  background:
    radial-gradient(
      115% 92% at 3% 0%,
      rgba(171, 225, 255, 0.13),
      rgba(255, 255, 255, 0.035) 44%,
      rgba(50, 64, 134, 0.025) 100%
    ) !important;
  box-shadow:
    0 24px 62px rgba(0, 0, 0, 0.52),
    0 0 32px rgba(44, 142, 255, 0.1),
    inset 1px 1px 0 rgba(255, 255, 255, 0.2) !important;
  -webkit-backdrop-filter: blur(18px) saturate(112%) !important;
  backdrop-filter: blur(18px) saturate(112%) !important;
}

html.creadifity-home-motion-ready
  [data-id="04B91D04-5120-44DD-8826-F18D81C87D74"][data-kind="Block"][data-specific-kind="STRIP"]
  > [class*="Background_backgroundComponent"]
  > [class*="parallax_scrollEffectContainer"]
  > * {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* The two Trustpilot collectors become one centred review field. */
html.creadifity-home-motion-ready
  [data-id="050DE361-664E-4804-89CC-FB4C6DCCCA2D"][data-kind="STRIP"],
html.creadifity-home-motion-ready .creadifity-trust-section,
html.creadifity-home-motion-ready
  .creadifity-trust-section
  > [class*="Background_backgroundComponent"] {
  min-height: 380px !important;
}

html.creadifity-home-motion-ready .creadifity-trust-section {
  position: relative !important;
}

html.creadifity-home-motion-ready
  .creadifity-trust-field-host {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 1100;
  display: grid;
  width: 100vw;
  place-items: center;
  pointer-events: none;
}

html.creadifity-home-motion-ready
  .creadifity-trust-field-host
  .trust-widget {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  box-sizing: border-box !important;
  width: min(600px, calc(100vw - 32px)) !important;
  max-width: 600px !important;
  height: 310px !important;
  min-height: 310px !important;
  margin: 0 !important;
  padding: 22px 28px !important;
  overflow: visible !important;
  border: 2px solid rgba(46, 204, 113, 0.66) !important;
  border-radius: 8px !important;
  background: rgba(0, 0, 0, 0.5) !important;
  box-shadow:
    0 26px 58px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(153, 255, 198, 0.08) !important;
  -webkit-backdrop-filter: blur(12px) saturate(112%);
  backdrop-filter: blur(12px) saturate(112%);
  gap: 18px !important;
  opacity: 1 !important;
  isolation: isolate;
  transform: translate3d(0, -30%, 0) !important;
  transition: none !important;
  text-align: center !important;
  pointer-events: auto;
}

html.creadifity-home-motion-ready
  .creadifity-trust-widget--enhanced
  > :not(.creadifity-trust-border-lights) {
  position: relative;
  z-index: 1;
}

html.creadifity-home-motion-ready
  .creadifity-trust-field-host
  .trust-left {
  display: flex !important;
  flex: 1 1 auto;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100%;
  min-height: 0;
  gap: 12px !important;
  background: transparent !important;
  text-align: center !important;
}

html.creadifity-home-motion-ready
  .creadifity-trust-field-host
  .trust-text {
  width: 100%;
  margin: 0;
  background: transparent !important;
  text-align: center !important;
}

.creadifity-trust-logo-display {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 30px;
  background: transparent !important;
  line-height: 0;
}

.creadifity-trust-logo-display .trust-logo {
  display: block;
  width: auto !important;
  max-width: min(190px, 70vw) !important;
  height: 30px !important;
  margin: 0 auto !important;
  background: transparent !important;
}

html.creadifity-home-motion-ready.creadifity-trustpilot-enhanced
  [data-id="A206D5C8-907C-424B-A54B-BE22B35CB26D"][data-kind="IMAGE"],
html.creadifity-home-motion-ready.creadifity-trustpilot-enhanced
  [data-id="1FB4056F-9408-4863-A3E5-A0BB0FE89741"][data-kind="CODE"],
html.creadifity-home-motion-ready.creadifity-trustpilot-enhanced
  [data-id="6DBF22A9-50C6-463C-A938-00A32E697B3E"][data-kind="CODE"] {
  display: none !important;
}

.creadifity-trust-rating {
  position: relative;
  display: inline-block;
  overflow: hidden;
  width: max-content;
  max-width: 100%;
  line-height: 0;
}

.creadifity-trust-stars-track,
.creadifity-trust-stars-colour {
  display: block;
  width: auto !important;
  max-width: none !important;
  height: 26px !important;
}

.creadifity-trust-stars-track {
  opacity: 0.84;
  filter: grayscale(1) saturate(0) brightness(0.72);
}

.creadifity-trust-rating-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  width: 0;
  transition: none;
}

.creadifity-trust-widget--enhanced.is-rating-visible
  .creadifity-trust-rating-fill {
  width: 100%;
  transition: width 1450ms cubic-bezier(0.22, 0.8, 0.2, 1) 180ms;
}

.creadifity-review-slot {
  --creadifity-review-crop-x: 52px;
  --creadifity-review-crop-y: 6px;
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: min(184px, 100%);
  height: 40px;
  min-height: 40px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 2px;
  background: transparent !important;
  line-height: 0;
}

html.creadifity-home-motion-ready
  .creadifity-trust-review-widget {
  position: absolute !important;
  top: calc(-1 * var(--creadifity-review-crop-y)) !important;
  left: calc(-1 * var(--creadifity-review-crop-x)) !important;
  display: block !important;
  width: 288px !important;
  height: 52px !important;
  margin: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

html.creadifity-home-motion-ready
  .creadifity-review-slot
  .creadifity-trust-review-widget
  iframe {
  display: block !important;
  width: 288px !important;
  height: 52px !important;
  border: 0 !important;
  background: transparent !important;
}

.creadifity-trust-border-lights {
  position: absolute;
  inset: -3px;
  z-index: 3;
  display: block;
  width: calc(100% + 6px);
  height: calc(100% + 6px);
  overflow: visible;
  pointer-events: none;
}

.creadifity-trust-border-light-path {
  vector-effect: non-scaling-stroke;
  stroke-dashoffset: 0;
  animation: creadifity-trust-border-flow 8s linear infinite;
  animation-play-state: paused;
}

.creadifity-trust-border-light-path--glow {
  stroke: #00ec86;
  stroke-width: 5;
  opacity: 0.42;
  filter: drop-shadow(0 0 7px rgba(0, 255, 153, 0.95));
}

.creadifity-trust-border-light-path--core {
  stroke: #b2ffda;
  stroke-width: 1.5;
  filter: drop-shadow(0 0 3px rgba(80, 255, 176, 0.92));
}

.creadifity-trust-widget--enhanced.is-rating-visible
  .creadifity-trust-border-light-path {
  animation-play-state: running;
}

@keyframes creadifity-trust-border-flow {
  to {
    stroke-dashoffset: -100;
  }
}

@media (max-width: 700px) {
  html.creadifity-home-motion-ready
    .creadifity-trust-field-host
    .trust-widget {
    height: 310px !important;
    min-height: 310px !important;
    padding: 20px 16px !important;
    gap: 15px !important;
  }

  html.creadifity-home-motion-ready
    .creadifity-trust-field-host
    .trust-left {
    align-items: center;
  }

  .creadifity-trust-stars-track,
  .creadifity-trust-stars-colour {
    height: 22px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .creadifity-trust-rating-fill {
    transition: none !important;
  }

  .creadifity-trust-border-light-path {
    animation: none !important;
  }
}

/* Retire the former hero and slideshow visuals without collapsing their rows. */
html.creadifity-home-motion-ready #Home video,
html.creadifity-home-motion-ready
  [data-id="A4409E3E-1B08-4CDA-85CF-1168F54D3B54"],
html.creadifity-home-motion-ready
  [data-id="B92E0954-C42C-428A-A42B-F255977EB5E8"],
html.creadifity-home-motion-ready .creadifity-home-preview-marquee,
html.creadifity-home-motion-ready .creadifity-home-preview-marquee-source {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html.creadifity-home-motion-ready .creadifity-home-preview-marquee-track {
  animation: none !important;
}

html.creadifity-home-motion-ready
  body[data-wsb-page-id="EC8042D2-A0AC-45D5-8730-764C855208A2"]
  .glass-card
  > .creadifity-liquid-glass-canvas,
html.creadifity-home-motion-ready #creadifity-home-motion-canvas {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/*
 * Existing content remains above the scene. Glass cards use the live imagery
 * beneath them rather than the stale, per-card liquid canvas snapshot.
 */
html.creadifity-home-motion-ready #Home > [class*="Background_backgroundComponent"] > [class*="Preview_column"],
html.creadifity-home-motion-ready
  [data-id="58916D2D-11A1-42F1-A451-D6879ED309CF"][data-kind="Block"]
  > [class*="Background_backgroundComponent"]
  > [class*="Preview_column"] {
  position: relative;
  z-index: 2;
}

.creadifity-motion-hero-copy {
  position: relative;
  z-index: 3;
  transform:
    translate3d(var(--creadifity-hero-text-x-px, 0px), 0, 0)
    scale(var(--creadifity-hero-text-scale, 1));
  transform-origin: left center;
  will-change: transform;
}

.creadifity-motion-card-anchor,
.creadifity-motion-card-anchor .glass-card {
  position: relative;
  z-index: 3;
}

html.creadifity-home-motion-ready
  body[data-wsb-page-id="EC8042D2-A0AC-45D5-8730-764C855208A2"]
  .glass-card {
  border-color: rgba(157, 218, 255, 0.28) !important;
  background:
    radial-gradient(
      115% 92% at 3% 0%,
      rgba(171, 225, 255, 0.13),
      rgba(255, 255, 255, 0.035) 44%,
      rgba(50, 64, 134, 0.025) 100%
    ) !important;
  box-shadow:
    0 24px 62px rgba(0, 0, 0, 0.52),
    0 0 32px rgba(44, 142, 255, 0.1),
    inset 1px 1px 0 rgba(255, 255, 255, 0.2) !important;
  -webkit-backdrop-filter: blur(18px) saturate(112%) !important;
  backdrop-filter: blur(18px) saturate(112%) !important;
}

/* Fixed reference scene. */
#creadifity-home-motion-stage {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  width: 100%;
  height: 100%;
  opacity: var(--creadifity-scene-opacity, 1);
  background: #000;
  contain: strict;
  isolation: isolate;
  pointer-events: none;
  transition: opacity 220ms linear;
}

.creadifity-reference-globe {
  position: absolute;
  top: 44vh;
  left: 84vw;
  z-index: 1;
  width: min(105vw, 132vh);
  aspect-ratio: 1;
  opacity: var(--creadifity-globe-opacity, 1);
  transform:
    translate3d(
      calc(-50% + var(--creadifity-globe-x-px, 0px)),
      calc(-50% + var(--creadifity-globe-y-px, 0px)),
      0
    )
    scale(var(--creadifity-globe-scale, 1));
  transform-origin: center;
  will-change: opacity, transform;
}

.creadifity-reference-globe-image {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  filter: none !important;
  mix-blend-mode: screen;
  user-select: none;
  -webkit-user-drag: none;
  transition: opacity 280ms ease;
}

.creadifity-reference-globe.is-reference-globe-fallback
  .creadifity-reference-globe-image {
  opacity: 1;
}

.creadifity-spatial-globe-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  filter: drop-shadow(0 0 8px rgba(28, 133, 255, 0.18));
  transition: opacity 320ms ease;
}

.creadifity-reference-globe.is-spatial-globe-ready
  .creadifity-spatial-globe-canvas {
  opacity: 1;
}

.creadifity-reference-globe.is-spatial-globe-ready
  .creadifity-reference-globe-image {
  opacity: 0;
}

.creadifity-globe-light-sweep {
  display: none !important;
}

.creadifity-globe-orbit--one,
.creadifity-globe-orbit--two,
.creadifity-globe-orbit--three {
  position: absolute;
  z-index: 3;
  border: 1px solid rgba(83, 184, 255, 0.24);
  border-radius: 50%;
  opacity: 0.5;
  box-shadow:
    0 0 7px rgba(75, 183, 255, 0.22),
    inset 0 0 7px rgba(87, 108, 255, 0.12);
  mix-blend-mode: screen;
  transform-origin: center;
}

.creadifity-globe-orbit--one {
  inset: 7% -3%;
  animation: creadifity-orbit-one 15s linear infinite;
}

.creadifity-globe-orbit--two {
  inset: -1% 16%;
  border-color: rgba(109, 89, 255, 0.34);
  animation: creadifity-orbit-two 19s linear infinite reverse;
}

.creadifity-globe-orbit--three {
  inset: 21% -6%;
  border-style: dashed;
  border-color: rgba(74, 227, 255, 0.3);
  animation: creadifity-orbit-three 12s linear infinite;
}

#creadifity-home-motion-stage:not(.creadifity-globe-render-active)
  .creadifity-globe-orbit {
  animation-play-state: paused !important;
}

/*
 * The complete 3:2 plate remains intact. Black pixels blend into the stage;
 * no hue, saturation, contrast or brightness filter touches the source image.
 */
.creadifity-reference-buildings {
  position: absolute;
  bottom: -8vh;
  left: 0;
  z-index: 2;
  width: min(118vw, 162vh);
  aspect-ratio: 3 / 2;
  opacity: var(--creadifity-buildings-opacity, 0);
  transform:
    translate3d(
      var(--creadifity-buildings-x-px, 0px),
      var(--creadifity-buildings-y-px, 0px),
      0
    )
    scale(var(--creadifity-buildings-scale, 1));
  transform-origin: left bottom;
  will-change: opacity, transform;
}

.creadifity-reference-buildings-image {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 1;
  filter: none !important;
  mix-blend-mode: screen;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, #000 2%, #000 95%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 2%, #000 98%, transparent 100%);
  mask-image:
    linear-gradient(90deg, transparent 0, #000 2%, #000 95%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 2%, #000 98%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  transition: opacity 220ms ease;
}

.creadifity-buildings-keyed-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 1;
  filter:
    drop-shadow(0 0 6px rgba(48, 153, 255, 0.2))
    drop-shadow(0 0 13px rgba(88, 61, 255, 0.1));
  mix-blend-mode: screen;
}

.creadifity-spatial-source-hidden {
  opacity: 0 !important;
  visibility: hidden !important;
}

/*
 * Each tower keeps the source plate's coordinate system, but is composited in
 * its own clipped layer. This lets the two blue towers stay left while the
 * purple tower occupies the right side without detaching its billboards.
 */
.creadifity-tower-composite {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  will-change: transform;
}

.creadifity-tower-composite-image {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  filter:
    drop-shadow(0 0 6px rgba(48, 153, 255, 0.2))
    drop-shadow(0 0 13px rgba(88, 61, 255, 0.1));
  mix-blend-mode: screen;
}

.creadifity-reference-buildings.is-tower-composed
  > .creadifity-buildings-keyed-canvas {
  opacity: 0 !important;
  visibility: hidden !important;
}

.creadifity-tower-composite--left {
  z-index: 1;
  clip-path: inset(0 65.5% 0 0);
  -webkit-mask-image: linear-gradient(
    90deg,
    #000 0 31.5%,
    transparent 34.5% 100%
  );
  mask-image: linear-gradient(90deg, #000 0 31.5%, transparent 34.5% 100%);
  transform: translate3d(calc(26vw - 36.45%), 0, 0) scale(1.08);
  transform-origin: 0 100%;
}

.creadifity-tower-composite--centre {
  z-index: 2;
  clip-path: inset(0 32.5% 0 31%);
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0 31%,
    #000 34% 64.5%,
    transparent 67.5% 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0 31%,
    #000 34% 64.5%,
    transparent 67.5% 100%
  );
  transform: translate3d(calc(26vw - 36.45%), 0, 0) scale(1.08);
  transform-origin: 0 100%;
}

.creadifity-tower-composite--right {
  z-index: 3;
  clip-path: inset(0 0 0 65%);
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0 65%,
    #000 68% 100%
  );
  mask-image: linear-gradient(90deg, transparent 0 65%, #000 68% 100%);
  transform: translate3d(calc(83.5vw - 92.91%), 0, 0) scale(1.14);
  transform-origin: 0 100%;
}

/* Opaque dotted masks conceal only the logo art already present in the PNG. */
.creadifity-reference-screen-cover--left,
.creadifity-reference-screen-cover--centre,
.creadifity-reference-screen-cover--right {
  position: absolute;
  z-index: 2;
  overflow: hidden;
  background-color: #01040a;
  background-image:
    radial-gradient(
      circle,
      rgba(84, 181, 255, 0.28) 0 0.55px,
      transparent 0.8px
    );
  background-size: 4px 4px;
  box-shadow: none;
}

.creadifity-reference-screen-cover--left {
  top: 21.107247%;
  left: 14.719252%;
  width: 13.486939%;
  height: 52.147352%;
  clip-path: polygon(20.9081% 0, 100% 15.628%, 88.9343% 100%, 0 94.9852%);
}

.creadifity-reference-screen-cover--centre {
  top: 30.273438%;
  left: 39.973958%;
  width: 19.596354%;
  height: 41.015625%;
  border-radius: 0;
  clip-path: polygon(
    3.6545% 6.9048%,
    11.9601% 3.3333%,
    29.5681% 0.9524%,
    48.505% 0,
    67.4419% 0.9524%,
    85.0498% 3.5714%,
    95.0166% 7.8571%,
    100% 100%,
    84.3854% 98.0952%,
    66.113% 96.9048%,
    48.505% 96.4286%,
    30.897% 96.9048%,
    13.6213% 98.0952%,
    0 100%
  );
  background-image:
    radial-gradient(
      circle,
      rgba(97, 160, 255, 0.24) 0 0.58px,
      transparent 0.85px
    );
  background-size: 4px 4px;
}

.creadifity-reference-screen-cover--right {
  top: 30.658005%;
  left: 78.465274%;
  width: 12.284368%;
  height: 45.660571%;
  clip-path: polygon(0 0, 82.2569% 12.5962%, 100% 100%, 12.8984% 95.8595%);
  background-image:
    radial-gradient(
      circle,
      rgba(160, 89, 255, 0.3) 0 0.55px,
      transparent 0.82px
    );
  background-size: 4px 4px;
  box-shadow: inset 0 0 25px rgba(126, 47, 220, 0.2);
}

/*
 * Five permanent content panels: two in the left tower, one on the curved
 * centre tower and two in the right tower. Their containing plate supplies
 * all responsive scaling; JS supplies entrance opacity/transform inline.
 */
.creadifity-reference-billboard {
  --creadifity-billboard-accent: rgba(99, 214, 255, 0.9);
  --creadifity-billboard-surface-transform: translate3d(0, 0, 0);
  position: absolute;
  z-index: 3;
  overflow: hidden;
  opacity: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  backface-visibility: hidden;
  isolation: isolate;
  will-change: opacity;
}

.creadifity-reference-billboard > img,
.creadifity-reference-billboard > .creadifity-perspective-billboard-canvas,
.creadifity-reference-billboard > .creadifity-reference-billboard-grid {
  position: absolute;
  inset: 0;
  transform: var(--creadifity-billboard-surface-transform);
  transform-origin: center;
  backface-visibility: hidden;
  will-change: transform;
}

.creadifity-reference-billboard > img {
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: none !important;
  user-select: none;
  -webkit-user-drag: none;
  transition: opacity 180ms ease;
}

.creadifity-perspective-billboard-canvas {
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  filter:
    saturate(1.04)
    contrast(1.04)
    brightness(1.08)
    drop-shadow(0 0 4px var(--creadifity-billboard-accent));
  transition: opacity 180ms ease;
}

.creadifity-reference-billboard.is-perspective-warped
  > .creadifity-perspective-billboard-canvas {
  opacity: 1;
}

.creadifity-reference-billboard.is-perspective-warped > img,
.creadifity-reference-billboard.is-perspective-warped
  > .creadifity-reference-billboard-grid {
  opacity: 0;
}

.creadifity-reference-billboard-grid {
  z-index: 2;
  opacity: 0.18;
  background-image:
    linear-gradient(rgba(83, 197, 255, 0.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(83, 197, 255, 0.17) 1px, transparent 1px);
  background-size: 8px 8px;
  box-shadow: inset 0 0 13px rgba(81, 191, 255, 0.22);
  mix-blend-mode: screen;
}

.creadifity-reference-billboard--1 {
  top: 21.107247%;
  left: 16.129184%;
  width: 12.077007%;
  height: 30.148476%;
  clip-path: polygon(11.6745% 0, 100% 27.0316%, 93.8212% 100%, 0 82.1472%);
}

.creadifity-reference-billboard--2 {
  top: 45.873382%;
  left: 14.719252%;
  width: 12.740728%;
  height: 27.381216%;
  clip-path: polygon(11.0663% 0, 100% 19.6571%, 94.1431% 100%, 0 90.4494%);
}

.creadifity-reference-billboard--3 {
  top: 30.273438%;
  left: 39.973958%;
  width: 19.596354%;
  height: 41.015625%;
  border-radius: 0;
  clip-path: polygon(
    3.6545% 6.9048%,
    11.9601% 3.3333%,
    29.5681% 0.9524%,
    48.505% 0,
    67.4419% 0.9524%,
    85.0498% 3.5714%,
    95.0166% 7.8571%,
    100% 100%,
    84.3854% 98.0952%,
    66.113% 96.9048%,
    48.505% 96.4286%,
    30.897% 96.9048%,
    13.6213% 98.0952%,
    0 100%
  );
  --creadifity-billboard-accent: rgba(96, 174, 255, 0.92);
}

.creadifity-reference-billboard--4 {
  top: 30.658005%;
  left: 78.465274%;
  width: 11.194554%;
  height: 25.706027%;
  clip-path: polygon(0 0, 90.2648% 22.3741%, 100% 100%, 7.0771% 85.1356%);
  --creadifity-billboard-accent: rgba(175, 103, 255, 0.9);
}

.creadifity-reference-billboard--5 {
  top: 52.542997%;
  left: 79.257521%;
  width: 11.492122%;
  height: 23.775579%;
  clip-path: polygon(0 0, 90.5169% 16.0713%, 100% 100%, 6.8938% 92.0482%);
  --creadifity-billboard-accent: rgba(194, 105, 255, 0.92);
}

.creadifity-reference-billboard--4 .creadifity-reference-billboard-grid,
.creadifity-reference-billboard--5 .creadifity-reference-billboard-grid {
  background-image:
    linear-gradient(rgba(187, 106, 255, 0.2) 1px, transparent 1px),
    linear-gradient(90deg, rgba(187, 106, 255, 0.16) 1px, transparent 1px);
  box-shadow: inset 0 0 13px rgba(174, 82, 255, 0.24);
}

.creadifity-motion-scanlines {
  position: absolute;
  inset: 0;
  z-index: 6;
  opacity: 0.075;
  background-image:
    repeating-linear-gradient(
      180deg,
      rgba(94, 192, 255, 0.24) 0,
      rgba(94, 192, 255, 0.24) 1px,
      transparent 1px,
      transparent 5px
    );
  mix-blend-mode: screen;
}

.creadifity-motion-noise {
  position: absolute;
  inset: 0;
  z-index: 7;
  opacity: 0.045;
  background-image:
    radial-gradient(circle at 17% 29%, #fff 0 0.55px, transparent 0.8px),
    radial-gradient(circle at 74% 61%, #77cfff 0 0.5px, transparent 0.76px);
  background-size: 19px 23px, 29px 31px;
  mix-blend-mode: screen;
}

@keyframes creadifity-globe-sweep {
  0%,
  16% {
    opacity: 0;
    transform: translate3d(-115%, 0, 0) rotate(9deg);
  }

  34% {
    opacity: 0.48;
  }

  62% {
    opacity: 0.22;
    transform: translate3d(115%, 0, 0) rotate(9deg);
  }

  100% {
    opacity: 0;
    transform: translate3d(115%, 0, 0) rotate(9deg);
  }
}

@keyframes creadifity-orbit-one {
  from {
    transform: rotate(-12deg) scaleY(0.43);
  }

  to {
    transform: rotate(348deg) scaleY(0.43);
  }
}

@keyframes creadifity-orbit-two {
  from {
    transform: rotate(18deg) scaleX(0.4);
  }

  to {
    transform: rotate(378deg) scaleX(0.4);
  }
}

@keyframes creadifity-orbit-three {
  from {
    transform: rotate(31deg) scaleY(0.48);
  }

  to {
    transform: rotate(391deg) scaleY(0.48);
  }
}

@media (max-width: 1100px) {
  .creadifity-reference-globe {
    top: 40vh;
    left: 87vw;
    width: min(118vw, 122vh);
  }

  .creadifity-reference-buildings {
    bottom: -5vh;
    left: 0;
    width: min(165vw, 162vh);
  }

  .creadifity-tower-composite--left,
  .creadifity-tower-composite--centre {
    transform: translate3d(calc(24vw - 34.425%), 0, 0) scale(1.02);
  }

  .creadifity-tower-composite--right {
    transform: translate3d(calc(85vw - 88.02%), 0, 0) scale(1.08);
  }

  .creadifity-motion-scanlines {
    opacity: 0.06;
  }
}

@media (max-width: 700px) {
  .creadifity-motion-hero-copy {
    transform-origin: left top;
  }

  .creadifity-reference-globe {
    top: 34vh;
    left: 92vw;
    width: min(138vw, 92vh);
  }

  .creadifity-reference-buildings {
    bottom: 1vh;
    left: 0;
    width: min(205vw, 124vh);
  }

  .creadifity-tower-composite--left,
  .creadifity-tower-composite--centre {
    transform: translate3d(calc(24vw - 34.425%), 0, 0) scale(1.02);
  }

  .creadifity-tower-composite--right {
    transform: translate3d(calc(85vw - 88.02%), 0, 0) scale(1.08);
  }

  .creadifity-reference-screen-cover--left,
  .creadifity-reference-screen-cover--centre,
  .creadifity-reference-screen-cover--right {
    background-size: 3px 3px;
  }

  .creadifity-reference-billboard-grid {
    opacity: 0.13;
    background-size: 5px 5px;
  }

  .creadifity-motion-scanlines {
    opacity: 0.045;
  }

  .creadifity-motion-noise {
    opacity: 0.025;
  }
}

@media (max-width: 430px) {
  .creadifity-reference-globe {
    top: 31vh;
    left: 94vw;
    width: min(146vw, 86vh);
  }

  .creadifity-reference-buildings {
    bottom: 4vh;
    left: 0;
    width: 210vw;
  }

  .creadifity-reference-billboard {
    border-width: 0;
    box-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  #creadifity-home-motion-stage,
  .creadifity-reference-globe,
  .creadifity-reference-buildings,
  .creadifity-motion-hero-copy {
    transition: none !important;
  }

  .creadifity-globe-light-sweep,
  .creadifity-globe-orbit--one,
  .creadifity-globe-orbit--two,
  .creadifity-globe-orbit--three {
    animation: none !important;
  }

  .creadifity-globe-light-sweep {
    opacity: 0.1;
    transform: translate3d(0, 0, 0) rotate(9deg);
  }
}

@media (prefers-contrast: more) {
  .creadifity-motion-scanlines,
  .creadifity-motion-noise {
    display: none;
  }
}