/**
 * team.contactgain.xyz/assets/css/epic-hero.css
 * Additive motion/illustration layer for the PUBLIC landing page only
 * (index.php). Loaded after pr-theme.css and inherits its color tokens —
 * doesn't redefine or override anything there, so it can be removed by
 * deleting one <link> tag with zero risk to the rest of the PR section.
 *
 * No external images/video/motion-graphic assets — everything here is
 * pure CSS (gradients, transforms, keyframes) or inline SVG, built to
 * read as "official product" rather than a stock-asset landing page.
 *
 * Pieces:
 *  1. .pr-hero-epic   — animated mesh-gradient backdrop, slow drifting glow
 *  2. .pr-network      — inline SVG node/line illustration (referral graph)
 *  3. .pr-activity      — "live" chat-style activity ticker (illustrative,
 *                          clearly labeled as sample, not real-time data)
 *  4. .pr-reveal        — scroll-triggered fade/rise, driven by a tiny JS
 *                          IntersectionObserver snippet in index.php
 *  5. Card hover-lift / count-up support (count-up itself is JS; this file
 *     just makes the transition smooth)
 */

.pr-hero-epic {
  position: relative;
  overflow: hidden;
}
.pr-hero-epic::before,
.pr-hero-epic::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .35;
  pointer-events: none;
  z-index: 0;
}
.pr-hero-epic::before {
  width: 480px; height: 480px;
  top: -180px; left: -120px;
  background: radial-gradient(circle, var(--pr-primary-light), transparent 70%);
  animation: pr-drift-a 16s ease-in-out infinite;
}
.pr-hero-epic::after {
  width: 420px; height: 420px;
  bottom: -200px; right: -100px;
  background: radial-gradient(circle, var(--pr-gold), transparent 70%);
  opacity: .18;
  animation: pr-drift-b 20s ease-in-out infinite;
}
@keyframes pr-drift-a {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(40px, 30px) scale(1.08); }
}
@keyframes pr-drift-b {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-30px, -25px) scale(1.1); }
}
.pr-hero-epic > .container { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .pr-hero-epic::before, .pr-hero-epic::after { animation: none; }
}

.pr-network {
  width: 100%;
  height: auto;
  overflow: visible;
}
.pr-network .pr-node {
  fill: var(--pr-primary);
  filter: drop-shadow(0 0 0 rgba(22,163,74,0));
  animation: pr-pulse 2.6s ease-in-out infinite;
}
.pr-network .pr-node--you {
  fill: var(--pr-gold);
  animation-duration: 2.2s;
}
.pr-network .pr-node--n1 { animation-delay: .3s; }
.pr-network .pr-node--n2 { animation-delay: .6s; }
.pr-network .pr-node--n3 { animation-delay: .9s; }
.pr-network .pr-node--n4 { animation-delay: 1.2s; }
.pr-network .pr-node--n5 { animation-delay: 1.5s; }
@keyframes pr-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.25); opacity: .75; }
}
.pr-network .pr-link {
  stroke: var(--pr-line);
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
  animation: pr-flow 3s linear infinite;
}
@keyframes pr-flow {
  to { stroke-dashoffset: -16; }
}
.pr-network .pr-coin {
  fill: var(--pr-gold);
  animation: pr-travel var(--dur, 3.4s) linear infinite;
  animation-delay: var(--delay, 0s);
  offset-rotate: 0deg;
}
@keyframes pr-travel {
  0%   { offset-distance: 0%;   opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pr-network .pr-node, .pr-network .pr-link, .pr-network .pr-coin { animation: none; }
}

.pr-activity {
  background: #fff;
  border: 1px solid var(--pr-line);
  border-radius: 16px;
  box-shadow: var(--pr-shadow);
  overflow: hidden;
}
.pr-activity__head {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--pr-line);
  background: var(--pr-paper);
}
.pr-activity__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--pr-primary);
  box-shadow: 0 0 0 rgba(22,163,74,.5);
  animation: pr-live-dot 1.8s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes pr-live-dot {
  0%   { box-shadow: 0 0 0 0 rgba(22,163,74,.45); }
  70%  { box-shadow: 0 0 0 8px rgba(22,163,74,0); }
  100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); }
}
.pr-activity__title {
  font-family: 'Sora', 'Inter', sans-serif;
  font-weight: 700;
  font-size: .82rem;
  color: var(--pr-ink);
}
.pr-activity__body {
  min-height: 190px;
  max-height: 190px;
  padding: .85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  overflow: hidden;
}
.pr-bubble {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  padding: .5rem .65rem;
  background: var(--pr-paper);
  border: 1px solid var(--pr-line);
  border-radius: 10px;
  font-size: .8rem;
  color: #2b3a32;
  opacity: 0;
  transform: translateY(6px);
  animation: pr-bubble-in .45s ease forwards;
}
.pr-bubble strong.money { color: var(--pr-gold-deep); }
.pr-bubble__icon {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #ecfdf3;
  color: var(--pr-deep);
  font-size: .68rem;
  flex-shrink: 0;
}
@keyframes pr-bubble-in {
  to { opacity: 1; transform: translateY(0); }
}
.pr-typing {
  display: inline-flex;
  gap: 3px;
  align-items: center;
  padding: .4rem .6rem;
}
.pr-typing span {
  width: 5px; height: 5px; border-radius: 50%;
  background: #9db3a6;
  animation: pr-typing-bounce 1.1s ease-in-out infinite;
}
.pr-typing span:nth-child(2) { animation-delay: .15s; }
.pr-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes pr-typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: .5; }
  30%           { transform: translateY(-4px); opacity: 1; }
}
.pr-activity__foot {
  padding: .5rem 1rem .75rem;
  font-size: .68rem;
  color: #7c8b82;
  border-top: 1px dashed var(--pr-line);
}

