/* ============================================================
   POUNCE — Effects: radii, easing, motion, elevation
   Motion is slow and expensive — no bounce. Corners are barely
   rounded (7px on fields/buttons); pills for chips. Depth comes
   from the plasma glow, blur and grain — not drop shadows.
   ============================================================ */

:root {
  /* ── Radii ────────────────────────────────────────────── */
  --radius-xs:   7px;
  --radius-sm:   7px;
  --radius-md:   7px;
  --radius-lg:   7px;
  --radius-pill: 7px;

  /* ── Easing ───────────────────────────────────────────── */
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);   /* @kind other */
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);    /* @kind other */
  --ease-curtain: cubic-bezier(0.165, 0.84, 0.44, 1); /* @kind other */

  /* ── Durations ────────────────────────────────────────── */
  --dur-fast:   0.3s; /* @kind other */
  --dur-med:    0.5s; /* @kind other */
  --dur-slow:   0.9s; /* @kind other */

  /* ── Elevation (used sparingly on light surfaces) ─────── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.12);
  --shadow-glow: 0 0 80px rgba(255, 106, 0, 0.35); /* tangerine plasma bloom */

  /* ── Blur (frosted header, glass fields) ──────────────── */
  --blur-glass: 14px; /* @kind other */
}

/* ============================================================
   Signature: the PLASMA volumetric glow (deep red → orange on
   black). Add .pounce-plasma to a positioned, overflow-hidden
   container. Layers drift slowly; add .pounce-grain for film noise.
   ============================================================ */
.pounce-plasma {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #000;
  isolation: isolate;
}
.pounce-plasma__layer {
  position: absolute;
  inset: -25%;
  filter: blur(60px) saturate(135%);
  will-change: transform;
}
.pounce-plasma__a {
  background:
    radial-gradient(40% 55% at 18% 32%, rgba(255,61,0,0.85) 0%, rgba(194,0,0,0.5) 35%, rgba(90,0,0,0) 70%),
    radial-gradient(50% 60% at 72% 78%, rgba(255,106,0,0.7) 0%, rgba(194,0,0,0.35) 40%, rgba(0,0,0,0) 72%);
  animation: pounce-plasma-drift 18s ease-in-out infinite;
}
.pounce-plasma__b {
  background:
    radial-gradient(35% 45% at 60% 20%, rgba(255,179,71,0.55) 0%, rgba(255,106,0,0.3) 45%, rgba(0,0,0,0) 75%),
    radial-gradient(55% 50% at 30% 85%, rgba(194,0,0,0.5) 0%, rgba(90,0,0,0) 70%);
  animation: pounce-plasma-drift-2 24s ease-in-out infinite;
}
.pounce-plasma__streak {
  position: absolute;
  inset: -30%;
  background: linear-gradient(115deg, transparent 30%, rgba(255,106,0,0.45) 47%, rgba(255,179,71,0.65) 50%, rgba(255,61,0,0.4) 53%, transparent 70%);
  filter: blur(40px);
  mix-blend-mode: screen;
  animation: pounce-plasma-drift 18s ease-in-out infinite;
}
.pounce-plasma__vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 45%, transparent 40%, rgba(0,0,0,0.85) 100%);
}
.pounce-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.09;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@keyframes pounce-plasma-drift {
  0%, 100% { transform: translate3d(0,0,0) scale(1); }
  50%      { transform: translate3d(-4%, 3%, 0) scale(1.08); }
}
@keyframes pounce-plasma-drift-2 {
  0%, 100% { transform: translate3d(0,0,0) scale(1.05); }
  50%      { transform: translate3d(5%, -4%, 0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .pounce-plasma__a, .pounce-plasma__b, .pounce-plasma__streak {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}