/* ==========================================================================
   Hardev Consultants — Hero
   The first 7 seconds. Every detail counts.
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100dvh;
  padding-top: 7rem;
  padding-bottom: 4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  isolation: isolate;
  overflow: hidden;
}

/* Animated mesh-gradient background — pure CSS, GPU-friendly */
.hero-mesh {
  position: absolute;
  inset: -10%;
  z-index: -2;
  pointer-events: none;
  opacity: 0.85;
  background:
    radial-gradient(ellipse 60% 50% at 18% 30%, color-mix(in oklch, var(--grad-1) 70%, transparent) 0%, transparent 60%),
    radial-gradient(ellipse 55% 45% at 82% 25%, color-mix(in oklch, var(--grad-2) 55%, transparent) 0%, transparent 65%),
    radial-gradient(ellipse 65% 60% at 50% 90%, color-mix(in oklch, var(--grad-3) 45%, transparent) 0%, transparent 60%),
    radial-gradient(ellipse 80% 80% at 50% 50%, color-mix(in oklch, var(--c-primary) 18%, transparent) 0%, transparent 70%);
  filter: blur(60px) saturate(140%);
  animation: mesh-drift 22s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes mesh-drift {
  0%   { transform: translate3d(-3%, -2%, 0) scale(1.02); }
  50%  { transform: translate3d(2%, 2%, 0) scale(1.06); }
  100% { transform: translate3d(-2%, 3%, 0) scale(1.04); }
}

[data-theme="light"] .hero-mesh {
  opacity: 0.55;
  filter: blur(80px) saturate(170%);
}

/* Constellation grid — subtle line pattern overlay */
.hero-grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--c-border-faint) 1px, transparent 1px),
    linear-gradient(to bottom, var(--c-border-faint) 1px, transparent 1px);
  background-size: 5rem 5rem;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 80%);
  opacity: 0.55;
}

/* Vignette */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 80% 80% at 50% 50%, transparent 50%, var(--c-bg) 100%);
}

.hero-inner {
  position: relative;
  display: grid;
  gap: var(--space-8);
}

