/* ═══════════════════════════════════════════════════════
   ORGANISM SUBSTRATE — global ambient layer for Ghost
   Matches the app.protocols.is (Next.js / R3F) organism
   at a CSS-approximation level. Pure CSS, zero library.

   Layers (back → front):
     1. Lava-lamp drift — slow radial-gradient flow
     2. Scan sweep — horizontal pulse every ~10s
     3. Noise overlay — fine fractal grain
     4. Cursor aura — emerald glow follows pointer

   Content wrapper (.gh-viewport) sits at z-index:1 so
   all four layers render behind. Everything is fixed,
   aria-hidden, pointer-events: none.
   ═══════════════════════════════════════════════════════ */

:root {
  --org-cursor-x: 50%;
  --org-cursor-y: 50%;
}

/* ─── Keyframes ──────────────────────────────────────── */

@keyframes org-lamp-drift {
  0%   { transform: translate(0%, 0%)   scale(1);    }
  33%  { transform: translate(-6%, 4%)  scale(1.04); }
  66%  { transform: translate(5%, -3%)  scale(0.96); }
  100% { transform: translate(0%, 0%)   scale(1);    }
}

@keyframes org-scan-sweep {
  0%   { transform: translateY(-16vh); opacity: 0;   }
  8%   { opacity: 0.7; }
  92%  { opacity: 0.7; }
  100% { transform: translateY(110vh); opacity: 0;   }
}

@keyframes org-ripple {
  0%   { width: 0;     height: 0;     opacity: 0.85; border-width: 1.5px; }
  60%  { opacity: 0.35; border-width: 1px; }
  100% { width: 320px; height: 320px; opacity: 0; border-width: 0.5px; }
}

/* ─── Substrate stack ────────────────────────────────── */

.org-substrate {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.org-substrate__lamp {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(ellipse 45% 35% at 25% 30%, rgba(16,185,129,0.07), transparent 62%),
    radial-gradient(ellipse 40% 30% at 72% 58%, rgba(16,185,129,0.05), transparent 62%),
    radial-gradient(ellipse 35% 25% at 48% 82%, rgba(59,130,246,0.035), transparent 62%);
  animation: org-lamp-drift 45s ease-in-out infinite;
  filter: blur(48px);
}

.org-substrate__scan {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 16vh;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(16,185,129,0.05) 45%,
    rgba(59,130,246,0.03) 55%,
    transparent 100%
  );
  animation: org-scan-sweep 10s linear infinite;
  will-change: transform, opacity;
}

.org-substrate__noise {
  position: absolute;
  inset: 0;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 128px;
}

.org-substrate__cursor-aura {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 340px 280px at var(--org-cursor-x) var(--org-cursor-y),
    rgba(16,185,129,0.045),
    transparent 65%
  );
  /* Removed mix-blend-mode: screen — was lighting up against scrolling
     content (text + cards passing underneath added local contrast that
     made the aura read as flickering). Alpha dropped 0.10 → 0.045 +
     ellipse shrunk so the aura stays a calm follow-glow. */
  transition: background 220ms ease-out;
}

/* ─── Content layer above substrate ──────────────────── */

.gh-viewport {
  position: relative;
  z-index: 1;
}

/* ─── Click ripple ───────────────────────────────────── */

.org-ripple {
  position: fixed;
  pointer-events: none;
  width: 0;
  height: 0;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 1.5px solid rgba(16,185,129,0.6);
  box-shadow: 0 0 24px rgba(16,185,129,0.25);
  animation: org-ripple 900ms cubic-bezier(.16,1,.3,1) forwards;
  z-index: 9997;
}

/* ─── Magnetic card utility — apply with data-magnetic ─ */

[data-magnetic] {
  transform-style: preserve-3d;
  transition: transform 420ms cubic-bezier(.16,1,.3,1);
  will-change: transform;
}

/* ─── Reduced motion — substrate freezes, no ripple, no
   cursor aura animation. Layout unchanged so nothing breaks. */

@media (prefers-reduced-motion: reduce) {
  .org-substrate__lamp,
  .org-substrate__scan {
    animation: none;
  }
  .org-substrate__cursor-aura {
    transition: none;
    background: radial-gradient(ellipse 420px 340px at 50% 50%, rgba(16,185,129,0.06), transparent 62%);
  }
  .org-ripple {
    display: none;
  }
  [data-magnetic] {
    transition: none;
  }
}