/* ============================================================
   family.css — what Tentaplex, Tentanote and Tentabase share, on top of
   tokens.css: the dark ground, the field of datapoints behind it with its depth, and
   the frosted glass everything sits on. Each page adds its own sheet
   (tentaplex.css, product.css) and says its colours on <html>:

     --haze-1, --haze-2   the two corner lights, as "r g b"
     --accent             the page's colour, as "r g b"

   <html class="family" data-theme="dark">: dark whatever the system says.
   ============================================================ */

/* The ground is a neutral near-black, #111111, not the brand's violet-tinted
   dark: the owner's pick, and the one place these pages set a colour of
   their own. The raised surface is the same grey a step up, and the fade
   names the ground it fades from, as --surface-fade must. */
:root.family {
  --surface: #111111;
  --surface-raised: #1a1a1a;
  --muted: #202020;
  --surface-fade: rgb(17 17 17 / 0);
  --haze-1: 170 90 225;
  --haze-2: 80 190 150;
  --accent: 170 90 225;
}

/* One faint light from above, so the ground has depth before the field. */
.family body {
  overflow-y: auto;
  background:
    radial-gradient(70% 55% at 50% -8%, rgb(255 255 255 / 0.055), transparent 70%),
    var(--surface);
}

/* ---- the field and its depth ----------------------------------- */

/* The field of datapoints, edge to edge behind everything
   (shared/datapoints.js). */
.field {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* The far copy: bigger, mirrored and out of step, and out of focus, the way
   deep water loses what is behind. */
.field.far { filter: blur(6px); opacity: 0.75; }

/* The near field's depth of field is drawn point by point (datapoints.js,
   `focus`): each is blurred by how far it sits from the plane in focus. */

/* Over both: a faint haze from opposite corners and a vignette, so the
   window reads as a way into something deeper. */
.depth {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 50% at 12% 8%, rgb(var(--haze-1) / 0.09), transparent 70%),
    radial-gradient(60% 50% at 88% 96%, rgb(var(--haze-2) / 0.08), transparent 70%),
    radial-gradient(120% 90% at 50% 45%, transparent 45%, rgb(0 0 0 / 0.55) 100%);
}

/* ---- glass ---------------------------------------------------------- */

/* Frosted over the field. The edge is a 1px gradient, lighter at the top
   where the light falls: two backgrounds, one clipped to the padding box and
   one showing through a transparent border. */
.glass {
  border: 1px solid transparent;
  border-radius: 24px;
  background:
    linear-gradient(to bottom, rgb(30 30 30 / 0.7), rgb(22 22 22 / 0.78)) padding-box,
    linear-gradient(to bottom, rgb(255 255 255 / 0.14), rgb(255 255 255 / 0.04)) border-box;
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.03) inset, 0 24px 48px -24px rgb(0 0 0 / 0.6);
}

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

/* In, the first time the page is shown. */
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; }
}