/* ============================================================
   TunaGrow CBO — Scroll & Highlight Animation
   File: css/scroll-highlight.css
   ============================================================ */

/**
 * Applied dynamically by js/scroll-highlight.js to any element
 * that is navigated to via a data-anchor link.
 *
 * Uses a two-ring box-shadow pulse (harvest gold outer, leaf green inner)
 * that draws the eye without disrupting layout.
 */

.tg-highlight {
  box-shadow:
    0 0 0 3px var(--leaf),
    0 0 0 7px rgba(242, 184, 75, 0.45),
    0 0 28px 6px rgba(201, 125, 46, 0.18);
  border-radius: 20px;          /* matches card border-radius throughout site */
  outline: none;
  transition:
    box-shadow 0.35s ease,
    opacity    0.55s ease;
  position: relative;
  z-index: 1;                   /* float above siblings during highlight */
}

.tg-highlight--fade {
  box-shadow:
    0 0 0 0px transparent,
    0 0 0 0px transparent,
    0 0 0px 0px transparent;
  opacity: 1;                   /* keep content visible, only remove ring */
}

/**
 * Some elements (page-header, section wrappers) don't have border-radius.
 * For those, use a bottom-border flash instead of a full ring.
 */
.tg-highlight.tg-highlight--bar {
  border-radius: 0;
  box-shadow: none;
  border-bottom: 3px solid var(--harvest);
}
.tg-highlight--bar.tg-highlight--fade {
  border-bottom-color: transparent;
}