/* InteractiveCharacter — layout for layered 2.5D characters.
   Size a character by giving its element a width; height follows the art. */
.ic {
  --ic-scale: 1;
  --ic-lx: 70%;
  --ic-ly: 20%;
  --ic-lboost: 0;
  --ic-light: 255, 150, 70;
  position: relative;
  display: block;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
.ic[tabindex], .ic[role="button"], button.ic { cursor: pointer; }
.ic-stage {
  position: relative;
  width: calc(100% * var(--ic-scale));
  margin: 0 auto;
  aspect-ratio: var(--ic-aspect);
  perspective: 1400px;
}
.ic-stack {
  position: absolute; inset: 0;
  transform-origin: 50% 100%;
  transform-style: preserve-3d;
  will-change: transform;
}
.ic-layer, .ic-back { position: absolute; inset: 0; }
.ic-head { will-change: transform; }
.ic-art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.ic-canvas { position: absolute; display: block; pointer-events: none; }
.ic-gl .ic-body { visibility: hidden; } /* the mesh has taken over from the flat image */

/* Light that follows the cursor, clipped to each layer's silhouette. */
.ic-light {
  position: absolute; inset: 0; pointer-events: none;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  background: radial-gradient(circle at var(--ic-lx) var(--ic-ly),
    rgba(var(--ic-light), .38), rgba(var(--ic-light), .08) 38%, transparent 60%);
  mix-blend-mode: screen;
  opacity: calc(.4 + var(--ic-lboost) * .3);
}
.ic-2d .ic-light { opacity: calc(.3 + var(--ic-lboost) * .25); }

/* Soft contact shadow; squashes as the character leaves the ground. */
.ic-shadow {
  position: absolute; left: 50%; bottom: -1.5%;
  width: 62%; height: 3.2%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .38), transparent);
  transform: translateX(-50%);
}
.ic-back .ic-extra { position: absolute; max-width: none; pointer-events: none; }

.ic:focus-visible { outline: 3px solid rgba(var(--ic-light), 1); outline-offset: 6px; border-radius: 16px; }