/* Home hero. See static/components/hero.js. */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
  padding: var(--hero-padding-block) var(--hero-padding-inline);
  min-height: var(--hero-min-height);
  margin-bottom: var(--space-5);
  border: 1px solid var(--border);
  background: var(--surface);
  overflow: hidden;
  isolation: isolate;
  /* The one chamfered panel on the page. Safe here because nothing inside the
     hero is focusable — clip-path would otherwise clip the focus ring. */
  clip-path: polygon(
    0 0, 100% 0,
    100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%,
    0 100%
  );
}
/* For a VARIANT that contains a button, link or input.
   clip-path clips the focus ring — verified in-browser — so a focusable hero
   must not use it. The chamfer is drawn with corner brackets instead, the same
   device .spec-card uses, which leaves the ring alone. overflow returns to
   visible for the same reason.

   Registered variants opt in by adding this class; the stock hero holds nothing
   focusable and keeps the cheaper clip-path. */
.hero--interactive {
  clip-path: none;
  overflow: visible;
}
.hero--interactive::after {
  content: "";
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: var(--notch);
  height: var(--notch);
  border-right: 2px solid var(--graph);
  border-bottom: 2px solid var(--graph);
  pointer-events: none;
}

/* Hairline registration marks along the top edge, like panel screws on a HUD.
   Pure decoration, so aria-hidden by virtue of being a pseudo-element. */
.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 64px;
  height: 2px;
  background: var(--graph);
}

/* ---- backdrop -----------------------------------------------------------
   AMD's angled-slash motif as texture. Deliberately near-invisible: it should
   read as a surface treatment, not as a graphic competing with the headline.
   Gradients rather than an image asset so it follows the theme for free. */
.hero-backdrop {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: repeating-linear-gradient(
    115deg,
    transparent 0 38px,
    var(--border) 38px 39px,
    transparent 39px 96px
  );
  opacity: 0.5;
  -webkit-mask-image: linear-gradient(100deg, #000 0%, rgba(0, 0, 0, 0.35) 45%, transparent 78%);
          mask-image: linear-gradient(100deg, #000 0%, rgba(0, 0, 0, 0.35) 45%, transparent 78%);
}

/* One soft pool of Advancing AI blue behind the headline. This is the whole
   budget for colour in the hero — the type stays plain. */
.hero-glow {
  position: absolute;
  left: -6%;
  bottom: -70%;
  width: 46%;
  height: 190%;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--graph-soft), transparent 72%);
  filter: blur(6px);
}
:root[data-theme="light"] .hero-glow { opacity: 0.5; }

.hero-copy {
  position: relative;
  min-width: 0;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: var(--space-5);
}

.hero-title {
  font-family: var(--font-display);
  /* Scale the introduction independently of the surrounding interface text. */
  font-size: var(--text-hero);
  font-weight: 700;
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-tight);
  text-transform: uppercase;
  margin: 0;
}

/* Baseline-aligned phrases preserve the inline wordmark. Wrapping remains
   available for narrow viewports and long localized copy. */
.hero-line {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.28em;
}
.hero-line-brand { flex-wrap: wrap; }

/* The wordmark scales with the headline rather than sitting at a fixed pixel
   height, so it stays proportional through the clamp() at every breakpoint.
   0.72em matches Chakra Petch's cap height closely enough to sit on the same
   optical line. */
.hero-radeon {
  display: inline-flex;
  align-items: center;
  height: 0.72em;
  color: var(--text);
  transform: translateY(0.02em);
}
.hero-radeon svg { height: 100%; width: auto; display: block; }

.hero-lede {
  margin: 0;
  max-width: 72ch;
  font-size: var(--text-md);
  color: var(--text-muted);
  line-height: var(--leading-normal);
}

/* ---- word cycler --------------------------------------------------------
   Every word occupies the SAME grid cell, so the container is as wide as the
   longest word and the text after it never shifts. Stacking with absolute
   positioning would collapse the container's width to zero instead. */
.cycle {
  display: inline-grid;
  vertical-align: baseline;
  text-align: left;
}

.cycle-word {
  grid-area: 1 / 1;
  white-space: nowrap;
  /* --hero-accent, not --graph. Both are cyan in both themes now, but the
     headline sets its own accent: this word is TEXT at display size and must
     hold 4.5:1, whereas --graph is tuned for 3:1 graphics and is a step
     brighter. Keep them separate so retuning graphics cannot dim the headline
     below AA. */
  color: var(--hero-accent);
  /* Inactive words stay in the layout (they define the width) but are invisible
     and non-interactive. visibility, not display, so the grid still sizes them. */
  visibility: hidden;
  opacity: 0;
}

.cycle-word.is-active { visibility: visible; opacity: 1; }

.cycle-char {
  display: inline-block;
  white-space: pre;
}

/* The per-character sweep. Only the ACTIVE word animates; inactive words are
   already invisible, so there is nothing to fade out. */
.cycle-word.is-active .cycle-char {
  animation: rc-char-in 380ms var(--ease-out) backwards;
  animation-delay: calc(var(--char-index, 0) * 26ms);
}

@keyframes rc-char-in {
  from { opacity: 0; transform: translateY(0.18em); filter: blur(3px); }
  to   { opacity: 1; transform: none; filter: none; }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  /* No sweep. The word must still be VISIBLE — the animation's start frame is
     opacity 0, so leaving it applied would blank the headline. */
  .cycle-word.is-active .cycle-char { animation: none; opacity: 1; transform: none; filter: none; }
}