/**
 * Global animated ambient background — center aura + vertical flow lines.
 * Pure CSS motion; theme tokens from admin background settings.
 */

:root {
  --bg-base-dark: var(--bg-dark, #000008);
  --bg-gradient-red: rgba(222, 36, 47, 0.14);
  --bg-gradient-deep-red: rgba(90, 0, 8, 0.38);
  --bg-aura-color: var(--bg-red-soft, rgba(222, 36, 47, 0.24));
  --bg-aura-opacity: var(--bg-aurora-opacity, 0.42);
  --bg-aura-blur: var(--bg-aurora-blur, 72px);
  --bg-aura-size: min(68vw, 680px);
  --bg-aura-speed: var(--bg-aurora-speed, 42s);
  --bg-line-width: 2px;
  --bg-line-tile: var(--bg-line-flow-height, 100dvh);
  --bg-line-flow-speed: var(--bg-line-speed, 11s);
  --bg-line-left-position: max(8px, 1.25vw);
  --bg-line-right-position: calc(100% - max(8px, 1.25vw));
  --bg-mobile-motion: auto;
}

.site-bg[data-site-background] {
  display: var(--bg-display, block);
}

/* ----- Center aura ----- */
.site-bg__aura-wrap {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  overflow: hidden;
  transform: translate3d(0, calc(var(--bg-scroll-y, 0px) * -0.05), 0);
  will-change: transform;
}

.site-bg__aura {
  position: relative;
  width: var(--bg-aura-size);
  height: var(--bg-aura-size);
  border-radius: 50%;
  opacity: var(--bg-aura-opacity);
  background: radial-gradient(
    circle at 50% 50%,
    var(--bg-aura-color) 0%,
    rgba(222, 36, 47, 0.12) 34%,
    rgba(222, 36, 47, 0.05) 54%,
    transparent 76%
  );
  filter: blur(var(--bg-aura-blur));
  transform: translate3d(0, 0, 0) scale(1);
  will-change: transform, opacity;
  animation: site-bg-aura-float var(--bg-aura-speed, 42s) ease-in-out infinite;
}

@keyframes site-bg-aura-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: var(--bg-aura-opacity);
  }

  25% {
    transform: translate3d(0, -32px, 0) scale(1.04);
    opacity: calc(var(--bg-aura-opacity) * 1.06);
  }

  50% {
    transform: translate3d(0, 0, 0) scale(1.055);
    opacity: calc(var(--bg-aura-opacity) * 1.12);
  }

  75% {
    transform: translate3d(0, 28px, 0) scale(1.035);
    opacity: calc(var(--bg-aura-opacity) * 1.04);
  }
}

/* ----- Vertical flow lines (viewport height only) ----- */
.site-bg__lines {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100dvh;
  max-height: 100dvh;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  transform: translate3d(0, calc(var(--bg-scroll-y, 0px) * -0.022), 0);
  will-change: transform;
}

.site-bg__line {
  position: absolute;
  top: 0;
  width: var(--bg-line-width);
  height: 100dvh;
  max-height: 100dvh;
  opacity: calc(var(--bg-line-opacity, 0.62) * 1.15);
  overflow: hidden;
}

/* Side rails — static faint line + one flowing pulse per viewport */
.site-bg__line::before {
  content: "";
  position: absolute;
  inset: 0;
  left: 50%;
  z-index: 1;
  width: var(--bg-line-width);
  transform: translateX(-50%);
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(222, 36, 47, 0.08) 18%,
    rgba(222, 36, 47, 0.2) 50%,
    rgba(222, 36, 47, 0.08) 82%,
    transparent 100%
  );
  pointer-events: none;
}

.site-bg__line::after {
  content: "";
  position: absolute;
  inset: 0;
  left: 50%;
  z-index: 2;
  width: var(--bg-line-width);
  transform: translateX(-50%);
  background: repeating-linear-gradient(
    180deg,
    transparent 0%,
    transparent 40%,
    rgba(222, 36, 47, 0.14) 44%,
    rgba(222, 36, 47, 0.48) 47%,
    rgba(222, 36, 47, 0.78) 50%,
    rgba(222, 36, 47, 0.48) 53%,
    rgba(222, 36, 47, 0.14) 56%,
    transparent 60%,
    transparent 100%
  );
  background-size: 100% var(--bg-line-tile, 100dvh);
  background-repeat: repeat-y;
  background-position: 0 0;
  pointer-events: none;
  will-change: background-position;
}

.site-bg__line--left::after {
  animation: site-bg-line-flow-up var(--bg-line-flow-speed, 4s) linear infinite;
}

.site-bg__line--right::after {
  animation: site-bg-line-flow-down var(--bg-line-flow-speed, 4s) linear infinite;
}

.site-bg__line--left {
  left: var(--bg-line-left-position);
}

.site-bg__line--right {
  left: var(--bg-line-right-position);
}

/* Legacy span pulses — replaced by ::after flow band */
.site-bg__line-flow,
.site-bg__line-flow--trail {
  display: none;
}

@keyframes site-bg-line-flow-up {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 0 var(--bg-line-tile, 100dvh);
  }
}

@keyframes site-bg-line-flow-down {
  from {
    background-position: 0 var(--bg-line-tile, 100dvh);
  }

  to {
    background-position: 0 0;
  }
}

