/* =====================================================================
   Furynight Motion — SaaS-style animation layer (v2.9.0)
   Everything that hides content is gated behind .js-motion, which the
   script only adds when motion is allowed. No JS or "reduce motion" =
   the normal static site.
   ===================================================================== */

/* ---- Scroll progress bar ---- */
.fn-progress{position:fixed;top:0;left:0;width:100%;height:3px;z-index:130;pointer-events:none;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--cyan),#7e55ff 60%,#ad00ff);box-shadow:0 0 12px rgba(8,234,255,.55)}

/* ---- Header gains depth after you scroll ---- */
.topbar{transition:box-shadow .3s ease,background-color .3s ease}
.topbar.is-scrolled{box-shadow:0 10px 30px rgba(0,0,0,.35)}
html.soft .topbar.is-scrolled{box-shadow:0 8px 24px rgba(24,74,120,.14)}

/* ---- Scroll reveals (hidden only until the element enters view) ---- */
.js-motion .reveal{animation:none}
.js-motion [data-fx]{opacity:0;transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1);transition-delay:var(--fx-delay,0ms);will-change:transform,opacity}
.js-motion [data-fx="up"]{transform:translateY(36px)}
.js-motion [data-fx="scale"]{transform:scale(.9)}
.js-motion [data-fx="left"]{transform:translateX(-36px)}
.js-motion [data-fx="right"]{transform:translateX(36px)}
.js-motion [data-fx].fx-in{opacity:1;transform:none}

/* ---- Hero headline: words rise in one by one ---- */
.js-motion .hero-copy>h1{animation:none;opacity:1}
.fx-word{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.fx-word>i{display:inline-block;font-style:normal;opacity:0;transform:translateY(105%) rotate(4deg);filter:blur(6px);animation:fxWordIn .95s cubic-bezier(.16,1,.3,1) forwards;animation-delay:calc(.12s + var(--i) * 75ms)}
@keyframes fxWordIn{to{opacity:1;transform:none;filter:blur(0)}}

/* ---- Hero: slow aurora + light that follows the pointer ---- */
.fx-aurora{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.fx-aurora i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.38;mix-blend-mode:screen;animation:fxAurora 16s ease-in-out infinite alternate}
.fx-aurora i:nth-child(1){width:46%;aspect-ratio:1;left:-8%;top:-30%;background:#00b9ff}
.fx-aurora i:nth-child(2){width:40%;aspect-ratio:1;right:-6%;bottom:-35%;background:#a63cff;animation-duration:20s;animation-delay:-6s}
@keyframes fxAurora{to{transform:translate3d(9%,10%,0) scale(1.18)}}
.hero:after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;background:radial-gradient(520px circle at var(--mx,68%) var(--my,40%),rgba(8,234,255,.13),transparent 62%)}

/* ---- Cards: spotlight that tracks the cursor ---- */
.fx-card{position:relative}
.fx-card:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s ease;background:radial-gradient(260px circle at var(--sx,50%) var(--sy,50%),rgba(8,234,255,.16),transparent 62%)}
.fx-card:hover:after{opacity:1}
html.soft .fx-card:after{background:radial-gradient(260px circle at var(--sx,50%) var(--sy,50%),rgba(0,114,181,.12),transparent 62%)}
.fx-tilt{transition:transform .25s ease-out,border-color .2s,box-shadow .2s}

/* ---- Skills marquee ---- */
.fx-marquee{margin-top:18px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.fx-track{display:flex;width:max-content;animation:fxMarquee 42s linear infinite}
.fx-marquee:hover .fx-track{animation-play-state:paused}
.fx-group{display:flex;gap:10px;padding-right:10px}
.fx-chip{white-space:nowrap;font-size:13px;line-height:1;padding:10px 16px;border-radius:999px;border:1px solid var(--line);background:rgba(6,24,43,.7);color:#cfe3f3}
html.soft .fx-chip{background:#fff;color:#274866;border-color:#b5d0e5}
@keyframes fxMarquee{to{transform:translateX(-50%)}}

/* ---- Magnetic buttons ---- */
.fx-magnet{transition:transform .25s ease-out,filter .2s}

/* ---- Safety nets ---- */
@media (prefers-reduced-motion:reduce){
  .fx-aurora,.fn-progress{display:none}
  .fx-track{animation:none;flex-wrap:wrap;width:auto}
  .fx-group[aria-hidden="true"]{display:none}
  .fx-group{flex-wrap:wrap}
}