/* Fairy-tale UI: the controls shared by the lab pages rose.html, briar.html and
   neverland.html, so the set reads as one project. Loaded only by those pages; none of it enters css/styles.css.

   One painted button per moment (.fy-btn--primary): black gouache with a wash of pink, violet and
   blue light welling up at its foot, painted and animated by js/fairy-ui.js, with pixie dust.
   Everything else stays quiet: words in Princess Sofia that glow faintly on hover, captions in
   IBM Plex Sans, greys cut from the same violet black as the paint. */

:root {
  --font-tale:   "Princess Sofia", "Snell Roundhand", cursive;
  --font-body:   "IBM Plex Sans", Arial, sans-serif;
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-soft:  cubic-bezier(0.22, 1, 0.36, 1);

  /* greys cut from the same violet black as the paint, kept nearly neutral */
  --ui-ink:      #1d1a24;
  --ui-ink-up:   #3a3542;
  --ui-mid:      #76717f;
  --ui-faint:    #bab5c2;
  --ui-line:     #e6e3ec;
  --ui-fill:     #f4f3f7;
  --ui-paper:    #ffffff;
  --ui-shadow:   color-mix(in oklch, var(--ui-glow-violet) 16%, transparent);
  --ui-radius:   6px;   /* every button in the set has 6px corners */
  --ui-caption-gap: 22px;   /* from a button down to the caption under it, on every page in the set */

  /* the painted button: black gouache, and the light at its foot */
  --ui-paint:       #1b1722;
  --ui-glow-pink:   #f1a3d6;
  --ui-glow-violet: #9474ec;
  --ui-glow-blue:   #4f69df;
  /* the pixie dust: white, warmed a little toward gold */
  --ui-sparkle:     #fffaf0;
  --ui-dust-gold:   #f1e4c0;
  --ui-dust-deep:   #d2bd8c;   /* its edge, so a speck still reads on a white page */

  /* the soft glow the quiet controls borrow from the paint */
  --ui-glow-soft: radial-gradient(closest-side,
    color-mix(in oklch, var(--ui-glow-pink) 34%, transparent),
    color-mix(in oklch, var(--ui-glow-violet) 20%, transparent) 60%, transparent);
}

.fy-btn {
  font: 400 17px/1 var(--font-tale);
  height: 46px; min-width: 0; padding: 0 22px; white-space: nowrap;
  border: 0; border-radius: var(--ui-radius); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 240ms var(--ease-out-quart), color 240ms var(--ease-out-quart),
              box-shadow 240ms var(--ease-out-quart), opacity 240ms var(--ease-out-quart);
}
.fy-btn:focus-visible { outline: 1.5px solid var(--ui-ink); outline-offset: 2px; }

/* the painted one: a canvas behind its label, the light kept in the paint; just a plain soft
   shadow beneath it, a close one and a wide faint one */
.fy-btn--primary {
  position: relative; overflow: hidden; color: var(--ui-paper); background: var(--ui-paint);
  box-shadow: 0 1px 2px color-mix(in oklch, var(--ui-ink) 22%, transparent),
              0 10px 20px -12px color-mix(in oklch, var(--ui-ink) 38%, transparent);
  transition: box-shadow 320ms var(--ease-out-quart);
}
.fy-btn--primary:hover {
  box-shadow: 0 1px 2px color-mix(in oklch, var(--ui-ink) 24%, transparent),
              0 12px 24px -12px color-mix(in oklch, var(--ui-ink) 44%, transparent);
}
.fy-btn__paint { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.fy-btn__label { position: relative; text-shadow: 0 0 10px color-mix(in oklch, var(--ui-glow-violet) 45%, transparent); }

/* the quiet one: just the word, no surface; a soft glow of the paint's light rises behind it */
.fy-btn--quiet { position: relative; color: var(--ui-ink); background: none; isolation: isolate; }
.fy-btn--quiet::before {
  content: ""; position: absolute; inset: 8px 12px; z-index: -1; border-radius: 999px;
  background: var(--ui-glow-soft); filter: blur(9px);
  opacity: 0; transition: opacity 320ms var(--ease-out-quart);
}
.fy-btn--quiet:hover::before { opacity: 1; }

/* a caption under a control */
.fy-caption { font: 400 13px/1.5 var(--font-body); color: var(--ui-mid); text-align: center; text-wrap: pretty; }

/* the dust, drawn over the whole page and never in the way of a click */
.fy-dust { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 50; }

@media (prefers-reduced-motion: reduce) {
  .fy-btn, .fy-btn--quiet::before { transition: none; }
  .fy-dust { display: none; }
}