/* ============================================================================
   AMP · OVERNIGHT LIFE BOOSTER · 2026-05-19
   Chairman directive: "Liveliness of the site can be tweaked to more rate of
   life in every element of every page. Numbers are moving. Animation is there.
   KPI metrics are rotating. Make every page feel ALIVE."

   Layered ON TOP of /assets/life/amp-life.css. Targets sub-pages only.
   Honors prefers-reduced-motion. CLS-safe. CSS-only or rAF-driven.
   ============================================================================ */

/* ─────────────────────── 1. Sticky scroll-progress bar ──────────────────── */
.amp-onl-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg,
              rgba(201,168,76,0.30) 0%,
              rgba(242,184,69,0.95) 50%,
              rgba(255,213,107,0.40) 100%);
  z-index: 9998;
  pointer-events: none;
  transition: width 60ms linear;
  will-change: width;
  box-shadow: 0 0 8px rgba(242,184,69,0.45);
}

/* ─────────────────────── 2. Operating live dot (nav corner) ─────────────── */
.amp-onl-live-dot {
  position: fixed;
  top: 14px;
  right: 14px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #34D399;
  z-index: 9999;
  pointer-events: none;
  box-shadow: 0 0 10px rgba(52,211,153,0.7), 0 0 2px #34D399;
  animation: amp-onl-pulse 2.4s ease-in-out infinite;
  will-change: opacity, transform;
}
.amp-onl-live-dot::after {
  content: "LIVE";
  position: absolute;
  right: 14px;
  top: -3px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.14em;
  color: rgba(52,211,153,0.88);
  font-weight: 500;
}
@keyframes amp-onl-pulse {
  0%, 100% { opacity: 0.9; transform: scale(1); box-shadow: 0 0 10px rgba(52,211,153,0.7), 0 0 2px #34D399; }
  50%      { opacity: 1;   transform: scale(1.18); box-shadow: 0 0 16px rgba(52,211,153,0.95), 0 0 4px #34D399; }
}

/* ─────────────────────── 3. Count-up wrap (CLS-safe) ────────────────────── */
.amp-onl-count {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  min-width: 1ch;
  transition: color 360ms ease;
}
.amp-onl-count.is-counting {
  color: var(--c-gold-2, #F2B845);
}
.amp-onl-count.is-done {
  /* settle back to original inherited color via removal of is-counting */
}

/* ─────────────────────── 4. Hover-lift for cards & feature blocks ───────── */
.amp-onl-hover-lift {
  transition: transform 240ms cubic-bezier(.2,.7,.2,1),
              box-shadow 240ms cubic-bezier(.2,.7,.2,1),
              border-color 240ms ease;
  will-change: transform;
}
.amp-onl-hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(0,0,0,0.40), 0 0 0 1px rgba(201,168,76,0.42);
  border-color: rgba(242,184,69,0.55) !important;
}

/* ─────────────────────── 5. Section eyebrow gradient sweep on enter ─────── */
.amp-onl-eyebrow {
  position: relative;
  display: inline-block;
  overflow: hidden;
}
.amp-onl-eyebrow::before {
  content: "";
  position: absolute;
  top: 0; left: -120%;
  width: 80%; height: 100%;
  background: linear-gradient(90deg,
              transparent 0%,
              rgba(242,184,69,0.45) 50%,
              transparent 100%);
  transition: left 0ms;
  pointer-events: none;
}
.amp-onl-eyebrow.is-revealed::before {
  animation: amp-onl-eyebrow-sweep 1400ms cubic-bezier(.2,.7,.2,1) 200ms both;
}
@keyframes amp-onl-eyebrow-sweep {
  0%   { left: -120%; }
  100% { left: 120%; }
}

/* ─────────────────────── 6. Date-fragment fade-in on viewport ───────────── */
.amp-onl-date {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 720ms cubic-bezier(.2,.7,.2,1),
              transform 720ms cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
.amp-onl-date.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ─────────────────────── 7. Ambient hero gradient pulse ─────────────────── */
.amp-hero {
  position: relative;
}
.amp-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%,
              rgba(242,184,69,0.06) 0%,
              transparent 65%);
  opacity: 0;
  animation: amp-onl-hero-breathe 18s ease-in-out 1.2s infinite;
  z-index: 1;
  will-change: opacity, transform;
}
@keyframes amp-onl-hero-breathe {
  0%, 100% { opacity: 0.0;  transform: scale(0.98); }
  50%      { opacity: 0.85; transform: scale(1.03); }
}

/* ─────────────────────── 8. Number tick glow when counting ──────────────── */
.amp-onl-count.is-counting {
  text-shadow: 0 0 12px rgba(242,184,69,0.45);
}

/* ─────────────────────── 9. Subtle feature-card border breathe ──────────── */
.amp-card.amp-onl-breathe {
  animation: amp-onl-card-breathe 6s ease-in-out infinite;
  will-change: border-color, box-shadow;
}
@keyframes amp-onl-card-breathe {
  0%, 100% { border-color: rgba(255,255,255,0.08); box-shadow: 0 0 0 0 rgba(201,168,76,0.0); }
  50%      { border-color: rgba(201,168,76,0.22); box-shadow: 0 0 16px 0 rgba(201,168,76,0.10); }
}

/* ─────────────────────── 10. KPI strip ensure visible animation ─────────── */
.amp-wow-strip .amp-wow-strip__value,
.amp-wow-strip__value {
  transition: opacity 360ms ease, transform 360ms ease;
}
.amp-wow-strip.is-rotating .amp-wow-strip__value {
  opacity: 0;
  transform: translateY(-6px);
}

/* ─────────────────────── Reduced motion: kill all motion ────────────────── */
@media (prefers-reduced-motion: reduce) {
  .amp-onl-live-dot { animation: none !important; }
  .amp-onl-eyebrow::before { display: none !important; }
  .amp-onl-date { opacity: 1 !important; transform: none !important; transition: none !important; }
  .amp-hero::after { animation: none !important; opacity: 0 !important; }
  .amp-card.amp-onl-breathe { animation: none !important; }
  .amp-onl-count.is-counting { text-shadow: none !important; color: inherit !important; }
  .amp-onl-scroll-progress { display: none !important; }
  .amp-onl-hover-lift { transition: none !important; }
  .amp-onl-hover-lift:hover { transform: none !important; box-shadow: none !important; }
}