/* Home hero floating mathematical visual system.
   Canonical SVG source: _includes/home-hero/library/*.html
   Visuals are intentionally compact, quiet, and secondary to the hero copy. */

/* Use the canonical WebP background while preserving the existing Home hero
   gradient, sizing, and positioning behavior established in site.css. */
body.home-page .hero::after {
  background-image:
    linear-gradient(
      180deg,
      rgba(7, 20, 28, 0.48) 0%,
      rgba(7, 20, 28, 0.56) 100%
    ),
    radial-gradient(
      circle at 18% 78%,
      rgba(78, 196, 224, 0.16) 0%,
      rgba(78, 196, 224, 0.08) 16%,
      transparent 34%
    ),
    radial-gradient(
      circle at 22% 34%,
      rgba(9, 45, 56, 0.24) 0%,
      rgba(9, 45, 56, 0.10) 22%,
      transparent 44%
    ),
    radial-gradient(
      circle at 78% 24%,
      rgba(229, 181, 59, 0.10) 0%,
      transparent 24%
    ),
    url("/assets/images/home/vri-hero-abstract-research.webp");
}

body.home-page .hero-figure-slot {
  position: absolute;
  pointer-events: none;
  transform-style: preserve-3d;
  opacity: 0.86;
  filter: drop-shadow(0 16px 32px rgba(0, 0, 0, 0.24));
  transition: opacity 320ms ease;
}

body.home-page .hero-figure-slot .hero-visual-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* Slightly enlarged from the first staging pass so the mathematical detail
   reads more clearly without competing with the hero copy. */
body.home-page .hero-figure-slot-1 {
  top: 24px;
  right: 4px;
  width: min(310px, 64%);
  animation: vriHeroFloatA 13s ease-in-out infinite;
}

body.home-page .hero-figure-slot-2 {
  left: 10px;
  bottom: 122px;
  width: min(240px, 53%);
  opacity: 0.78;
  animation: vriHeroFloatB 15s ease-in-out infinite;
}

body.home-page .hero-figure-slot-3 {
  right: 12px;
  bottom: 20px;
  width: min(255px, 56%);
  opacity: 0.82;
  animation: vriHeroFloatC 12s ease-in-out infinite;
}

body.home-page .hero-figure-slot.is-changing {
  opacity: 0;
}

/* Home mentorship pair photos are chosen after the page-specific candidate
   manifest is generated by Jekyll. Hide only while JavaScript is active so
   the fixed fallback remains visible when JavaScript is unavailable. */
html.js-preload body.home-page .mentorship-photo img[data-vri-home-pair] {
  visibility: hidden;
}

html.js-preload body.home-page .mentorship-photo img[data-vri-home-pair].is-home-pair-ready {
  visibility: visible;
}

@keyframes vriHeroFloatA {
  0%, 100% { transform: translate3d(0, 0, 38px) rotate(-2.2deg); }
  50% { transform: translate3d(-3px, -8px, 38px) rotate(-1deg); }
}

@keyframes vriHeroFloatB {
  0%, 100% { transform: translate3d(0, 0, 26px) rotate(1.5deg); }
  50% { transform: translate3d(4px, -5px, 26px) rotate(0.4deg); }
}

@keyframes vriHeroFloatC {
  0%, 100% { transform: translate3d(0, 0, 32px) rotate(2deg); }
  50% { transform: translate3d(-3px, -7px, 32px) rotate(0.9deg); }
}

@media (max-width: 920px) {
  body.home-page .hero-figure-slot-1 {
    top: 40px;
    right: 8px;
    width: min(270px, 61%);
  }

  body.home-page .hero-figure-slot-2 {
    left: 6px;
    bottom: 112px;
    width: min(208px, 49%);
  }

  body.home-page .hero-figure-slot-3 {
    right: 6px;
    bottom: 24px;
    width: min(222px, 51%);
  }
}

@media (max-width: 640px) {
  body.home-page .hero-scene,
  body.home-page .hero .scene-wrap {
    min-height: 360px;
    height: 360px;
  }

  body.home-page .hero-figure-slot-1 {
    top: 14px;
    right: 0;
    width: min(232px, 64%);
  }

  body.home-page .hero-figure-slot-2 {
    left: 0;
    bottom: 90px;
    width: min(184px, 50%);
  }

  body.home-page .hero-figure-slot-3 {
    right: 0;
    bottom: 6px;
    width: min(198px, 52%);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.home-page .hero-figure-slot-1,
  body.home-page .hero-figure-slot-2,
  body.home-page .hero-figure-slot-3 {
    animation: none;
  }
}