/* Homepage hero visual: abstract flowing forms, a glass arc and a perspective mesh, built from SVG, CSS and a small canvas.
   Self-contained: remove the .hv block from index.html (and this file and hero-visual.js) to revert to the plain hero background.
   The .hv-art box is the square the SVG forms are drawn in. */
.hero > .hv.hv { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hv-art { position: absolute; right: -2%; top: 50%; height: 118%; aspect-ratio: 1; transform: translateY(-50%); contain: layout paint; }
.hv-art svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

/* Layers (back to front): glow, flowing forms, orbits (the mesh canvas sits above). Each drifts slowly, and drifts at a different depth on scroll. */
.hv-l { transform: translate3d(0, calc(var(--hv-p, 0) * 1px), 0); }
.hv-l-1 { --hv-p: var(--hv-p1, 0); } .hv-l-2 { --hv-p: var(--hv-p2, 0); } .hv-l-3 { --hv-p: var(--hv-p3, 0); }
.hv-d { transform-box: fill-box; transform-origin: 50% 50%; will-change: transform; animation: hv-drift 33s ease-in-out infinite alternate; }
.hv-d-b { animation-duration: 44s; animation-delay: -18s; animation-name: hv-drift-b; }
.hv-d-glass { animation-duration: 50s; animation-delay: -9s; animation-name: hv-drift-b; }
.hv-d-c { animation-duration: 39s; animation-delay: -30s; animation-name: hv-drift-c; }
@keyframes hv-drift   { from { transform: translate3d(-14px, 8px, 0) rotate(-2.2deg) scale(1); }   to { transform: translate3d(16px, -12px, 0) rotate(2.4deg) scale(1.035); } }
@keyframes hv-drift-b { from { transform: translate3d(12px, -6px, 0) rotate(2deg) scale(1.02); }   to { transform: translate3d(-16px, 14px, 0) rotate(-2.6deg) scale(.985); } }
@keyframes hv-drift-c { from { transform: translate3d(0, 10px, 0) rotate(0deg); }                  to { transform: translate3d(-8px, -10px, 0) rotate(5deg); } }
.hv-orbit { transform-box: fill-box; transform-origin: 50% 50%; animation: hv-spin 86s linear infinite; }
.hv-orbit-b { animation-duration: 121s; animation-direction: reverse; }
@keyframes hv-spin { to { transform: rotate(360deg); } }

/* The perspective mesh (a landscape of connected points) sits across the lower part of the hero, behind the text */
.hv-mesh { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 72%; display: block; transform: translate3d(0, calc(var(--hv-p3, 0) * 1px), 0); opacity: .95; }

/* Pause everything when the hero is off screen or the tab is hidden (saves battery) */
.hv.is-paused *, .hv.is-paused { animation-play-state: paused !important; }

/* Tablet and phone: the text spans the full width, so the visual sits further back and quieter */
@media (max-width: 62rem) {
  /* The shared dark overlay is eased on tablet and phone so the visual reads; text contrast stays above 5.5:1 on every hero text element (checked) */
  .hero::after { background: linear-gradient(180deg, rgba(10,8,9,.7) 0%, rgba(10,8,9,.5) 45%, rgba(10,8,9,.66) 100%); }
}
@media (max-width: 40rem) {
  .hv-art { right: -44%; top: 38%; height: 72%; }
  .hv-d-b, .hv-orbit-b { display: none; }
  /* Calmer on phones: slightly softer overall, and faded further behind the buttons, Medusa badge and stats at the foot of the hero */
  .hv-mesh { height: 58%; opacity: .85;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, rgba(0,0,0,.78) 30%, rgba(0,0,0,.46) 48%, rgba(0,0,0,.34) 100%);
            mask-image: linear-gradient(180deg, transparent 0, #000 12%, rgba(0,0,0,.78) 30%, rgba(0,0,0,.46) 48%, rgba(0,0,0,.34) 100%); }
  .hv-d-glass { opacity: .55; }
}
/* Reduced motion and no-JS: a still composition, no animation, no scroll movement */
@media (prefers-reduced-motion: reduce) {
  .hv-d, .hv-orbit { animation: none !important; }
  .hv-l { transform: none; }
}