/* ============================================================
   ANIMATION LAYER — preloader, scroll progress, custom cursor,
   magnetic buttons, kinetic text, pinned/parallax scroll, card
   tilt + reveal. Pure add-on: never redefines a design-system
   token or base component style (those live in style.css).
   See wwwroot/js/animations.js for the logic driving these.
   ============================================================ */

/* ---------- Preloader ---------- */
#preloader {
  position: fixed; inset: 0; z-index: 4000;
  background: var(--bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  transition: opacity .5s var(--ease), visibility .5s var(--ease);
}
#preloader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.pl-mark { font-size: 2.6rem; color: var(--primary); animation: plPulse 1.3s ease-in-out infinite; }
@keyframes plPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.18); opacity: .65; } }
.pl-bar { width: 170px; height: 3px; background: var(--border); border-radius: var(--r-full); overflow: hidden; }
.pl-bar span { display: block; height: 100%; width: 0%; background: var(--primary); transition: width .25s ease; }

/* ---------- Scroll progress ---------- */
#scrollProgress {
  position: fixed; top: 0; left: 0; width: 100%; height: 3px; z-index: 2000; pointer-events: none;
}
#scrollProgressFill {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
}

/* ---------- Custom cursor (desktop pointer only) ---------- */
#cursorDot, #cursorRing {
  position: fixed; top: 0; left: 0; border-radius: 50%; pointer-events: none; z-index: 3000;
  transform: translate(-50%, -50%);
  opacity: 0; transition: opacity .2s ease;
}
#cursorDot { width: 8px; height: 8px; background: var(--primary); }
#cursorRing {
  width: 34px; height: 34px; border: 1.5px solid var(--primary);
  transition: width .22s var(--ease), height .22s var(--ease), border-color .22s var(--ease), opacity .2s ease;
}
#cursorRing.is-active { width: 58px; height: 58px; border-color: var(--secondary); }
body.has-custom-cursor #cursorDot, body.has-custom-cursor #cursorRing { opacity: 1; }
body.has-custom-cursor, body.has-custom-cursor a, body.has-custom-cursor button, body.has-custom-cursor .cat-card {
  cursor: none;
}
@media (hover: none), (pointer: coarse) {
  #cursorDot, #cursorRing { display: none !important; }
}

/* ---------- Kinetic hero text ---------- */
.split-word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.split-word > span { display: inline-block; will-change: transform; }

/* ---------- Magnetic buttons ---------- */
.magnetic { will-change: transform; }

/* ---------- 3D tilt cards (category / feature cards) ---------- */
.tilt-card { transform-style: preserve-3d; will-change: transform; }

/* ---------- Three.js ambient canvas (Screenshots section) ---------- */
#screensCanvas {
  position: absolute; inset: 0; z-index: 0; opacity: .55; pointer-events: none;
}
.screens-bg { isolation: isolate; }
.screens-bg .container { position: relative; z-index: 1; }

/* ---------- Reduced motion: strip everything above back to instant/static ---------- */
@media (prefers-reduced-motion: reduce) {
  #preloader { transition: none; }
  .pl-mark { animation: none; }
  #cursorDot, #cursorRing { display: none !important; }
  .split-word > span { transform: none !important; }
  #screensCanvas { display: none; }
}