/* Heliograph — the visual layer. The JS only writes --hg-* variables; everything you see is here. */

:root {
  --hg-light: 255 244 230;
  --hg-intensity: 1;
  --hg-shadow-rgb: 14 28 70;
  --hg-sky-top: 46 126 240;
  --hg-sky-bottom: 188 224 255;
  --hg-night: 0;
  --hg-light-color: rgb(var(--hg-light));
}

/* ---- surfaces ---------------------------------------------------------- */

[data-hg~="surface"] {
  --hg-gloss: 0.32; /* specular strength */
  --hg-spread: 75%; /* specular radius: smaller = sharper, glossier */
  --hg-rim: 0.45; /* edge light strength */
  --hg-rim-width: 1px;
  --hg-tint: 6%; /* how much the light colour bleeds into the surface */
  position: relative;
  isolation: isolate;
  box-shadow: var(--hg-shadow, 0 1px 2px rgb(var(--hg-shadow-rgb) / 0.2));
}

/* Specular hotspot. z-index:-1 inside an isolated surface paints above its background, below its content. */
[data-hg~="surface"]::before,
[data-hg~="surface"]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
}

[data-hg~="surface"]::before {
  background: radial-gradient(
    circle at var(--hg-lx, 50%) var(--hg-ly, 0%),
    rgb(var(--hg-light) / calc(var(--hg-spec, 0.5) * var(--hg-gloss))) 0%,
    rgb(var(--hg-light) / 0) var(--hg-spread)
  );
  background-color: color-mix(in oklab, rgb(var(--hg-light)) var(--hg-tint), transparent);
  mix-blend-mode: screen;
}

/* Rim light: a 1px border that brightens on the side facing the light. */
[data-hg~="surface"]::after {
  padding: var(--hg-rim-width);
  background: linear-gradient(
    var(--hg-angle, 0deg),
    rgb(var(--hg-light) / 0) 35%,
    rgb(var(--hg-light) / calc(var(--hg-rim) * var(--hg-facing, 1))) 100%
  );
  -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);
}

/* ---- materials --------------------------------------------------------- */

[data-hg-material="matte"] { --hg-gloss: 0.08; --hg-spread: 90%; --hg-rim: 0.18; }
[data-hg-material="satin"] { --hg-gloss: 0.32; --hg-spread: 75%; --hg-rim: 0.45; }
[data-hg-material="gloss"] { --hg-gloss: 0.75; --hg-spread: 38%; --hg-rim: 0.7; }

[data-hg-material="glass"] {
  --hg-gloss: 0.9;
  --hg-spread: 30%;
  --hg-rim: 0.9;
  --hg-tint: 3%;
  background: rgb(255 255 255 / 0.06);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
}

/* Metal: the hotspot stretches into a brushed band perpendicular to the light. */
[data-hg-material="metal"] {
  --hg-gloss: 0.6;
  --hg-spread: 55%;
  --hg-rim: 0.85;
  --hg-tint: 12%;
}
[data-hg-material="metal"]::before {
  background:
    radial-gradient(
      ellipse 140% 45% at var(--hg-lx, 50%) var(--hg-ly, 0%),
      rgb(var(--hg-light) / calc(var(--hg-spec, 0.5) * var(--hg-gloss))) 0%,
      rgb(var(--hg-light) / 0) var(--hg-spread)
    ),
    repeating-linear-gradient(
      calc(var(--hg-angle, 0deg) + 90deg),
      rgb(255 255 255 / 0.035) 0 1px,
      rgb(0 0 0 / 0.035) 1px 3px
    );
  background-color: color-mix(in oklab, rgb(var(--hg-light)) var(--hg-tint), transparent);
}

/* ---- text -------------------------------------------------------------- */

[data-hg~="text"] {
  text-shadow: var(--hg-text-shadow, none);
}

/* ---- sky & lamp: purely variable-driven, no per-element JS --------------- */

[data-hg~="sky"] {
  background: linear-gradient(180deg, rgb(var(--hg-sky-top)) 0%, rgb(var(--hg-sky-bottom)) 100%);
}

/* A soft glow that sits at the light's screen position. Put it once, anywhere. */
[data-hg~="lamp"] {
  --hg-lamp-size: 520px;
  position: fixed;
  left: 0;
  top: 0;
  width: var(--hg-lamp-size);
  height: var(--hg-lamp-size);
  margin: calc(var(--hg-lamp-size) / -2) 0 0 calc(var(--hg-lamp-size) / -2);
  transform: translate3d(var(--hg-light-x, 50vw), var(--hg-light-y, 20vh), 0);
  border-radius: 50%;
  background: radial-gradient(circle, rgb(var(--hg-light) / calc(0.22 * var(--hg-intensity))) 0%, rgb(var(--hg-light) / 0) 62%);
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: screen;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  [data-hg~="lamp"] { transition: none; }
}