/* ================================================================
   STARTORCH STUDIOS — light-zone.css
   Scroll-driven per-element blue text darkening overrides.
   ================================================================ */

/* ----------------------------------------------------------------
   SCROLL-DRIVEN BLUE TEXT DARKENING (PER-ELEMENT)
   The .global-bg gradient is position:fixed, so the light zone is
   always the top ~40% of the viewport. JS toggles .in-light-zone
   on each blue element when it enters that region.
   ---------------------------------------------------------------- */

/* Smooth transition on all blue elements */
.supa-badge,
.star-emblem,
.hero-eyebrow,
.cta-link-wrapper,
.accent,
.bento-label,
.pillar-svg-icon,
.footer-col-title {
  transition: color 0.5s ease, background 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
}

/* ── Per-Element Light Zone Overrides ── */
.supa-badge.in-light-zone {
  color: var(--clr-blue-dark-alt);
  background: rgba(10, 74, 138, 0.18);
  border-color: rgba(10, 74, 138, 0.45);
  box-shadow: 0 0 20px rgba(10, 74, 138, 0.15);
}

.star-emblem.in-light-zone {
  color: var(--clr-blue-dark-alt);
}

.hero-eyebrow.in-light-zone {
  color: var(--clr-blue-dark-alt);
  text-shadow: none;
}

.cta-link-wrapper.in-light-zone {
  color: var(--clr-blue-dark-alt);
  border-color: var(--clr-blue-dark-alt);
}
.cta-link-wrapper.in-light-zone:hover {
  color: #03396c;
  border-color: #03396c;
}

.accent.in-light-zone {
  color: var(--clr-blue-dark-alt);
  text-shadow: none;
}

.bento-label.in-light-zone {
  color: var(--clr-blue-dark-alt);
}

.pillar-svg-icon.in-light-zone {
  color: var(--clr-blue-dark-alt);
  background: rgba(10, 74, 138, 0.12);
  border-color: rgba(10, 74, 138, 0.35);
}

.footer-col-title.in-light-zone {
  color: var(--clr-blue-dark-alt);
}

.section-title.in-light-zone {
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.15);
}

.git-marquee-text {
  transition: color 0.5s ease, text-shadow 0.5s ease;
}
.git-marquee-text.in-light-zone {
  color: var(--clr-blue-dark-alt) !important;
  text-shadow: none !important;
}