/* Optional global background motion selected on the Custom Options page.
 * The default/no-effect path does not request this file. */

body.beyhla-has-background-effect {
  background: var(--beyhla-black);
}

.beyhla-background-effect-surface {
  background-color: #000;
  contain: paint;
  isolation: isolate;
  margin-block: 0;
  overflow: hidden;
  overflow: clip;
  position: relative;
}

.wp-block-post-content > .beyhla-background-effect-surface,
.beyhla-background-effect-surface > .beyhla-section {
  margin-block: 0;
}

.beyhla-background-effect-surface::before,
.beyhla-background-effect-surface::after {
  animation-timeline: auto;
  backface-visibility: hidden;
  content: "";
  height: clamp(720px, 112svh, 1320px);
  inset-inline-start: 50%;
  pointer-events: none;
  position: absolute;
  top: 22%;
  transform: translate3d(0, 0, 0);
  transform-origin: 50% 50%;
  translate: -50% -50%;
  width: clamp(820px, 92vw, 1680px);
  will-change: transform;
  z-index: 0;
}

.beyhla-background-effect-surface::after {
  top: 72%;
}

.beyhla-background-effect-surface > .beyhla-section {
  position: relative;
  z-index: 1;
}

/* The runtime surface exists only from Video Content through Prozess. Its
 * fields are anchored to that document range, while their animations remain
 * time-driven and independent of scrolling. */
body.beyhla-has-background-effect .beyhla-background-effect-surface > .beyhla-product,
body.beyhla-has-background-effect .beyhla-background-effect-surface > .beyhla-journey,
body.beyhla-has-background-effect .beyhla-background-effect-surface > .beyhla-process {
  background-color: transparent;
  background-image: none;
}

body.beyhla-has-background-effect .beyhla-background-effect-surface > .beyhla-journey::before {
  background: none;
}

/* Freestyle-inspired: broad Beyhla-orange and copper light fields wander
 * between distant points on a true-black canvas. Their soft, asymmetric
 * shapes echo the supplied moving reference without copying its blue palette
 * or adding a JavaScript render loop. */
body.beyhla-background-effect--freestyle .beyhla-background-effect-surface {
  background-color: #000;
  background-image:
    radial-gradient(ellipse 52% 38% at 12% 50%, rgb(255 117 31 / 10%) 0%, rgb(165 76 20 / 7%) 44%, transparent 78%),
    radial-gradient(ellipse 44% 34% at 86% 50%, rgb(92 43 13 / 16%) 0%, rgb(92 43 13 / 8%) 46%, transparent 76%);
  background-position:
    center 0,
    center clamp(240px, 35svh, 520px);
  background-repeat: repeat-y;
  background-size:
    100% clamp(960px, 145svh, 1600px),
    100% clamp(1120px, 175svh, 1900px);
}

body.beyhla-background-effect--freestyle .beyhla-background-effect-surface::before {
  animation: beyhla-freestyle-wander-a 22s ease-in-out -7s infinite;
  animation-timeline: auto;
  background: radial-gradient(ellipse 50% 44% at 50% 50%, rgb(255 117 31 / 45%) 0%, rgb(255 117 31 / 36%) 18%, rgb(165 76 20 / 25%) 42%, rgb(92 43 13 / 12%) 60%, transparent 78%);
}

body.beyhla-background-effect--freestyle .beyhla-background-effect-surface::after {
  animation: beyhla-freestyle-wander-b 27s ease-in-out -13s infinite;
  animation-timeline: auto;
  background:
    radial-gradient(ellipse 44% 36% at 50% 50%, rgb(92 43 13 / 42%) 0%, rgb(92 43 13 / 26%) 42%, transparent 76%),
    radial-gradient(ellipse 30% 46% at 66% 35%, rgb(165 76 20 / 16%) 0%, rgb(92 43 13 / 12%) 46%, transparent 74%);
  opacity: 0.92;
}

/* One identical veil across the complete sequence prevents section seams and
 * protects orange labels at the brightest point. Journey's light panel stays
 * opaque above it while the side gutters use the same continuous surface. */