.pr-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
}
.pr-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .pr-reveal { opacity: 1; transform: none; transition: none; }
}

.pr-stub, .pr-scope .pr-stat-card {
  transition: transform .25s ease, box-shadow .25s ease;
}
@media (hover: hover) {
  .pr-stub:hover, .pr-scope .pr-stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 8px -2px rgba(11,31,22,.08), 0 16px 32px -14px rgba(11,31,22,.18);
  }
}
.btn-pr-primary {
  position: relative;
  overflow: hidden;
}
.btn-pr-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.28), transparent);
  transform: translateX(-120%);
  transition: transform .6s ease;
}
.btn-pr-primary:hover::after { transform: translateX(120%); }

/* 6. Dark mode
   pr-theme.css was built with the CSS custom properties (--pr-ink,
   --pr-paper, --pr-line, --pr-gold, --pr-shadow) so most of it re-themes
   automatically just by redefining those variables here. What it does NOT
   cover are the spots that were hardcoded to a literal light color instead
   of a variable (#fff card backgrounds, #f9fafb "How it works" cards, the
   #5b6b62/#7c8b82 muted grays, the SVG label fill) — those are the ones
   that were going invisible (white text landing on a background that
   never actually turned dark). Every one of those is overridden explicitly
   below, scoped to [data-theme="dark"] so light mode is untouched.
 */
[data-theme="dark"] {
  --pr-ink:          #eaf3ec;
  --pr-primary:       #22c55e;
  --pr-primary-light: #4ade80;
  --pr-deep:          #86efac;
  --pr-gold:          #fbbf24;
  --pr-gold-deep:     #fcd34d;
  --pr-paper:         #0a1f14;
  --pr-line:          #1f4430;
  --pr-shadow:        0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.5);
}

[data-theme="dark"] .pr-hero {
  background: radial-gradient(1200px 480px at 15% -10%, rgba(34,197,94,.12), transparent 60%),
              linear-gradient(180deg, #05130c, #081a11 65%);
  border-bottom-color: var(--pr-line);
}
[data-theme="dark"] .pr-eyebrow {
  background: rgba(34,197,94,.14);
  border-color: rgba(34,197,94,.3);
  color: #86efac;
}

/* Cards / stubs / activity widget — the hardcoded #fff backgrounds */
[data-theme="dark"] .pr-stub,
[data-theme="dark"] .pr-activity,
[data-theme="dark"] .pr-scope .pr-stat-card,
[data-theme="dark"] .pr-scope .pr-card,
[data-theme="dark"] .pr-surface,
[data-theme="dark"] .pr-howitworks-card,
[data-theme="dark"] .pr-scope .card {
  background: #0e2418;
  border-color: var(--pr-line);
  color: var(--pr-ink);
}
[data-theme="dark"] .pr-activity__head,
[data-theme="dark"] .pr-scope .pr-card-header {
  background: #0a1f14;
  border-color: var(--pr-line);
}
[data-theme="dark"] .pr-bubble {
  background: #0a1f14;
  border-color: var(--pr-line);
  color: #d7e6dc;
}
[data-theme="dark"] .pr-bubble__icon {
  background: rgba(34,197,94,.15);
  color: #86efac;
}
[data-theme="dark"] .pr-stub__perforation::before,
[data-theme="dark"] .pr-stub__perforation::after {
  background: #0a1f14;
  border-color: var(--pr-line);
}
[data-theme="dark"] .pr-stub--accent .pr-stub__eyebrow {
  background: linear-gradient(135deg, #0f5132, #16a34a);
}

/* Muted / caption text that was a hardcoded light-mode gray */
[data-theme="dark"] .pr-stub__caption,
[data-theme="dark"] .pr-scope .pr-stat-label,
[data-theme="dark"] .pr-activity__foot,
[data-theme="dark"] .pr-scope .table thead th {
  color: #8aa196;
}
[data-theme="dark"] .pr-scope .text-muted,
[data-theme="dark"] .pr-howitworks-card .text-muted {
  color: #9db3a6 !important;
}
[data-theme="dark"] .pr-typing span { background: #4b6155; }

/* Network illustration */
[data-theme="dark"] .pr-network-label { fill: #8aa196; }
[data-theme="dark"] .pr-network .pr-link { stroke: var(--pr-line); }

/* Estimator sliders / labels sit inside a Bootstrap card too */
[data-theme="dark"] .pr-surface .form-label,
[data-theme="dark"] .pr-surface h5,
[data-theme="dark"] .pr-surface h6 {
  color: var(--pr-ink);
}

@media (prefers-reduced-motion: no-preference) {
  [data-theme="dark"] .pr-hero-epic::before { opacity: .22; }
  [data-theme="dark"] .pr-hero-epic::after  { opacity: .12; }
}