/* ────────────────────────────────────────────────────────────────────────
   Fish scales — sitewide ambient layer.
   36 scales drift slowly across the viewport, each with a randomized hue
   cast (warm/cool), an independent shimmer cycle, and an occasional
   specular glint. Cursor warps the field gently.

   z-index plumbing: body bg made transparent so the layer (fixed, z-index
   -1) sits between html bg and body content. Each scale composes three
   transforms — outer = mouse pull, middle = drift orbit, inner = glint —
   so they don't overwrite each other.
   ──────────────────────────────────────────────────────────────────────── */

body { background: transparent !important; }
html { background: var(--bg-canvas, #F6F7FA); }

.fish-scales-layer {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  --mx: 0;
  --my: 0;
}

/* OUTER — base position + mouse pull */
.fs-scale {
  position: absolute;
  left: var(--bx, 50vw);
  top: var(--by, 50vh);
  width: var(--size, 14px);
  aspect-ratio: 1 / 1.25;
  opacity: var(--opacity, 0.4);
  transform: translate(
    calc(var(--mx) * var(--mouse-pull, 8px)),
    calc(var(--my) * var(--mouse-pull-y, 6px))
  );
  transition: transform 900ms cubic-bezier(.44, 0, .56, 1);
  filter: hue-rotate(calc(var(--hue, 0) * 1deg));
}

/* MIDDLE — drift orbit + scale shape + iridescent base */
.fs-drift {
  width: 100%;
  height: 100%;
  position: relative;
  /* Fish-scale silhouette: rounded top, slight point at the bottom */
  border-radius: 50% 50% 50% 50% / 65% 65% 35% 35%;
  background:
    /* Top-left specular highlight (gives the 3D belly look) */
    radial-gradient(
      ellipse 50% 35% at 30% 22%,
      rgba(255, 255, 255, 0.65) 0%,
      rgba(255, 255, 255, 0.10) 40%,
      transparent 70%
    ),
    /* Iridescent gradient — pale seafoam over deep seafoam, with a coral lift */
    linear-gradient(
      135deg,
      rgba(155, 208, 194, 0.85) 0%,
      rgba(31, 122, 110, 0.75) 55%,
      rgba(232, 162, 148, 0.45) 100%
    );
  /* Soft outline + inner-rim shadow so each scale has edge definition */
  box-shadow:
    inset 0 -1px 1px rgba(15, 26, 24, 0.12),
    inset 1px 1px 1px rgba(255, 255, 255, 0.35),
    0 1px 2px rgba(31, 122, 110, 0.08);
  animation: fs-drift var(--dur, 16s) ease-in-out var(--delay, 0s) infinite;
  will-change: transform;
}

/* INNER — the glint, a brief specular sweep that travels across the scale */
.fs-glint {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 30%,
    rgba(255, 255, 255, 0.85) 47%,
    rgba(255, 240, 220, 0.55) 50%,
    rgba(255, 255, 255, 0.85) 53%,
    transparent 70%
  );
  background-size: 280% 280%;
  background-position: -200% -100%;
  opacity: 0;
  mix-blend-mode: screen;
  animation: fs-glint var(--gdur, 18s) ease-out var(--gdelay, 0s) infinite;
  will-change: background-position, opacity;
}

/* Drift — slow elliptical orbit. Each scale gets randomized dx/dy + duration. */
@keyframes fs-drift {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25%      { transform: translate(var(--dx, 10px), var(--dy, -8px)) rotate(2.5deg); }
  50%      { transform: translate(calc(var(--dx, 10px) * 0.4), calc(var(--dy, -8px) * 1.6)) rotate(0deg); }
  75%      { transform: translate(calc(var(--dx, 10px) * -1), var(--dy, -8px)) rotate(-2.5deg); }
}

/* Glint — most of the cycle is invisible (90% of duration). The flash
   spans ~8% of the cycle: position sweeps from off-left to off-right
   while opacity rises and falls. */
@keyframes fs-glint {
  0%, 88%   { background-position: -200% -100%; opacity: 0; }
  91%       { background-position: -50% 0%;     opacity: 0.95; }
  94%       { background-position: 100% 80%;    opacity: 0.7; }
  97%, 100% { background-position: 250% 150%;   opacity: 0; }
}

/* Reduced motion: stop drift + glint, hold scales at their rest position
   with no shimmer. Still visible, just static. */
@media (prefers-reduced-motion: reduce) {
  .fs-drift, .fs-glint { animation: none; }
  .fs-glint { opacity: 0; }
  .fs-scale { transition: none; }
}

/* On dark sections (Build / Ride shotgun / Teach engagement blocks, the
   Debug page itself), the scales should brighten slightly — they read as
   underwater reflections rather than washing out. */
.fs-scale.fs-on-dark {
  --opacity: calc(var(--opacity-base, 0.4) * 1.2);
  mix-blend-mode: screen;
}