/* hero-new.css — clean port of farhanic-hero/src/styles.css (hero section only) */
/* Uses CSS offsetPath (Chrome 46+, Safari 16+) — no JS per-frame motion. JS only mounts the SVG and gates reveal. */

:root {
  --hero-bg: #0f0f0f;
  --star-hi: #ffffff;
  --star-mid: #ededed;
  --star-lo: #b8b8b8;
  --star-edge: #6b6b6b;
  --trail-hi: #ffffff;
  --trail-mid: rgba(199,199,199,0.55);
  --trail-fade: rgba(255,255,255,0);
  --hero-text: #c7c7c7;
  --hero-muted: #949494;
  --hero-line: rgba(255,255,255,0.24);
  --hero-ease: cubic-bezier(0.16, 0.72, 0.2, 1);
}

/* Container — full hero viewport, behind copy (z-index below text 20, above bg). Old .hero-stars was z-index 12; keep same. */
.hero-stage {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  height: 100svh !important;
  overflow: hidden !important;
  pointer-events: none !important;
  z-index: 12 !important;
  background: transparent !important;
  opacity: 0;
  transition: opacity 0.42s ease;
}
.hero-stage.is-loaded,
.hero-stage.is-visible {
  opacity: 1;
}
.hero-stage svg.hero-new-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

/* Trails — hidden until is-loaded to avoid flash of full trails before animation */
.trail-line,
.trail-line--soft {
  opacity: 0;
  stroke-dasharray: 620 1000;
  stroke-dashoffset: 620;
  animation: none !important;
}
.star-fly,
.star-scale,
.star-body,
.trail-spark {
  animation: none !important;
}
.trail-spark-glint {
  opacity: 0;
  transform-box: view-box;
  transform-origin: 0 0;
  animation: none;
}
.hero-stage.is-loaded .trail-line {
  stroke-dasharray: 620 1000;
  stroke-dashoffset: 620;
  opacity: 0;
  animation:
    trail-run 2.1s var(--hero-ease) both,
    trail-fade 2.6s ease-out both !important;
}
.hero-stage.is-loaded .trail-line--soft {
  opacity: 0;
  animation:
    trail-run 2.1s var(--hero-ease) both,
    trail-fade-soft 2.6s ease-out both !important;
}
.hero-stage.is-loaded .star-fly {
  opacity: 0;
  offset-rotate: 0deg;
  offset-distance: 0%;
  animation:
    hero-fade 0.35s ease-out both,
    star-run 2.1s var(--hero-ease) both !important;
}
@keyframes star-run {
  from { offset-distance: 0%; }
  to { offset-distance: 100%; }
}
.hero-stage.is-loaded .star-body {
  transform-box: view-box;
  transform-origin: 0 0;
  animation: star-flare 0.7s ease-out both !important;
}
.hero-stage.is-loaded .star-scale {
  transform-box: view-box;
  transform-origin: 0 0;
  animation: star-grow 2.1s cubic-bezier(0.25, 0.8, 0.25, 1) both !important;
  transition: transform 0.45s cubic-bezier(.16,1,.3,1);
}
.hero-stage.is-loaded .star-scale.is-settled {
  animation: none !important;
  transform: scale(1) !important;
}
@keyframes star-grow {
  0%  { transform: scale(0.18); animation-timing-function: cubic-bezier(0.3, 0.6, 0.4, 1); }
  25% { transform: scale(0.38); animation-timing-function: cubic-bezier(0.3, 0.6, 0.4, 1); }
  50% { transform: scale(0.6);  animation-timing-function: cubic-bezier(0.3, 0.6, 0.4, 1); }
  75% { transform: scale(0.82); animation-timing-function: cubic-bezier(0.25, 0.7, 0.35, 1); }
  100%{ transform: scale(1); }
}

.hero-stage.is-loaded .trail-spark {
  offset-rotate: 0deg;
  offset-distance: 0%;
  transform-box: view-box;
  transform-origin: 0 0;
  animation: star-run 1.9s var(--hero-ease) both !important;
}
/* spark glint animation is applied inline via JS on reveal, so no CSS gated rule needed */
@keyframes spark-fade-in  { from { opacity:0; scale:0.4; } to { opacity: var(--spark-peak,1); scale:1; } }
@keyframes spark-fade-out { from { opacity: var(--spark-peak,1); scale:0.95; } to { opacity:0; scale:0.45; } }