body.beyhla-background-effect--freestyle .beyhla-background-effect-surface > .beyhla-product,
body.beyhla-background-effect--freestyle .beyhla-background-effect-surface > .beyhla-journey,
body.beyhla-background-effect--freestyle .beyhla-background-effect-surface > .beyhla-process {
  background-color: rgb(0 0 0 / 28%);
}

@keyframes beyhla-freestyle-wander-a {
  0%,
  100% {
    transform: translate3d(-28%, -18%, 0) rotate(-2deg) scale(1.18);
  }

  18% {
    transform: translate3d(24%, -14%, 0) rotate(1deg) scale(1.22);
  }

  39% {
    transform: translate3d(18%, 22%, 0) rotate(2deg) scale(1.24);
  }

  61% {
    transform: translate3d(-25%, 19%, 0) rotate(-1deg) scale(1.2);
  }

  82% {
    transform: translate3d(29%, 3%, 0) rotate(1.5deg) scale(1.23);
  }
}

@keyframes beyhla-freestyle-wander-b {
  0%,
  100% {
    transform: translate3d(26%, 20%, 0) rotate(1.5deg) scale(1.21);
  }

  21% {
    transform: translate3d(-24%, 12%, 0) rotate(-2deg) scale(1.18);
  }

  43% {
    transform: translate3d(-10%, -22%, 0) rotate(-0.5deg) scale(1.24);
  }

  64% {
    transform: translate3d(25%, -17%, 0) rotate(2deg) scale(1.19);
  }

  84% {
    transform: translate3d(3%, 24%, 0) rotate(-1deg) scale(1.22);
  }
}

/* Ember orbit: two warmer brand glows cross on long, offset ellipses. */
body.beyhla-background-effect--ember-orbit .beyhla-background-effect-surface {
  background-color: #000;
  background-image:
    radial-gradient(ellipse 48% 36% at 18% 50%, rgb(255 117 31 / 9%) 0%, rgb(154 59 12 / 6%) 28%, transparent 58%),
    radial-gradient(ellipse 42% 34% at 82% 50%, rgb(92 43 13 / 14%) 0%, rgb(92 43 13 / 7%) 34%, transparent 62%);
  background-position:
    center 0,
    center clamp(280px, 40svh, 600px);
  background-repeat: repeat-y;
  background-size:
    100% clamp(980px, 150svh, 1700px),
    100% clamp(1160px, 180svh, 2000px);
}

body.beyhla-background-effect--ember-orbit .beyhla-background-effect-surface::before {
  animation: beyhla-ember-orbit-a 24s ease-in-out infinite alternate;
  animation-timeline: auto;
  background:
    radial-gradient(circle at 25% 34%, rgb(255 117 31 / 38%) 0%, rgb(154 59 12 / 24%) 19%, transparent 48%),
    radial-gradient(circle at 76% 69%, rgb(92 43 13 / 52%) 0%, rgb(92 43 13 / 20%) 28%, transparent 57%);
}

body.beyhla-background-effect--ember-orbit .beyhla-background-effect-surface::after {
  animation: beyhla-ember-orbit-b 31s ease-in-out infinite alternate;
  animation-timeline: auto;
  background:
    radial-gradient(circle at 73% 24%, rgb(255 168 91 / 24%) 0%, rgb(255 117 31 / 12%) 22%, transparent 51%),
    radial-gradient(circle at 34% 78%, rgb(165 76 20 / 34%) 0%, transparent 55%);
  opacity: 0.82;
}

body.beyhla-background-effect--ember-orbit .beyhla-background-effect-surface > .beyhla-product,
body.beyhla-background-effect--ember-orbit .beyhla-background-effect-surface > .beyhla-journey,
body.beyhla-background-effect--ember-orbit .beyhla-background-effect-surface > .beyhla-process {
  background-color: rgb(0 0 0 / 31.2%);
}

