/* Фон з референсу: greige + персик + помаранчевий, органічні blob-и */
.wave-bg {
  --wave-bg-base: #e6e4e0;
  --wave-peach: #ffc090;
  --wave-terra: #ef6518;
  --wave-orange-1: #e85a10;
  --wave-orange-3: #ff8830;
  --wave-accent: #ef6518;

  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--wave-bg-base);
}

.wave-bg__inner {
  position: absolute;
  inset: -8% -4% -8% -2%;
  transform: translate3d(var(--wave-parallax-x, 0), var(--wave-parallax-y, 0), 0) scale(var(--wave-parallax-scale, 1));
  transition: transform 0.35s var(--ease-out);
  will-change: transform;
}

.wave-bg__svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.wave-bg__blob {
  transform-box: fill-box;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.wave-bg__blob--peach {
  fill: var(--wave-peach);
  transform-origin: 85% 50%;
}

.wave-bg__blob--terra {
  fill: var(--wave-terra);
  transform-origin: 0% 0%;
}

.wave-bg__blob--orange-1 {
  fill: var(--wave-orange-1);
  transform-origin: 100% 55%;
}

.wave-bg__blob--orange-3 {
  fill: var(--wave-orange-3);
  transform-origin: 100% 18%;
}

.wave-bg__stroke {
  fill: none;
  stroke: var(--wave-accent);
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transform-box: fill-box;
  transform-origin: center;
}

.wave-bg__stroke--scribble {
  stroke-width: 6;
}

.wave-bg__sphere {
  transform-box: fill-box;
  transform-origin: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  opacity: 0;
}

.wave-bg__sphere--left {
  opacity: 0;
}

.wave-bg--hero .wave-bg__inner {
  inset: -2% -4% -10% -6%;
}

.wave-bg--hero .wave-bg__sphere--left {
  transform-origin: 12% 13%;
}

.is-wave-ready .wave-bg__blob,
.is-wave-ready .wave-bg__stroke {
  opacity: 1;
}

.wave-bg__blob,
.wave-bg__stroke {
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .is-wave-ready.wave-bg--hero .wave-bg__inner {
    animation: waveLayerSway 10s var(--ease-in-out) infinite;
  }

  .is-wave-ready.wave-bg--hero .wave-bg__svg {
    animation: waveSvgDrift 12s var(--ease-in-out) infinite;
  }

  .is-wave-ready.wave-bg--hero .wave-bg__blob--peach {
    animation: waveEnter 0.85s var(--ease-out) forwards, wavePeachFlow 9s var(--ease-in-out) 0.85s infinite;
  }

  .is-wave-ready.wave-bg--hero .wave-bg__blob--terra {
    animation: waveEnter 0.95s var(--ease-out) 0.1s forwards, waveTerraFlow 11s var(--ease-in-out) 1.05s infinite;
  }

  .is-wave-ready.wave-bg--hero .wave-bg__blob--orange-1 {
    animation: waveEnter 0.9s var(--ease-out) 0.18s forwards, waveOrangeFlow1 10s var(--ease-in-out) 1.08s infinite;
  }

  .is-wave-ready.wave-bg--hero .wave-bg__blob--orange-3 {
    animation: waveEnter 0.85s var(--ease-out) 0.36s forwards, waveOrangeFlow3 9.5s var(--ease-in-out) 1.21s infinite;
  }

  .is-wave-ready.wave-bg--hero .wave-bg__stroke--scribble path:nth-child(1) {
    animation: waveEnter 0.6s var(--ease-out) 0.3s forwards, waveScribble1 5.5s var(--ease-in-out) 0.9s infinite;
  }

  .is-wave-ready.wave-bg--hero .wave-bg__stroke--scribble path:nth-child(2) {
    animation: waveEnter 0.6s var(--ease-out) 0.38s forwards, waveScribble2 6s var(--ease-in-out) 0.98s infinite;
  }

  .is-wave-ready.wave-bg--hero .wave-bg__stroke--scribble path:nth-child(3) {
    animation: waveEnter 0.6s var(--ease-out) 0.46s forwards, waveScribble3 6.5s var(--ease-in-out) 1.06s infinite;
  }

  .is-wave-ready.wave-bg--hero .wave-bg__sphere--left {
    animation: waveSphereEnterLeft 1.1s var(--ease-out) 0.15s forwards, waveSphereFloatLeft 12s var(--ease-in-out) 1.25s infinite;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wave-bg__blob,
  .wave-bg__stroke {
    opacity: 1;
  }

  .wave-bg__sphere--left {
    opacity: 0.94;
  }

  .wave-bg__inner {
    transform: none;
    transition: none;
    will-change: auto;
  }
}

@media (prefers-reduced-motion: reduce) and (max-width: 767px) {
  .wave-bg--hero .wave-bg__blob--peach {
    opacity: 1;
    transform: scale(0.96) translate3d(-34%, 4%, 0);
  }

  .wave-bg--hero .wave-bg__blob--terra {
    opacity: 1;
    transform: scale(0.92);
  }

  .wave-bg--hero .wave-bg__sphere--left {
    opacity: 0.94;
    visibility: visible;
    transform: scale(0.78) translate3d(6%, 8%, 0);
  }

  .wave-bg--hero .wave-bg__blob--orange-3 {
    opacity: 1;
    transform: scale(0.94);
  }

  .wave-bg--hero .wave-bg__blob--orange-1 {
    opacity: 1;
    transform: scale(0.92);
  }

  .wave-bg--hero .wave-bg__blob--peach,
  .wave-bg--hero .wave-bg__blob--terra,
  .wave-bg--hero .wave-bg__blob--orange-1,
  .wave-bg--hero .wave-bg__blob--orange-3 {
    visibility: visible;
  }
}

@keyframes waveEnter {
  from {
    opacity: 0;
    transform: translate3d(4%, 3%, 0) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes waveLayerSway {
  0%,
  100% {
    transform: translate3d(var(--wave-parallax-x, 0px), var(--wave-parallax-y, 0px), 0) scale(var(--wave-parallax-scale, 1)) rotate(0deg);
  }

  25% {
    transform: translate3d(calc(var(--wave-parallax-x, 0px) + 22px), calc(var(--wave-parallax-y, 0px) - 14px), 0) scale(calc(var(--wave-parallax-scale, 1) * 1.02)) rotate(0.6deg);
  }

  50% {
    transform: translate3d(calc(var(--wave-parallax-x, 0px) - 16px), calc(var(--wave-parallax-y, 0px) + 18px), 0) scale(calc(var(--wave-parallax-scale, 1) * 1.028)) rotate(-0.5deg);
  }

  75% {
    transform: translate3d(calc(var(--wave-parallax-x, 0px) + 12px), calc(var(--wave-parallax-y, 0px) + 8px), 0) scale(calc(var(--wave-parallax-scale, 1) * 1.018)) rotate(0.35deg);
  }
}

@keyframes waveSvgDrift {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }

  33% {
    transform: translate3d(-14px, 10px, 0) rotate(-0.45deg);
  }

  66% {
    transform: translate3d(10px, -12px, 0) rotate(0.4deg);
  }
}

@keyframes wavePeachFlow {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
  }

  20% {
    transform: translate3d(-32px, 14px, 0) scale(1.05) rotate(-1deg);
  }

  45% {
    transform: translate3d(-48px, -12px, 0) scale(1.07) rotate(0.7deg);
  }

  70% {
    transform: translate3d(-24px, 20px, 0) scale(1.04) rotate(-0.6deg);
  }
}

@keyframes waveTerraFlow {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
  }

  25% {
    transform: translate3d(28px, -18px, 0) scale(1.06) rotate(1.1deg);
  }

  50% {
    transform: translate3d(14px, 16px, 0) scale(1.08) rotate(-0.8deg);
  }

  75% {
    transform: translate3d(36px, -8px, 0) scale(1.05) rotate(0.9deg);
  }
}

@keyframes waveScribble1 {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scaleX(1) rotate(0deg);
  }

  50% {
    transform: translate3d(-24px, -8px, 0) scaleX(1.08) rotate(-2deg);
  }
}

