/*!
 * MRSGREN UI — Shared Animation Engine v1.0
 * Scroll Progress Indicator · Gold Sweep Flash · Reveal on Scroll
 * mrgren.store
 */

/* ─────────────────────────────────────────────
   1. SCROLL PROGRESS INDICATOR
   Left-side vertical track with a glowing dot
   that travels as the user scrolls.
   ───────────────────────────────────────────── */
.scroll-prog {
  position: fixed;
  left: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 98;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 40vh;
}
.sp-track {
  width: 2px;
  height: 100%;
  background: rgba(255,255,255,.08);
  border-radius: 2px;
  position: relative;
}
.sp-fill {
  width: 100%;
  background: var(--gold, #D4A853);
  border-radius: 2px;
  position: absolute;
  top: 0;
  left: 0;
  height: 0%;
  z-index: 1;
}
/* Static waypoint dots — illuminate as user passes them */
.sp-fixed-dot {
  width: 8px;
  height: 8px;
  background: rgba(255,255,255,.2);
  border-radius: 50%;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  transition: background .3s ease, box-shadow .3s ease;
}
.sp-fixed-dot.active {
  background: #fff;
  box-shadow: 0 0 8px rgba(255,255,255,.6);
}
/* Travelling dot */
.sp-dot {
  width: 14px;
  height: 14px;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 0%;
  box-shadow: 0 0 10px rgba(255,255,255,.4), 0 0 20px rgba(255,255,255,.15);
  z-index: 3;
}

/* ─────────────────────────────────────────────
   2. GOLD SWEEP FLASH
   A shimmering gold line sweeps across any
   .flash-target element on intersection or hover.
   Runs for exactly 5 seconds (4 × 1.25 s).
   ───────────────────────────────────────────── */
.flash-target { position: relative; }

/* Inline elements need display:inline-block for ::after to size correctly */
h1.flash-target,
h2.flash-target,
h3.flash-target,
.f-brand.flash-target,
.big.flash-target,
.mod-title.flash-target,
.logo.flash-target,
.nav-logo.flash-target { display: inline-block; }

/* The sweeping gold line pseudo-element */
.flash-target::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--gold, #D4A853) 50%,
    transparent 100%
  );
  background-size: 300% 100%;
  background-position: 100% 0;
  opacity: 0;
  pointer-events: none;
  z-index: 10;
}

/* Card / block elements: sweep runs along the TOP edge */
.pcard.flash-target::after,
.fmt-card.flash-target::after,
.module-card.flash-target::after,
.hub-item.flash-target::after,
.key-fact.flash-target::after,
.remember-box.flash-target::after {
  top: 0;
  border-radius: 2px 2px 0 0;
}

/* Text / heading elements: sweep runs along the BOTTOM edge */
h1.flash-target::after,
h2.flash-target::after,
h3.flash-target::after,
.f-brand.flash-target::after,
.big.flash-target::after,
.mod-title.flash-target::after,
.logo.flash-target::after,
.nav-logo.flash-target::after { bottom: -4px; top: auto; }

@keyframes goldSweep {
  0%   { background-position: 100% 0; opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { background-position: 0% 0;   opacity: 0; }
}

/* Hover trigger (pointer devices only) */
@media (hover: hover) {
  .flash-target:hover::after {
    animation: goldSweep 1.25s ease-in-out 4 forwards;
  }
}

/* IntersectionObserver trigger (added by mrsgren-ui.js) */
.flash-target.flash-active::after {
  animation: goldSweep 1.25s ease-in-out 4 forwards;
}

/* ─────────────────────────────────────────────
   3. REVEAL ON SCROLL
   Elements start invisible + shifted down;
   .vis is added by mrsgren-ui.js when they
   enter the viewport.
   ───────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity  .8s cubic-bezier(.16, 1, .3, 1),
    transform .8s cubic-bezier(.16, 1, .3, 1);
}
.reveal.vis {
  opacity: 1;
  transform: translateY(0);
}

/* ─────────────────────────────────────────────
   4. RESPONSIVE
   ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .scroll-prog  { left: .75rem; height: 35vh; }
  .sp-dot       { width: 12px; height: 12px;  }
  .sp-fixed-dot { width: 7px;  height: 7px;   }
}
@media (max-width: 480px) {
  .scroll-prog { left: .5rem; }
}