/* ==========================================================================
   GYC Save Guide v2: a small character that searches its way to Save.
   Drop-in companion to save-guide.js. Every class is prefixed .sg-.
   No glow: flat SVG skins with a crisp white edge and a hairline shadow.
   ========================================================================== */

.sg-layer {
  --sg-c1: var(--accent, #5e3d91);
  --sg-c2: color-mix(in srgb, var(--sg-c1) 30%, #ffffff);
  --sg-c3: color-mix(in srgb, var(--sg-c1) 55%, #000000);
  --sg-skin: #f6d9c6;
  --sg-size: 34px;
  position: fixed;
  inset: 0;
  z-index: 950;                 /* above page content, below site modals */
  pointer-events: none;         /* the layer never blocks the page */
  contain: layout style;
}
/* colour variants (data-sg-color) */
.sg-layer[data-sg-color="rose"] { --sg-c1: #c0567a; --sg-c2: #f6cad8; --sg-c3: #6e2a44; }
.sg-layer[data-sg-color="teal"] { --sg-c1: #2c8379; --sg-c2: #bfe5de; --sg-c3: #1b4f49; }
.sg-layer[data-sg-color="ink"]  { --sg-c1: #383c47; --sg-c2: #dfe1e6; --sg-c3: #1b1d23; }

.sg-layer .f1 { fill: var(--sg-c1); }
.sg-layer .f2 { fill: var(--sg-c2); }
.sg-layer .f3 { fill: var(--sg-c3); }
.sg-layer .s1 { stroke: var(--sg-c1); }
.sg-layer .s2 { stroke: var(--sg-c2); }
.sg-layer .s3 { stroke: var(--sg-c3); }
.sg-layer .fs { fill: var(--sg-skin); }
.sg-layer .ss { stroke: var(--sg-skin); }

/* ---- the character ------------------------------------------------------- */
.sg-spirit {
  position: absolute;
  left: 0; top: 0;
  width: var(--sg-size);
  height: var(--sg-size);
  margin: calc(var(--sg-size) / -2) 0 0 calc(var(--sg-size) / -2);
  will-change: transform, opacity;
  opacity: 0;
  transition: opacity .6s ease;
  pointer-events: none;
}
.sg-spirit.sg-on { opacity: 1; }
.sg-spirit.sg-hidden { opacity: 0 !important; }
.sg-spirit.sg-interactive { pointer-events: auto; cursor: pointer; }
.sg-spirit.sg-interactive::before { content: ''; position: absolute; inset: -5px; border-radius: 50%; }
.sg-compact .sg-spirit.sg-interactive::before { inset: -8px; }

.sg-fx { position: absolute; inset: 0; }
.sg-body {
  position: absolute; inset: 0;
  will-change: transform;
  filter: drop-shadow(0 1px 1px rgba(20, 12, 35, .22));   /* a hairline shadow, not a glow */
}
.sg-body svg { display: block; width: 100%; height: 100%; overflow: visible; }
.sg-body svg * { transform-box: view-box; }
.sg-tip { fill: none; stroke: none; }

/* tiny dismiss "×", on mouse hover only */
.sg-close {
  position: absolute; right: -12px; top: -12px;
  width: 16px; height: 16px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.96); color: #4e4e4e;
  box-shadow: 0 1px 3px rgba(0,0,0,.28);
  font: 600 12px/16px 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; text-align: center;
  cursor: pointer; opacity: 0; transform: scale(.6);
  transition: opacity .18s ease, transform .18s ease; pointer-events: none;
}
.sg-spirit.sg-hovered .sg-close, .sg-close:focus-visible { opacity: 1; transform: scale(1); pointer-events: auto; }
.sg-close:focus-visible { outline: 2px solid var(--sg-c1); outline-offset: 2px; }
.sg-close:hover { color: #0e0e0e; }

/* "found it!" perk lines */
.sg-perk { position: absolute; left: 0; top: 0; width: 20px; height: 12px; margin: -6px 0 0 -10px; }
.sg-perk svg { display: block; width: 100%; height: 100%; overflow: visible; opacity: 0; }

/* ---- skin idle animations ------------------------------------------------ */
/* pixie: wing flutter + blink */
.sg-wings { transform-origin: 18px 17.5px; animation: sg-flutter .24s ease-in-out infinite alternate; }
.sg-moving .sg-wings { animation-duration: .13s; }
@keyframes sg-flutter { from { transform: scaleX(1) rotate(0deg); } to { transform: scaleX(.42) rotate(-6deg); } }
.sg-pixie-eye { transform-origin: 22.6px 11.7px; animation: sg-blink 3.8s infinite; }
/* wisp: blink + wavy tail */
.sg-blink { transform-origin: 20px 17.6px; animation: sg-blink 4.2s infinite; }
@keyframes sg-blink { 0%, 90%, 100% { transform: scaleY(1); } 93% { transform: scaleY(.1); } }
.sg-wave { transform-origin: 20px 30px; animation: sg-wave 2.1s ease-in-out infinite alternate; }
@keyframes sg-wave { from { transform: skewX(-5deg); } to { transform: skewX(5deg); } }
/* quill: feather sway */
.sg-feather { transform-origin: 28px 20px; animation: sg-sway 2.6s ease-in-out infinite alternate; }
@keyframes sg-sway { from { transform: rotate(-4deg); } to { transform: rotate(3deg); } }
/* paper plane: gentle roll */
.sg-roll { transform-origin: 20px 20px; animation: sg-roll 1.9s ease-in-out infinite alternate; }
@keyframes sg-roll { from { transform: scaleY(1); } to { transform: scaleY(.84); } }

/* ---- particles (dust / ink / dots / puff); flat, no blur -------------------- */
.sg-p { position: absolute; left: 0; top: 0; pointer-events: none; }
.sg-p-dust { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--sg-c1);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.sg-p-dust.sg-alt { background: #e7b93f; }
.sg-p-ink { width: 3.5px; height: 3.5px; margin: -1.75px 0 0 -1.75px; border-radius: 50%; background: var(--sg-c3); }
.sg-p-dots { width: 3px; height: 3px; margin: -1.5px 0 0 -1.5px; border-radius: 50%; background: var(--sg-c1); opacity: .5; }
.sg-p-puff { width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: #fbfaff; border: 1px solid var(--sg-c2); }

/* ---- ring around Save (subtle) ------------------------------------------- */
.sg-ring { position: absolute; left: 0; top: 0; border-radius: 5px; pointer-events: none; opacity: 0; }

/* ---- optional 2-word label ----------------------------------------------- */
.sg-label {
  position: absolute; left: 0; top: 0; white-space: nowrap;
  font: italic 13px/1 var(--ff-serif, Georgia, serif);
  color: var(--sg-c1); letter-spacing: .02em;
  opacity: 0; transition: opacity .6s ease; pointer-events: none;
}
.sg-label.sg-on { opacity: .85; }

/* ---- reduced motion: static arrow, nothing animates ----------------------- */
.sg-layer.sg-reduced * { animation: none !important; }
.sg-layer.sg-reduced .sg-spirit { transition: none; }