/* Motion layer for GSAP (assets/js/motion-v6.js).
   Everything here is scoped to html.gsap, which motion.js only sets when GSAP loaded and the visitor
   hasn't asked for reduced motion. Without it, the site falls back to the plain CSS reveals. */

/* Hold reveal targets hidden until GSAP has set their starting states (a few ms after load). */
.gsap:not(.gsap-ready) .rv,
.gsap:not(.gsap-ready) .nav,
.gsap:not(.gsap-ready) .float { opacity: 0 !important; transition: none !important; }

/* GSAP owns reveals and the floating symbols from here on. */
.gsap-ready .rv { opacity: 1; transform: none; transition: none; }
.gsap .float { animation: none; }

/* Pointer devices: GSAP drives button and frame transforms, so CSS stops transitioning them. */
.gsap-hover .btn { transition: box-shadow .25s ease, background .25s ease, color .25s ease, border-color .25s ease; }
.gsap-hover .btn:hover { transform: none; }
.gsap-hover .mframe { transition: box-shadow .5s ease; will-change: transform; }
.gsap-hover a:hover > .mframe, .gsap-hover .lift:hover > .mframe { transform: none; }

/* Soft light that follows the pointer across framed pictures, like glass over a painting. */
.sheen {
  position: absolute; inset: 1px; z-index: 1; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at var(--sx, 50%) var(--sy, 30%), rgba(255, 248, 236, .22), rgba(255, 248, 236, 0) 55%);
  mix-blend-mode: screen;
}


/* Tiny stars that burst out when a note is sent. */
.gsap .note { position: relative; }
.burst { position: absolute; width: 12px; height: 12px; pointer-events: none; color: var(--comet); }
.burst svg { width: 100%; height: 100%; fill: currentColor; }
.burst:nth-child(3n) { color: var(--aurora); }
.burst:nth-child(3n+1) { color: var(--stardust); }