/* Top status bar */
.hero-status {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.hero-headline {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.8rem, 1.75rem + 5.25vw, 5.88rem);
  line-height: 0.96;
  letter-spacing: var(--tracking-tightest);
  color: var(--c-text);
  max-width: 16ch;
  font-variation-settings: "opsz" 144, "SOFT" 30;
  margin-block: var(--space-4);
}
.hero-headline em {
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  background: linear-gradient(110deg, var(--c-primary) 0%, var(--c-accent) 50%, var(--c-secondary) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-headline .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(24px);
  filter: blur(8px);
  animation: word-rise var(--dur-cinematic) var(--ease-out-expo) forwards;
}
.hero-headline .word:nth-child(1) { animation-delay: 0.10s; }
.hero-headline .word:nth-child(2) { animation-delay: 0.20s; }
.hero-headline .word:nth-child(3) { animation-delay: 0.30s; }
.hero-headline .word:nth-child(4) { animation-delay: 0.40s; }
.hero-headline .word:nth-child(5) { animation-delay: 0.50s; }
.hero-headline .word:nth-child(6) { animation-delay: 0.60s; }
.hero-headline .word:nth-child(7) { animation-delay: 0.70s; }
.hero-headline .word:nth-child(8) { animation-delay: 0.80s; }
.hero-headline .word:nth-child(9) { animation-delay: 0.90s; }

@keyframes word-rise {
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

.hero-sub {
  max-width: 38rem;
  font-size: var(--text-lg);
  line-height: var(--lh-relaxed);
  color: var(--c-text-muted);
  opacity: 0;
  animation: fade-up 1s var(--ease-out-expo) 1.0s forwards;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  margin-top: var(--space-4);
  opacity: 0;
  animation: fade-up 1s var(--ease-out-expo) 1.15s forwards;
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Side ornament — orbit visualisation */
.hero-orbit {
  position: absolute;
  top: 50%;
  right: -10%;
  transform: translateY(-50%);
  width: min(45rem, 55vw);
  aspect-ratio: 1;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  animation: fade-in 2s var(--ease-out-expo) 0.5s forwards;
}
@keyframes fade-in { to { opacity: 1; } }

.hero-orbit .ring {
  position: absolute;
  inset: 0;
  border: 1px solid var(--c-border-faint);
  border-radius: 50%;
}
.hero-orbit .ring--2 { inset: 8%; opacity: 0.7; }
.hero-orbit .ring--3 { inset: 18%; opacity: 0.5; }
.hero-orbit .ring--4 { inset: 30%; opacity: 0.35; }

.hero-orbit .satellite {
  position: absolute;
  top: 50%; left: 50%;
  width: 8px; height: 8px;
  transform-origin: 0 0;
}
.hero-orbit .satellite::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c-primary);
  border-radius: 50%;
  box-shadow: 0 0 24px var(--c-primary), 0 0 60px color-mix(in oklch, var(--c-primary) 60%, transparent);
}
.hero-orbit .satellite--1 { animation: orbit-1 18s linear infinite; }
.hero-orbit .satellite--2 { animation: orbit-2 28s linear infinite; }
.hero-orbit .satellite--2::before { background: var(--c-accent); box-shadow: 0 0 24px var(--c-accent); }
.hero-orbit .satellite--3 { animation: orbit-3 42s linear infinite; }
.hero-orbit .satellite--3::before { background: var(--c-secondary); box-shadow: 0 0 24px var(--c-secondary); }

@keyframes orbit-1 {
  from { transform: rotate(0deg) translateX(min(22rem, 27vw)) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(min(22rem, 27vw)) rotate(-360deg); }
}
@keyframes orbit-2 {
  from { transform: rotate(40deg) translateX(min(18rem, 22vw)) rotate(-40deg); }
  to   { transform: rotate(400deg) translateX(min(18rem, 22vw)) rotate(-400deg); }
}
@keyframes orbit-3 {
  from { transform: rotate(120deg) translateX(min(14rem, 17vw)) rotate(-120deg); }
  to   { transform: rotate(480deg) translateX(min(14rem, 17vw)) rotate(-480deg); }
}

.hero-orbit-core {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 5rem; height: 5rem;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, color-mix(in oklch, var(--c-primary) 80%, white), var(--c-primary) 40%, var(--aurora-900) 100%);
  box-shadow: 0 0 60px color-mix(in oklch, var(--c-primary) 50%, transparent),
              inset 0 0 30px color-mix(in oklch, var(--bone-50) 25%, transparent);
  animation: pulse-core 4s var(--ease-in-out) infinite;
}
@keyframes pulse-core {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.06); }
}

@media (max-width: 1080px) {
  .hero-orbit { right: -25%; width: 30rem; opacity: 0.4; }
}
@media (max-width: 760px) {
  .hero-orbit { display: none; }
  .hero-headline { font-size: clamp(2.24rem, 1.61rem + 3.15vw, 4.06rem); max-width: 100%; }
}

/* Bottom marquee */
.hero-marquee {
  margin-top: auto;
  padding-top: var(--space-12);
  opacity: 0;
  animation: fade-up 1.4s var(--ease-out-expo) 1.4s forwards;
}

/* Scroll indicator */
.hero-scroll {
  position: absolute;
  bottom: var(--space-6);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: var(--tracking-widest);
  color: var(--c-text-faint);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  opacity: 0;
  animation: fade-up 1s var(--ease-out-expo) 1.6s forwards;
}
.hero-scroll-line {
  width: 1px;
  height: 32px;
  background: linear-gradient(to bottom, var(--c-text-faint) 0%, transparent 100%);
  position: relative;
  overflow: hidden;
}
.hero-scroll-line::before {
  content: "";
  position: absolute;
  top: -16px;
  left: 0;
  width: 100%;
  height: 16px;
  background: linear-gradient(to bottom, transparent 0%, var(--c-primary) 100%);
  animation: scroll-line 2.4s ease-in-out infinite;
}
@keyframes scroll-line {
  to { transform: translateY(48px); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hero-mesh, .hero-orbit, .satellite, .hero-orbit-core, .hero-scroll-line::before {
    animation: none !important;
  }
  .hero-headline .word { opacity: 1; transform: none; filter: none; animation: none; }
  .hero-sub, .hero-actions, .hero-marquee, .hero-scroll, .hero-orbit { opacity: 1 !important; animation: none !important; }
}