/* ============================================================
   V MEDIA PRODUCTION — Hero Animations + Parallax Effects
   Animated backgrounds · Floating orbs · Scroll parallax
   ============================================================ */

/* ── 1. HERO-BG: Animated Gradient Base ──────────────────────*/
.hero-bg {
  background: linear-gradient(135deg,
    #0A0A0A 0%,
    #130303 30%,
    #1e0505 60%,
    #2a0808 100%) !important;
  background-size: 300% 300% !important;
  animation: vmpGradientDrift 14s ease-in-out infinite alternate !important;
}

@keyframes vmpGradientDrift {
  0%   { background-position: 0% 0%; }
  25%  { background-position: 100% 0%; }
  50%  { background-position: 100% 100%; }
  75%  { background-position: 0% 100%; }
  100% { background-position: 50% 50%; }
}

/* ── 2. PAGE-HERO + HIW-HERO: Animated Gradient Base ─────────*/
.page-hero,
.hiw-hero {
  background: linear-gradient(135deg,
    #0A0A0A 0%,
    #130303 30%,
    #1e0505 60%,
    #2a0808 100%) !important;
  background-size: 300% 300% !important;
  animation: vmpGradientDrift 14s ease-in-out infinite alternate !important;
}

/* ── 3. HERO-BG Shimmer Layer (::before) ─────────────────────*/
.hero-bg::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(ellipse 70% 55% at 15% 35%,
      rgba(227,28,35,0.22) 0%, transparent 65%),
    radial-gradient(ellipse 55% 70% at 85% 75%,
      rgba(180,5,10,0.15) 0%, transparent 65%),
    radial-gradient(ellipse 40% 40% at 60% 15%,
      rgba(200,20,25,0.1) 0%, transparent 60%);
  animation: vmpShimmerPulse 10s ease-in-out infinite alternate !important;
  z-index: 1 !important;
}

@keyframes vmpShimmerPulse {
  0%   { opacity: 0.55; transform: scale(1)    translateX(0%)   translateY(0%); }
  25%  { opacity: 0.9;  transform: scale(1.12) translateX(2%)   translateY(-2%); }
  50%  { opacity: 0.7;  transform: scale(0.95) translateX(-2%)  translateY(3%); }
  75%  { opacity: 1;    transform: scale(1.08) translateX(3%)   translateY(-1%); }
  100% { opacity: 0.65; transform: scale(1.05) translateX(-1%)  translateY(2%); }
}

/* ── 4. PAGE-HERO + HIW-HERO Shimmer Layer (::after is free) ─*/
.page-hero::after,
.hiw-hero::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(ellipse 65% 60% at 80% 25%,
      rgba(227,28,35,0.2) 0%, transparent 65%),
    radial-gradient(ellipse 50% 65% at 20% 75%,
      rgba(180,5,10,0.13) 0%, transparent 65%);
  animation: vmpPageShimmer 12s ease-in-out infinite alternate !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

@keyframes vmpPageShimmer {
  0%   { opacity: 0.5;  transform: scale(1)    translateX(0%)  translateY(0%); }
  33%  { opacity: 0.85; transform: scale(1.1)  translateX(-3%) translateY(2%); }
  66%  { opacity: 0.6;  transform: scale(1.05) translateX(2%)  translateY(-3%); }
  100% { opacity: 0.9;  transform: scale(0.98) translateX(1%)  translateY(1%); }
}

/* Ensure page-hero / hiw-hero children sit above the shimmer layers */
.page-hero-content,
.hiw-hero .container,
.hero-content,
.hero-visual { position: relative; z-index: 3 !important; }

/* ── 5. FLOATING ORB STYLES ──────────────────────────────────*/
.vmp-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
  filter: blur(1px);
  will-change: transform, opacity;
}

