/* RADONEGA /about vector ambient background
   Lightweight: SVG assets + transform/opacity animations only. */
body.radonega-about-vector-bg {
  position: relative;
  isolation: isolate;
  overflow-x: hidden;
}

.about-vector-stage {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}

.about-vector-cluster {
  --cluster-width: clamp(170px, 15vw, 292px);
  position: absolute;
  width: var(--cluster-width);
  height: min(760px, 76vw);
  min-height: 520px;
  opacity: .92;
  contain: layout paint style;
}

.about-vector-cluster.is-left { left: clamp(-92px, -4vw, -35px); }
.about-vector-cluster.is-right { right: clamp(-92px, -4vw, -35px); transform: scaleX(-1); }

.about-vector-cluster.c1 { top: 1.2%; }
.about-vector-cluster.c2 { top: 20.5%; }
.about-vector-cluster.c3 { top: 40.0%; }
.about-vector-cluster.c4 { top: 60.2%; }
.about-vector-cluster.c5 { top: 79.2%; }

.about-vector-water,
.about-vector-gold {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: 50% 50%;
  backface-visibility: hidden;
}

.about-vector-water {
  opacity: .75;
  animation: aboutWaterSway 13s ease-in-out infinite alternate;
}

.about-vector-gold {
  inset: 2% 3% 0 3%;
  width: 94%;
  height: 96%;
  opacity: .82;
  animation: aboutGoldRise 16s linear infinite;
}

.about-vector-cluster.c2 .about-vector-water,
.about-vector-cluster.c4 .about-vector-water { animation-duration: 16s; animation-delay: -7s; }
.about-vector-cluster.c3 .about-vector-water,
.about-vector-cluster.c5 .about-vector-water { animation-duration: 18s; animation-delay: -11s; }
.about-vector-cluster.c2 .about-vector-gold { animation-duration: 19s; animation-delay: -8s; }
.about-vector-cluster.c3 .about-vector-gold { animation-duration: 17s; animation-delay: -13s; }
.about-vector-cluster.c4 .about-vector-gold { animation-duration: 21s; animation-delay: -5s; }
.about-vector-cluster.c5 .about-vector-gold { animation-duration: 18s; animation-delay: -10s; }

.about-vector-bubble {
  --size: 20px;
  --x: 50%;
  --delay: 0s;
  --duration: 9s;
  --drift-a: 20px;
  --drift-b: -12px;
  position: absolute;
  left: var(--x);
  bottom: 5%;
  width: var(--size);
  height: var(--size);
  opacity: 0;
  transform: translate3d(0, 60px, 0) scale(.72);
  backface-visibility: hidden;
  animation: aboutBubbleSpiral var(--duration) cubic-bezier(.38,.03,.24,.99) var(--delay) infinite;
}

.about-vector-bubble.b1 { --size: 13px; --x: 18%; --delay: -1.5s; --duration: 8.5s; --drift-a: 24px; --drift-b: -11px; }
.about-vector-bubble.b2 { --size: 18px; --x: 33%; --delay: -6.2s; --duration: 11s; --drift-a: -20px; --drift-b: 14px; }
.about-vector-bubble.b3 { --size: 9px;  --x: 51%; --delay: -3.8s; --duration: 7.4s; --drift-a: 16px; --drift-b: -19px; }
.about-vector-bubble.b4 { --size: 24px; --x: 60%; --delay: -8.7s; --duration: 12.8s; --drift-a: -26px; --drift-b: 10px; }
.about-vector-bubble.b5 { --size: 12px; --x: 72%; --delay: -5.1s; --duration: 9.6s; --drift-a: 18px; --drift-b: -8px; }
.about-vector-bubble.b6 { --size: 7px;  --x: 42%; --delay: -10.4s; --duration: 13.6s; --drift-a: -12px; --drift-b: 24px; }

.about-vector-cluster.c2 .about-vector-bubble { animation-delay: calc(var(--delay) - 1.7s); }
.about-vector-cluster.c3 .about-vector-bubble { animation-delay: calc(var(--delay) - 3.4s); }
.about-vector-cluster.c4 .about-vector-bubble { animation-delay: calc(var(--delay) - 5.1s); }
.about-vector-cluster.c5 .about-vector-bubble { animation-delay: calc(var(--delay) - 6.8s); }

