/* FlipReader links: how a link looks on the page. One class per style; a client restyles by setting the
   --fr-link-* variables on :root (or by overriding a class) in its own stylesheet, never in this file.
   The engine positions .fr-link absolutely inside the page (data-overlay). */

:root {
  --fr-link-accent: var(--fr-accent, #c05131);     /* hover highlight, glow, pill background */
  --fr-link-radius: 6px;
  --fr-link-font: var(--fr-font, system-ui, sans-serif);
  --fr-link-dot: #fff;                              /* the dot itself */
  --fr-link-dot-size: 17px;
  --fr-link-name-bg: var(--fr-panel-text, #2f2a21);  /* the name that appears above a dot */
  --fr-link-name-text: var(--fr-panel, #fff);
  --fr-link-pill-bg: var(--fr-link-accent);
  --fr-link-pill-text: #fff;
}

.fr-link { display: block; border-radius: var(--fr-link-radius); cursor: pointer; text-decoration: none; color: inherit; }

/* hidden: a tap area only; shows on hover and while the page flashes the links */
.fr-link--hidden:hover,
body.fr-show-links .fr-link--hidden { background: color-mix(in srgb, var(--fr-link-accent) 16%, transparent); outline: 1px dashed color-mix(in srgb, var(--fr-link-accent) 55%, transparent); }

/* glow: a soft highlight that is always on */
.fr-link--glow { background: color-mix(in srgb, var(--fr-link-accent) 14%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--fr-link-accent) 45%, transparent), 0 0 12px color-mix(in srgb, var(--fr-link-accent) 35%, transparent); transition: background .15s; }
.fr-link--glow:hover { background: color-mix(in srgb, var(--fr-link-accent) 26%, transparent); }

/* pill: a small labelled button sitting in the box */
.fr-link--pill { display: flex; align-items: center; justify-content: center; }
.fr-link-pill { background: var(--fr-link-pill-bg); color: var(--fr-link-pill-text); font: 500 12px/1 var(--fr-link-font); padding: 7px 12px; border-radius: 999px; box-shadow: 0 2px 8px rgba(0,0,0,.35); white-space: nowrap; transition: transform .15s; }
.fr-link--pill:hover .fr-link-pill { transform: scale(1.06); }

/* dot: a breathing dot in the middle of the box, the label above it on hover */
.fr-link-dot { position: absolute; left: 50%; top: 50%; width: var(--fr-link-dot-size); height: var(--fr-link-dot-size); margin: calc(var(--fr-link-dot-size) / -2) 0 0 calc(var(--fr-link-dot-size) / -2); border-radius: 50%; background: var(--fr-link-dot); box-shadow: 0 2px 8px rgba(0,0,0,.45); animation: fr-link-breathe 2s ease-in-out infinite; }
@keyframes fr-link-breathe { 0%, 100% { transform: scale(1); opacity: .85 } 50% { transform: scale(1.25); opacity: 1 } }
.fr-link-name { position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); white-space: nowrap; background: var(--fr-link-name-bg); color: var(--fr-link-name-text); font: 500 12px/1.2 var(--fr-link-font); padding: 6px 10px; border-radius: 6px; opacity: 0; transition: opacity .15s; pointer-events: none; }
@media (hover: hover) {
  .fr-link--dot:hover .fr-link-dot { animation: none; transform: scale(1.25); opacity: 1; }
  .fr-link--dot:hover .fr-link-name { opacity: 1; }
}

/* shaped: a painted outline instead of the box. The box itself is inert; only the inside of the outline
   (and a dot or pill sitting in it) takes the pointer, so hover and taps follow the shape. Last so it wins. */
.fr-link--shaped, .fr-link--shaped:hover, body.fr-show-links .fr-link--shaped { pointer-events: none; background: none; outline: none; box-shadow: none; border-radius: 0; }
.fr-link-shape { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fr-link-shape polygon { pointer-events: fill; fill: transparent; stroke: none; stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linejoin: round; transition: fill .15s; }
.fr-link--shaped .fr-link-dot, .fr-link--shaped .fr-link-pill { pointer-events: auto; }
.fr-link--hidden.fr-link--shaped:hover polygon,
body.fr-show-links .fr-link--hidden.fr-link--shaped polygon { fill: color-mix(in srgb, var(--fr-link-accent) 16%, transparent); stroke: color-mix(in srgb, var(--fr-link-accent) 55%, transparent); stroke-dasharray: 4 3; }
.fr-link--glow.fr-link--shaped polygon { fill: color-mix(in srgb, var(--fr-link-accent) 14%, transparent); stroke: color-mix(in srgb, var(--fr-link-accent) 45%, transparent); stroke-width: 1.5; }
.fr-link--glow.fr-link--shaped:hover polygon { fill: color-mix(in srgb, var(--fr-link-accent) 26%, transparent); }