/* Legacy FX layers — disabled in favor of global ambient system */
.site-bg__fx,
.site-bg__fx--aurora,
.site-bg__fx--abstract,
.site-bg__aurora-blob,
.site-bg__abstract-glow,
.site-bg__overlay,
.site-premium-bg__overlay,
.site-aurora__overlay,
.site-flow__overlay,
.site-bg__canvas-host {
  display: none !important;
}

/* Section parallax — transform only (scroll vars from InteractiveBackground.tsx) */
.parallax-soft,
.parallax-card,
.parallax-media,
.parallax-depth-1,
.parallax-depth-2 {
  will-change: transform;
  backface-visibility: hidden;
}

@supports (animation-timeline: view()) {
  .parallax-soft {
    animation: pr1me-parallax-soft linear both;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
  }

  .parallax-depth-1 {
    animation: pr1me-parallax-depth-1 linear both;
    animation-timeline: view();
    animation-range: entry 5% exit 95%;
  }

  .parallax-depth-2 {
    animation: pr1me-parallax-depth-2 linear both;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
  }

  .parallax-card {
    animation: pr1me-parallax-card linear both;
    animation-timeline: view();
    animation-range: entry 10% cover 50%;
  }

  .parallax-media {
    animation: pr1me-parallax-media linear both;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
  }
}

@keyframes pr1me-parallax-soft {
  from {
    transform: translate3d(0, 10px, 0);
  }

  to {
    transform: translate3d(0, -10px, 0);
  }
}

@keyframes pr1me-parallax-depth-1 {
  from {
    transform: translate3d(0, 14px, 0);
  }

  to {
    transform: translate3d(0, -14px, 0);
  }
}

@keyframes pr1me-parallax-depth-2 {
  from {
    transform: translate3d(0, 20px, 0);
  }

  to {
    transform: translate3d(0, -20px, 0);
  }
}

@keyframes pr1me-parallax-card {
  from {
    transform: translate3d(0, 8px, 0);
  }

  to {
    transform: translate3d(0, -8px, 0);
  }
}

@keyframes pr1me-parallax-media {
  from {
    transform: translate3d(0, 12px, 0) scale(1.01);
  }

  to {
    transform: translate3d(0, -12px, 0) scale(1.01);
  }
}

@supports not (animation-timeline: view()) {
  .parallax-soft {
    transform: translate3d(0, calc(var(--bg-scroll, 0px) * -0.012), 0);
  }

  .parallax-depth-1 {
    transform: translate3d(0, calc(var(--bg-scroll, 0px) * -0.018), 0);
  }

  .parallax-depth-2 {
    transform: translate3d(0, calc(var(--bg-scroll, 0px) * -0.024), 0);
  }

  .parallax-card {
    transform: translate3d(0, calc(var(--bg-scroll, 0px) * -0.01), 0);
  }

  .parallax-media {
    transform: translate3d(0, calc(var(--bg-scroll, 0px) * -0.014), 0);
  }
}

.parallax-soft button,
.parallax-soft input,
.parallax-soft textarea,
.parallax-soft select,
.parallax-soft a.btn,
.parallax-card button,
.parallax-card input,
.parallax-card a.btn,
.booking-section,
.booking-section * {
  animation: none !important;
  transform: none !important;
}

@media (max-width: 760px) {
  :root {
    --bg-aura-opacity: calc(var(--bg-aurora-opacity, 0.42) * 0.72);
    --bg-aura-size: min(52vw, 420px);
    --bg-aura-blur: min(var(--bg-aurora-blur, 72px), 48px);
    --bg-aura-speed: calc(var(--bg-aurora-speed, 34s) * 1.15);
    --bg-line-left-position: max(6px, 0.85vw);
    --bg-line-right-position: calc(100% - max(6px, 0.85vw));
    --bg-line-flow-speed: var(--bg-line-speed, 11s);
  }

  .site-bg__aura-wrap,
  .site-bg__lines {
    transform: translate3d(0, calc(var(--bg-scroll-y, 0px) * -0.014), 0);
  }

  .site-bg__line {
    opacity: calc(var(--bg-line-opacity, 0.62) * 1.05);
  }

  .parallax-card,
  .parallax-media,
  .parallax-soft,
  .parallax-depth-1,
  .parallax-depth-2 {
    animation: none !important;
    transform: none !important;
  }
}

@media (max-width: 760px) {
  body.site-bg-mobile-motion-off .site-bg__aura,
  body.site-bg-mobile-motion-off .site-bg__line::after {
    animation: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-bg__aura-wrap,
  .site-bg__lines {
    transform: none !important;
  }

  .site-bg__aura,
  .site-bg__line::after {
    animation: none !important;
  }

  .parallax-soft,
  .parallax-card,
  .parallax-media,
  .parallax-depth-1,
  .parallax-depth-2 {
    animation: none !important;
    transform: none !important;
  }
}

body.site-bg-motion-reduced .site-bg__aura-wrap,
body.site-bg-motion-reduced .site-bg__lines {
  transform: none !important;
}

body.site-bg-motion-reduced .site-bg__aura,
body.site-bg-motion-reduced .site-bg__line::after {
  animation: none !important;
}

body.site-bg-motion-reduced .parallax-soft,
body.site-bg-motion-reduced .parallax-card,
body.site-bg-motion-reduced .parallax-media,
body.site-bg-motion-reduced .parallax-depth-1,
body.site-bg-motion-reduced .parallax-depth-2 {
  animation: none !important;
  transform: none !important;
}