/* xeek.dev theme, hero.css: home hero: glow, gradient title, rotating gear */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 56px 24px 48px;
  margin: -36px -24px 0;
  text-align: center;
}

/* Keep hero children above the glow; the glow itself must stay absolute,
   so it is excluded here (an equal-specificity `.hero > *` after .hero-glow
   would flatten it to relative and kill the effect) */
.hero > :not(.hero-glow) { position: relative; }

.hero-glow {
  position: absolute;
  /* negative top bleeds the glow up behind the frosted sticky header */
  inset: -80px 0 0 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 90% 90% at 28% 0%, rgba(65, 132, 228, 0.38), transparent 65%),
    radial-gradient(ellipse 85% 80% at 75% 12%, rgba(86, 211, 100, 0.28), transparent 65%);
  /* fade out in every direction so the glow is a soft top-anchored pool
     with no straight edges */
  -webkit-mask-image: radial-gradient(ellipse 50% 110% at 50% 0%, #000 30%, transparent 82%);
  mask-image: radial-gradient(ellipse 50% 110% at 50% 0%, #000 30%, transparent 82%);
}

.hero-title {
  margin: 0;
  font: 700 clamp(40px, 8vw, 60px)/1.05 var(--font-logo);
  letter-spacing: -0.01em;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.8));
  display: inline-flex;
  align-items: baseline;
}

/* the two words each carry half of the green-to-blue sweep (skin tokens),
   meeting at the mid tone behind the compound gear */
.hero-word {
  position: relative;
  z-index: 1;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-word-a { background-image: var(--grad-hero-a); }
.hero-word-b { background-image: var(--grad-hero-b); }

/* the compound gear sits IN the flex flow between the words, so it is always
   centered in the actual gap regardless of word widths */
.hero-gear-slot {
  position: relative;
  width: 0.85em;
  height: 0;
  align-self: center;
  z-index: 0;
}

.hero-gear-svg {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2.9em;
  height: 2.9em;
  /* centered via margins, NOT translate: WebKit (iOS) miscomputes the filter
     region of transformed+filtered absolutes and clips the gear at a hard
     edge. No CSS filter here for the same reason. */
  margin: -1.45em 0 0 -1.45em;
}

/* compound gear motion: the assembly drifts, the hub counter-rotates, and
   each planet turns at its own speed and direction */
.hero-gear-svg .asm { animation: gear-cw 90s linear infinite; transform-origin: center; transform-box: fill-box; }
.hero-gear-svg .hub { animation: gear-ccw 14s linear infinite; transform-origin: center; transform-box: fill-box; }
.hero-gear-svg .p0 { animation: gear-cw 6.5s linear infinite; transform-origin: center; transform-box: fill-box; }
.hero-gear-svg .p1 { animation: gear-ccw 9s linear infinite; transform-origin: center; transform-box: fill-box; }
.hero-gear-svg .p2 { animation: gear-cw 11.5s linear infinite; transform-origin: center; transform-box: fill-box; }

@keyframes gear-cw {
  to { transform: rotate(360deg); }
}

@keyframes gear-ccw {
  to { transform: rotate(-360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-gear-svg .asm,
  .hero-gear-svg .hub,
  .hero-gear-svg .p0,
  .hero-gear-svg .p1,
  .hero-gear-svg .p2 { animation: none; }
}

.hero-eyebrow {
  /* tucked up against the wordmark, bright so it reads over the gear */
  margin: -8px 0 0;
  font: 500 13px var(--font-body);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-bright);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}

.hero-subtitle {
  /* pushed down to clear the bottom of the compound gear */
  margin: 24px 0 0;
  max-width: 460px;
  font: 400 16px/1.6 var(--font-body);
  color: #93a6b8;
  text-wrap: pretty;
}

.hero-buttons { display: flex; gap: 12px; margin-top: 8px; }