/* ==========================================================================
   HVGE glass lettering (reusable component)
   Markup lives in index.html, behaviour in js/glass.js.

   Frosted glass made from the browser's own blur, masked to the letter
   shapes. The GPU handles this natively, so it stays smooth while the words
   scroll behind it, and it works in Chrome, Safari and Firefox.
   ========================================================================== */

.hvge-glass {
  /* The glass body. Set the colour to your page background;
     higher opacity = the lettering hides more of what is behind it. */
  --hvge-glass-color: #d9d9d9;
  --hvge-glass-opacity: 0.7;
  /* Colour of the solid lettering the intro starts from */
  --hvge-glass-start: #fff;
  /* How blurry things look through the glass */
  --hvge-glass-frost: 10px;    /* on the strokes */
  --hvge-glass-fill: 3px;      /* between the strokes (0px = clear) */
  /* 0 = no blur, 1 = full blur; animated by the intro in js/glass.js */
  --hvge-glass-amount: 1;

  position: relative;
  width: 100%;                 /* size it however you like; height follows */
  aspect-ratio: 1342 / 406;
  pointer-events: none;        /* content behind stays selectable and clickable */
  z-index: 1;                  /* keeps the lettering in front of the content */
}

/* The lens: blurs what is behind it, only inside the letters */
.hvge-glass__lens {
  position: absolute;
  inset: 0;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* Soft blur over the whole letter body */
.hvge-glass__lens--fill {
  -webkit-mask-image: url("../assets/glass-silhouette.png");
  mask-image: url("../assets/glass-silhouette.png");
  -webkit-backdrop-filter: blur(calc(var(--hvge-glass-fill) * var(--hvge-glass-amount)));
  backdrop-filter: blur(calc(var(--hvge-glass-fill) * var(--hvge-glass-amount)));
}

/* Stronger frost on the strokes, where the highlights sit */
.hvge-glass__lens--strokes {
  -webkit-mask-image: url("../assets/glass-shape.png");
  mask-image: url("../assets/glass-shape.png");
  -webkit-backdrop-filter: blur(calc(var(--hvge-glass-frost) * var(--hvge-glass-amount))) saturate(1.15);
  backdrop-filter: blur(calc(var(--hvge-glass-frost) * var(--hvge-glass-amount))) saturate(1.15);
}

/* The shine: highlights and faint tint on top of the frost */
.hvge-glass__shine {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.hvge-glass__body  { fill: var(--hvge-glass-color); opacity: var(--hvge-glass-opacity); }
.hvge-glass__solid { fill: var(--hvge-glass-start); }

/* Hidden SVG that only holds shared definitions (letter shape) */
.hvge-glass__defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}