/* ============================================================
   Motion + atmosphere — holographic background, entrance reveals,
   living demo card. Respects prefers-reduced-motion.
   ============================================================ */

/* ---- Holographic background on the hero (drifting glow pools + grain) ---- */
.hero::before {
  content: ''; position: absolute; inset: -25% -12%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(32% 30% at 82% 10%, rgba(200,153,104,.42), transparent 70%),
    radial-gradient(40% 34% at 10% 90%, rgba(127,200,160,.30), transparent 72%),
    radial-gradient(48% 42% at 56% 52%, rgba(46,109,99,.44), transparent 78%);
  filter: blur(6px);
  animation: hg-drift 20s ease-in-out infinite alternate;
}
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero-inner { position: relative; z-index: 1; }
@keyframes hg-drift { from { transform: translate3d(-2%,-1%,0) scale(1); } to { transform: translate3d(3%,2%,0) scale(1.1); } }

/* ---- Entrance reveal (hero, on load — staggered) ---- */
@media (prefers-reduced-motion: no-preference) {
  .hero-eyebrow, .hero h1, .hero .lede, .hero-cta, .hero-meta, .hero-demo {
    opacity: 0; animation: rise .9s cubic-bezier(.22,.61,.36,1) forwards;
  }
  .hero-eyebrow { animation-delay: .05s; }
  .hero h1      { animation-delay: .15s; }
  .hero .lede   { animation-delay: .30s; }
  .hero-cta     { animation-delay: .44s; }
  .hero-meta    { animation-delay: .56s; }
  .hero-demo    { animation-delay: .50s; }
}
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ---- Living demo card (floats; steps tick via JS) ---- */
.demo-card { animation: hg-float 6.5s ease-in-out infinite; }
@keyframes hg-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.dc-step { opacity: .5; transition: opacity .35s; }
.dc-step.run, .dc-step.done { opacity: 1; }
.dc-step .ck { background: #fff; border: 2px solid #d9d4c6; color: transparent; }
.dc-step.done .ck { background: var(--brand-teal); border-color: var(--brand-teal); color: #fff; }
.dc-step.run .ck { position: relative; }
.dc-step.run .ck::after { content: ''; position: absolute; inset: 1px; border-radius: 50%; border: 2px solid #d9d4c6; border-top-color: var(--brand-teal); animation: hg-spin .7s linear infinite; }
@keyframes hg-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .hero::before, .demo-card { animation: none; }
}

/* ---- Hero FX: particle constellation canvas + cursor spotlight ---- */
.hero-fx { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-spot {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .45s;
  background: radial-gradient(300px 300px at var(--mx,50%) var(--my,40%), rgba(200,153,104,.18), transparent 68%);
}
.hero-spot.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hero-fx, .hero-spot { display: none; } }