/* hero.css — the landing "verb stage": a full-viewport greeting where verbs act
   themselves out, over an ambient field of the rest of the verb library. */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: var(--sp-xl) var(--sp-md) var(--sp-2xl);
  isolation: isolate;
  text-align: center;
}
/* a faint warm glow centers attention on the stage */
.hero::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(60% 50% at 50% 42%, var(--amber-soft), transparent 70%),
              radial-gradient(40% 40% at 50% 60%, var(--teal-soft), transparent 70%);
  pointer-events: none;
}

/* — Ambient field: the rest of the ~250 verbs, drifting/twitching faintly. — */
.hero__field { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero__chip {
  position: absolute;
  pointer-events: auto;
  font-family: var(--font-mono);
  color: var(--text-muted);
  opacity: 0.22;
  background: none; border: 0; padding: 0;
  cursor: pointer; white-space: nowrap; letter-spacing: 0.02em;
  transition: color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
  will-change: transform, opacity;
}
.hero__chip:hover, .hero__chip:focus-visible, .hero__chip.is-active {
  opacity: 1; animation-play-state: paused;
}
.hero__chip:hover, .hero__chip:focus-visible { color: var(--teal); }
.hero__chip.is-active { color: var(--amber); }
.hero[data-inview="false"] .hero__chip { animation-play-state: paused; }

/* — The featured stage. — */
.hero__stage {
  position: relative; z-index: 1;
  display: grid; justify-items: center; gap: var(--sp-sm);
  max-width: min(92vw, 42rem);
}
/* the swapping content; rises toward center on each switch */
.hero__reel { display: grid; justify-items: center; gap: var(--sp-sm); will-change: transform, opacity; }
.hero__eyebrow { color: var(--text-muted); }
.hero__scene {
  width: min(72vw, 360px); height: auto;
  color: var(--text);
  filter: drop-shadow(0 10px 26px #00000055);
}
.hero__scene svg { width: 100%; height: auto; }
.hero__word {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2.6rem, 9vw, 5rem); line-height: 1;
  letter-spacing: -0.02em; color: var(--text); margin: 0;
}
.hero__gloss {
  color: var(--text-secondary); font-style: italic;
  font-size: var(--size-md); margin: 0; max-width: 38ch;
}
.hero__prims {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--sp-xs); margin-top: var(--sp-xs); min-height: 2.2em;
}
.hero__prim { display: inline-flex; align-items: center; gap: 0.3em; }
.hero__arrow { color: var(--text-muted); }
.hero__surface { font-family: var(--font-mono); font-size: var(--size-xs); color: var(--accent-2); }
.hero__sep { color: var(--rule-solid); margin: 0 0.15em; }
.hero__edge { font-family: var(--font-mono); font-size: var(--size-sm); color: var(--text-muted); }

/* — Scroll cue. — */
.hero__scroll {
  position: absolute; bottom: var(--sp-lg); left: 50%; transform: translateX(-50%); z-index: 2;
  display: inline-flex; flex-direction: column; align-items: center; gap: 0.15em;
  font-family: var(--font-mono); font-size: var(--size-sm); color: var(--text-muted);
  text-decoration: none; letter-spacing: 0.16em; text-transform: uppercase;
}
.hero__scroll:hover { color: var(--text); }
.hero__chev { font-size: 1.2rem; animation: hero-bob 1.8s var(--ease) infinite; }

/* — Reduced-motion: a static showcase of the 16 hero scenes (frozen poses). — */
.hero--static { min-height: auto; padding-block: var(--sp-2xl); }
.hero__showcase {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--sp-md); margin-top: var(--sp-lg); width: min(92vw, 62rem);
}
.hero__card {
  margin: 0; display: grid; justify-items: center; gap: var(--sp-xs);
  background: var(--bg-1); border: 1px solid var(--rule-solid);
  border-radius: var(--radius-sm); padding: var(--sp-md); color: var(--text);
}
.hero__card svg { width: 100%; height: auto; max-width: 160px; }
.hero__cardlabel { font-family: var(--font-mono); font-size: var(--size-sm); color: var(--text-secondary); }

/* — Ambient motion keyframes (subtle; assigned by the verb's `motion` tag). — */
.hero__chip[data-motion="drift"]  { animation: m-drift 13s ease-in-out infinite alternate; }
.hero__chip[data-motion="hop"]    { animation: m-hop 2.6s ease-in-out infinite; }
.hero__chip[data-motion="spin"]   { animation: m-spin 18s linear infinite; }
.hero__chip[data-motion="flip"]   { animation: m-flip 5.5s ease-in-out infinite; }
.hero__chip[data-motion="slide"]  { animation: m-slide 7s ease-in-out infinite alternate; }
.hero__chip[data-motion="grow"]   { animation: m-grow 5s ease-in-out infinite; }
.hero__chip[data-motion="shrink"] { animation: m-shrink 5s ease-in-out infinite; }
.hero__chip[data-motion="pulse"]  { animation: m-pulse 3.4s ease-in-out infinite; }
.hero__chip[data-motion="vanish"] { animation: m-vanish 6s ease-in-out infinite; }
.hero__chip[data-motion="appear"] { animation: m-appear 6s ease-in-out infinite alternate; }
.hero__chip[data-motion="shake"]  { animation: m-shake 3s ease-in-out infinite; }
.hero__chip[data-motion="tilt"]   { animation: m-tilt 5.5s ease-in-out infinite; }

@keyframes m-drift  { from { transform: translate(0,0); } to { transform: translate(9px,-11px); } }
@keyframes m-hop    { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes m-spin   { to { transform: rotate(360deg); } }
@keyframes m-flip   { 0%,100% { transform: scaleX(1); } 50% { transform: scaleX(-1); } }
@keyframes m-slide  { from { transform: translateX(0); } to { transform: translateX(13px); } }
@keyframes m-grow   { 0%,100% { transform: scale(1); } 50% { transform: scale(1.15); } }
@keyframes m-shrink { 0%,100% { transform: scale(1); } 50% { transform: scale(0.85); } }
@keyframes m-pulse  { 0%,100% { opacity: 0.2; } 50% { opacity: 0.5; } }
@keyframes m-vanish { 0%,100% { opacity: 0.28; } 50% { opacity: 0.04; } }
@keyframes m-appear { 0% { opacity: 0.05; transform: translateY(6px); } 100% { opacity: 0.3; transform: translateY(0); } }
@keyframes m-shake  { 0%,100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes m-tilt   { 0%,100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
@keyframes hero-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

@media (prefers-reduced-motion: reduce) {
  .hero__chip, .hero__chev { animation: none !important; }
  .hero__chip { opacity: 0.3; }
}

@media (max-width: 640px) {
  .hero__scene { width: min(80vw, 280px); }
  .hero__chip { display: none; } /* the field gets noisy on small screens */
}