/* The aurora button: a pill of arctic night on a black page. The sky, the aurora and the land are one WebGL shader on
   a canvas a little larger than the pill (the light spills just past its edge); the real button is on top, clear, and
   holds the words. Without WebGL the same sky is made of gradients and an SVG ridge.
   In a real page the button sits wherever the trial starts (a hero, the end of a pricing page): here it is centred. */
:root {
  --page: #000000;          /* the page */
  --sky-top: #03050f;       /* the sky high up, almost black */
  --sky-low: #0a1f2e;       /* the sky near the horizon, a cold blue */
  --green: #4dff9d;         /* the green of the aurora, oxygen glowing low down */
  --violet: #9b5cff;        /* the violet at the top of the curtains */
  --pink: #ff5fa8;          /* the pink fringe at the lower edge, when the aurora breaks */
  --ridge: #142231;         /* the far ridge of snow, in the dark */
  --ground: #010306;        /* the spruces and the ground in front */
  --ink: #f2fbf6;           /* the words on the sky */
  --muted: #7b8a92;         /* the line under the button */
}

* {
  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(--ink);
  font-family: 'Instrument Sans 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;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  padding: 72px 16px;
}

.aurora {
  display: grid;
  justify-items: center;
  gap: 26px;
}

/* ---------------------------------------------------------------- the pill */
.aurora__pill {
  position: relative;
  display: grid;
  border-radius: 999px;
  -webkit-tap-highlight-color: transparent;
}

/* larger than the pill and centred on it: the shader masks the sky to the pill and lets the light spill round it */
.aurora__canvas {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.aurora__btn {
  position: relative;
  display: grid;
  place-items: center;
  height: 60px;
  min-width: 300px;
  padding: 0 34px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  /* the glass over the sky: a light line along the top inside, a dark one along the bottom, a thin cold rim */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(150, 200, 220, 0.12);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

/* a little gloss on the glass, highest at the top */
.aurora__btn::before {
  content: '';
  position: absolute;
  inset: 1px 18px 60% 18px;
  border-radius: 999px 999px 40% 40% / 100% 100% 40% 40%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0));
  pointer-events: none;
}

/* the two faces sit on top of each other */
.aurora__face {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), 0 0 14px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}

/* the words breathe out wider when the aurora wakes */
.aurora__words {
  font-stretch: 88%;
  transition: font-stretch 0.7s cubic-bezier(0.3, 1.5, 0.5, 1);
}

.is-lit .aurora__words {
  font-stretch: 100%;
}

.aurora__icon {
  flex: none;
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
  transition: transform 0.6s cubic-bezier(0.3, 1.6, 0.5, 1);
}

.is-lit [data-face='rest'] .aurora__icon {
  transform: translateX(3px);
}

.aurora__icon--check {
  stroke-width: 2.5;
  stroke-dasharray: 1;
}

.aurora__btn:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 6px;
}

html[data-using='pointer'] .aurora__btn:focus-visible {
  outline: none;
}

.aurora__btn[aria-disabled='true'] {
  cursor: progress;
}

.aurora__hint {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  font-stretch: 94%;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.aurora__hint span {
  display: inline-block;
}

/* ---------------------------------------------------------------- without WebGL */
.aurora__flat {
  display: none;
}

.is-flat .aurora__flat {
  display: block;
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 999px;
  background: linear-gradient(0deg, var(--sky-low), var(--sky-top) 85%);
}

/* the element GSAP moves (it leans the rays towards the pointer), and inside it the curtain drawn in CSS */
.aurora__lean {
  position: absolute;
  inset: -10px -30px 0;
  transform-origin: 50% 70%;
}

.aurora__curtain {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(40% 60% at 22% 62%, rgba(77, 255, 157, 0.55), transparent 70%),
    radial-gradient(35% 50% at 74% 58%, rgba(77, 255, 157, 0.5), transparent 70%),
    radial-gradient(50% 45% at 55% 12%, rgba(155, 92, 255, 0.45), transparent 75%),
    linear-gradient(0deg, transparent 32%, var(--green) 37%, rgba(77, 255, 157, 0.35) 50%, rgba(77, 255, 157, 0.08) 68%, rgba(155, 92, 255, 0.25) 86%, transparent 100%);
  /* the rays: an uneven comb, so the curtain never looks like a barcode */
  -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 1px, rgba(0, 0, 0, 0.25) 3px, rgba(0, 0, 0, 0.8) 5px, rgba(0, 0, 0, 0.15) 8px, #000 9px, rgba(0, 0, 0, 0.4) 12px, rgba(0, 0, 0, 0.1) 15px, rgba(0, 0, 0, 0.9) 18px, rgba(0, 0, 0, 0.3) 21px, rgba(0, 0, 0, 0.6) 26px, rgba(0, 0, 0, 0.12) 31px);
  mask-image: repeating-linear-gradient(90deg, #000 0 1px, rgba(0, 0, 0, 0.25) 3px, rgba(0, 0, 0, 0.8) 5px, rgba(0, 0, 0, 0.15) 8px, #000 9px, rgba(0, 0, 0, 0.4) 12px, rgba(0, 0, 0, 0.1) 15px, rgba(0, 0, 0, 0.9) 18px, rgba(0, 0, 0, 0.3) 21px, rgba(0, 0, 0, 0.6) 26px, rgba(0, 0, 0, 0.12) 31px);
  opacity: calc(0.25 + 0.75 * var(--lit, 0));
  filter: blur(0.6px);
}

/* the wave of light when it is pressed: two soft bands that run out from the press */
.aurora__front {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 70px;
  margin-left: -35px;
  background: radial-gradient(50% 70% at 50% 60%, rgba(160, 255, 200, 0.85), rgba(77, 255, 157, 0.35) 45%, transparent 75%);
  opacity: 0;
  mix-blend-mode: screen;
}

.aurora__land {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.aurora__ridge {
  fill: var(--ridge);
}

.aurora__trees {
  fill: var(--ground);
}