@keyframes hero-fade { to { opacity:1; } }
@keyframes trail-run { from { stroke-dashoffset:620; } to { stroke-dashoffset:-380; } }
@keyframes trail-fade { 0%{opacity:0} 8%{opacity:0.95} 62%{opacity:0.8} 100%{opacity:0} }
@keyframes trail-fade-soft { 0%{opacity:0} 8%{opacity:0.4} 62%{opacity:0.25} 100%{opacity:0} }
@keyframes star-flare { 0%{transform:scale(1.35);opacity:0.9} 45%{transform:scale(1.12);opacity:1} 100%{transform:scale(1);opacity:1} }
@keyframes star-idle { 0%,100%{transform:scale(1)} 50%{transform:scale(1.045)} }

/* Hover — once stars settle, X/Y parallax + glow. Ported from old farhanic hover (is-hovered). */
.hero-stage.has-settled { pointer-events: auto !important; }
.hero-stage.has-settled .hero-new-svg { pointer-events: none; }
.hero-stage.has-settled .star-fly {
  pointer-events: all;
  cursor: crosshair;
  transition: filter 0.35s ease;
  will-change: transform, filter;
}
.hero-stage.has-settled .star-fly .star-hit {
  pointer-events: all;
}
.hero-stage.has-settled .star-fly.is-hovered {
  filter: drop-shadow(0 0 1.5px #1E90FF) drop-shadow(0 0 6px #0099CC) drop-shadow(0.8px 0 0 rgba(255,59,48,0.65)) drop-shadow(-0.8px 0 0 rgba(0,255,136,0.65));
}
.hero-stage.has-settled .star-fly.is-hovered .star-scale {
  transform: perspective(900px) translateZ(28px) translate(var(--hx,0), var(--hy,0)) rotateX(var(--rx,9deg)) rotateY(var(--ry,-8deg)) scale(1.075) !important;
}
.hero-stage.has-settled .star-fly.is-hovered .star-body {
  animation: star-hover-pulse 0.7s cubic-bezier(.16,1,.3,1) both !important;
}
@keyframes star-hover-pulse {
  0% { transform: scale(1); }
  45% { transform: scale(1.08); }
  100% { transform: scale(1.04); }
}

/* MetalForge smoke inside stars — always at 40% progress, never 100% */
.metal-smoke-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  opacity: 0.4;
  mix-blend-mode: screen;
  pointer-events: none;
}
.metal-smoke {
  width: 100%;
  height: 100%;
  background: #131019;
  background-image:
    radial-gradient(ellipse 90% 70% at 25% 22%, #6B38B8 0%, transparent 58%),
    radial-gradient(ellipse 80% 60% at 78% 48%, #4794FF 0%, transparent 52%),
    radial-gradient(ellipse 70% 55% at 45% 78%, #E0C7FF 0%, transparent 45%),
    radial-gradient(ellipse 60% 50% at 62% 18%, #C7E6FF 0%, transparent 38%),
    radial-gradient(ellipse 50% 40% at 35% 65%, #0F3DB2 0%, transparent 42%);
  filter: blur(0.6px) contrast(1.18) brightness(1.08) saturate(1.15);
  transform: scale(1.3);
  animation: metal-drift 14s infinite alternate ease-in-out, metal-pulse 3s infinite ease-in-out;
  will-change: transform, filter;
}
@keyframes metal-drift {
  0% { transform: scale(1.3) translate(0%, 0%) rotate(0deg); }
  100% { transform: scale(1.32) translate(1.8%, -1.2%) rotate(0.6deg); }
}
@keyframes metal-pulse {
  0%,100% { opacity: 0.92; filter: blur(0.6px) contrast(1.18) brightness(1.08); }
  50% { opacity: 1; filter: blur(0.8px) contrast(1.22) brightness(1.12); }
}

/* Motion-led hero — keep shooting trails even under prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .hero-stage { opacity:1; }
  .trail-line, .trail-line--soft, .trail-spark { display:block !important; }
  .star-fly { opacity:0; }
}