/* ============ MOTION LAYER ============  pairs with motion.js. Tokens only. */

/* 1. titles rise a word at a time */
.ptitle.split .w{display:inline-block;opacity:0;transform:translateY(.55em) rotate(1.2deg);transform-origin:0 100%;
  transition:opacity .55s ease,transform .8s cubic-bezier(.2,.85,.2,1);transition-delay:calc(var(--i,0) * 45ms)}
.ptitle.split.rise .w{opacity:1;transform:none}
.ptitle.split .w em,.ptitle.split .w i{display:inline}

/* 2. pointer tilt */
.tilting{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-3px) !important;
  transition:transform .12s ease-out,box-shadow .3s !important;box-shadow:var(--shadow-float)}
.fee.tilting{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) !important}

/* 3. spotlight on dark surfaces: a soft ember lamp that follows the cursor */
.band,.pull,.bigfoot,.cta,.guar-band{position:relative}
.band::after,.pull::after,.bigfoot::after,.cta::after,.guar-band::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;z-index:0;border-radius:inherit;
  background:radial-gradient(600px circle at var(--mx,50%) var(--my,50%),rgba(196,116,43,.16),transparent 60%);
  transition:opacity .5s ease}
.band.lit::after,.pull.lit::after,.bigfoot.lit::after,.cta.lit::after,.guar-band.lit::after{opacity:1}
.band>*,.pull>*,.bigfoot>*,.cta>*,.guar-band>*{position:relative;z-index:1}

/* 4. reading progress */
.progress{position:fixed;left:0;top:0;height:2px;width:100%;z-index:1200;pointer-events:none;
  background:var(--ember);transform-origin:0 50%;transform:scaleX(0);opacity:.9}

@media (prefers-reduced-motion:reduce){
  .ptitle.split .w{opacity:1;transform:none;transition:none}
  .tilting{transform:none !important}
  .band::after,.pull::after,.bigfoot::after,.cta::after,.guar-band::after{display:none}
  .progress{display:none}
}
@media print{.progress{display:none}}