/* The plasma button: a pill of dark glass on a black page, with an electrode inside. The bolts of plasma are drawn
   by the script on a canvas under the glass and the words; the glass, the rim light and the flash are CSS. */
:root {
  --page: #000000;          /* the page */
  --violet: #9a6bff;        /* the outer glow of the bolts */
  --azure: #4cc6ff;         /* their inner glow */
  --core: #ffffff;          /* the white heart of a bolt */
  --glass: #0d0c16;         /* the glass of the pill */
  --text: #eef0ff;          /* the words */
  --muted: #6f7186;         /* the line under the button */
  --on: #7fe0ff;            /* connected */
  --gx: 20%;                /* set by the script: where the rim of the glass catches the light */
  --gy: 50%;
  --glow: 0;                /* set by the script: how strong the plasma is, 0 to 1 */
}

* {
  box-sizing: border-box;
}

/* a tap is a click at once: no wait for a double tap */
html {
  touch-action: manipulation;
}

html,
body {
  margin: 0;
  overflow-x: clip;
}

body {
  min-height: 100svh;
  background: var(--page);
  color: var(--text);
  font-family: 'Sora Variable', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.stage {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 24px 16px;
}

/* the field round the button the bolts can reach into; the finger can drag in it */
.plasma {
  position: relative;
  width: min(760px, 100%);
  height: clamp(380px, 62svh, 470px);
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 22px;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

.plasma__arcs {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ---------------------------------------------------------------- the pill */
/* the button makes no layer of its own: the glass lies under the canvas of the bolts, the words over it */
.plug {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 20px;
  height: 96px;
  padding: 0 40px 0 22px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* pressed, the glass gives a little (the button itself does not scale: that would lift it over the bolts) */
.plug__glass,
.plug__words {
  transition: transform 0.3s cubic-bezier(0.34, 1.5, 0.5, 1);
}

.plug:active .plug__glass {
  transform: scale(0.97);
}

.plug:active .plug__words {
  transform: translateY(1px);
}

/* the glass: dark and see-through, so the plasma inside shows; its rim catches the light where the bolts touch */
.plug__glass {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background:
    radial-gradient(120% 140% at var(--gx) var(--gy), color-mix(in srgb, var(--azure) calc(var(--glow) * 16%), transparent), transparent 60%),
    linear-gradient(180deg, color-mix(in srgb, var(--glass) 45%, transparent), color-mix(in srgb, var(--glass) 75%, transparent));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04),
    inset 0 0 0 1px rgba(255, 255, 255, 0.07),
    0 18px 50px -18px rgba(120, 90, 255, 0.35);
  pointer-events: none;
}

/* the rim lit by the plasma, strongest on the side the bolts go out of */
.plug__glass::before {
  content: '';
  position: absolute;
  inset: -1px;
  padding: 1.5px;
  border-radius: inherit;
  background: radial-gradient(60% 120% at var(--gx) var(--gy), color-mix(in srgb, var(--azure) 90%, white), color-mix(in srgb, var(--violet) 60%, transparent) 40%, transparent 75%);
  opacity: calc(0.15 + var(--glow) * 0.85);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

/* a sheen across the top of the glass */
.plug__glass::after {
  content: '';
  position: absolute;
  left: 18px;
  right: 18px;
  top: 4px;
  height: 38%;
  border-radius: 999px 999px 40px 40px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0));
}

/* the electrode's chamber: the canvas draws the electrode in it; connected, the plug icon takes its place */
.plug__slot {
  position: relative;
  z-index: 0;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  flex: none;
  border-radius: 17px;
  background: radial-gradient(70% 70% at 50% 50%, rgba(154, 107, 255, calc(0.08 + var(--glow) * 0.22)), rgba(0, 0, 0, 0.5));
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.8), inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 1px 0 rgba(255, 255, 255, 0.06);
}

.plug__icon {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: var(--on);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--on) 70%, transparent));
}

.plug__words {
  position: relative;
  z-index: 3;
  display: grid;
  min-width: 7.2em;
  text-align: left;
  text-shadow: 0 0 14px #000, 0 0 4px #000;
}

.plug__word {
  grid-area: 1 / 1;
}

.is-on .plug__word {
  color: var(--on);
}

/* the white flash as the arc closes */
.plug__flash {
  position: absolute;
  inset: -2px;
  z-index: 2;
  border-radius: inherit;
  background: radial-gradient(90% 150% at 50% 50%, rgba(235, 245, 255, 0.95), rgba(150, 200, 255, 0.6) 45%, rgba(140, 120, 255, 0) 85%);
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
}

.plug:focus-visible {
  outline: 2px solid var(--azure);
  outline-offset: 5px;
}

/* ---------------------------------------------------------------- under it */
.plasma__note {
  position: relative;
  z-index: 3;
  margin: 0;
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 500;
  text-align: center;
  text-shadow: 0 0 10px #000;
}

@media (max-width: 480px) {
  .plug {
    height: 80px;
    gap: 15px;
    padding: 0 30px 0 17px;
    font-size: 22px;
  }

  .plug__slot {
    width: 48px;
    height: 48px;
    border-radius: 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .plug__glass,
  .plug__words {
    transition: none;
  }
}