/* ═══════════════════════════════════════════════════════════════════════════
   KIIT Material — MOTION DESIGN LAYER (css/motion.css + js/motion.js)

   Adds the motion that animations.css/advanced.js DON'T already provide:
     • soft cross-page transitions (View Transitions API, CSS-only)
     • ambient aurora orbs drifting behind every page
     • a cursor-following spotlight sheen on cards (desktop only)
     • scroll-reveals for card families advanced.js doesn't cover
   Ripple, scroll-progress, back-to-top, tilt, magnetic buttons and counters
   already live in js/advanced.js — deliberately NOT duplicated here.

   Safety rules:
     • Only `transform`/`opacity` animate (GPU-composited; no layout work, so
       the 2,700-item papers catalog and low-end phones stay smooth).
     • The reveal hidden state (.m-hide) is applied by JS, never by CSS, so
       content can NEVER be stuck invisible if this file loads but JS fails.
     • Every effect is disabled under prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Cross-page transitions (Chrome 126+; other browsers simply ignore) ─────
   Same-origin navigations get a soft cross-fade + rise instead of a white
   flash. Pure CSS — downloads, new tabs and OAuth redirects are unaffected. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  @keyframes m-vt-in  { from { opacity: 0; transform: translateY(10px); } }
  @keyframes m-vt-out { to   { opacity: 0; } }
  ::view-transition-old(root) { animation: m-vt-out .18s ease both; }
  ::view-transition-new(root) { animation: m-vt-in  .28s cubic-bezier(.22,1,.36,1) both; }
}

/* ── Scroll-reveal hidden state ──────────────────────────────────────────────
   motion.js adds .m-hide only to elements BELOW the fold, then reveals them
   with the Web Animations API (so no transition-delay ever pollutes hover
   effects). This class is just the resting "not yet revealed" state. */
.m-hide { opacity: 0 !important; }

/* ── Ambient aurora orbs ─────────────────────────────────────────────────────
   Brand-coloured orbs drifting very slowly behind every page. Pre-blurred
   radial gradients (no filter: blur) + transform-only keyframes → fully
   composited, ~zero paint cost. Injected by motion.js behind all content. */
.m-orbs { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.m-orb {
  position: absolute; display: block; border-radius: 50%;
  width: 58vmin; height: 58vmin;
  will-change: transform;
}
.m-orb-a {
  top: -18vmin; left: -12vmin;
  background: radial-gradient(circle at 50% 50%, rgba(225,29,72,.16), rgba(225,29,72,.05) 45%, transparent 68%);
  animation: m-drift-a 34s ease-in-out infinite alternate;
}
.m-orb-b {
  bottom: -22vmin; right: -14vmin;
  background: radial-gradient(circle at 50% 50%, rgba(192,38,211,.14), rgba(192,38,211,.045) 45%, transparent 68%);
  animation: m-drift-b 42s ease-in-out infinite alternate;
}
.m-orb-c {
  top: 32%; left: 58%;
  width: 34vmin; height: 34vmin;
  background: radial-gradient(circle at 50% 50%, rgba(219,39,119,.10), transparent 62%);
  animation: m-drift-c 28s ease-in-out infinite alternate;
}
@keyframes m-drift-a { from { transform: translate3d(0,0,0) scale(1); }   to { transform: translate3d(9vw, 7vh, 0) scale(1.18); } }
@keyframes m-drift-b { from { transform: translate3d(0,0,0) scale(1.1); } to { transform: translate3d(-8vw, -6vh, 0) scale(.95); } }
@keyframes m-drift-c { from { transform: translate3d(0,0,0); }            to { transform: translate3d(-10vw, 9vh, 0); } }

/* ── Cursor spotlight on cards (desktop, fine pointer only) ─────────────────
   A soft sheen that follows the cursor across glassy cards. --mx/--my are set
   by one rAF-throttled pointermove listener in motion.js. */
@media (hover: hover) and (pointer: fine) {
  .m-spot { position: relative; }
  .m-spot::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit;
    background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%),
                rgba(255, 255, 255, .085), transparent 62%);
    opacity: 0; transition: opacity .4s ease; pointer-events: none; z-index: 1;
  }
  .m-spot:hover::after { opacity: 1; }
}

/* ── Gentle idle float for hero badges / section tags ──────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  @keyframes m-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
  .hero-badge, .section-tag { animation: m-bob 5.5s ease-in-out infinite; }
}

/* ── Reduced motion: everything above fully off ─────────────────────────────
   (.m-hide is also neutralised in case a stale cached motion.js added it.) */
@media (prefers-reduced-motion: reduce) {
  .m-orb, .hero-badge, .section-tag { animation: none !important; }
  .m-hide { opacity: 1 !important; }
  .m-spot::after { display: none !important; }
}