/* Shared ambient effects used by inner-page mini heroes. */
@keyframes lavalamp{
  0%{transform:translateY(0) scale(1);border-radius:60% 40% 70% 30%/50% 60% 40% 50%;opacity:0}
  10%{opacity:1}
  30%{border-radius:40% 60% 30% 70%/60% 40% 60% 40%;transform:translateY(-25vh) scale(1.15)}
  55%{border-radius:70% 30% 50% 50%/30% 70% 50% 60%;transform:translateY(-50vh) scale(.9)}
  75%{border-radius:35% 65% 65% 35%/55% 45% 55% 45%;transform:translateY(-75vh) scale(1.2)}
  90%{opacity:.6}
  100%{transform:translateY(-110vh) scale(.8);border-radius:50%;opacity:0}
}
.lava-bubble{
  position:absolute;
  bottom:-120px;
  filter:blur(6px);
  animation:lavalamp linear infinite;
  will-change:transform,border-radius,opacity;
}
.b1{left:7%;width:92px;height:92px;background:rgba(122,63,103,.55);animation-duration:12s}
.b2{left:28%;width:64px;height:64px;background:rgba(157,133,198,.48);animation-duration:15s;animation-delay:-3s}
.b3{left:52%;width:118px;height:118px;background:rgba(107,88,135,.5);animation-duration:18s;animation-delay:-7s}
.b4{left:72%;width:52px;height:52px;background:rgba(165,196,220,.36);animation-duration:11s;animation-delay:-1.5s}
.b5{left:84%;width:80px;height:80px;background:rgba(165,196,220,.28);animation-duration:14s;animation-delay:-9s}
.b6{left:40%;width:48px;height:48px;background:rgba(157,133,198,.30);animation-duration:16s;animation-delay:-5s}
.b7{left:16%;width:58px;height:58px;background:rgba(165,196,220,.34);animation-duration:13.5s;animation-delay:-4s}
.b8{left:36%;width:74px;height:74px;background:rgba(122,63,103,.34);animation-duration:17s;animation-delay:-8.5s}
.b9{left:61%;width:56px;height:56px;background:rgba(157,133,198,.30);animation-duration:12.5s;animation-delay:-2.5s}
.b10{left:90%;width:66px;height:66px;background:rgba(107,88,135,.30);animation-duration:15.5s;animation-delay:-6.5s}


/* Shared ambient drift for decorative dots and bubbles.
   Lava blobs and the moving help-card droplets already have their own motion. */
@keyframes diasproAmbientFloat{
  0%,100%{translate:0 0}
  50%{translate:var(--ambient-float-x,2px) var(--ambient-float-y,-4px)}
}

:where(
  .help-proposal-corner-bubbles span,
  .home-page .about-v2__bubble,
  .home-page .about-v2__footer-mark span,
  .text-page .text-hero-copy .eyebrow::before,
  .btn-liquid::after
){
  --ambient-float-x:2px;
  --ambient-float-y:-4px;
  --ambient-float-duration:5.4s;
  --ambient-float-delay:0s;
  animation:diasproAmbientFloat var(--ambient-float-duration) ease-in-out var(--ambient-float-delay) infinite;
  will-change:translate;
}

:where(
  .help-proposal-corner-bubbles span:nth-child(2),
  .home-page .about-v2__bubble--b,
  .home-page .about-v2__bubble--d,
  .home-page .about-v2__footer-mark span:nth-child(2)
){
  --ambient-float-x:-2px;
  --ambient-float-y:-5px;
  --ambient-float-duration:6.2s;
  --ambient-float-delay:-2.1s;
}

:where(
  .help-proposal-corner-bubbles span:nth-child(3),
  .home-page .about-v2__bubble--c,
  .home-page .about-v2__bubble--e,
  .home-page .about-v2__footer-mark span:nth-child(3)
){
  --ambient-float-x:1px;
  --ambient-float-y:-3px;
  --ambient-float-duration:4.7s;
  --ambient-float-delay:-1.35s;
}

/* Desktop lava interaction hook shared by every lava scene. */
@media(min-width:961px) and (hover:hover) and (pointer:fine){
  .lava-canvas .lava-bubble,
  .mini-lava .lava-bubble,
  .contacts-lava .contact-bubble{
    --lava-x:0px;
    --lava-y:0px;
    translate:var(--lava-x) var(--lava-y);
    will-change:transform,border-radius,opacity,translate;
  }

  .home-page .hero .lava-canvas{pointer-events:none}
  .home-page .hero .lava-bubble{filter:blur(4.5px)}

  /* The homepage hero keeps its stronger, larger lava treatment. */
  .home-page .hero .b1{width:120px;height:120px;background:rgba(122,63,103,.70)}
  .home-page .hero .b2{width:84px;height:84px;background:rgba(157,133,198,.62)}
  .home-page .hero .b3{width:156px;height:156px;background:rgba(107,88,135,.64)}
  .home-page .hero .b4{width:68px;height:68px;background:rgba(165,196,220,.48)}
  .home-page .hero .b5{width:106px;height:106px;background:rgba(165,196,220,.40)}
  .home-page .hero .b6{width:64px;height:64px;background:rgba(157,133,198,.44)}
  .home-page .hero .b7{width:72px;height:72px;background:rgba(165,196,220,.40)}
  .home-page .hero .b8{width:92px;height:92px;background:rgba(122,63,103,.40)}
  .home-page .hero .b9{width:62px;height:62px;background:rgba(157,133,198,.38)}
  .home-page .hero .b10{width:78px;height:78px;background:rgba(107,88,135,.36)}
}

@media(prefers-reduced-motion:reduce){
  .lava-bubble,.contact-bubble{animation:none!important}
  :where(
    .help-proposal-corner-bubbles span,
    .home-page .about-v2__bubble,
    .home-page .about-v2__footer-mark span,
    .text-page .text-hero-copy .eyebrow::before,
    .btn-liquid::after
  ){animation:none!important;translate:none!important}
}