/* ==========================================================================
   motion.css — "Silk" motion language (pairs with motion.js)
   ========================================================================== */

/* the page background lives on <html> so the silk canvas can sit between
   the background and the content on every page */
html.silk{
  background:
    radial-gradient(1200px 700px at 85% -10%,rgba(155,107,255,.14),transparent 60%),
    radial-gradient(900px 600px at -10% 30%,rgba(200,79,170,.09),transparent 60%),
    linear-gradient(180deg,#120a26 0%,#0b0619 38%,#07040f 100%) fixed #07040f !important;
}
html.silk body{background:transparent !important}

/* 1 · silk field */
.silk-field{position:fixed;inset:0;width:100vw;height:100vh;z-index:-1;pointer-events:none;opacity:.62;
  -webkit-mask-image:radial-gradient(130% 100% at 50% 50%,#000 55%,rgba(0,0,0,.55) 100%);mask-image:radial-gradient(130% 100% at 50% 50%,#000 55%,rgba(0,0,0,.55) 100%);
  animation:silk-in 1.6s cubic-bezier(.2,.8,.2,1) both}
@keyframes silk-in{from{opacity:0}to{opacity:.62}}

/* 2 · cursor light */
.silk-light{position:fixed;left:0;top:0;width:520px;height:520px;border-radius:50%;pointer-events:none;z-index:1;
  background:radial-gradient(circle,rgba(213,95,179,.16) 0%,rgba(124,92,255,.08) 35%,transparent 68%);
  mix-blend-mode:screen;will-change:transform;transition:opacity .4s}

/* 3 · spotlight glow inside cards */
.has-spot{isolation:isolate}
.spot-glow{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;opacity:0;transition:opacity .35s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(229,149,208,.16),rgba(124,92,255,.07) 40%,transparent 70%)}
.has-spot:hover > .spot-glow{opacity:1}
.has-spot::after{transition:border-color .35s}

/* magnetic buttons move smoothly */
.btn-primary,.sc-cta-btn,.sc-bored,.svc-go,.hero-cta .btn,.cta-actions .btn,.hero-cta-row .btn{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .3s,background .3s,border-color .3s,color .3s}

/* 4 · headings rise out of a mask */
.silk-rise{clip-path:inset(0 0 100% 0);transform:translateY(.35em);opacity:.001;
  transition:clip-path 1s cubic-bezier(.2,.8,.2,1),transform 1s cubic-bezier(.2,.8,.2,1),opacity .6s}
.silk-rise.silk-in{clip-path:inset(-0.2em -0.2em -0.35em -0.2em);transform:none;opacity:1}

/* scroll strand */
.silk-progress{position:fixed;left:0;top:0;height:2px;width:100%;z-index:10000;pointer-events:none;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,#3a7bff,#7c5cff 40%,#d55fb3 75%,#f3a6dc);box-shadow:0 0 12px rgba(213,95,179,.6)}
html[dir="rtl"] .silk-progress{transform-origin:100% 50%}

/* 5 · cross-page transitions (Chrome / Edge / Safari 18+) */
@view-transition{navigation:auto}
::view-transition-old(root){animation:silk-out .32s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:silk-new .55s cubic-bezier(.2,.8,.2,1) both}
@keyframes silk-out{to{opacity:0;filter:blur(6px);transform:scale(.985)}}
@keyframes silk-new{from{opacity:0;filter:blur(8px);transform:scale(1.015)}}

/* links get a silk underline sweep */
.post a,.content a,.lead a{background-image:linear-gradient(90deg,#d55fb3,#a982ff);background-size:0 1px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .4s cubic-bezier(.2,.8,.2,1)}
.post a:hover,.content a:hover,.lead a:hover{background-size:100% 1px}

/* stillness for people who ask for it */
html.silk-still .silk-field{animation:none;opacity:.5}
html.silk-still .silk-rise{clip-path:none;transform:none;opacity:1;transition:none}
@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}
@media (max-width:760px){.silk-field{opacity:.5}}