.headline-frame {
  --w: 720px;
  --h: 280px;
  --scale: 1;
  position: relative;
  width: calc(var(--w) * var(--scale));
  height: calc(var(--h) * var(--scale));
  margin-inline: auto;
}

.headline {
  --w: 720px;
  --h: 280px;
  --bg: var(--color-bg);
  --fg: var(--color-fg);
  --accent: var(--color-accent);
  --selection: var(--color-selection-bg);
  --selection-fg: var(--color-selection-fg);

  /* The headline lives in a fixed 720x280 design canvas that scales via
     transform on small viewports. Pin H1/H4 to their desktop values so the
     inner type doesn't double-shrink with the canvas — the outer scale()
     handles responsive sizing. */
  --fs-h1: 72px;
  --fs-h4: 24px;

  position: absolute;
  top: 0;
  left: 0;
  width: var(--w);
  height: var(--h);
  background: transparent;
  font-family: var(--font-sans);
  color: var(--fg);
  user-select: none;
  transform-origin: top left;
}

.headline__line {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.headline__line--top {
  top: 56px;
  font-size: var(--fs-h1);
  line-height: 1;
}

.headline__meta {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h4);
  line-height: 1;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--color-secondary);
  white-space: nowrap;
  user-select: text;
}

.headline__meta--top {
  top: 8px;
}

.headline__meta--bottom {
  top: 236px;
}

.headline__line--bottom {
  top: 132px;
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h1);
  line-height: 1;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.headline__bottom-text {
  position: relative;
  display: inline-block;
  padding: 0 2px;
  white-space: pre;
  /* Promote to its own layer so the drag-in transform (Stage 1) is a cheap
     GPU translate on iOS instead of a per-frame glyph re-raster. */
  will-change: transform;
}

.headline__char {
  display: inline-block;
  position: relative;
  transition: color 60ms linear;
}

.headline__char--selected {
  color: var(--selection-fg);
}

.headline__char--accent {
  /* Intro orange — only used in the home headline; the global h1 color was
     reverted to white so this is hardcoded here instead of via a token. */
  color: #d98e73;
}

.headline__char--accent-soft {
  color: var(--color-fg);
}

.headline__char--accent-blue {
  color: var(--accent);
}

/* Selected state always wins for legibility on the highlight band */
.headline__char--selected.headline__char--accent,
.headline__char--selected.headline__char--accent-soft,
.headline__char--selected.headline__char--accent-blue {
  color: var(--selection-fg);
}

.headline__caret {
  display: inline-block;
  width: 6px;
  height: 1em;
  margin-left: 4px;
  background: var(--accent);
  vertical-align: -0.15em;
  opacity: 0;
}

.headline__caret--blink {
  animation: headline-caret-blink 900ms steps(2, end) infinite;
}

@keyframes headline-caret-blink {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

/* Figma-style selection rectangle around bottom text */
.headline__selection {
  position: absolute;
  pointer-events: none;
  border: 1.5px solid var(--accent);
  box-sizing: border-box;
  opacity: 0;
  transition: opacity 120ms linear;
}

.headline__selection--visible {
  opacity: 1;
}

.headline__anchor {
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--color-fg);
  border: 1.5px solid var(--accent);
  box-sizing: border-box;
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms linear;
}

.headline__anchor--visible {
  opacity: 1;
}

.headline__size-label {
  position: absolute;
  background: var(--accent);
  color: var(--color-fg);
  font-family: var(--font-mono);
  font-weight: var(--fw-semibold);
  font-size: 12px;
  letter-spacing: 0.02em;
  padding: 4px 8px;
  border-radius: 4px;
  pointer-events: none;
  white-space: nowrap;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 120ms linear;
}

.headline__size-label--visible {
  opacity: 1;
}

/* Text-selection highlight (covers bottom text in State2) */
.headline__text-highlight {
  position: absolute;
  background: var(--selection);
  pointer-events: none;
  opacity: 0;
}

.headline__text-highlight--visible {
  opacity: 1;
}

/* Full-bleed left accent strip shown in State2 */
.headline__accent-strip {
  position: absolute;
  width: 7px;
  background: var(--accent);
  pointer-events: none;
  opacity: 0;
}

.headline__accent-strip--visible {
  opacity: 1;
}

/* Bottom text gets a recolor when the highlight is on so it reads on light bg */
.headline__bottom-text--selected {
  color: var(--selection-fg);
}

.headline__cursor {
  position: absolute;
  top: 0;
  left: 0;
  width: 56px;
  height: 56px;
  pointer-events: none;
  transform-origin: 4px 4px; /* tip of the arrow cursor */
  transform: translate3d(-9999px, -9999px, 0);
  will-change: transform;
}

.headline__cursor--text {
  transform-origin: 13.5px 33px; /* center of the I-beam (scaled) */
}

.headline__cursor svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  /* Replaces the old inline SVG feGaussianBlur drop-shadow. Matches the
     previous look (4px down offset, ~2px blur, 25% black) but is GPU-cheap on
     iOS, where animating an inline SVG filter forced per-frame CPU raster. */
  filter: drop-shadow(0 4px 2px rgba(0, 0, 0, 0.25));
}

/* During the Stage 1 drag-in the cursor travels the whole width while the 72px
   text translates alongside it. On WebKit/iOS an element with ANY filter can't
   take the cheap "translate the cached layer" path — it repaints on move — so
   we drop the shadow while the cursor is in motion and restore it at rest. */
.headline__cursor--moving svg {
  filter: none;
}