@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400..700&display=swap');

/*
 * Tip 011: eight common easing curves on one motion, Lumno's toast coming
 * in. The stage is split in two: the scene on top plays the toast under the
 * tabs, with an outline where it was at each eighth of the time; the dark
 * board below draws the curve with a dot that moves in step and marks the
 * same moments, and says what the curve is for.
 */

.tip-stage {
  --font: 'Inter', -apple-system, 'Helvetica Neue', sans-serif;
  --ink: #18181b;
  --accent: #0d99ff;
  padding: 0;
  background: #eceef1;
  font-family: var(--font);
  font-feature-settings: 'cv11', 'tnum';
}

.tip-stage:has(> .tip-credit) { padding: 0; }

/* ---------- The eight curves ---------- */

/* Frosted glass over the photo. */
.kinds {
  position: absolute;
  top: 36px;
  z-index: 4;
  left: 50%;
  display: flex;
  gap: 2px;
  padding: 4px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6), 0 8px 24px -12px rgba(15, 23, 42, 0.25);
  backdrop-filter: blur(20px) saturate(140%);
  translate: -50% 0;
}

/* Placed on the current tab by curves.js. */
.kinds-pill {
  position: absolute;
  top: 4px;
  left: 0;
  height: calc(100% - 8px);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 4px 12px -6px rgba(15, 23, 42, 0.2);
}

.kind {
  position: relative;
  cursor: pointer;
  padding: 12px 14px;
  color: rgba(24, 24, 27, 0.55);
  font: 600 18px/1 var(--font);
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: color 200ms ease;
}

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

/* ---------- The scene ---------- */

/* The top half, edge to edge: a soft colour gradient (photo by Alexander X.
   on Unsplash), lifted a little so the white toast sits light on it. */
.scene {
  position: absolute;
  inset: 0 0 auto;
  height: 720px;
  overflow: hidden;
  background: url(./media/gradient-wave.jpg) center / cover, #5a8f9a;
}

.scene::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(250, 250, 248, 0.18);
}

/* Holds the toast's motion blur; takes no room. */
.filters {
  position: absolute;
  width: 0;
  height: 0;
}

/* Lumno's copy-URL toast at 3x, resting low in the scene so it can come in
   from well above. */
.toast {
  position: absolute;
  top: 510px;
  left: 50%;
  display: flex;
  isolation: isolate;
  align-items: center;
  gap: 24px;
  overflow: hidden;
  padding: 30px 48px 30px 30px;
  border: 3px solid rgba(214, 219, 227, 0.95);
  border-radius: 999px;
  --lumno-corner-shape: round;
  background: linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%);
  color: #1f2937;
  box-shadow: 0 44px 120px -36px rgba(17, 24, 39, 0.12), 0 16px 48px -24px rgba(17, 24, 39, 0.06);
  font: 500 36px/1.35 var(--tip-font-sans);
  white-space: nowrap;
  translate: -50% -50%;
}

.toast-icon {
  flex: none;
  width: 48px;
  height: 48px;
  fill: currentColor;
}

/* The light that crosses the toast as it lands: Lumno's band, a little
   brighter so it shows on a white toast in a video. */
.toast-sheen {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -40%;
  width: 40%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
  opacity: 0;
  pointer-events: none;
}

/* Where the toast was at each eighth of the time: close together where it
   moved slowly, far apart where it moved fast. Thin outlines with a faint
   fill and no shadow of their own, so the trail stays lighter than the toast
   and never adds to the toast's shadow. Older ones are fainter, and one
   reached on a fast step turns blue, like the curve below. */
.ghost {
  position: absolute;
  top: 510px;
  left: 50%;
  box-sizing: border-box;
  border: 2px solid rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  --lumno-corner-shape: round;
  translate: -50% -50%;
  opacity: 0;
}

/* ---------- The board ---------- */

/* The bottom half, edge to edge, with the credit at its foot. */
.board {
  position: absolute;
  inset: 720px 0 0;
  display: grid;
  grid-template-columns: 440px 1fr;
  align-items: start;
  gap: 44px;
  padding: 92px 72px 0 52px;
  background: #141416;
  box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.04);
  color: #e4e4e7;
}

.graph { margin: 0; }
.graph svg { display: block; width: 440px; height: 440px; overflow: visible; }

.graph .axis { stroke: rgba(255, 255, 255, 0.28); stroke-width: 2; }
.graph .grid { stroke: rgba(255, 255, 255, 0.1); stroke-width: 2; stroke-dasharray: 4 6; }
.graph .ref { stroke: rgba(255, 255, 255, 0.16); stroke-width: 2; stroke-dasharray: 6 8; }
.graph .curve { fill: none; stroke: var(--accent); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.graph .handle { stroke: rgba(255, 255, 255, 0.45); stroke-width: 2; }
.graph .knot { fill: #18181b; stroke: #ffffff; stroke-width: 3; }
.graph .drop { stroke: rgba(13, 153, 255, 0.5); stroke-width: 2; stroke-dasharray: 3 5; }
.graph .dot { fill: #ffffff; stroke: var(--accent); stroke-width: 5; }
.graph .mark { fill: #141416; stroke: var(--accent); stroke-width: 3; opacity: 0; }
.graph .label { fill: rgba(255, 255, 255, 0.45); font: 500 18px/1 var(--font); }

.about { display: flex; flex-direction: column; min-width: 0; padding-top: 38px; }

.about-no {
  margin: 0;
  color: rgba(255, 255, 255, 0.4);
  font: 500 18px/1 var(--tip-font-mono);
  letter-spacing: 0.12em;
}

.about-name {
  margin: 14px 0 0;
  color: #ffffff;
  font: 650 50px/1.05 var(--font);
  letter-spacing: -0.03em;
}

.about-use {
  margin: 18px 0 0;
  color: rgba(255, 255, 255, 0.72);
  font: 500 25px/1.4 var(--font);
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

.code {
  margin: 30px 0 0;
  padding: 18px 20px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  color: #d4d4d8;
  font: 500 19px/1.55 var(--tip-font-mono);
  white-space: pre-wrap;
}

.code .prop { color: #8ab4f8; }
.code .val { color: #f6c177; }

.tip-credit { bottom: 34px; color: rgba(255, 255, 255, 0.42); }
.tip-credit img { opacity: 0.42; }