/* ============================================================
   hero-atmosphere.css — cinematic hero ambiance
   Animated gradient mesh, floating gold particles, page-load
   reveal choreography, scroll indicator. Netflix/Stripe/Vercel
   hero pattern adapted for SoftHire's gold/navy palette.
   ============================================================ */

/* ============================================================
   1. ANIMATED GRADIENT MESH BACKGROUND
   Three large radial gradients drifting around the hero.
   Creates the impression of atmospheric color and depth — the
   thing that makes Stripe / Vercel hero sections feel "alive"
   without any explicit motion content.
   ============================================================ */
#hero {
  position: relative;
  isolation: isolate;
}

#hero .hero-mesh {
  position: absolute;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  filter: blur(80px);
  opacity: .85;
}

#hero .hero-mesh::before,
#hero .hero-mesh::after,
#hero .hero-mesh > .mesh-glow {
  content: "";
  position: absolute;
  border-radius: 50%;
  will-change: transform;
}

/* Top-left amber glow — large, slow drift */
#hero .hero-mesh::before {
  top: -10%; left: -15%;
  width: 60%; height: 70%;
  background: radial-gradient(circle at center, rgba(240, 180, 41, .55), rgba(240, 180, 41, 0) 65%);
  animation: mesh-drift-1 22s ease-in-out infinite alternate;
}

/* Bottom-right cool blue — counter-drift */
#hero .hero-mesh::after {
  bottom: -10%; right: -10%;
  width: 55%; height: 65%;
  background: radial-gradient(circle at center, rgba(100, 185, 255, .35), rgba(100, 185, 255, 0) 65%);
  animation: mesh-drift-2 26s ease-in-out infinite alternate;
}

/* Center extra warmth — slow opacity breathe */
#hero .hero-mesh > .mesh-glow {
  top: 20%; left: 30%;
  width: 50%; height: 50%;
  background: radial-gradient(circle at center, rgba(200, 150, 12, .25), rgba(200, 150, 12, 0) 70%);
  animation: mesh-drift-3 18s ease-in-out infinite alternate;
}

@keyframes mesh-drift-1 {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(80px, 50px, 0) scale(1.15); }
}
@keyframes mesh-drift-2 {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-60px, -40px, 0) scale(1.1); }
}
@keyframes mesh-drift-3 {
  0%   { transform: translate3d(0, 0, 0) scale(1); opacity: .6; }
  100% { transform: translate3d(-30px, 30px, 0) scale(1.2); opacity: 1; }
}

/* ============================================================
   2. FLOATING GOLD PARTICLES rising through the hero
   8 dots positioned at staggered horizontal positions, each
   rising from below the viewport up through the hero with
   varying timings and slight horizontal drift.
   ============================================================ */
#hero .hero-particles {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

#hero .particle {
  position: absolute;
  bottom: -10px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 230, 160, .9) 0%, rgba(240, 180, 41, .6) 40%, rgba(240, 180, 41, 0) 80%);
  box-shadow: 0 0 8px rgba(240, 180, 41, .6);
  opacity: 0;
  will-change: transform, opacity;
}

#hero .particle:nth-child(1) { left:  8%; animation: particle-rise 14s ease-in infinite 0s; }
#hero .particle:nth-child(2) { left: 19%; animation: particle-rise 17s ease-in infinite 2.5s; width: 3px; height: 3px; }
#hero .particle:nth-child(3) { left: 32%; animation: particle-rise 12s ease-in infinite 4.8s; width: 6px; height: 6px; }
#hero .particle:nth-child(4) { left: 46%; animation: particle-rise 19s ease-in infinite 1.2s; }
#hero .particle:nth-child(5) { left: 58%; animation: particle-rise 13s ease-in infinite 6.5s; width: 4px; height: 4px; }
#hero .particle:nth-child(6) { left: 71%; animation: particle-rise 16s ease-in infinite 3.5s; }
#hero .particle:nth-child(7) { left: 84%; animation: particle-rise 15s ease-in infinite 8s; width: 3px; height: 3px; }
#hero .particle:nth-child(8) { left: 93%; animation: particle-rise 18s ease-in infinite 5.2s; width: 4px; height: 4px; }