/* Orb 1 — large red glow, top-left area */
.vmp-orb-1 {
  width: 420px; height: 420px;
  background: radial-gradient(circle,
    rgba(227,28,35,0.18) 0%,
    rgba(200,15,20,0.08) 40%,
    transparent 70%);
  top: -80px; left: -80px;
  animation: vmpOrb1 16s ease-in-out infinite alternate;
}
@keyframes vmpOrb1 {
  0%   { transform: translate(0px,   0px)   scale(1);    opacity: 0.7; }
  25%  { transform: translate(80px,  60px)  scale(1.2);  opacity: 1;   }
  50%  { transform: translate(40px, 120px)  scale(0.9);  opacity: 0.8; }
  75%  { transform: translate(120px, 30px)  scale(1.15); opacity: 0.9; }
  100% { transform: translate(60px,  80px)  scale(1.05); opacity: 0.75;}
}

/* Orb 2 — medium glow, bottom-right */
.vmp-orb-2 {
  width: 320px; height: 320px;
  background: radial-gradient(circle,
    rgba(180,10,15,0.2) 0%,
    rgba(227,28,35,0.09) 45%,
    transparent 70%);
  bottom: -40px; right: 5%;
  animation: vmpOrb2 13s ease-in-out infinite alternate;
}
@keyframes vmpOrb2 {
  0%   { transform: translate(0px,   0px)   scale(1);    opacity: 0.6; }
  33%  { transform: translate(-70px,-50px)  scale(1.18); opacity: 0.9; }
  66%  { transform: translate(-30px, 40px)  scale(0.85); opacity: 0.75;}
  100% { transform: translate(-100px,-20px) scale(1.2);  opacity: 1;   }
}

/* Orb 3 — small accent, centre-right */
.vmp-orb-3 {
  width: 200px; height: 200px;
  background: radial-gradient(circle,
    rgba(255,50,60,0.14) 0%,
    rgba(227,28,35,0.06) 50%,
    transparent 70%);
  top: 30%; right: 15%;
  animation: vmpOrb3 9s ease-in-out infinite alternate;
}
@keyframes vmpOrb3 {
  0%   { transform: translate(0px,  0px)  scale(1);   opacity: 0.5; }
  50%  { transform: translate(-40px,50px) scale(1.3); opacity: 0.9; }
  100% { transform: translate(30px,-40px) scale(0.8); opacity: 0.6; }
}

/* Orb 4 — tiny sparkle, top-right */
.vmp-orb-4 {
  width: 140px; height: 140px;
  background: radial-gradient(circle,
    rgba(255,80,90,0.18) 0%,
    transparent 70%);
  top: 10%; right: 8%;
  animation: vmpOrb4 7s ease-in-out infinite alternate;
}
@keyframes vmpOrb4 {
  0%   { transform: translate(0,   0)   scale(1);   opacity: 0.4; }
  50%  { transform: translate(20px,-30px) scale(1.4); opacity: 0.85;}
  100% { transform: translate(-15px,20px) scale(0.7); opacity: 0.5; }
}

/* ── 6. FLOATING PARTICLES ───────────────────────────────────*/
.vmp-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}

.vmp-particle {
  position: absolute;
  border-radius: 50%;
  background: rgba(227,28,35,0.55);
  animation: vmpParticleFly linear infinite;
  will-change: transform, opacity;
}

@keyframes vmpParticleFly {
  0%   { transform: translateY(0) translateX(0) scale(1);   opacity: 0; }
  10%  { opacity: 0.8; }
  90%  { opacity: 0.5; }
  100% { transform: translateY(-100vh) translateX(var(--drift)) scale(0.4); opacity: 0; }
}

/* ── 7. DIAGONAL LIGHT BEAM ─────────────────────────────────*/
.vmp-beam {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}
.vmp-beam::before,
.vmp-beam::after {
  content: '';
  position: absolute;
  width: 2px;
  height: 160%;
  background: linear-gradient(to bottom,
    transparent 0%,
    rgba(227,28,35,0.12) 30%,
    rgba(227,28,35,0.22) 50%,
    rgba(227,28,35,0.12) 70%,
    transparent 100%);
  transform-origin: top center;
  filter: blur(6px);
}
.vmp-beam::before {
  left: 25%;
  top: -30%;
  transform: rotate(30deg);
  animation: vmpBeam1 18s ease-in-out infinite alternate;
}
.vmp-beam::after {
  right: 30%;
  top: -30%;
  transform: rotate(-25deg);
  animation: vmpBeam2 22s ease-in-out infinite alternate;
  opacity: 0.6;
}
@keyframes vmpBeam1 {
  0%   { opacity: 0.3; transform: rotate(25deg) translateX(0); }
  50%  { opacity: 0.9; transform: rotate(38deg) translateX(80px); }
  100% { opacity: 0.4; transform: rotate(18deg) translateX(-40px); }
}
@keyframes vmpBeam2 {
  0%   { opacity: 0.2; transform: rotate(-20deg) translateX(0); }
  50%  { opacity: 0.7; transform: rotate(-35deg) translateX(-60px); }
  100% { opacity: 0.3; transform: rotate(-15deg) translateX(50px); }
}