@keyframes waveScribble2 {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scaleX(1) rotate(0deg);
  }

  50% {
    transform: translate3d(20px, 6px, 0) scaleX(0.94) rotate(1.5deg);
  }
}

@keyframes waveScribble3 {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scaleX(1) rotate(0deg);
  }

  50% {
    transform: translate3d(-18px, 10px, 0) scaleX(1.06) rotate(-1.2deg);
  }
}

@keyframes waveOrangeFlow1 {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
  }

  30% {
    transform: translate3d(-26px, 12px, 0) scale(1.05) rotate(-0.9deg);
  }

  60% {
    transform: translate3d(-14px, -16px, 0) scale(1.07) rotate(0.7deg);
  }
}

@keyframes waveOrangeFlow3 {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
  }

  45% {
    transform: translate3d(-18px, 8px, 0) scale(1.08) rotate(-1deg);
  }
}

@keyframes waveSphereEnterLeft {
  from {
    opacity: 0;
    transform: translate3d(-5%, -6%, 0) scale(0.82);
  }

  to {
    opacity: 0.94;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes waveSphereFloatLeft {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.94;
  }

  33% {
    transform: translate3d(16px, -12px, 0) scale(1.06);
    opacity: 1;
  }

  66% {
    transform: translate3d(6px, 14px, 0) scale(1.09);
    opacity: 0.9;
  }
}

@media (max-width: 1024px) {
  .wave-bg--hero .wave-bg__inner {
    inset: -3% -8% -10% -10%;
  }

  .wave-bg--hero .wave-bg__sphere--left {
    transform: scale(0.88);
    transform-origin: 11% 11%;
  }
}

@media (max-width: 767px) {
  .wave-bg--hero .wave-bg__inner {
    inset: -6% -44% -8% -4%;
  }

  .wave-bg--hero .wave-bg__stroke--scribble {
    opacity: 0;
    visibility: hidden;
  }

  .wave-bg--hero .wave-bg__blob--peach {
    opacity: 1;
    visibility: visible;
    transform: scale(0.96) translate3d(-34%, 4%, 0);
    transform-origin: 85% 50%;
  }

  .wave-bg--hero .wave-bg__blob--terra {
    opacity: 1;
    visibility: visible;
    transform: scale(0.92);
    transform-origin: 0% 0%;
  }

  .wave-bg--hero .wave-bg__sphere--left {
    opacity: 0.94;
    visibility: visible;
    transform: scale(0.78) translate3d(6%, 8%, 0);
    transform-origin: 12% 13%;
  }

  .wave-bg--hero .wave-bg__blob--orange-3 {
    opacity: 1;
    visibility: visible;
    transform: scale(0.94);
    transform-origin: 100% 18%;
  }

  .wave-bg--hero .wave-bg__blob--orange-1 {
    opacity: 1;
    visibility: visible;
    transform: scale(0.92);
    transform-origin: 100% 55%;
  }
}

@media (prefers-reduced-motion: no-preference) and (max-width: 767px) {
  .is-wave-ready.wave-bg--hero .wave-bg__svg {
    animation: none;
  }

  .wave-bg--hero.is-wave-ready .wave-bg__inner {
    animation: waveLayerSwayMobile 11s var(--ease-in-out) infinite;
  }

  .wave-bg--hero.is-wave-ready .wave-bg__blob--peach {
    animation: waveEnterPeachMobile 0.85s var(--ease-out) forwards, wavePeachFlowMobile 9.5s var(--ease-in-out) 0.85s infinite;
  }

  .wave-bg--hero.is-wave-ready .wave-bg__blob--terra {
    animation: waveEnterTerraMobile 0.95s var(--ease-out) 0.1s forwards, waveTerraFlowMobile 11s var(--ease-in-out) 1.05s infinite;
  }

  .wave-bg--hero.is-wave-ready .wave-bg__blob--orange-3 {
    animation: waveEnterOrange3Mobile 0.85s var(--ease-out) 0.22s forwards, waveOrangeFlow3Mobile 10s var(--ease-in-out) 1.07s infinite;
  }

  .wave-bg--hero.is-wave-ready .wave-bg__blob--orange-1 {
    animation: waveEnterOrange1Mobile 0.9s var(--ease-out) 0.18s forwards, waveOrangeFlow1Mobile 10.5s var(--ease-in-out) 1.08s infinite;
  }

  .is-wave-ready.wave-bg--hero .wave-bg__sphere--left {
    animation: waveSphereEnterLeftMobile 1.1s var(--ease-out) 0.15s forwards, waveSphereFloatLeftMobile 12s var(--ease-in-out) 1.25s infinite;
  }
}

@keyframes waveLayerSwayMobile {
  0%,
  100% {
    transform: translate3d(var(--wave-parallax-x, 0px), var(--wave-parallax-y, 0px), 0) scale(var(--wave-parallax-scale, 1)) rotate(0deg);
  }

  50% {
    transform: translate3d(calc(var(--wave-parallax-x, 0px) - 10px), calc(var(--wave-parallax-y, 0px) + 12px), 0) scale(calc(var(--wave-parallax-scale, 1) * 1.018)) rotate(-0.35deg);
  }
}

@keyframes waveEnterPeachMobile {
  from {
    opacity: 0;
    transform: scale(0.84) translate3d(-34%, 4%, 0);
  }

  to {
    opacity: 1;
    transform: scale(0.96) translate3d(-34%, 4%, 0);
  }
}

@keyframes wavePeachFlowMobile {
  0%,
  100% {
    transform: scale(0.96) translate3d(-34%, 4%, 0) rotate(0deg);
  }

  50% {
    transform: scale(0.99) translate3d(-34%, 4%, 0) rotate(-0.4deg);
  }
}

@keyframes waveEnterTerraMobile {
  from {
    opacity: 0;
    transform: scale(0.8);
  }

  to {
    opacity: 1;
    transform: scale(0.92);
  }
}

@keyframes waveTerraFlowMobile {
  0%,
  100% {
    transform: scale(0.92) rotate(0deg);
  }

  25% {
    transform: scale(0.95) rotate(0.7deg);
  }

  50% {
    transform: scale(0.97) rotate(-0.5deg);
  }

  75% {
    transform: scale(0.94) rotate(0.6deg);
  }
}

@keyframes waveEnterOrange3Mobile {
  from {
    opacity: 0;
    transform: scale(0.8);
  }

  to {
    opacity: 1;
    transform: scale(0.94);
  }
}

@keyframes waveOrangeFlow3Mobile {
  0%,
  100% {
    transform: scale(0.94) rotate(0deg);
  }

  50% {
    transform: scale(0.96) rotate(-0.35deg);
  }
}

@keyframes waveEnterOrange1Mobile {
  from {
    opacity: 0;
    transform: scale(0.78);
  }

  to {
    opacity: 1;
    transform: scale(0.92);
  }
}

@keyframes waveOrangeFlow1Mobile {
  0%,
  100% {
    transform: scale(0.92) rotate(0deg);
  }

  50% {
    transform: scale(0.94) rotate(0.35deg);
  }
}

@keyframes waveSphereEnterLeftMobile {
  from {
    opacity: 0;
    transform: translate3d(2%, 4%, 0) scale(0.66);
  }

  to {
    opacity: 0.94;
    transform: translate3d(6%, 8%, 0) scale(0.78);
  }
}

@keyframes waveSphereFloatLeftMobile {
  0%,
  100% {
    transform: translate3d(6%, 8%, 0) scale(0.78);
    opacity: 0.94;
  }

  33% {
    transform: translate3d(7%, 6%, 0) scale(0.82);
    opacity: 1;
  }

  66% {
    transform: translate3d(5%, 10%, 0) scale(0.84);
    opacity: 0.9;
  }
}

@supports (-webkit-touch-callout: none) {
  @media (max-width: 767px) {
    .wave-bg--hero .wave-bg__inner {
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
    }

    .wave-bg--hero .wave-bg__svg {
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
    }
  }
}

@media (prefers-reduced-motion: no-preference) {
  .is-wave-paused .wave-bg__blob,
  .is-wave-paused .wave-bg__stroke,
  .is-wave-paused .wave-bg__sphere--left,
  .is-wave-paused .wave-bg__inner,
  .is-wave-paused .wave-bg__svg {
    animation-play-state: paused;
  }
}

html.is-perf-lite .is-wave-ready.wave-bg--hero .wave-bg__inner,
html.is-perf-lite .is-wave-ready.wave-bg--hero .wave-bg__svg,
html.is-perf-lite .is-wave-ready.wave-bg--hero .wave-bg__blob,
html.is-perf-lite .is-wave-ready.wave-bg--hero .wave-bg__stroke--scribble path,
html.is-perf-lite .is-wave-ready.wave-bg--hero .wave-bg__sphere--left {
  animation: none;
}

html.is-perf-lite .wave-bg__inner {
  will-change: auto;
  transition: none;
  transform: none;
}