/* PT CIRCLE MOTION KIT — "Full Circle"
   The brand is a circle, so the motion is circles: ring cursor, circular
   reveals, orbiting chips, a scroll ring that completes as you read, and
   ring-burst celebrations. Shared by all PT Circle pages; each page keeps
   its own palette via the custom properties below.

   Usage: define --ptc-ring (accent) and --ptc-ring-contrast on :root,
   include ptc-motion.js at the end of body. */

:root{
  --ptc-ring:#1CB953;
  --ptc-ring-contrast:#0B0D0C;
}

/* ---- ring cursor (desktop pointers only) ---- */
#ptc-cursor{position:fixed;top:0;left:0;width:34px;height:34px;border:2px solid var(--ptc-ring);
  border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);
  transition:width .28s cubic-bezier(.34,1.56,.64,1),height .28s cubic-bezier(.34,1.56,.64,1),
    opacity .3s,border-color .3s,background .3s;opacity:0;mix-blend-mode:difference}
#ptc-cursor.on{opacity:1}
#ptc-cursor.hover{width:58px;height:58px;background:rgba(28,185,83,.14)}
#ptc-cursor.press{width:22px;height:22px;background:var(--ptc-ring)}
#ptc-cursor .dot{position:absolute;left:50%;top:50%;width:4px;height:4px;border-radius:50%;
  background:var(--ptc-ring);transform:translate(-50%,-50%)}
@media (pointer:coarse){#ptc-cursor{display:none}}

/* ---- touch / click ripple rings ---- */
.ptc-ripple{position:fixed;border:2px solid var(--ptc-ring);border-radius:50%;pointer-events:none;
  z-index:9998;transform:translate(-50%,-50%);animation:ptcRipple .7s cubic-bezier(.19,1,.22,1) forwards}
@keyframes ptcRipple{from{width:8px;height:8px;opacity:.9}to{width:110px;height:110px;opacity:0}}

/* ---- scroll ring badge ("full circle") ---- */
#ptc-ring{position:fixed;right:18px;bottom:18px;width:64px;height:64px;z-index:900;cursor:pointer;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.25));transition:transform .3s cubic-bezier(.34,1.56,.64,1);opacity:0;
  transform:scale(.4);border:none;background:none;padding:0}
#ptc-ring.on{opacity:1;transform:scale(1)}
#ptc-ring:active{transform:scale(.92)}
#ptc-ring svg{width:100%;height:100%;display:block}
#ptc-ring .ptc-ring-track{fill:none;stroke:rgba(128,128,128,.28);stroke-width:5}
#ptc-ring .ptc-ring-fill{fill:none;stroke:var(--ptc-ring);stroke-width:5;stroke-linecap:round;
  transform:rotate(-90deg);transform-origin:50% 50%}
#ptc-ring .ptc-ring-bg{fill:var(--ptc-ring-contrast)}
#ptc-ring text{fill:var(--ptc-ring);font-family:Arial,Helvetica,sans-serif;font-weight:bold;
  text-anchor:middle;letter-spacing:.06em}
#ptc-ring .pct{font-size:15px}
#ptc-ring .lbl{font-size:7.2px;letter-spacing:.18em;opacity:.85}
#ptc-ring.full .ptc-ring-fill{stroke:var(--ptc-ring)}
#ptc-ring.full{animation:ptcPulse 1.6s ease infinite}
@keyframes ptcPulse{0%,100%{filter:drop-shadow(0 6px 18px rgba(0,0,0,.25))}
  50%{filter:drop-shadow(0 0 22px var(--ptc-ring))}}