/* ── 8. PARALLAX CLASSES (applied by JS) ────────────────────*/
.vmp-parallax-hero {
  will-change: transform;
  transition: transform 0.05s linear;
}
.vmp-parallax-slow {
  will-change: transform;
  transition: transform 0.08s linear;
}
.vmp-parallax-medium {
  will-change: transform;
  transition: transform 0.05s linear;
}

/* ── 9. SCROLL REVEAL ANIMATIONS ────────────────────────────*/
.fade-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s cubic-bezier(.22,1,.36,1),
              transform 0.7s cubic-bezier(.22,1,.36,1);
}
.fade-up.revealed {
  opacity: 1;
  transform: translateY(0);
}

.vmp-reveal-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 0.8s cubic-bezier(.22,1,.36,1),
              transform 0.8s cubic-bezier(.22,1,.36,1);
}
.vmp-reveal-left.revealed {
  opacity: 1;
  transform: translateX(0);
}

.vmp-reveal-right {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 0.8s cubic-bezier(.22,1,.36,1),
              transform 0.8s cubic-bezier(.22,1,.36,1);
}
.vmp-reveal-right.revealed {
  opacity: 1;
  transform: translateX(0);
}

.vmp-reveal-scale {
  opacity: 0;
  transform: scale(0.88);
  transition: opacity 0.75s cubic-bezier(.22,1,.36,1),
              transform 0.75s cubic-bezier(.22,1,.36,1);
}
.vmp-reveal-scale.revealed {
  opacity: 1;
  transform: scale(1);
}

/* Stagger delay helpers — added by JS */
.vmp-delay-1 { transition-delay: 0.1s !important; }
.vmp-delay-2 { transition-delay: 0.2s !important; }
.vmp-delay-3 { transition-delay: 0.3s !important; }
.vmp-delay-4 { transition-delay: 0.4s !important; }
.vmp-delay-5 { transition-delay: 0.5s !important; }
.vmp-delay-6 { transition-delay: 0.6s !important; }

/* ── 10. PARALLAX SECTION BACKGROUNDS ───────────────────────*/
.stats-section,
.process-strip,
.section.bg-gray,
.cta-section {
  position: relative;
  overflow: hidden;
}

/* Subtle tinted overlay that shifts on scroll */
.vmp-section-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
  background: radial-gradient(ellipse 80% 60% at 50% 50%,
    rgba(227,28,35,0.04) 0%, transparent 70%);
}

/* Ensure section content sits above overlay */
.stats-section .container,
.process-strip .container,
.section.bg-gray .container,
.cta-section .container { position: relative; z-index: 1; }

/* ── 11. HERO GRID SCAN LINE (animated) ─────────────────────*/
.hero-bg::after {
  animation: vmpGridFade 8s ease-in-out infinite alternate !important;
}
@keyframes vmpGridFade {
  0%,100% { opacity: 0.6; }
  50%     { opacity: 1; }
}

/* ── 12. MOUSE-PARALLAX for hero visual ─────────────────────*/
.hero-image-wrapper {
  transition: transform 0.15s cubic-bezier(.22,1,.36,1) !important;
  will-change: transform;
}

/* ── Reduce motion for accessibility ─────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .vmp-orb-1, .vmp-orb-2, .vmp-orb-3, .vmp-orb-4,
  .hero-bg, .page-hero, .hero-bg::before, .page-hero::after,
  .vmp-beam::before, .vmp-beam::after,
  .vmp-particle {
    animation: none !important;
  }
  .fade-up, .vmp-reveal-left, .vmp-reveal-right, .vmp-reveal-scale {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}