/* ==========================================================================
   Ambient Glimmer — shared hero motion layer
   A barely-there diagonal light sweep plus two soft, breathing radial
   pulses. Designed to loop on a ~10-second cadence so visitors catch a
   "glimpse" of motion without the layer competing with hero copy.

   Mount inside any hero's existing visual layer (landing-hero__bg or
   how-we-work__hero-visual). Sits behind the hero fade and any other
   blobs so headings stay fully legible.

   Per-page tweak knobs (set on .ambient-glimmer):
     --ambient-sweep-color : color of the sweep streak
     --ambient-pulse-a     : color of the first pulse
     --ambient-pulse-b     : color of the second pulse
     --ambient-sweep-delay : negative seconds to stagger the sweep
   ========================================================================== */

.ambient-glimmer {
  /* Brand defaults — cyan + lilac, matching the existing aurora blobs. */
  --ambient-sweep-color: rgba(255, 255, 255, 0.6);
  --ambient-pulse-a: rgba(57, 194, 216, 0.55);
  --ambient-pulse-b: rgba(160, 100, 169, 0.55);
  --ambient-sweep-delay: 0s;

  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

/* Diagonal light sweep — a soft, slanted bar of light that crosses the
   hero every 10 seconds. Wide and heavily blurred so it reads as a
   "glimpse" rather than a hard streak. */

.ambient-glimmer__sweep {
  position: absolute;
  top: -30%;
  bottom: -30%;
  left: 0;
  width: 38%;
  background: linear-gradient(
    100deg,
    transparent 0%,
    var(--ambient-sweep-color) 50%,
    transparent 100%
  );
  filter: blur(60px);
  opacity: 0;
  transform: translateX(-180%) skewX(-14deg);
  mix-blend-mode: screen;
  animation: ambient-glimmer-sweep 10s ease-in-out infinite;
  animation-delay: var(--ambient-sweep-delay);
  will-change: transform, opacity;
}

@keyframes ambient-glimmer-sweep {
  0%   { transform: translateX(-180%) skewX(-14deg); opacity: 0; }
  15%  { opacity: 0.10; }
  50%  { opacity: 0.10; }
  85%  { opacity: 0; }
  100% { transform: translateX(380%) skewX(-14deg); opacity: 0; }
}

/* Two breathing pulses — soft radial gradients that scale and dim on a
   10-second loop, staggered so the hero feels alive between sweeps. */

.ambient-glimmer__pulse {
  position: absolute;
  width: clamp(280px, 38vw, 560px);
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0;
  will-change: transform, opacity;
}

.ambient-glimmer__pulse--a {
  top: -10%;
  right: -8%;
  background: radial-gradient(
    circle,
    var(--ambient-pulse-a) 0%,
    transparent 70%
  );
  animation: ambient-glimmer-pulse-a 10s ease-in-out infinite;
}

.ambient-glimmer__pulse--b {
  bottom: -12%;
  left: -10%;
  background: radial-gradient(
    circle,
    var(--ambient-pulse-b) 0%,
    transparent 70%
  );
  animation: ambient-glimmer-pulse-b 10s ease-in-out infinite -5s;
}

@keyframes ambient-glimmer-pulse-a {
  0%, 100% { opacity: 0.06; transform: scale(1) translate(0, 0); }
  50%      { opacity: 0.12; transform: scale(1.12) translate(-3%, 4%); }
}

@keyframes ambient-glimmer-pulse-b {
  0%, 100% { opacity: 0.06; transform: scale(1) translate(0, 0); }
  50%      { opacity: 0.12; transform: scale(1.15) translate(4%, -3%); }
}

/* Per-page color tints — quietly shift the palette so each hero feels
   distinct without breaking the family resemblance. */

.ambient-glimmer--home {
  --ambient-pulse-a: rgba(57, 194, 216, 0.55);
  --ambient-pulse-b: rgba(160, 100, 169, 0.55);
}

.ambient-glimmer--proficiencies {
  --ambient-pulse-a: rgba(96, 165, 250, 0.5);
  --ambient-pulse-b: rgba(168, 85, 247, 0.5);
  --ambient-sweep-delay: -2s;
}

.ambient-glimmer--process {
  --ambient-pulse-a: rgba(45, 212, 191, 0.5);
  --ambient-pulse-b: rgba(99, 102, 241, 0.5);
  --ambient-sweep-delay: -4s;
}

.ambient-glimmer--projects {
  --ambient-pulse-a: rgba(56, 189, 248, 0.5);
  --ambient-pulse-b: rgba(217, 70, 239, 0.5);
  --ambient-sweep-delay: -6s;
}

.ambient-glimmer--professions {
  --ambient-pulse-a: rgba(244, 114, 182, 0.5);
  --ambient-pulse-b: rgba(129, 140, 248, 0.5);
  --ambient-sweep-delay: -8s;
}

/* Respect reduced motion preferences — fall back to a still tint so the
   hero doesn't read as plain colored panel either. */

@media (prefers-reduced-motion: reduce) {
  .ambient-glimmer__sweep {
    animation: none;
    opacity: 0.05;
    transform: translateX(60%) skewX(-14deg);
  }

  .ambient-glimmer__pulse {
    animation: none;
    opacity: 0.10;
  }
}