/* ============================================================
   Hypomeister — motion & enhancement layer
   ============================================================ */

/* ---------- Scroll progress bar ---------- */
#scroll-bar {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 300;
  background: linear-gradient(90deg, var(--primary), var(--cyan), var(--green));
  transform-origin: left center; transform: scaleX(0);
}

/* ---------- Cursor glow ---------- */
#cursor-glow {
  position: fixed; width: 480px; height: 480px; border-radius: 50%;
  pointer-events: none; z-index: 0;
  background: radial-gradient(circle, rgba(59,130,246,0.08) 0%, transparent 65%);
  top: 0; left: 0; will-change: transform;
  transform: translate(-50%, -50%);
}

/* ---------- Grain overlay ---------- */
#grain-svg {
  position: fixed; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 2; opacity: 0.038;
}

/* ---------- Hero copy stagger ---------- */
html.anim .hero .copy .eyebrow.reveal { transition-delay: 0ms; }

html.anim .hero .copy h1.reveal {
  clip-path: inset(0 0 110% 0);
  opacity: 1 !important;
  transform: none !important;
  transition: clip-path .95s var(--ease) !important;
  transition-delay: 160ms !important;
}
html.anim .hero .copy h1.reveal.in { clip-path: inset(0 0 0% 0); }

html.anim .hero .copy .lede.reveal   { transition-delay: 390ms; }
html.anim .hero .copy .capture.reveal { transition-delay: 530ms; }

/* ---------- Grad text shimmer ---------- */
html.anim .grad {
  background-size: 250% auto;
  animation: shimmer-grad 6s linear infinite;
}
@keyframes shimmer-grad {
  0%   { background-position: 0% center; }
  100% { background-position: 250% center; }
}

/* ---------- Chip float ---------- */
@keyframes float-a { 0%,100% { translate: 0 0px; } 50% { translate: 0 -9px; } }
@keyframes float-b { 0%,100% { translate: 0 0px; } 50% { translate: 0  7px; } }
@keyframes float-c { 0%,100% { translate: 0 0px; } 50% { translate: 0 -6px; } }
html.anim .hero-stage .chip-1 { animation: float-a 4.4s ease-in-out          infinite; }
html.anim .hero-stage .chip-2 { animation: float-b 3.9s ease-in-out  .7s     infinite; }
html.anim .hero-stage .chip-3 { animation: float-c 5.1s ease-in-out 1.4s     infinite; }

/* ---------- Screen layer enter/exit scale ---------- */
.feat-device .phone .screen .layer {
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transform: scale(1.04);
}
.feat-device .phone .screen .layer.on {
  opacity: 1;
  transform: scale(1);
}

/* ---------- Feat steps: dim inactive, highlight active ---------- */
html.anim .feat-step { opacity: 0.38; transition: opacity .45s var(--ease); }
html.anim .feat-step.active { opacity: 1; }

/* ---------- Feat step list items stagger (driven by JS) ---------- */
html.anim .feat-step li {
  opacity: 0; transform: translateX(-14px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
html.anim .feat-step.active li { opacity: 1; transform: none; }

/* ---------- Testimonial cards: stagger + tilt ---------- */
html.anim .tcard.reveal:nth-child(1) { transition-delay:   0ms; }
html.anim .tcard.reveal:nth-child(2) { transition-delay: 140ms; }
html.anim .tcard.reveal:nth-child(3) { transition-delay: 280ms; }

.tcard {
  cursor: default; will-change: transform;
  transition: box-shadow .35s var(--ease), transform .35s var(--ease);
}
.tcard:hover {
  box-shadow: 0 28px 64px -16px rgba(0,0,0,0.72), 0 0 0 1px var(--border-glow);
}

/* ---------- Security rings rotation ---------- */
html.anim .sec-visual .r1 { animation: spin-cw  28s linear infinite; }
html.anim .sec-visual .r2 { animation: spin-ccw 44s linear infinite; }
@keyframes spin-cw  { to { transform: rotate( 360deg); } }
@keyframes spin-ccw { to { transform: rotate(-360deg); } }

/* ---------- Sec-point stagger (class toggled by JS) ---------- */
html.anim .sec-point {
  opacity: 0; transform: translateX(-18px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
html.anim .sec-point.in { opacity: 1; transform: none; }
html.anim .sec-point:nth-child(1) { transition-delay:  80ms; }
html.anim .sec-point:nth-child(2) { transition-delay: 200ms; }
html.anim .sec-point:nth-child(3) { transition-delay: 320ms; }

/* ---------- Trust strip stagger (class toggled by JS) ---------- */
html.anim .trust-strip .item {
  opacity: 0; transform: translateY(10px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
html.anim .trust-strip .item.in { opacity: 1; transform: none; }
html.anim .trust-strip .item:nth-child(1) { transition-delay:   0ms; }
html.anim .trust-strip .item:nth-child(2) { transition-delay:  80ms; }
html.anim .trust-strip .item:nth-child(3) { transition-delay: 160ms; }
html.anim .trust-strip .item:nth-child(4) { transition-delay: 240ms; }

/* ---------- Nav link underline slide ---------- */
.nav .links a { position: relative; }
.nav .links a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px;
  background: var(--primary-300); transform: scaleX(0); transform-origin: left;
  transition: transform .25s var(--ease);
}
.nav .links a:hover::after { transform: scaleX(1); }

/* ---------- Magnetic button will-change ---------- */
.btn-primary { will-change: transform; }

/* ---------- CTA logo badge pulse ---------- */
html.anim .cta .logo-badge { animation: badge-pulse 3.2s ease-out infinite; }
@keyframes badge-pulse {
  0%   { box-shadow: 0 0 0  0px rgba(59,130,246,0.55), var(--shadow-float); }
  70%  { box-shadow: 0 0 0 18px rgba(59,130,246,0),    var(--shadow-float); }
  100% { box-shadow: 0 0 0  0px rgba(59,130,246,0),    var(--shadow-float); }
}

/* ---------- Perspective on feat device for phone tilt ---------- */
.feat-device { perspective: 1000px; }
.feat-device > .phone { will-change: transform; }

/* ---------- reduced-motion safety net ---------- */
@media (prefers-reduced-motion: reduce) {
  html.anim .hero .copy h1.reveal { clip-path: none !important; opacity: 1 !important; transform: none !important; }
  html.anim .grad { animation: none !important; }
  html.anim .hero-stage .chip-1,
  html.anim .hero-stage .chip-2,
  html.anim .hero-stage .chip-3 { animation: none !important; }
  html.anim .sec-visual .r1,
  html.anim .sec-visual .r2 { animation: none !important; }
  html.anim .cta .logo-badge { animation: none !important; }
  html.anim .feat-step { opacity: 1; }
  html.anim .feat-step li { opacity: 1; transform: none; }
  html.anim .sec-point { opacity: 1; transform: none; }
  html.anim .trust-strip .item { opacity: 1; transform: none; }
}