/* Glass icon tiles — D BADAMI
   ---------------------------------------------------------------------------
   Markup:
     <span class="gi" style="--tone:#8A6A3E">
       {% include "icons/ui/glyph/truck.svg" %}
     </span>

   Size:   --size on the element, or .gi--sm / .gi--lg   (default 56px)
   Colour: --tone, from palette.json. Everything else is derived from it.
   Hover:  a light band sweeps across the glass. Set .gi--static to disable.
   --------------------------------------------------------------------------- */

.gi {
  --size: 56px;
  --tone: #4E5F73;
  --glass-top: color-mix(in srgb, var(--tone) 30%, #fff);
  --glass-bot: color-mix(in srgb, var(--tone) 60%, #fff);
  --glass-edge: color-mix(in srgb, var(--tone) 12%, #fff);
  --glyph: color-mix(in srgb, var(--tone) 58%, #000);

  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  inline-size: var(--size);
  block-size: var(--size);
  border-radius: 26.5%;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(178deg, var(--glass-top), var(--glass-bot));
  box-shadow:
    inset 0 0 0 1px var(--glass-edge),
    inset 0 -1px 3px color-mix(in srgb, var(--tone) 45%, transparent);
  transition: transform .22s cubic-bezier(.2, .7, .3, 1),
              box-shadow .22s cubic-bezier(.2, .7, .3, 1);
}

/* resting highlight — the fixed sheen across the upper left */
.gi::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(127deg,
    rgb(255 255 255 / .50) 0%,
    rgb(255 255 255 / .16) 26%,
    rgb(255 255 255 / 0) 46%);
  pointer-events: none;
}

/* the travelling shine, parked off the left edge until hover */
.gi::after {
  content: "";
  position: absolute;
  inset-block: -30%;
  inline-size: 42%;
  inset-inline-start: -60%;
  background: linear-gradient(90deg,
    rgb(255 255 255 / 0), rgb(255 255 255 / .72), rgb(255 255 255 / 0));
  transform: skewX(-18deg);
  pointer-events: none;
  transition: inset-inline-start .62s cubic-bezier(.35, .1, .25, 1);
}

.gi > svg {
  position: relative;
  z-index: 1;
  inline-size: 54%;
  block-size: 54%;
  fill: var(--glyph);
  transition: transform .22s cubic-bezier(.2, .7, .3, 1);
}

/* --- hover / focus ------------------------------------------------------- */

.gi:where(:hover, :focus-visible),
:where(a, button, .tile, .card, li):where(:hover, :focus-visible) .gi {
  transform: translateY(-2px);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--tone) 6%, #fff),
    inset 0 -1px 3px color-mix(in srgb, var(--tone) 45%, transparent),
    0 6px 16px color-mix(in srgb, var(--tone) 26%, transparent);
}

.gi:where(:hover, :focus-visible)::after,
:where(a, button, .tile, .card, li):where(:hover, :focus-visible) .gi::after {
  inset-inline-start: 118%;
}

.gi:where(:hover, :focus-visible) > svg,
:where(a, button, .tile, .card, li):where(:hover, :focus-visible) .gi > svg {
  transform: scale(1.06);
}

/* --- sizes --------------------------------------------------------------- */

.gi--sm { --size: 34px; border-radius: 28%; }
.gi--lg { --size: 88px; }
.gi--xl { --size: 120px; }

/* --- variants ------------------------------------------------------------ */

.gi--static::after { display: none; }
.gi--static:where(:hover, :focus-visible) { transform: none; }

/* solid variant — for a selected nav row or an active state */
.gi--solid {
  --glass-top: color-mix(in srgb, var(--tone) 88%, #fff);
  --glass-bot: var(--tone);
  --glyph: #fff;
  --glass-edge: color-mix(in srgb, var(--tone) 60%, #fff);
}

/* --- dark ground --------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .gi {
    --glass-top: color-mix(in srgb, var(--tone) 62%, #1b1d22);
    --glass-bot: color-mix(in srgb, var(--tone) 34%, #1b1d22);
    --glass-edge: color-mix(in srgb, var(--tone) 55%, #fff);
    --glyph: color-mix(in srgb, var(--tone) 30%, #fff);
  }
  :root:not([data-theme="light"]) .gi::before {
    background: linear-gradient(127deg,
      rgb(255 255 255 / .22) 0%, rgb(255 255 255 / .07) 26%, rgb(255 255 255 / 0) 46%);
  }
}
:root[data-theme="dark"] .gi {
  --glass-top: color-mix(in srgb, var(--tone) 62%, #1b1d22);
  --glass-bot: color-mix(in srgb, var(--tone) 34%, #1b1d22);
  --glass-edge: color-mix(in srgb, var(--tone) 55%, #fff);
  --glyph: color-mix(in srgb, var(--tone) 30%, #fff);
}
:root[data-theme="dark"] .gi::before {
  background: linear-gradient(127deg,
    rgb(255 255 255 / .22) 0%, rgb(255 255 255 / .07) 26%, rgb(255 255 255 / 0) 46%);
}

/* --- accessibility ------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .gi, .gi::after, .gi > svg { transition: none }
  .gi:where(:hover, :focus-visible) { transform: none }
  .gi:where(:hover, :focus-visible) > svg { transform: none }
  .gi::after { display: none }
}