/* ==========================================================================
   MoltenMetal Hero Background Animation - Seerat Hussain Sial Portfolio
   Contained strictly within the homepage hero section (#home)
   ========================================================================== */

.hero-molten-metal-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  contain: strict;
}

.hero-molten-metal-container canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  display: block;
  pointer-events: none;
  /* Atmospheric mask focusing caustics gracefully around the hero flow */
  mask-image: radial-gradient(ellipse 92% 86% at 50% 36%, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.75) 55%, rgba(0, 0, 0, 0.2) 88%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 92% 86% at 50% 36%, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.75) 55%, rgba(0, 0, 0, 0.2) 88%, transparent 100%);
}

/* Static branded fallback for prefers-reduced-motion or WebGL failure */
.hero-molten-metal-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background:
    radial-gradient(ellipse 65% 55% at 50% 36%, rgba(93, 221, 255, 0.12) 0%, rgba(157, 109, 255, 0.14) 42%, rgba(234, 103, 191, 0.08) 68%, transparent 88%),
    radial-gradient(circle at 18% 42%, rgba(93, 221, 255, 0.08) 0%, transparent 48%),
    radial-gradient(circle at 82% 38%, rgba(234, 103, 191, 0.08) 0%, transparent 48%);
  opacity: 0.95;
  transition: opacity 0.3s ease;
}

/* Ensure hero section isolates clipping and foreground layers */
.hero {
  position: relative;
  overflow: hidden;
}

.hero .hero-content,
.hero .service-intro,
.hero .service-link-grid,
.hero .hero-stats {
  position: relative;
  z-index: 2;
}

.hero .primary-cta,
.hero .service-link {
  position: relative;
  z-index: 3;
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .hero-molten-metal-container canvas {
    display: none !important;
  }
  .hero-molten-metal-fallback {
    display: block !important;
  }
}