/* GLENMUN VIII — logo placement. Injected into every page by the server (so it survives design updates).
   The emblem is /assets/img/logo-light.png (the original navy emblem recoloured for the dark glass UI).
   Movement (shine, float, tilt, splash) is layered on by motion.js; this file works without it. */

.gm-logo-wrap { position: relative; display: block; width: 100%; height: 100%; }
.gm-logo { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; -webkit-user-drag: none; user-select: none;
  filter: drop-shadow(0 2px 12px rgba(160, 130, 255, .5)); }

/* the existing "mark" slots (header, login card, landing hero) now hold the emblem */
.gm-mark { display: grid; place-items: center; perspective: 500px; }
.brand .gm-mark { width: 40px; height: 40px; flex: none; }
.sheet-mark { width: 100px; height: 100px; }
.sheet-mark .gm-logo-wrap { width: 82%; height: 82%; }
.home-head .orb { width: clamp(120px, 21vmin, 184px); height: clamp(120px, 21vmin, 184px); }
.orb .gm-logo-wrap { width: 84%; height: 84%; }

/* orbit rings around an emblem (landing hero + kiosk panel): a dashed ring and a thin ring with a travelling spark */
.gm-ring { position: absolute; border-radius: 50%; pointer-events: none; }
.gm-ring.r1 { inset: -15px; border: 1.5px dashed rgba(200, 180, 255, .4); }
.gm-ring.r2 { inset: -34px; border: 1px solid rgba(200, 180, 255, .16); }
.gm-ring.r2::after { content: ""; position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%;
  background: #e8dfff; box-shadow: 0 0 12px 3px rgba(190, 160, 255, .9); }
.home-head .orb { margin-bottom: 26px; }

/* shine: a bright band that travels across the emblem only (masked to the logo's own shape) */
html.fx .gm-logo-wrap::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  -webkit-mask: url(/assets/img/logo-light.png) center / contain no-repeat; mask: url(/assets/img/logo-light.png) center / contain no-repeat;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .95) 50%, rgba(255, 255, 255, 0) 62%);
  background-size: 320% 100%; background-position: 100% 0; animation: gm-shine 6s ease-in-out infinite; }
@keyframes gm-shine { 0%, 55% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
.brand .gm-logo-wrap::after { animation-duration: 9s; }

/* splash intro (created by motion.js on the landing page and the kiosk, once per session) */
#gm-splash { position: fixed; inset: 0; z-index: 10000; display: grid; place-content: center; justify-items: center; gap: 28px; perspective: 900px; }
.gm-splash-bg { position: absolute; inset: 0; background: radial-gradient(circle at 50% 38%, #3a1d9a 0%, #160a45 45%, #0a0520 100%); }
.gm-splash-logo, .gm-splash-title { position: relative; }
.gm-splash-logo { width: min(46vmin, 360px); aspect-ratio: 1; }
.gm-splash-logo .gm-logo { filter: drop-shadow(0 6px 40px rgba(170, 140, 255, .8)); }
.gm-splash-title { color: #f1ecff; font: 800 clamp(1.1rem, 3.2vmin, 1.9rem) system-ui, -apple-system, sans-serif; letter-spacing: .18em; text-transform: uppercase; text-shadow: 0 0 24px rgba(180, 150, 255, .7); }