/* ==========================================================================
   Ruled Flow: a light travelling a hairline rule (footer top edge).
   After the PowerMail website's footer (itself a port of the shaders.com recipe): ONE static
   gradient on the line, revealed by a travelling mask window, which is what makes the light change
   colour along its journey; three bloom layers of the same gradient (blur 8, 20 and 40px) ride the
   same window. ruledFlow.js adds .is-play when the strip scrolls into view; the pass plays once.
   Hidden under 1024px and under prefers-reduced-motion.
   ========================================================================== */

.rflow {
  --rflow: linear-gradient(90deg, #37cdf3, #7dd3fc 40%, #818cf8 70%, #c084fc);
  --rflow-line: 1.5px;
  --rflow-cycle: 1.25s;
  --rflow-bloom: 0.28;
  position: absolute;
  pointer-events: none;
  overflow: hidden;
  z-index: 5;
  isolation: isolate;
  display: none;
}
html.dark .rflow { --rflow-bloom: 0.2; }

@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .rflow { display: block; }
}

/* Anchored at 0, not -1px: the container clips its overflow, and at -1px the line would sit in the clipped row. */
.rflow--h { left: 0; right: 0; top: 0; height: 80px; }

.rflow__bloom-group { position: absolute; inset: 0; opacity: var(--rflow-bloom); }

.rflow__line,
.rflow__bloom {
  position: absolute;
  inset: 0;
  background: var(--rflow);
  mask-repeat: no-repeat, no-repeat;
  mask-composite: intersect;
  -webkit-mask-composite: source-in;
  opacity: 0;
}
.rflow--h .rflow__line { height: var(--rflow-line); bottom: auto; }

/* Two masks, intersected: the travelling window (38% wide) and a static edge fade. */
.rflow--h .rflow__line {
  mask-image: linear-gradient(90deg, transparent, #000 35%, #000 65%, transparent),
              linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
  mask-size: 38% 100%, 100% 100%;
  mask-position: -80% 0, 0 0;
}
.rflow--h .rflow__bloom {
  mask-image: radial-gradient(50% 100% at 50% 4%, #000 15%, transparent 100%),
              linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
  mask-position: -80% 0, 0 0;
}
.rflow--h .rflow__bloom--near { mask-size: 22% 35%, 100% 100%; filter: blur(8px) saturate(0.9); }
.rflow--h .rflow__bloom--mid  { mask-size: 32% 55%, 100% 100%; filter: blur(20px) saturate(0.9); }
.rflow--h .rflow__bloom--far  { mask-size: 48% 90%, 100% 100%; filter: blur(40px) saturate(0.9); }

/* One linear pass; opacity ramps in and out over the first and last 14% of the moving window. */
.rflow.is-play .rflow__line,
.rflow.is-play .rflow__bloom { animation: rflow-h var(--rflow-cycle) linear 1 both; }

@keyframes rflow-h {
  0% { mask-position: -80% 0, 0 0; opacity: 0; }
  14%, 86% { opacity: 1; }
  100% { mask-position: 180% 0, 0 0; opacity: 0; }
}