/* Proofworks landing — motion layer (/anim.css)
 * Scroll reveals, hero parallax zoom, cursor spotlight, magnetic buttons,
 * card lifts, judgement-chip float. Disciplined, respects prefers-reduced-motion.
 * Loaded from the Worker as a static asset so it stays out of the fragile
 * LANDING template literal. */

:root{
  --reveal-ease:cubic-bezier(.16,1,.3,1);
  --dur: .7s;
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ---------- scroll progress indicator ---------- */
.pw-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:100;
  background:linear-gradient(90deg,var(--certain),var(--source));
  box-shadow:0 0 12px rgba(18,128,92,.5)}

/* ---------- hero entrance (stagger) ---------- */
.pw-hero .pw-rise{opacity:0;transform:translateY(22px);
  transition:opacity var(--dur) var(--reveal-ease),transform var(--dur) var(--reveal-ease)}
.pw-hero.pw-load .pw-rise{opacity:1;transform:none}
.pw-rise:nth-child(1){transition-delay:.05s}
.pw-rise:nth-child(2){transition-delay:.14s}
.pw-rise:nth-child(3){transition-delay:.23s}
.pw-rise:nth-child(4){transition-delay:.32s}
.pw-rise:nth-child(5){transition-delay:.42s}

/* ---------- scroll reveal ---------- */
.pw-reveal{opacity:0;transform:translateY(28px) scale(.985);
  transition:opacity .8s var(--reveal-ease),transform .8s var(--reveal-ease),box-shadow .3s ease}
.pw-reveal.pw-in{opacity:1;transform:none}
.pw-reveal[data-dir="left"]{transform:translateX(-34px);opacity:0}
.pw-reveal[data-dir="left"].pw-in{transform:none;opacity:1}
.pw-reveal[data-dir="right"]{transform:translateX(34px);opacity:0}
.pw-reveal[data-dir="right"].pw-in{transform:none;opacity:1}
.pw-reveal[data-dir="zoom"]{transform:scale(.92);opacity:0}
.pw-reveal[data-dir="zoom"].pw-in{transform:none;opacity:1}
.pw-reveal[data-stagger]{transition-delay:calc(var(--i,0)*.08s)}

/* ---------- hero cursor spotlight ---------- */
.pw-spotlight{position:fixed;width:520px;height:520px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(10,114,239,.10),transparent 62%);
  transform:translate(-50%,-50%);z-index:1;mix-blend-mode:multiply;
  transition:opacity .4s ease}

/* ---------- magnetic buttons ---------- */
.pw-mag{transition:transform .18s cubic-bezier(.2,.9,.3,1.2)}

/* ---------- card hover lift + border glow ---------- */
.pw-lift{transition:transform .35s var(--reveal-ease),box-shadow .35s var(--reveal-ease),border-color .35s ease}
.pw-lift:hover{transform:translateY(-4px);box-shadow:0 16px 40px -18px rgba(10,114,239,.28),var(--ring) 0 0 0 1px}

/* ---------- headline accent glow-pulse (subtle life on a colored word) ---------- */
.pw-shimmer{animation:pw-pulse 3s ease-in-out infinite}
@keyframes pw-pulse{0%,100%{text-shadow:0 0 0 rgba(18,128,92,0)}50%{text-shadow:0 0 18px rgba(18,128,92,.45)}}

/* ---------- judgement-chip float (subtle life) ---------- */
.pw-float{animation:pw-float 5s ease-in-out infinite}
.pw-float:nth-child(2){animation-delay:.4s}
.pw-float:nth-child(3){animation-delay:.8s}
@keyframes pw-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

/* ---------- paragraph gradient fade-in ---------- */
.pw-fade{background:#fff}
.pw-fade.pw-in{animation:pw-fadeup .7s var(--reveal-ease)}

@keyframes pw-fadeup{0%{opacity:0;transform:translateY(14px)}100%{opacity:1;transform:none}}

/* scroll-driven hero zoom: the demo/hero block scales 1 -> 1.04 as user scrolls the first viewport */
.pw-hero-zoom{will-change:transform}

/* slow drift on the demo rows to feel "alive" but not distracting */
@media (prefers-reduced-motion:no-preference){
  .demo-card:hover .pw-float{animation-duration:2.6s}
}