/* =============================================================
   ANALOG REALISM — alive layer
   Adds two things, non-invasively:
     1. Hue-drift glow on the live Buy buttons
        Targets:  .btn-primary[data-buy-placeholder]   (main page hero)
                  .btn-price[data-buy-placeholder]     (products page)
        Cycle: 2.8s ease-in-out, copper ↔ ice-blue + cool halo.
     2. Electric discharge canvas + subtle blueprint grid in the
        header / hero area of every page. JS in alive.js auto-finds
        the right host section(s) per page and decorates them.
   No HTML changes. No content changes. Just two includes per page.
   ============================================================= */

/* ── Alive header / hero — discharge canvas overlay ─────────── */
.alive-host {
  /* Just ensure the host is a positioning context. The host's existing
     overflow/isolation/etc. from style.css are preserved untouched.
     CRITICAL: we do NOT override .ambient or .hero-side positioning here
     — they need to stay position:absolute so their inset:0 sizing works.
     The blob layer is positioned absolute z-index:0; the canvas sits at
     z-index:1 with mix-blend-mode:screen so its transparent pixels do
     not occlude the ambient blobs underneath. */
  position: relative;
}

/* Subtle blueprint grid for sections that don't already have one
   (everything except .hero.blueprint on the main page). Matches the
   main page's blueprint grid intensity / mask exactly so the visual
   weight is consistent across the site. */
.alive-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(to right,  rgba(109, 211, 255, 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(109, 211, 255, 0.045) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image:         radial-gradient(ellipse at center, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}

.alive-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  /* No mix-blend-mode — the arc colors (bright cyan / white core)
     are already bright enough on dark backdrops, and avoiding blend
     keeps the canvas layer purely additive on transparent pixels
     without any risk of interfering with the .ambient blobs'
     screen-blended halos below. */
}

/* Lift the section's content container above the canvas/grid layers
   so flashes never paint over text. We use position: relative + a
   z-index higher than .alive-canvas (1). Position: relative without
   offsets has no layout impact. */
.alive-host > .container {
  position: relative;
  z-index: 5;
}

/* ── Buy buttons — hue drift + cool halo, always on ───────────
   Selector intentionally uses [data-buy-placeholder] so the alive
   treatment only applies once Paddle has wired the button up — exactly
   the buttons the user wants highlighted. Cycle is the same 2.8s curve
   on both — visually consistent across the two pages. */

@keyframes alive-buy-face {
  0%, 100% {
    background-color: var(--accent);
    border-color: var(--accent);
  }
  50% {
    background-color: oklch(0.78 0.12 230);
    border-color: oklch(0.78 0.12 230);
  }
}
@keyframes alive-buy-halo {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(109, 211, 255, 0);
  }
  50% {
    box-shadow:
      0 0 30px 3px  rgba(109, 211, 255, 0.35),
      0 0 64px 14px rgba(109, 211, 255, 0.18);
  }
}

.btn.btn-primary[data-buy-placeholder],
.btn-price[data-buy-placeholder] {
  animation:
    alive-buy-face 2.8s cubic-bezier(0.4, 0, 0.6, 1) infinite,
    alive-buy-halo 2.8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  /* Animations win the cascade against the static hover background
     while running, so the button remains alive even on hover. The
     hover .arrow translate (from base styles) still fires. */
}

@media (prefers-reduced-motion: reduce) {
  .alive-canvas { display: none; }
  .btn.btn-primary[data-buy-placeholder],
  .btn-price[data-buy-placeholder] {
    animation: none;
  }
}