/**
 * Rörliga sektionsbakgrunder — ren CSS.
 *
 * Variabler på .has-section-motion-bg:
 *   --section-motion-tint       — bas (Section background)
 *   --section-motion-accent-a … d — upp till fyra accentfärger (standard se nedan)
 *
 * Innehåll ovanför lagret: direkta barn (utom hero-lager) får z-index: 5.
 */

/* ==========================================================================
   Site-wide motion background
   ========================================================================== */
.has-site-motion-bg {
  position: relative;
  isolation: isolate;
  background-color: var(--color-bg);
  --site-motion-tint: var(--color-bg, #ffffff);
  --site-motion-accent-a: var(--color-primary, #9333ea);
  --site-motion-accent-b: var(--color-accent, #22d3ee);
  --site-motion-accent-c: var(--color-heading, #f472b6);
  --site-motion-accent-d: var(--color-secondary-button, #c084fc);
}

.has-site-motion-bg::before {
  content: "";
  position: absolute;
  inset: -35%;
  z-index: 0;
  pointer-events: none;
  background-color: var(--site-motion-tint, var(--color-bg));
}

body.has-site-motion-bg::before {
  position: fixed;
  inset: -35vmax;
}

.has-site-motion-bg > * {
  position: relative;
  z-index: 1;
}

body.has-site-motion-bg :where(main:not(.ui-shell)) > section:not(.has-section-surface):not(.section-cta):not(.value-cards):not(.hero--fullscreen):not(.hero-centered):not(.hero-bg-image):not(.has-section-motion-bg) {
  background-color: transparent;
  background-image: none;
}

.has-site-motion-bg[data-site-motion-bg="gradient_drift"]::before {
  background-image:
    radial-gradient(ellipse 78% 62% at 24% 34%, color-mix(in srgb, var(--site-motion-tint, #6366f1) 34%, transparent), transparent 58%),
    radial-gradient(ellipse 68% 56% at 82% 76%, color-mix(in srgb, var(--site-motion-accent-a, #9333ea) 28%, transparent), transparent 54%),
    radial-gradient(ellipse 52% 46% at 56% 20%, color-mix(in srgb, var(--site-motion-accent-b, #22d3ee) 22%, transparent), transparent 58%);
  background-size: 132% 132%, 126% 126%, 142% 142%;
  background-position: 10% 20%, 90% 80%, 50% 10%;
  background-repeat: no-repeat;
}

.has-site-motion-bg[data-site-motion-bg="aurora_soft"]::before {
  background-image:
    radial-gradient(ellipse 100% 82% at 50% 118%, color-mix(in srgb, var(--site-motion-tint, #6366f1) 40%, transparent), transparent 58%),
    radial-gradient(ellipse 92% 72% at 10% 38%, color-mix(in srgb, var(--site-motion-accent-b, #22d3ee) 26%, transparent), transparent 62%),
    linear-gradient(108deg, transparent 38%, color-mix(in srgb, var(--site-motion-accent-a, #9333ea) 45%, var(--site-motion-accent-b, #22d3ee)) 50%, transparent 62%);
  background-size: 122% 122%, 112% 112%, 190% 190%;
  background-position: 50% 100%, 2% 42%, 42% 32%;
  background-repeat: no-repeat;
  background-blend-mode: normal, screen, screen;
}

.has-site-motion-bg[data-site-motion-bg="floating_dots"]::before {
  background-image:
    radial-gradient(circle, color-mix(in srgb, var(--site-motion-tint, #ffffff) 42%, transparent) 1.2px, transparent 1.3px),
    radial-gradient(circle, color-mix(in srgb, var(--site-motion-accent-c, #f472b6) 26%, transparent) 0.85px, transparent 1px);
  background-size: 48px 48px, 72px 72px;
  background-position: 0 0, 12px 18px;
  background-repeat: repeat;
}

.has-site-motion-bg[data-site-motion-bg="mesh_slow"]::before {
  background-image:
    radial-gradient(at 28% 28%, color-mix(in srgb, var(--site-motion-accent-a, #9333ea) 26%, transparent), transparent 58%),
    radial-gradient(at 78% 68%, color-mix(in srgb, var(--site-motion-accent-b, #22d3ee) 18%, transparent), transparent 55%),
    radial-gradient(at 48% 52%, color-mix(in srgb, var(--site-motion-accent-c, #f472b6) 14%, transparent), transparent 62%),
    conic-gradient(from 200deg at 50% 50%, transparent 0deg, color-mix(in srgb, var(--site-motion-accent-d, #c084fc) 20%, transparent) 110deg, transparent 290deg);
  background-size: 100% 100%, 100% 100%, 100% 100%, 165% 165%;
  background-position: center, center, center, center;
  background-repeat: no-repeat;
}

.has-site-motion-bg[data-site-motion-bg="lava_lamp"]::before {
  background-image:
    radial-gradient(ellipse 48% 52% at 28% 38%, color-mix(in srgb, var(--site-motion-accent-a, #9333ea) 42%, transparent), transparent 72%),
    radial-gradient(ellipse 46% 50% at 78% 58%, color-mix(in srgb, var(--site-motion-accent-b, #22d3ee) 38%, transparent), transparent 74%),
    radial-gradient(ellipse 44% 48% at 52% 82%, color-mix(in srgb, var(--site-motion-accent-c, #f472b6) 36%, transparent), transparent 74%),
    radial-gradient(ellipse 42% 46% at 85% 22%, color-mix(in srgb, var(--site-motion-accent-d, #c084fc) 38%, transparent), transparent 74%),
    radial-gradient(ellipse 120% 100% at 50% 50%, color-mix(in srgb, var(--site-motion-tint, #6366f1) 18%, transparent), transparent 68%);
  background-size: 140% 140%, 135% 135%, 130% 130%, 138% 138%, 100% 100%;
  background-position: 18% 22%, 82% 78%, 48% 88%, 88% 18%, 50% 50%;
  background-repeat: no-repeat;
  background-blend-mode: screen, screen, screen, screen, normal;
  filter: saturate(1.12);
}

@media (prefers-reduced-motion: no-preference) {
  .has-site-motion-bg[data-site-motion-bg="gradient_drift"]::before {
    animation: man-motion-gradient-pos 18s ease-in-out infinite alternate;
  }

  .has-site-motion-bg[data-site-motion-bg="aurora_soft"]::before {
    animation: man-motion-aurora-pos 24s ease-in-out infinite alternate;
  }

  .has-site-motion-bg[data-site-motion-bg="floating_dots"]::before {
    animation: man-motion-dots-pos 32s linear infinite;
  }

  .has-site-motion-bg[data-site-motion-bg="mesh_slow"]::before {
    animation: man-motion-mesh-pos 34s ease-in-out infinite alternate;
  }

  .has-site-motion-bg[data-site-motion-bg="lava_lamp"]::before {
    animation: man-motion-lava-drifts 42s ease-in-out infinite;
  }
}

@media (prefers-reduced-motion: reduce) {
  .has-site-motion-bg::before {
    animation: none !important;
  }
}

.has-section-motion-bg {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  --section-motion-accent-a: #9333ea;
  --section-motion-accent-b: #22d3ee;
  --section-motion-accent-c: #f472b6;
  --section-motion-accent-d: #c084fc;
}

.has-section-motion-bg > .section-motion-bg-layer {
  position: absolute;
  /* Stor negativ inset (-45vmax åt varje håll) gör lagret 90vmax större än sektionen
     på båda axlarna. vmax = max(vw, vh) säkerställer att lagret alltid täcker hela
     sektionen oavsett skärmstorlek/orientering. Varianter med transform: rotate
     (orbit/spin) använder sin egen width/height: 210% och påverkas inte. */
  inset: -45vmax;
  z-index: 0;
  pointer-events: none;
  box-shadow: inset 0 0 min(100px, 18vw) rgba(15, 23, 42, 0.14);
}

/* Innehåll ovanför rörligt lager. Hero-inner måste INTE undantas — annars vinner motion (z-index:0)
   över statisk .hero__inner utan z-index. Vi undantar bara foto-/overlay-lager. */
.has-section-motion-bg > *:not(.section-motion-bg-layer):not(.hero-centered__bg):not(.hero-centered__overlay):not(.hero__bg):not(.hero__overlay) {
  position: relative;
  z-index: 5;
}

/* ==========================================================================
   gradient_drift (långsam)
   ========================================================================== */
.has-section-motion-bg[data-motion-bg="gradient_drift"] > .section-motion-bg-layer {
  background-image:
    radial-gradient(
      ellipse 78% 62% at 24% 34%,
      color-mix(in srgb, var(--section-motion-tint, #6366f1) 34%, transparent),
      transparent 58%
    ),
    radial-gradient(
      ellipse 68% 56% at 82% 76%,
      color-mix(in srgb, var(--section-motion-accent-a, #9333ea) 28%, transparent),
      transparent 54%
    ),
    radial-gradient(
      ellipse 52% 46% at 56% 20%,
      color-mix(in srgb, var(--section-motion-accent-b, #22d3ee) 22%, transparent),
      transparent 58%
    );
  background-size: 132% 132%, 126% 126%, 142% 142%;
  background-position: 10% 20%, 90% 80%, 50% 10%;
  background-repeat: no-repeat;
}

@media (prefers-reduced-motion: no-preference) {
  .has-section-motion-bg[data-motion-bg="gradient_drift"] > .section-motion-bg-layer {
    animation: man-motion-gradient-pos 12s ease-in-out infinite alternate;
  }
}

@keyframes man-motion-gradient-pos {
  0% {
    background-position: 8% 18%, 88% 78%, 52% 12%;
    background-size: 132% 132%, 126% 126%, 142% 142%;
  }
  100% {
    background-position: 62% 42%, 18% 28%, 78% 68%;
    background-size: 148% 138%, 140% 134%, 158% 150%;
  }
}

/* ==========================================================================
   aurora_soft (långsam)
   ========================================================================== */
.has-section-motion-bg[data-motion-bg="aurora_soft"] > .section-motion-bg-layer {
  background-image:
    radial-gradient(
      ellipse 100% 82% at 50% 118%,
      color-mix(in srgb, var(--section-motion-tint, #6366f1) 40%, transparent),
      transparent 58%
    ),
    radial-gradient(
      ellipse 92% 72% at 10% 38%,
      color-mix(in srgb, var(--section-motion-accent-b, #22d3ee) 26%, transparent),
      transparent 62%
    ),
    linear-gradient(
      108deg,
      transparent 38%,
      color-mix(
          in srgb,
          var(--section-motion-accent-a, #9333ea) 45%,
          var(--section-motion-accent-b, #22d3ee)
        )
        50%,
      transparent 62%
    );
  background-size: 122% 122%, 112% 112%, 190% 190%;
  background-position: 50% 100%, 2% 42%, 42% 32%;
  background-repeat: no-repeat;
  background-blend-mode: normal, screen, screen;
  opacity: 0.98;
}

@media (prefers-reduced-motion: no-preference) {
  .has-section-motion-bg[data-motion-bg="aurora_soft"] > .section-motion-bg-layer {
    animation: man-motion-aurora-pos 16s ease-in-out infinite alternate;
  }
}

@keyframes man-motion-aurora-pos {
  0% {
    background-position: 48% 95%, 5% 38%, 35% 28%;
  }
  100% {
    background-position: 55% 88%, 18% 48%, 62% 55%;
  }
}

/* ==========================================================================
   floating_dots (långsam)
   ========================================================================== */
.has-section-motion-bg[data-motion-bg="floating_dots"] > .section-motion-bg-layer {
  background-image:
    radial-gradient(
      circle,
      color-mix(in srgb, var(--section-motion-tint, #ffffff) 42%, transparent) 1.2px,
      transparent 1.3px
    ),
    radial-gradient(
      circle,
      color-mix(in srgb, var(--section-motion-accent-c, #f472b6) 26%, transparent) 0.85px,
      transparent 1px
    );
  background-size: 48px 48px, 72px 72px;
  background-position: 0 0, 12px 18px;
  background-repeat: repeat;
}

@media (prefers-reduced-motion: no-preference) {
  .has-section-motion-bg[data-motion-bg="floating_dots"] > .section-motion-bg-layer {
    animation: man-motion-dots-pos 20s linear infinite;
  }
}

@keyframes man-motion-dots-pos {
  0% {
    background-position: 0 0, 12px 18px;
  }
  100% {
    background-position: 48px 48px, 60px 66px;
  }
}

/* ==========================================================================
   mesh_slow (långsam)
   ========================================================================== */
.has-section-motion-bg[data-motion-bg="mesh_slow"] > .section-motion-bg-layer {
  background-image:
    radial-gradient(at 28% 28%, color-mix(in srgb, var(--section-motion-accent-a, #9333ea) 26%, transparent), transparent 58%),
    radial-gradient(at 78% 68%, color-mix(in srgb, var(--section-motion-accent-b, #22d3ee) 18%, transparent), transparent 55%),
    radial-gradient(at 48% 52%, color-mix(in srgb, var(--section-motion-accent-c, #f472b6) 14%, transparent), transparent 62%),
    conic-gradient(
      from 200deg at 50% 50%,
      transparent 0deg,
      color-mix(in srgb, var(--section-motion-accent-d, #c084fc) 20%, transparent) 110deg,
      transparent 290deg
    );
  background-size: 100% 100%, 100% 100%, 100% 100%, 165% 165%;
  background-position: center, center, center, center;
  background-repeat: no-repeat;
}

@media (prefers-reduced-motion: no-preference) {
  .has-section-motion-bg[data-motion-bg="mesh_slow"] > .section-motion-bg-layer {
    animation: man-motion-mesh-pos 26s ease-in-out infinite alternate;
  }
}

@keyframes man-motion-mesh-pos {
  0% {
    background-position: center, center, center, 42% 48%;
    background-size: 100% 100%, 100% 100%, 100% 100%, 168% 168%;
  }
  100% {
    background-position: center, center, center, 58% 55%;
    background-size: 108% 108%, 104% 104%, 106% 106%, 188% 188%;
  }
}

/* ==========================================================================
   lava_lamp — mjuka “blobbar”, använder accent 1–4 + tint
   ========================================================================== */
.has-section-motion-bg[data-motion-bg="lava_lamp"] > .section-motion-bg-layer {
  background-image:
    radial-gradient(
      ellipse 48% 52% at 28% 38%,
      color-mix(in srgb, var(--section-motion-accent-a, #9333ea) 42%, transparent),
      transparent 72%
    ),
    radial-gradient(
      ellipse 46% 50% at 78% 58%,
      color-mix(in srgb, var(--section-motion-accent-b, #22d3ee) 38%, transparent),
      transparent 74%
    ),
    radial-gradient(
      ellipse 44% 48% at 52% 82%,
      color-mix(in srgb, var(--section-motion-accent-c, #f472b6) 36%, transparent),
      transparent 74%
    ),
    radial-gradient(
      ellipse 42% 46% at 85% 22%,
      color-mix(in srgb, var(--section-motion-accent-d, #c084fc) 38%, transparent),
      transparent 74%
    ),
    radial-gradient(
      ellipse 120% 100% at 50% 50%,
      color-mix(in srgb, var(--section-motion-tint, #6366f1) 18%, transparent),
      transparent 68%
    );
  background-size: 140% 140%, 135% 135%, 130% 130%, 138% 138%, 100% 100%;
  background-position: 18% 22%, 82% 78%, 48% 88%, 88% 18%, 50% 50%;
  background-repeat: no-repeat;
  background-blend-mode: screen, screen, screen, screen, normal;
  filter: saturate(1.12);
}

@media (prefers-reduced-motion: no-preference) {
  .has-section-motion-bg[data-motion-bg="lava_lamp"] > .section-motion-bg-layer {
    animation: man-motion-lava-drifts 28s ease-in-out infinite;
  }
}

@keyframes man-motion-lava-drifts {
  0% {
    background-position: 18% 22%, 82% 78%, 48% 88%, 88% 18%, 50% 50%;
    background-size: 140% 140%, 135% 135%, 130% 130%, 138% 138%, 110% 110%;
  }
  20% {
    background-position: 62% 18%, 38% 62%, 22% 42%, 58% 82%, 52% 48%;
    background-size: 148% 142%, 128% 138%, 138% 132%, 125% 140%, 112% 108%;
  }
  40% {
    background-position: 72% 58%, 22% 28%, 68% 72%, 32% 38%, 48% 52%;
    background-size: 132% 148%, 142% 128%, 128% 142%, 140% 130%, 108% 114%;
  }
  60% {
    background-position: 42% 82%, 78% 42%, 58% 22%, 18% 68%, 50% 54%;
    background-size: 138% 134%, 134% 142%, 142% 130%, 132% 138%, 114% 110%;
  }
  80% {
    background-position: 28% 48%, 58% 22%, 82% 58%, 42% 88%, 46% 46%;
    background-size: 144% 136%, 130% 144%, 134% 136%, 136% 132%, 106% 112%;
  }
  100% {
    background-position: 18% 22%, 82% 78%, 48% 88%, 88% 18%, 50% 50%;
    background-size: 140% 140%, 135% 135%, 130% 130%, 138% 138%, 110% 110%;
  }
}

/* ==========================================================================
   Snabb: gradient_orbit — extra stor canvas + utzoomat lager så inga “hål” vid rotation
   ========================================================================== */
.has-section-motion-bg[data-motion-bg="gradient_orbit"] > .section-motion-bg-layer {
  inset: auto;
  width: 210%;
  height: 210%;
  left: 50%;
  top: 50%;
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%);
  background-image:
    radial-gradient(
      ellipse 72% 68% at 48% 46%,
      color-mix(in srgb, var(--section-motion-tint, #6366f1) 38%, transparent),
      transparent 68%
    ),
    radial-gradient(
      ellipse 68% 62% at 62% 58%,
      color-mix(in srgb, var(--section-motion-accent-a, #9333ea) 30%, transparent),
      transparent 65%
    ),
    radial-gradient(
      ellipse 58% 54% at 38% 54%,
      color-mix(in srgb, var(--section-motion-accent-b, #22d3ee) 28%, transparent),
      transparent 66%
    ),
    radial-gradient(
      ellipse 52% 48% at 72% 32%,
      color-mix(in srgb, var(--section-motion-accent-c, #f472b6) 22%, transparent),
      transparent 70%
    );
  background-size: 85% 85%, 90% 90%, 88% 88%, 82% 82%;
  background-position: center;
  background-repeat: no-repeat;
  transform-origin: center center;
}

@media (prefers-reduced-motion: no-preference) {
  .has-section-motion-bg[data-motion-bg="gradient_orbit"] > .section-motion-bg-layer {
    animation: man-motion-gradient-orbit 14s linear infinite;
  }
}

@keyframes man-motion-gradient-orbit {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* ==========================================================================
   Snabb: stripe_flow
   ========================================================================== */
.has-section-motion-bg[data-motion-bg="stripe_flow"] > .section-motion-bg-layer {
  background-image:
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 26px,
      color-mix(in srgb, var(--section-motion-accent-a, #9333ea) 38%, transparent) 28px,
      transparent 56px
    ),
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 38px,
      color-mix(in srgb, var(--section-motion-accent-b, #22d3ee) 22%, transparent) 40px,
      transparent 78px
    );
  background-size: 56px 100%, 100% 80px;
  background-position: 0 0, 0 0;
}

@media (prefers-reduced-motion: no-preference) {
  .has-section-motion-bg[data-motion-bg="stripe_flow"] > .section-motion-bg-layer {
    animation: man-motion-stripe-flow 10s linear infinite;
  }
}

@keyframes man-motion-stripe-flow {
  from {
    background-position: 0 0, 0 0;
  }
  to {
    background-position: 56px 0, 0 80px;
  }
}

/* ==========================================================================
   Snabb: dots_seamless
   ========================================================================== */
.has-section-motion-bg[data-motion-bg="dots_seamless"] > .section-motion-bg-layer {
  background-image:
    radial-gradient(
      circle,
      color-mix(in srgb, var(--section-motion-tint, #ffffff) 44%, transparent) 1.2px,
      transparent 1.3px
    ),
    radial-gradient(
      circle,
      color-mix(in srgb, var(--section-motion-accent-d, #c084fc) 32%, transparent) 0.85px,
      transparent 1px
    );
  background-size: 48px 48px, 72px 72px;
  background-position: 0 0, 12px 18px;
  background-repeat: repeat;
}

@media (prefers-reduced-motion: no-preference) {
  .has-section-motion-bg[data-motion-bg="dots_seamless"] > .section-motion-bg-layer {
    animation: man-motion-dots-seamless 10s linear infinite;
  }
}

@keyframes man-motion-dots-seamless {
  from {
    background-position: 0 0, 12px 18px;
  }
  to {
    background-position: 144px 144px, 156px 162px;
  }
}

/* ==========================================================================
   Snabb: mesh_spin — utökad yta som orbit så inga tomma hörn
   ========================================================================== */
.has-section-motion-bg[data-motion-bg="mesh_spin"] > .section-motion-bg-layer {
  inset: auto;
  width: 190%;
  height: 190%;
  left: 50%;
  top: 50%;
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%);
  background-image:
    radial-gradient(at 38% 34%, color-mix(in srgb, var(--section-motion-accent-b, #22d3ee) 30%, transparent), transparent 56%),
    radial-gradient(at 72% 72%, color-mix(in srgb, var(--section-motion-accent-a, #9333ea) 24%, transparent), transparent 54%),
    radial-gradient(at 55% 48%, color-mix(in srgb, var(--section-motion-accent-c, #f472b6) 18%, transparent), transparent 58%),
    conic-gradient(
      from 120deg at 50% 50%,
      transparent 0deg,
      color-mix(in srgb, var(--section-motion-accent-a, #818cf8) 26%, transparent) 95deg,
      color-mix(in srgb, var(--section-motion-accent-d, #c084fc) 20%, transparent) 165deg,
      transparent 280deg
    );
  background-size: 100% 100%, 100% 100%, 100% 100%, 95% 95%;
  background-position: center, center, center, center;
  background-repeat: no-repeat;
  transform-origin: center center;
}

@media (prefers-reduced-motion: no-preference) {
  .has-section-motion-bg[data-motion-bg="mesh_spin"] > .section-motion-bg-layer {
    animation: man-motion-mesh-spin 10s linear infinite;
  }
}

@keyframes man-motion-mesh-spin {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@media (max-width: 768px) {
  .has-section-motion-bg[data-motion-bg="gradient_orbit"] > .section-motion-bg-layer,
  .has-section-motion-bg[data-motion-bg="mesh_spin"] > .section-motion-bg-layer {
    width: min(320vmin, 380%);
    height: min(320vmin, 380%);
    min-width: min(320vmin, 380%);
    min-height: min(320vmin, 380%);
    left: 50%;
    top: 50%;
    right: auto;
    bottom: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .has-section-motion-bg[data-motion-bg] > .section-motion-bg-layer {
    animation: none !important;
  }
}