@keyframes particle-rise {
  0%   { transform: translate3d(0, 0, 0); opacity: 0; }
  10%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translate3d(40px, calc(-100vh - 100px), 0); opacity: 0; }
}

/* ============================================================
   3. HERO PAGE-LOAD REVEAL CHOREOGRAPHY
   Hero elements rise into place in sequence on first paint.
   Eyebrow → H1 → subhead → CTAs → trust → flags → globe.
   This is the "Netflix opening sequence" feel.
   ============================================================ */

/* Override any data-motion initial states on the hero so our
   load-time choreography wins. The whole hero animates on page
   load (not on scroll), giving an opening-titles effect. */
#hero .hero-left > *,
#hero .hero-right {
  opacity: 0;
  transform: translateY(28px);
  animation: hero-element-rise 0.95s cubic-bezier(.2, .8, .2, 1) both;
  filter: none !important;
}

#hero .hero-left .eyebrow         { animation-delay: 0.10s; }
#hero .hero-left .hero-h1         { animation-delay: 0.22s; }
#hero .hero-left .hero-sub        { animation-delay: 0.40s; }
#hero .hero-left .hero-actions    { animation-delay: 0.56s; }
#hero .hero-left .trust-label,
#hero .hero-left > div:has(.trust-label) { animation-delay: 0.72s; }
#hero .hero-right                 { animation: hero-globe-rise 1.3s cubic-bezier(.16, 1, .3, 1) 0.55s both; }

/* Override the cinematic.css [data-motion="split-words"] hidden state
   for the hero h1 specifically — our load-sequence handles it now */
#hero [data-motion="split-words"] {
  opacity: 0;
  transform: translateY(28px);
  filter: none !important;
}
#hero [data-motion="split-words"].is-in,
#hero .hero-left .hero-h1 {
  /* Animation fires regardless of .is-in; the keyframe sets final state */
}

@keyframes hero-element-rise {
  0%   { opacity: 0; transform: translateY(28px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes hero-globe-rise {
  0%   { opacity: 0; transform: scale(0.86); }
  100% { opacity: 1; transform: scale(1); }
}

/* ============================================================
   4. SCROLL INDICATOR — chevron at bottom of hero
   Subtle bouncing arrow + "Scroll" text. Disappears once user
   has scrolled past. Standard high-end hero pattern.
   ============================================================ */
#hero .hero-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-family: 'Outfit', sans-serif;
  font-size: 9.5px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  opacity: 0;
  pointer-events: none;
  animation: hero-scroll-cue-in 1s ease-out 1.6s both;
}

#hero .hero-scroll-cue .chevron {
  width: 18px;
  height: 18px;
  border-right: 1.5px solid rgba(240, 180, 41, 0.7);
  border-bottom: 1.5px solid rgba(240, 180, 41, 0.7);
  transform: rotate(45deg);
  margin-top: -2px;
  animation: hero-chevron-bounce 2.2s ease-in-out infinite;
}

@keyframes hero-scroll-cue-in {
  0%   { opacity: 0; transform: translate(-50%, 12px); }
  100% { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes hero-chevron-bounce {
  0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: 0.6; }
  50%      { transform: rotate(45deg) translate(3px, 3px); opacity: 1; }
}

/* Hide scroll cue once user has begun scrolling */
body.has-scrolled #hero .hero-scroll-cue {
  opacity: 0;
  transition: opacity 0.4s ease-out;
}

/* ============================================================
   5. SCROLL-LINKED HERO FADE
   As user scrolls past hero, the entire hero content fades
   slightly and translates up — gives a sense the hero "lifts
   away" rather than just being scrolled past. Stripe pattern.
   ============================================================ */
#hero .hero-left,
#hero .hero-right {
  transition: opacity 0.4s linear;
}

/* Scroll progress bar set as a CSS var on body by JS — when present,
   we use it to animate a few hero properties subtly. */
body.scrolled-into-page #hero {
  /* Lift a touch as user moves on */
}

/* ============================================================
   6. SECTION TRANSITION SWEEPS
   When each major section enters viewport, a thin gold light
   sweep crosses the top edge — premium scene-change feel.
   ============================================================ */
