/* High-tech interaction layer: cursor spotlight, decode headings, magnetic
   buttons, directional wipes. Every hidden state is scoped to html.sn-js and
   cleared by .mo-now, so none of it can strand content at opacity 0. */

/* ---- cursor spotlight over the dark band ---------------------------- */
.sn-spot {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0; transition: opacity .45s ease;
  background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 30%),
              rgba(200, 241, 53, 0.10), rgba(200, 241, 53, 0.03) 38%, transparent 62%);
}
.sn.is-pointing .sn-spot { opacity: 1; }
/* the grid brightens under the cursor, so the light feels like it lands on something */
.sn-spot::after {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(200,241,53,.5) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(200,241,53,.5) 1px, transparent 1px);
  background-size: 68px 68px;
  opacity: .22;
  mask-image: radial-gradient(240px circle at var(--mx, 50%) var(--my, 30%), #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(240px circle at var(--mx, 50%) var(--my, 30%), #000 0%, transparent 70%);
}

/* ---- decode-in headings --------------------------------------------- */
/* Mid-scramble the glyphs are random, so the width must not thrash the layout. */
.fx-scramble { white-space: pre-wrap; }
.fx-scramble .fx-ghost { color: var(--sn-lime, #9ab82a); opacity: .85; }

/* ---- directional wipe ------------------------------------------------ */
html.sn-js .fx-wipe { clip-path: inset(0 100% 0 0); }
html.sn-js .fx-wipe.is-in {
  clip-path: inset(0 0 0 0);
  transition: clip-path 1s cubic-bezier(.76, 0, .24, 1);
}
/* the watchdog must be able to clear this too */
.mo-now, html.sn-js .mo-now { clip-path: none !important; }

/* ---- magnetic buttons ------------------------------------------------ */
.fx-magnet { will-change: transform; }

/* ---- edge-lit panels ------------------------------------------------- */
/* A light that tracks the cursor along the top edge of dark cards. */
.sn-step { position: relative; }
.sn-step::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: radial-gradient(120px circle at var(--cx, 50%) 0,
              rgba(200,241,53,.9), transparent 70%);
  opacity: 0; transition: opacity .3s;
}
.sn-step:hover::after { opacity: 1; }

@media (hover: none) {
  .sn-spot { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sn-spot { display: none; }
  html.sn-js .fx-wipe { clip-path: none !important; transition: none !important; }
  .fx-magnet { transform: none !important; }
}