@media(max-width:700px){#ptc-ring{width:54px;height:54px;right:12px;bottom:76px}}

/* ---- circular clip reveal for images/blocks: add .ptc-iris ---- */
.ptc-iris{clip-path:circle(0% at 50% 55%);transition:clip-path 1.2s cubic-bezier(.65,.05,.36,1)}
.ptc-iris.on{clip-path:circle(75% at 50% 50%)}

/* ---- rotating circular text stamp: JS builds from .ptc-stamp[data-text] ---- */
.ptc-stamp{position:relative;display:inline-block}
.ptc-stamp svg{width:100%;height:100%;display:block;animation:ptcSpin 22s linear infinite}
.ptc-stamp:hover svg{animation-duration:5s}
@keyframes ptcSpin{to{transform:rotate(360deg)}}
.ptc-stamp text{font-family:Arial,Helvetica,sans-serif;font-weight:bold;fill:currentColor}
.ptc-stamp .ptc-stamp-core{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  animation:none}

/* ---- orbiting chips around a hero anchor: .ptc-orbit > .ptc-sat ---- */
.ptc-orbit{position:relative}
.ptc-sat{position:absolute;will-change:transform;transition:opacity .6s}

/* ---- magnetic elements: add .ptc-mag (JS drives transform) ---- */
.ptc-mag{transition:transform .25s cubic-bezier(.34,1.56,.64,1);will-change:transform}

/* ---- tilt cards: add .ptc-tilt ---- */
.ptc-tilt{transform-style:preserve-3d;transition:transform .35s cubic-bezier(.19,1,.22,1);will-change:transform}
.ptc-tilt .ptc-shine{position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(420px circle at var(--sx,50%) var(--sy,50%),rgba(255,255,255,.14),transparent 55%);
  opacity:0;transition:opacity .3s}
.ptc-tilt:hover .ptc-shine{opacity:1}

/* ---- ring burst celebration (JS spawns) ---- */
.ptc-burst{position:fixed;pointer-events:none;z-index:9999;border-radius:50%;border:3px solid var(--ptc-ring);
  transform:translate(-50%,-50%);animation:ptcBurst .9s cubic-bezier(.19,1,.22,1) forwards}
.ptc-burst.b2{border-color:#C9F53F}
.ptc-burst.b3{border-width:2px}
@keyframes ptcBurst{from{width:10px;height:10px;opacity:1}to{width:var(--sz,220px);height:var(--sz,220px);opacity:0}}
.ptc-confetti{position:fixed;width:10px;height:10px;border-radius:50%;pointer-events:none;z-index:9999}

/* ---- sticky mobile CTA bar ---- */
#ptc-mcta{position:fixed;left:12px;right:12px;bottom:12px;z-index:950;display:none;
  transform:translateY(120%);transition:transform .5s cubic-bezier(.19,1,.22,1)}
#ptc-mcta.on{transform:none}
#ptc-mcta a{display:flex;align-items:center;justify-content:center;gap:10px;background:var(--ptc-ring);
  color:var(--ptc-ring-contrast);font-family:inherit;font-weight:700;font-size:15.5px;text-decoration:none;
  padding:16px 20px;border-radius:999px;box-shadow:0 10px 30px rgba(0,0,0,.35)}
#ptc-mcta a:active{transform:scale(.97)}
#ptc-mcta .ring-ico{width:18px;height:18px;border:2.5px solid currentColor;border-radius:50%;flex-shrink:0}
@media(max-width:820px){#ptc-mcta{display:block}}

/* ---- word-cascade reveal: .ptc-cascade splits into spans ---- */
.ptc-cascade .ptc-w{display:inline-block;opacity:0;transform:translateY(.55em) rotate(2deg);
  transition:opacity .55s cubic-bezier(.19,1,.22,1),transform .55s cubic-bezier(.19,1,.22,1)}
.ptc-cascade.on .ptc-w{opacity:1;transform:none}

/* ---- hand-drawn circle + underline: wrap a word in .ptc-circle / .ptc-underline ---- */
.ptc-circle,.ptc-underline{position:relative;display:inline-block;white-space:nowrap}
.ptc-circle svg{position:absolute;left:-7%;top:-16%;width:114%;height:132%;overflow:visible;pointer-events:none}
.ptc-underline svg{position:absolute;left:-2%;bottom:-.18em;width:104%;height:.42em;overflow:visible;pointer-events:none}
.ptc-circle path,.ptc-underline path{fill:none;stroke:var(--ptc-ring);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1000;stroke-dashoffset:1000;transition:stroke-dashoffset 1.3s cubic-bezier(.65,0,.35,1)}
.ptc-underline path{stroke-width:3.6}
.ptc-circle.on path,.ptc-underline.on path{stroke-dashoffset:0}

/* ---- reduced motion: kill the party, keep the content ---- */
@media (prefers-reduced-motion:reduce){
  #ptc-cursor,#ptc-ring{display:none!important}
  .ptc-iris{clip-path:none!important;transition:none!important}
  .ptc-stamp svg{animation:none!important}
  .ptc-cascade .ptc-w{opacity:1!important;transform:none!important;transition:none!important}
  .ptc-sat{display:none!important}
  .ptc-circle path,.ptc-underline path{stroke-dashoffset:0!important;transition:none!important}
}