section[data-stage] .mt-section-divider.is-in {
  /* Already animates scaleX 0 -> 1; add a glow flash */
  position: relative;
}
section[data-stage] .mt-section-divider.is-in::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 3px;
  background: radial-gradient(ellipse 50% 100% at 50% 50%, rgba(240,180,41,.45), transparent 70%);
  filter: blur(2px);
  animation: section-sweep-glow 1.4s ease-out 0.2s both;
  pointer-events: none;
}
@keyframes section-sweep-glow {
  0%   { opacity: 0; transform: translateX(-30%); }
  50%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(30%); }
}

/* ============================================================
   MOBILE OPTIMIZATIONS
   - Reduce particle count (8 -> 4) to save GPU on mid-tier Android
   - Reduce mesh blur (80px -> 40px) and drop one of three gradients
   - Hide scroll cue (overlaps stacked trust pills + can't see in 1-screen
     hero anyway since user has already scrolled to see the globe)
   - Speed up the reveal sequence (.95s -> .65s, delays compressed)
   - On very small phones (≤480px) drop all atmospheric layers entirely
     since they fight with limited screen real estate
   ============================================================ */
@media (max-width: 768px) {
  #hero .hero-mesh {
    filter: blur(40px);
    opacity: 0.55;
  }
  #hero .hero-mesh::before {
    width: 70%; height: 55%;
    top: -15%; left: -25%;
    background: radial-gradient(circle at center, rgba(240, 180, 41, .45), rgba(240, 180, 41, 0) 65%);
  }
  #hero .hero-mesh::after {
    width: 60%; height: 50%;
    bottom: -15%; right: -15%;
    background: radial-gradient(circle at center, rgba(100, 185, 255, .25), rgba(100, 185, 255, 0) 65%);
  }
  #hero .hero-mesh > .mesh-glow { display: none; }

  /* Drop 4 of 8 particles. Keep odd-numbered ones for even spacing */
  #hero .particle:nth-child(2),
  #hero .particle:nth-child(4),
  #hero .particle:nth-child(6),
  #hero .particle:nth-child(8) { display: none; }
  #hero .particle {
    width: 4px; height: 4px;
    box-shadow: 0 0 6px rgba(240, 180, 41, .5);
  }

  /* Compress reveal sequence — content visible faster on mobile */
  #hero .hero-left > *,
  #hero .hero-right {
    animation-duration: 0.65s !important;
  }
  #hero .hero-left .eyebrow      { animation-delay: 0.05s !important; }
  #hero .hero-left .hero-h1      { animation-delay: 0.15s !important; }
  #hero .hero-left .hero-sub     { animation-delay: 0.30s !important; }
  #hero .hero-left .hero-actions { animation-delay: 0.42s !important; }
  #hero .hero-left > div:has(.trust-label) { animation-delay: 0.52s !important; }
  #hero .hero-right              { animation-delay: 0.20s !important; animation-duration: 0.8s !important; }

  /* Hide the scroll cue — collides with stacked trust pills + the
     vertical viewport already shows the globe below, so the prompt
     to scroll is unnecessary. */
  #hero .hero-scroll-cue { display: none !important; }

  /* Make sure the existing #hero::after corner orb (from mobile-motion.css)
     and the new hero-mesh don't cumulatively wash out the section */
  #hero::after { opacity: .35 !important; }
}

@media (max-width: 480px) {
  /* On phones <480px, drop atmospheric layers entirely — content first */
  #hero .hero-mesh { display: none; }
  #hero .particle { display: none; }
}

/* Battery-aware: low-power class disables atmospheric loops */
body.low-power #hero .hero-mesh::before,
body.low-power #hero .hero-mesh::after,
body.low-power #hero .hero-mesh > .mesh-glow,
body.low-power #hero .particle,
body.low-power #hero .hero-scroll-cue .chevron {
  animation: none !important;
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  #hero .hero-mesh::before,
  #hero .hero-mesh::after,
  #hero .hero-mesh > .mesh-glow,
  #hero .particle,
  #hero .hero-scroll-cue .chevron {
    animation: none !important;
  }
  #hero .hero-left > *,
  #hero .hero-right {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}