/* PT-DASH motion kit (2026-10). One file every page loads, so the whole site moves the same way.
   Every effect respects prefers-reduced-motion; nothing here hides copy, prices or buttons. */

/* Hero: the cursor brings order to the noise */
header.hero, header.phead { position: relative; }
#heroField { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }

/* Headlines land word by word; a strike line, where there is one, lands last */
.kin .hw { display: inline-block; animation: mkWord .62s cubic-bezier(.2,.75,.2,1) both; animation-delay: calc(var(--i) * 70ms + 60ms); }
@keyframes mkWord { from { opacity: 0; transform: translateY(.42em); } to { opacity: 1; transform: none; } }
.kin .strikeg::after { transform-origin: 0 50%; animation: mkStrike .55s cubic-bezier(.6,0,.2,1) .78s both; }
@keyframes mkStrike { from { transform: translateY(-50%) rotate(-2.5deg) scaleX(0); } to { transform: translateY(-50%) rotate(-2.5deg) scaleX(1); } }

/* Section headlines: a gradient em-dash draws in underneath */
h2.sec.mk-dash::after { content: ""; display: block; width: 56px; height: 3px; border-radius: 2px; margin-top: 16px;
  background: linear-gradient(96deg, #FF7A33, #C39658 50%, #63D1C4); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .9s cubic-bezier(.2,.8,.2,1) .15s; }
h2.sec.mk-dash.mk-center::after { margin-left: auto; margin-right: auto; transform-origin: 50% 50%; }
h2.sec.mk-dash.mk-drawn::after { transform: scaleX(1); }

/* The Dash card leans toward the cursor */
header .dash-card { transform-style: preserve-3d; will-change: transform; }

/* Reading progress: a thin em-dash under the nav that fills as you scroll */
.mk-read { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(96deg, #FF7A33, #C39658 50%, #63D1C4); opacity: .9; }

/* Cards light up under the cursor */
.mk-spot { background-image: radial-gradient(260px circle at var(--mx, -999px) var(--my, -999px), rgba(224,125,51,.12), transparent 62%) !important; }

@media (prefers-reduced-motion: reduce) {
  .kin .hw, .kin .strikeg::after { animation: none; }
  h2.sec.mk-dash::after { transform: none; transition: none; }
  .mk-read { display: none; }
}