/* GLENMUN VIII — motion layer styles. Injected into every page by the server.
   The animations themselves are driven by Motion (see motion.js); this file only holds the
   static look of the effect elements plus a few pure-CSS shines that need pseudo-elements.
   Everything is gated on html.fx so reduced-motion visitors get the static design. */

/* ---- no flash of un-animated content; fail-safe if the script never runs ---- */
html.fx-pre body { opacity: 0; animation: fx-safe .01s 5s forwards; }
@keyframes fx-safe { to { opacity: 1; } }

/* ---- ambient particle field ---- */
#fx-canvas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#fx-canvas.fx-above { z-index: 0; }
#fx-canvas.fx-below { z-index: -1; }

/* parallax: the colour blobs drift against the pointer */
html.fx .wall { translate: calc(var(--px, 0) * -2.4vmax) calc(var(--py, 0) * -2.4vmax); transition: translate 1s cubic-bezier(.2, .8, .2, 1); }

/* scroll progress (scaleX driven by Motion's scroll()) */
#fx-scroll { position: fixed; left: 0; top: 0; right: 0; height: 3px; z-index: 9997; pointer-events: none; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, #7d4dff, #b79cff, #8cc8ff); box-shadow: 0 0 12px rgba(160, 130, 255, .8); }

/* text split into characters (animated by Motion) */
.fx-w { display: inline-block; white-space: nowrap; }
.fx-ch { display: inline-block; }

/* counters need a box for their bump to transform */
html.fx #cnt, html.fx #tot, html.fx .cnum { display: inline-block; }

/* ---- glass sheen (follows the pointer) + ripples ---- */
.fx-sheen { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; z-index: 3; }
.fx-sheen::before { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .3s;
  background: radial-gradient(230px circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 65%); }
.fx-hot > .fx-sheen::before { opacity: 1; }
.fx-ripple { position: absolute; border-radius: 50%; translate: -50% -50%; opacity: 0; transform: scale(0);
  background: radial-gradient(circle, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 70%); }
.fx-tiltwrap { perspective: 1100px; }

/* ---- pure-CSS shines (pseudo-elements / shadows Motion can't target) ---- */
html.fx .stat .dot { animation: fx-dot 2.6s ease-in-out infinite; }
@keyframes fx-dot { 50% { box-shadow: 0 0 0 6px rgba(165, 140, 255, .2); } }
html.fx .pill.ok { animation: fx-okglow 3s ease-in-out infinite; }
@keyframes fx-okglow { 50% { box-shadow: 0 0 14px rgba(52, 199, 89, .35); } }
html.fx .progress > i { position: relative; overflow: hidden; }
html.fx .progress > i::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); animation: fx-sweep 2.4s ease-in-out infinite;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .6) 50%, transparent 80%); }
@keyframes fx-sweep { to { transform: translateX(100%); } }
html.fx .row:hover > span:last-child { animation: fx-nudge .7s ease-in-out infinite alternate; }
@keyframes fx-nudge { to { translate: 6px 0; } }

/* ---- effect elements created by motion.js ---- */
.fx-shock { position: absolute; left: 50%; top: 40%; width: 0; height: 0; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .8); translate: -50% -50%; pointer-events: none; opacity: 0; }
.fx-bang { position: fixed; inset: 0; z-index: 9998; pointer-events: none; background: radial-gradient(circle at 50% 45%, rgba(255, 70, 70, .55), rgba(255, 70, 70, 0) 70%); }
#fx-confetti { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 9999; pointer-events: none; }
.fx-ghost { position: fixed; z-index: 9990; pointer-events: none; display: grid; place-items: center; width: 60px; height: 60px; margin: -30px 0 0 -30px;
  color: #fff; font: 700 2.2rem/1 system-ui, sans-serif; text-shadow: 0 0 18px rgba(190, 160, 255, .95); }

/* ---- page transitions (browsers with cross-document view transitions) ---- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: fx-vt-out .35s ease both; }
  ::view-transition-new(root) { animation: fx-vt-in .6s cubic-bezier(.2, .9, .2, 1) both; }
}
@keyframes fx-vt-out { to { opacity: 0; transform: scale(1.05); filter: blur(14px); } }
@keyframes fx-vt-in { from { opacity: 0; transform: scale(.94) translateY(30px); filter: blur(14px); } }