/*
 * Run 10F-R12 — the four curved typographic lines outside the photo ring.
 *
 * Kept in its own stylesheet so the accepted R11 composition is not touched: nothing here changes
 * the disc, the photographs, the wave, the brand or the fox. The overlay is purely additive and
 * sits above the photograph band but below the brand lockup.
 */

#screen-welcome .arc-copy {
  position: absolute;
  /* Same origin as .photo-ring: x = 0 is the disc centre, because the centre is the screen edge. */
  left: 0;
  top: var(--hemi-cy);
  /*
   * The viewBox is written by welcome-arc-copy.js in CSS pixels for the live radius. A 1:1 mapping
   * is what keeps the arcs circular; any scaling here would make the radii lie.
   */
  width: var(--arc-w, 360px);
  height: var(--arc-h, 720px);
  margin-left: 0;
  margin-top: calc(var(--arc-h, 720px) / -2);
  overflow: visible;
  pointer-events: none;
  /*
   * Above the ring (which is z-index -1 inside .hemi) and below the glass copy (z-index 3), so the
   * two innermost lines can pass in front of the photograph band's outer edge without ever sitting
   * on top of the headline inside the sphere.
   */
  z-index: 0;
}

#screen-welcome .arc-text {
  /*
   * Reference typography: a light, slightly wide sans with generous tracking. The project stack is
   * used rather than a webfont so nothing is fetched and no layout depends on a network round trip.
   */
  font-family: var(--font, "Inter", "Helvetica Neue", Arial, sans-serif);
  letter-spacing: 0.05em;
  fill: #fffaf4;
  /*
   * The reference is soft white, not pure #fff, and each outer lane is dimmer than the one below it.
   * Opacity is set per lane by the module; this is only the base colour.
   */
  paint-order: stroke fill;
  stroke: rgba(0, 0, 0, 0.18);
  stroke-width: 0.4px;
}

/*
 * Light theme keeps the dark wine field by design (see welcome-hemisphere.css: the glass scene is a
 * photographically lit composition, so "light" lifts the base to warm rose-grey rather than
 * inverting it to white). Dark ink on that field would be unreadable — measured fill rgb(42,31,28)
 * on rgb(105,64,70) — so the copy stays ivory in both themes and only its rim softens slightly.
 */
[data-theme='light'] #screen-welcome .arc-text {
  fill: #fff7ef;
  stroke: rgba(60, 20, 24, 0.28);
}

/*
 * On a very short screen the overlay is clipped by the viewport anyway; hiding the whole layer when
 * the module decides no lane fits keeps an empty SVG from sitting in the stacking order.
 */
#screen-welcome .arc-copy[data-empty='1'] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  /* Nothing in this layer moves in the first place; this documents the guarantee. */
  #screen-welcome .arc-copy {
    animation: none;
    transition: none;
  }
}