@keyframes aboutWaterSway {
  0%   { transform: translate3d(-4px, 20px, 0) rotate(-1.4deg) scale(.985); opacity: .66; }
  36%  { transform: translate3d(10px, 0, 0) rotate(1.6deg) scale(1.015); opacity: .79; }
  68%  { transform: translate3d(-7px, -18px, 0) rotate(-.7deg) scale(1.00); opacity: .72; }
  100% { transform: translate3d(8px, -34px, 0) rotate(1.1deg) scale(1.02); opacity: .78; }
}

/* Gold veil rises and traces a soft helical path. Fade at loop boundaries hides the reset. */
@keyframes aboutGoldRise {
  0%   { transform: translate3d(-4px, 72px, 0) rotate(-3deg) scale(.97); opacity: 0; }
  12%  { opacity: .70; }
  27%  { transform: translate3d(16px, 28px, 0) rotate(2.2deg) scale(1.00); }
  52%  { transform: translate3d(-13px, -22px, 0) rotate(-1.8deg) scale(1.025); opacity: .86; }
  76%  { transform: translate3d(18px, -70px, 0) rotate(2.7deg) scale(1.00); opacity: .72; }
  90%  { opacity: .55; }
  100% { transform: translate3d(-6px, -118px, 0) rotate(-2.4deg) scale(.98); opacity: 0; }
}

/* Each bubble has its own timing and side-to-side drift; combined motion reads as a spiral. */
@keyframes aboutBubbleSpiral {
  0%   { transform: translate3d(0, 74px, 0) scale(.62) rotate(0deg); opacity: 0; }
  12%  { opacity: .18; }
  26%  { transform: translate3d(var(--drift-a), -28px, 0) scale(.82) rotate(8deg); opacity: .62; }
  50%  { transform: translate3d(var(--drift-b), -150px, 0) scale(.96) rotate(-7deg); opacity: .76; }
  72%  { transform: translate3d(var(--drift-a), -268px, 0) scale(1.03) rotate(7deg); opacity: .62; }
  90%  { opacity: .22; }
  100% { transform: translate3d(var(--drift-b), -390px, 0) scale(.88) rotate(-4deg); opacity: 0; }
}

@media (max-width: 991px) {
  .about-vector-cluster {
    --cluster-width: clamp(120px, 32vw, 178px);
    height: min(520px, 120vw);
    min-height: 380px;
    opacity: .72;
  }
  .about-vector-cluster.is-left { left: -62px; }
  .about-vector-cluster.is-right { right: -62px; }
  /* Keep mobile light: three visible clusters per side and fewer bubbles. */
  .about-vector-cluster.c2,
  .about-vector-cluster.c4 { display: none; }
  .about-vector-bubble.b4,
  .about-vector-bubble.b6 { display: none; }
  .about-vector-water { opacity: .62; }
  .about-vector-gold { opacity: .68; }
}

@media (max-width: 560px) {
  .about-vector-cluster { --cluster-width: 132px; opacity: .58; }
  .about-vector-cluster.is-left { left: -58px; }
  .about-vector-cluster.is-right { right: -58px; }
  .about-vector-bubble.b2,
  .about-vector-bubble.b5 { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .about-vector-water,
  .about-vector-gold,
  .about-vector-bubble { animation: none !important; }
  .about-vector-gold { opacity: .48; }
  .about-vector-bubble { opacity: .28; transform: none; }
}

/* Shared layout presets for shorter information pages. */
body.radonega-vector-bg--medium .about-vector-cluster.c4,
body.radonega-vector-bg--medium .about-vector-cluster.c5 {
  display: none;
}
body.radonega-vector-bg--medium .about-vector-cluster.c1 { top: 2.5%; }
body.radonega-vector-bg--medium .about-vector-cluster.c2 { top: 37%; }
body.radonega-vector-bg--medium .about-vector-cluster.c3 { top: 71%; }

body.radonega-vector-bg--short .about-vector-cluster.c3,
body.radonega-vector-bg--short .about-vector-cluster.c4,
body.radonega-vector-bg--short .about-vector-cluster.c5 {
  display: none;
}
body.radonega-vector-bg--short .about-vector-cluster.c1 { top: 4%; }
body.radonega-vector-bg--short .about-vector-cluster.c2 { top: 57%; }

@media (max-width: 991px) {
  /* The global mobile rule hides c2; on short pages keep a second low cluster. */
  body.radonega-vector-bg--short .about-vector-cluster.c2 {
    display: block;
    top: 60%;
  }
  body.radonega-vector-bg--medium .about-vector-cluster.c1 { top: 4%; }
  body.radonega-vector-bg--medium .about-vector-cluster.c3 { top: 62%; }
}