@charset "utf-8";

/* =========================================================================
   GENIE wordmark — Solana-style mouseover: lines light up + mild slinky bounce.
   Cursor-driven only; perfectly still when idle (no auto-animation).
   The 9 nested contour rings are sprung individually (staggered) by
   genie-slinky.js. Shared by the hero wordmark and the "Experience Genie"
   bottom wordmark.
   ========================================================================= */

.genie-slinky{
  position:relative;
  margin:0 auto;
  aspect-ratio:1190 / 380;
  --mx:50%; --my:50%;
  --r:150px;                 /* light-up radius */
  cursor:default;
}
.genie-slinky .layer{ position:absolute; inset:0; width:100%; height:100%; }
.genie-slinky .layer svg{ width:100%; height:100%; display:block; overflow:visible; fill:none; }
/* the contour paths are stroke-only — never let them fall back to the default black fill */
.genie-slinky .ring path{ fill:none; }
.genie-slinky .ring{ will-change:transform; }

/* resting wordmark */
.genie-slinky .layer-base{ opacity:.82; transition:opacity .3s ease; }
.genie-slinky.lit .layer-base{ opacity:.95; }

/* glow layer: same rings forced white, revealed only around the cursor */
.genie-slinky .layer-glow{
  opacity:0; transition:opacity .25s ease;
  mix-blend-mode:plus-lighter;
  filter:drop-shadow(0 0 3px rgba(214,201,254,.85));
  -webkit-mask:radial-gradient(circle var(--r) at var(--mx) var(--my), #000 0, #000 34%, transparent 70%);
          mask:radial-gradient(circle var(--r) at var(--mx) var(--my), #000 0, #000 34%, transparent 70%);
}
.genie-slinky.lit .layer-glow{ opacity:1; }
.genie-slinky .layer-glow .ring path{ stroke:#ffffff !important; }

@media (hover:none){
  .genie-slinky .layer-base{ opacity:1; }
  .genie-slinky .layer-glow{ display:none; }
}

/* ---- size variants ---- */
.genie-hero-wordmark{ width:clamp(260px, 40vw, 540px); --r:130px; }  /* hero */
.genie-exp-logo{ width:min(90vw, 1000px); --r:210px; }               /* bottom "Experience Genie" */