@keyframes beyhla-ember-orbit-a {
  0% {
    transform: translate3d(-4vmax, -1vmax, 0) rotate(-2deg) scale(1.17);
  }

  50% {
    transform: translate3d(3vmax, 4vmax, 0) rotate(1.5deg) scale(1.23);
  }

  100% {
    transform: translate3d(4vmax, -3vmax, 0) rotate(2deg) scale(1.19);
  }
}

@keyframes beyhla-ember-orbit-b {
  0% {
    transform: translate3d(4vmax, 3vmax, 0) rotate(2deg) scale(1.23);
  }

  50% {
    transform: translate3d(-4vmax, 1vmax, 0) rotate(-2deg) scale(1.17);
  }

  100% {
    transform: translate3d(1vmax, -4vmax, 0) rotate(-0.5deg) scale(1.21);
  }
}

/* Light sweep: a restrained amber ribbon crosses the page diagonally while a
 * dark copper counter-light moves in the opposite direction. */
body.beyhla-background-effect--light-sweep .beyhla-background-effect-surface {
  background-color: #000;
  background-image:
    radial-gradient(ellipse 50% 38% at 18% 50%, rgb(92 43 13 / 12%) 0%, transparent 68%),
    radial-gradient(ellipse 40% 32% at 84% 50%, rgb(255 117 31 / 7%) 0%, transparent 66%);
  background-position:
    center 0,
    center clamp(320px, 45svh, 680px);
  background-repeat: repeat-y;
  background-size:
    100% clamp(1040px, 160svh, 1800px),
    100% clamp(1240px, 190svh, 2100px);
}

body.beyhla-background-effect--light-sweep .beyhla-background-effect-surface::before {
  animation: beyhla-light-sweep-a 27s ease-in-out infinite alternate;
  animation-timeline: auto;
  background:
    linear-gradient(118deg, transparent 25%, rgb(92 43 13 / 18%) 39%, rgb(255 117 31 / 30%) 49%, rgb(255 182 112 / 14%) 56%, transparent 70%),
    radial-gradient(ellipse at 18% 72%, rgb(92 43 13 / 42%) 0%, transparent 54%);
}

body.beyhla-background-effect--light-sweep .beyhla-background-effect-surface::after {
  animation: beyhla-light-sweep-b 36s ease-in-out infinite alternate;
  animation-timeline: auto;
  background:
    linear-gradient(68deg, transparent 34%, rgb(255 117 31 / 11%) 48%, transparent 63%),
    radial-gradient(ellipse at 83% 22%, rgb(165 76 20 / 28%) 0%, transparent 52%);
  opacity: 0.8;
}

body.beyhla-background-effect--light-sweep .beyhla-background-effect-surface > .beyhla-product,
body.beyhla-background-effect--light-sweep .beyhla-background-effect-surface > .beyhla-journey,
body.beyhla-background-effect--light-sweep .beyhla-background-effect-surface > .beyhla-process {
  background-color: rgb(0 0 0 / 30.4%);
}

@keyframes beyhla-light-sweep-a {
  0% {
    transform: translate3d(-4vmax, 2vmax, 0) rotate(-2deg) scale(1.18);
  }

  100% {
    transform: translate3d(4vmax, -2vmax, 0) rotate(2deg) scale(1.23);
  }
}

@keyframes beyhla-light-sweep-b {
  0% {
    transform: translate3d(3vmax, -4vmax, 0) rotate(1.5deg) scale(1.22);
  }

  100% {
    transform: translate3d(-4vmax, 4vmax, 0) rotate(-2deg) scale(1.17);
  }
}

@media (prefers-reduced-motion: reduce) {
  .beyhla-background-effect-surface::before,
  .beyhla-background-effect-surface::after {
    animation: none;
    transform: none;
    will-change: auto;
  }
}

@media (forced-colors: active) {
  .beyhla-background-effect-surface {
    background-image: none;
  }

  .beyhla-background-effect-surface::before,
  .beyhla-background-effect-surface::after {
    display: none;
  }
}

@media print {
  .beyhla-background-effect-surface {
    background-image: none;
  }

  .beyhla-background-effect-surface::before,
  .beyhla-background-effect-surface::after {
    display: none;
  }
}