/* ============================================================
   Spatial portfolio · icons
   Round, layered visionOS style icons (SPACE.icons.round()).
   <span class="vx-ricon vx-ricon--sys|app|photo|glyph" style="--ricon:96px">
     <span class="vx-ricon__l vx-ricon__bg"><img></span>   background layer
     <span class="vx-ricon__l vx-ricon__fg"><img></span>   foreground layer (sys)
     <span class="vx-ricon__spec"></span>                   glass specular + rim
   </span>
   Layers read --hx / --hy (-0.5..0.5, pointer over the icon) for
   parallax. The Home View sets them on .vx-homeicon; icons.js sets
   them on standalone icons. Layers also work inside any existing
   round container (SPACE.icons.layers(id)).
   ============================================================ */

.vx-ricon {
  --ricon: 96px;
  position: relative; display: inline-block; flex: none;
  width: var(--ricon); height: var(--ricon); border-radius: 50%;
  overflow: hidden; isolation: isolate; vertical-align: middle;
  background: rgb(40 40 48);
  box-shadow:
    0 calc(var(--ricon) * 0.16) calc(var(--ricon) * 0.3) calc(var(--ricon) * -0.14) rgb(0 0 0 / 0.5),
    0 calc(var(--ricon) * 0.05) calc(var(--ricon) * 0.12) calc(var(--ricon) * -0.05) rgb(0 0 0 / 0.32);
  transition: scale .45s var(--vx-spring), box-shadow .3s;
  -webkit-user-select: none; user-select: none;
  /* Safari: keep overflow clipping round while children transform */
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}
.vx-ricon--flat { box-shadow: none; }

/* Layers: stacked, full bleed. Background moves a little, foreground more (depth) */
.vx-ricon__l, .vx-ricon__spec { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; }
.vx-ricon .vx-ricon__l .vx-ricon__img,
.vx-homeicon__disc .vx-ricon__l .vx-ricon__img {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transform: none; display: block;
}
.vx-ricon__bg {
  scale: 1.07;
  translate: calc(var(--hx, 0) * -4%) calc(var(--hy, 0) * -4%);
  transition: translate .4s var(--vx-ease-out), scale .45s var(--vx-spring);
}
.vx-ricon__bg--app { scale: 1.03; background: var(--ricon-bg, #fff); }
.vx-ricon .vx-ricon__bg--app .vx-ricon__img, .vx-homeicon__disc .vx-ricon__bg--app .vx-ricon__img { scale: var(--ricon-fit, 1); }
.vx-ricon__fg {
  translate: calc(var(--hx, 0) * 7%) calc(var(--hy, 0) * 7%);
  transition: translate .4s var(--vx-ease-out), scale .45s var(--vx-spring);
}

/* Glass: specular highlight that follows the pointer + a luminous rim */
.vx-ricon__spec {
  z-index: 2;
  background:
    radial-gradient(110% 80% at calc(32% + var(--hx, 0) * 40%) calc(10% + var(--hy, 0) * 30%), rgb(255 255 255 / 0.3), rgb(255 255 255 / 0.05) 42%, transparent 62%),
    radial-gradient(80% 50% at 50% 112%, rgb(0 0 0 / 0.18), transparent 70%);
  box-shadow:
    inset 0 1.5px 0 rgb(255 255 255 / 0.5),
    inset 0 0 0 1px rgb(255 255 255 / 0.2),
    inset 0 -2px 6px rgb(0 0 0 / 0.14);
  transition: background .3s;
}
.vx-ricon--app .vx-ricon__spec {
  background:
    radial-gradient(110% 80% at calc(32% + var(--hx, 0) * 40%) calc(10% + var(--hy, 0) * 30%), rgb(255 255 255 / 0.22), rgb(255 255 255 / 0.03) 40%, transparent 60%);
}

/* Glyph fallback (unknown ids): graphite disc + white glyph, same lighting */
.vx-ricon__bg--glyph {
  background:
    radial-gradient(90% 75% at 30% 12%, rgb(255 255 255 / 0.28), transparent 60%),
    linear-gradient(160deg, rgb(var(--ricon-tint, 120 124 138)), rgb(var(--ricon-tint, 120 124 138) / 0.55) 55%, rgb(20 20 26));
}
.vx-ricon__fg--glyph { display: grid; place-items: center; color: #fff; filter: drop-shadow(0 2px 3px rgb(0 0 0 / 0.35)); }
.vx-ricon__fg--glyph .vx-ico { width: 44%; height: 44%; stroke-width: 1.7; }

/* Gaze: standalone icons lift under the pointer (the Home View animates its own disc) */
.vx-ricon.is-gaze { scale: 1.04; }
.vx-ricon.is-gaze .vx-ricon__fg { scale: 1.04; }

/* Inside the Home View disc: the disc already clips, shades and lifts; add layer depth on hover */
.vx-homeicon__disc > .vx-ricon { position: absolute; inset: 0; width: 100%; height: 100%; box-shadow: none; }
.vx-homeicon:hover .vx-ricon__fg, .vx-homeicon:focus-visible .vx-ricon__fg { scale: 1.05; }

/* Contact sheet / gallery helper (optional) */
.vx-ricon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 22px 12px; }
.vx-ricon-cell { display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 500; color: var(--vx-label-1); text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .vx-ricon, .vx-ricon__bg, .vx-ricon__fg, .vx-ricon__spec { transition: none; }
  .vx-ricon__bg, .vx-ricon__fg { translate: none; }
}
html.vx-reduced .vx-ricon__bg, html.vx-reduced .vx-ricon__fg { translate: none; transition: none; }