/* EXP Frontier Aperture: stable coverage, then precise attention.
   Geometry stays visible without JavaScript; motion is a progressive enhancement. */
svg.aperture-mark {
  display: block;
  overflow: visible;
  fill: none;
  stroke: none;
  flex-shrink: 0;
  transform-box: view-box;
  transform-origin: 50px 50px;
}

svg.aperture-mark .aperture-coverage,
svg.aperture-mark .aperture-focus,
svg.aperture-mark path {
  transform-box: view-box;
  transform-origin: 50px 50px;
  stroke: none;
}

svg.aperture-mark .aperture-coverage path {
  fill: var(--aperture-ink, currentColor);
}

svg.aperture-mark .aperture-focus path {
  fill: var(--aperture-accent, var(--copper, #a6533d));
}

/* The completed mark acknowledges interaction as one locked shape. Its pieces
   never separate on hover. Entrance owns all motion until the copper locks. */
@media (prefers-reduced-motion: no-preference) {
  [data-aperture-interactive] .aperture-mark {
    transition: transform 320ms cubic-bezier(.25, 1, .5, 1);
  }

  [data-aperture-interactive]:focus-visible .aperture-mark:not([data-aperture-state="entering"]) {
    transform: scale(1.025);
  }

  svg.aperture-mark[data-aperture-state="entering"] {
    transform: none;
    transition: none;
  }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  [data-aperture-interactive]:hover .aperture-mark:not([data-aperture-state="entering"]) {
    transform: scale(1.025);
  }
}

@media (prefers-reduced-motion: reduce) {
  svg.aperture-mark .aperture-focus {
    clip-path: none !important;
  }

  svg.aperture-mark,
  svg.aperture-mark .aperture-coverage,
  svg.aperture-mark .aperture-focus,
  svg.aperture-mark path {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}