/* ============================================================
   GDXT motion layer — circuit/robotics themed micro-interactions
   ============================================================ */

/* ---------- 1. Scroll reveal ---------- */
.reveal-init{ opacity: 0; transform: translateY(22px); }
.reveal-in{
  opacity: 1; transform: translateY(0);
  transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1);
}

/* ---------- 2. Header: powers up a shadow/blur once you scroll ---------- */
.site-header::before{ transition: background .25s ease; }
.site-header{ transition: box-shadow .25s ease; }
.site-header.scrolled::before{
  background: rgba(6, 13, 28, 0.97);
}
.site-header.scrolled{
  box-shadow: 0 12px 28px -16px rgba(0,0,0,0.65);
}

/* ---------- 3. Nav link "trace" underline on hover ---------- */
.main-nav a{ position: relative; }
.main-nav a::before{
  content: ""; position: absolute; left: 0; bottom: -8px; height: 2px; width: 0;
  background: var(--gold); border-radius: 2px;
  transition: width .28s cubic-bezier(.3,.6,.3,1);
}
.main-nav a:hover::before{ width: 100%; }
.main-nav a.active::before{ width: 0; } /* active state already uses its own underline */

/* ---------- 4. Hero heading boot-flicker (circuit power-on, not aerospace HUD) ---------- */
@keyframes flicker-in{
  0%   { opacity: 0; filter: blur(6px); }
  12%  { opacity: .35; }
  22%  { opacity: .08; }
  34%  { opacity: .65; filter: blur(2px); }
  48%  { opacity: .2; }
  62%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; }
}
.hero h1{ animation: flicker-in 1s ease-out both; }

/* ---------- 5. Sensor LED pulse (hero circuit-bot indicator dots) ---------- */
@keyframes sensor-pulse{
  0%, 100% { opacity: .55; filter: drop-shadow(0 0 0 rgba(34,217,138,0)); }
  50%      { opacity: 1;   filter: drop-shadow(0 0 5px rgba(34,217,138,.85)); }
}
.pulse-node{ animation: sensor-pulse 2.1s ease-in-out infinite; transform-origin: center; }

/* ---------- 6. Slow orbit ring beneath the hero rover ---------- */
@keyframes ring-drift{
  0%, 100% { transform: translateX(-50%) scaleX(1); opacity: .55; }
  50%      { transform: translateX(-50%) scaleX(1.04); opacity: .85; }
}
.hero-art-ring{ animation: ring-drift 4.5s ease-in-out infinite; }

/* ---------- 7. Card tilt (transform is applied via JS; this just smooths it) ---------- */
.tilt-card{ transition: transform .25s ease, box-shadow .25s ease; will-change: transform; }
.tilt-card:hover{ box-shadow: 0 20px 44px -18px rgba(0,0,0,0.55); }

/* ---------- 8. Circuit-trace border sweep (CTA banner / price box) ---------- */
@property --trace-angle{ syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.trace-border{ position: relative; isolation: isolate; }
.trace-border::before{
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px;
  background: conic-gradient(from var(--trace-angle), transparent 0 78%, var(--gold) 90%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .35s ease;
  animation: trace-spin 3.2s linear infinite paused;
  pointer-events: none; z-index: -1;
}
.trace-border:hover::before{ opacity: 1; animation-play-state: running; }
@keyframes trace-spin{ to{ --trace-angle: 360deg; } }

/* ---------- 9. Magnetic buttons + gooey fill on gold CTAs ---------- */
.btn{ transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.btn-gold{ position: relative; overflow: hidden; z-index: 0; }
.btn-gold::after{
  content: ""; position: absolute; left: var(--fx, 50%); top: var(--fy, 50%);
  width: 0; height: 0; background: rgba(255,255,255,0.32); border-radius: 50%;
  transform: translate(-50%,-50%); transition: width .5s ease, height .5s ease; z-index: -1;
}
.btn-gold:hover::after{ width: 260px; height: 260px; }

/* ---------- 10. Checklist ticks power on one by one ---------- */
.tick-pop{ animation: tick-pop .38s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes tick-pop{
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.2); }
  100% { transform: scale(1); opacity: 1; }
}

/* ---------- 11. Live status dot on community avatars ---------- */
.avatar-live{ position: relative; }
.avatar-live::after{
  content: ""; position: absolute; right: -2px; bottom: -2px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--robotics); border: 2px solid var(--bg-card);
  animation: live-ping 1.9s ease-in-out infinite;
}
@keyframes live-ping{
  0%, 100% { box-shadow: 0 0 0 0 rgba(34,217,138,.5); }
  50%      { box-shadow: 0 0 0 5px rgba(34,217,138,0); }
}

/* ---------- 12. Top scroll-progress trace ---------- */
#scroll-progress{
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--iot), var(--embedded), var(--robotics));
  z-index: 999; transition: width .1s linear;
}

/* ---------- reduced motion: kill everything decorative ---------- */
@media (prefers-reduced-motion: reduce){
  .reveal-init{ opacity: 1; transform: none; }
  .hero h1{ animation: none; }
  .pulse-node, .hero-art-ring, .trace-border::before, .avatar-live::after{ animation: none !important; }
  .tilt-card:hover{ transform: none !important; }
}