/* The spatial tile (_includes/spatial-tile.html). --mx and --my run from -1 to 1 across the
   tile and come from spatial-tile.js; --rx and --ry are the tilt they make. */

.spatial-tile {
  --mx: 0;
  --my: 0;
  --rx: 0deg;
  --ry: 0deg;
  display: block;
  width: min(300px, 70vw);
  margin: 0 auto 34px;
  perspective: 800px;
  -webkit-tap-highlight-color: transparent;
}
.spatial-tile:focus-visible { outline: none; }

.st-card {
  position: relative;
  display: block;
  aspect-ratio: 1;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .7s cubic-bezier(.2, .8, .2, 1);
}

.st-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 14%;
  box-shadow: 0 14px 26px -16px rgba(0, 0, 0, .7);
  transition: box-shadow .7s cubic-bezier(.2, .8, .2, 1);
}

/* A little bigger than the face, so it can slide against the pointer without showing an edge. */
.st-bg {
  position: absolute;
  inset: -4%;
  width: 108%;
  max-width: none;
  height: 108%;
  transform: translate(calc(var(--mx) * -7px), calc(var(--my) * -7px));
  transition: transform .7s cubic-bezier(.2, .8, .2, 1);
}

.st-glare {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at calc(50% + var(--mx) * 45%) calc(50% + var(--my) * 45%),
              rgba(255, 255, 255, .26), rgba(255, 255, 255, 0) 58%);
  opacity: 0;
  transition: opacity .5s;
  pointer-events: none;
}

.st-fg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: translate3d(calc(var(--mx) * 9px), calc(var(--my) * 9px), 0);
  filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
  transition: transform .7s cubic-bezier(.2, .8, .2, 1), filter .7s;
  pointer-events: none;
}

/* Hovered or focused: the tile comes up, and the foreground lifts off the card with a shadow
   under it. While the pointer moves, the tilt follows it quickly. */
.spatial-tile.is-on .st-card,
.spatial-tile:focus-visible .st-card { transform: rotateX(var(--rx)) rotateY(var(--ry)) scale(1.05); transition-duration: .25s; }
.spatial-tile.is-on .st-face,
.spatial-tile:focus-visible .st-face { box-shadow: 0 34px 48px -22px rgba(0, 0, 0, .75); }
.spatial-tile.is-on .st-glare,
.spatial-tile:focus-visible .st-glare { opacity: 1; }
.spatial-tile.is-on .st-fg,
.spatial-tile:focus-visible .st-fg {
  transform: translate3d(calc(var(--mx) * 14px), calc(var(--my) * 14px), 56px);
  filter: drop-shadow(0 20px 14px rgba(0, 0, 0, .45));
  transition-duration: .25s, .7s;
}
.spatial-tile:focus-visible .st-face { outline: 3px solid var(--accent-hi, #ffe48c); outline-offset: 5px; }

/* No hover on touch screens: keep the foreground lifted and let the tile drift. */
@media (hover: none) {
  .st-card { animation: st-drift 7s ease-in-out infinite; }
  .st-fg { transform: translate3d(0, 0, 40px); filter: drop-shadow(0 16px 12px rgba(0, 0, 0, .4)); }
  .st-face { box-shadow: 0 26px 40px -22px rgba(0, 0, 0, .75); }
}
@keyframes st-drift {
  0%, 100% { transform: rotateX(5deg) rotateY(-7deg); }
  50% { transform: rotateX(-4deg) rotateY(7deg); }
}

@media (prefers-reduced-motion: reduce) {
  .st-card, .st-bg, .st-fg, .st-face, .st-glare { animation: none; transition: none; }
}