/* Bingi redesign (2026-08) — shared atmosphere + motion.
   Spec: docs/design/redesign-2026-08/README.md. Loaded by every marketing page
   after /assets/tokens.css. Page-specific section CSS stays inline per page. */

:root {
  /* Violet ambient bloom, resolved at the production glow multiplier (1.6):
     0.20 × 1.6 = .32, 0.30 × 1.6 = .48. Site-only — deliberately NOT in the
     token pipeline (the app doesn't use them). */
  --bg-haze: rgba(124, 108, 255, .32);
  --bg-haze-strong: rgba(124, 108, 255, .48);
  /* Redesign page surfaces (marketing pages only; in-app keeps --bg). */
  --page-base: #07060f;
  --section-wash: linear-gradient(180deg, #07060f, #0b0819 50%, #07060f);
  --card-fill: linear-gradient(168deg, #0e0b1c, #08060f 74%);
}

body { background: var(--page-base); }

/* Gradient text on exactly one phrase per headline. */
h1 em, h2 em {
  font-style: normal;
  background: linear-gradient(100deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------------------------------------------------------------------------
   Motion keyframes (names + timings are the handoff's motion table)
--------------------------------------------------------------------------- */

@keyframes bg-hover { 0%, 100% { transform: translateY(-7px) } 50% { transform: translateY(6px) } }
@keyframes bg-orbit { 0% { transform: translate(0, 0) } 25% { transform: translate(-16px, -12px) } 50% { transform: translate(6px, 10px) } 75% { transform: translate(14px, -8px) } 100% { transform: translate(0, 0) } }
@keyframes bg-pulse { 0%, 100% { opacity: .5; transform: scale(.9) } 45% { opacity: 1; transform: scale(1.12) } }
@keyframes bg-wing { 0%, 100% { transform: rotate(-15deg) } 50% { transform: rotate(-30deg) } }
@keyframes bg-wing-r { 0%, 100% { transform: rotate(15deg) } 50% { transform: rotate(30deg) } }
@keyframes bg-marquee { 0% { transform: translateX(0) } 100% { transform: translateX(-50%) } }
@keyframes bg-scan { 0% { transform: translateY(-8%) } 100% { transform: translateY(108%) } }
@keyframes bg-spin { 0% { transform: rotate(0) } 100% { transform: rotate(360deg) } }
@keyframes bg-spin-rev { 0% { transform: translate(-50%, -50%) rotate(0) } 100% { transform: translate(-50%, -50%) rotate(-360deg) } }
@keyframes bg-spin-rev-i { 0% { transform: translate(-50%, -50%) rotate(0) } 100% { transform: translate(-50%, -50%) rotate(360deg) } }
@keyframes bg-trail { 0% { stroke-dashoffset: 0 } 100% { stroke-dashoffset: -64 } }

/* ---------------------------------------------------------------------------
   Bingi the firefly — containers get their SVG injected by motion.js.
   Position/size each instance with inline style or page CSS; she is always
   decorative: pointer-events none everywhere.
--------------------------------------------------------------------------- */

[data-firefly] { pointer-events: none; animation: bg-orbit 13s ease-in-out infinite; }
[data-firefly="hover"] { animation: bg-hover 7s ease-in-out infinite; }
[data-firefly] .ff-glow {
  position: absolute; border-radius: 50%;
  animation: bg-pulse 4.2s ease-in-out infinite;
}
[data-firefly] svg { position: relative; width: 100%; height: 100%; overflow: visible; }
[data-firefly] .ff-wing-l { transform-origin: 34px 44px; animation: bg-wing 300ms ease-in-out infinite; }
[data-firefly] .ff-wing-r { transform-origin: 66px 44px; animation: bg-wing-r 300ms ease-in-out infinite; }

/* ---------------------------------------------------------------------------
   Reduced motion: kill all animation; motion.js reveals immediately.
--------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; }
}