/* gallery-magic.css: the gallery's quiet magic. The air behind the works
 * (js/gallery-ambient.js), the elves that peek from the frames and the glints
 * on hover (js/frame-elves.js), and the artist's two little link icons.
 * Everything is decorative: no pointer events, hidden from assistive tech,
 * and gone entirely for reduced motion, print and forced colours. */

/* Behind the works: painted under .archive-main (z-index 2, later in the page). */
.gm-ambient {
  position: fixed;
  inset: 0;
  z-index: 2;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
}

#art-grid.ex-wall { position: relative; }
.fe-layer {
  position: absolute;
  inset: 0;
  z-index: 4;
  overflow: visible;
  pointer-events: none;
}

/* Frame elves ------------------------------------------------------------ */
.fe-elf {
  --qe-glow: var(--fe-glow, #cfe6ea);
  --qe-skin: color-mix(in srgb, var(--qe-glow) 12%, #fffaf0);
  --qe-tint: color-mix(in srgb, var(--qe-glow) 78%, #ffffff);
  --qe-facet: color-mix(in srgb, var(--qe-glow) 72%, #3a3452);
  --qe-deep: color-mix(in srgb, var(--qe-glow) 22%, #08070d);
  position: absolute;
  opacity: 0;
  pointer-events: none;
  user-select: none;
}
/* Clipped along the frame edge it comes from, so it steps out from behind the work. */
.fe-top,
.fe-bottom { clip-path: inset(-600px -600px 0 -600px); }
.fe-bottom { transform: rotate(180deg); transform-origin: 50% 100%; }   /* hangs upside down */
.fe-left { clip-path: inset(-600px 0 -600px -600px); }
.fe-right { clip-path: inset(-600px -600px -600px 0); }

.fe-body,
.fe-act { position: absolute; inset: 0; }
.fe-body { transform: translateY(100%); }
.fe-left .fe-body { transform: translateX(100%); }
.fe-right .fe-body { transform: translateX(-100%); }

/* Glances, a doze, slower moth wings, curling tentacles, a wobbling star. */
.fe-glance .qe-eyes { animation: qe-blink 3.1s ease-in-out var(--qe-blink, 0s) infinite, fe-glance 2.4s ease-in-out infinite; }
.fe-sleep .qe-eyes { animation: none; transform: scaleY(.14); transition: transform .5s ease; }
.fe-slow-wings { animation-duration: .42s !important; }
.fe-tentacles { transform-box: view-box; transform-origin: 12px 17px; animation: fe-curl 1.3s ease-in-out infinite alternate; }
.fe-star-wobble { transform-box: view-box; transform-origin: 12px 10px; animation: fe-wobble 1.8s ease-in-out infinite alternate; }
/* The glow comes from the figure itself (a halo box can show its edges on some screens). */
.fe-elf .qe-halo { display: none; }
.fe-elf .qe-svg {
  filter:
    drop-shadow(0 0 1.5px color-mix(in srgb, var(--qe-glow) 60%, #ffffff))
    drop-shadow(0 0 6px color-mix(in srgb, var(--qe-glow) 55%, transparent))
    drop-shadow(0 0 14px color-mix(in srgb, var(--qe-glow) 25%, transparent));
}
.fe-eye-lit { fill: var(--qe-tint); filter: drop-shadow(0 0 1.5px var(--qe-glow)); }
.qe-v-glints .qe-svg { filter: drop-shadow(0 0 3px color-mix(in srgb, var(--qe-glow) 80%, transparent)); }
.qe-v-glints .qe-halo { opacity: .25; }

.fe-bubble {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  background:
    radial-gradient(circle at 32% 30%, rgba(255, 255, 255, .95) 0 12%, transparent 22%),
    radial-gradient(circle, transparent 52%, color-mix(in srgb, var(--qe-glow) 55%, transparent) 72%, color-mix(in srgb, var(--qe-glow) 90%, #fff) 100%);
  box-shadow: 0 0 6px color-mix(in srgb, var(--qe-glow) 55%, transparent);
}
.fe-glint {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  opacity: 0;
  background: #fff;
  box-shadow: 0 0 4px 1px var(--qe-glow);
}
.fe-z {
  position: absolute;
  opacity: 0;
  font: italic 500 10px/1 var(--ex-serif, Georgia, serif);
  color: var(--qe-tint);
  text-shadow: 0 0 4px var(--qe-glow);
}
.fe-lantern {
  position: absolute;
  width: 1px;
  background: color-mix(in srgb, var(--qe-skin) 80%, transparent);
  transform-origin: 50% 0;
  animation: fe-swing 1.1s ease-in-out infinite alternate;
}
.fe-lantern i {
  position: absolute;
  left: -3px;
  bottom: -5px;
  width: 7px;
  height: 7px;
  border-radius: 50% 50% 45% 45%;
  background: radial-gradient(circle at 50% 40%, #fff 0 25%, var(--qe-tint) 60%, var(--qe-glow));
  box-shadow: 0 0 6px 2px color-mix(in srgb, var(--qe-glow) 70%, transparent), 0 0 16px 4px color-mix(in srgb, var(--qe-glow) 30%, transparent);
  animation: fe-flicker .9s ease-in-out infinite alternate;
}

/* Hover: glints lifting off the frame, and a soft halo in the work's own colour. */
.fe-hover-glint {
  position: absolute;
  display: block;
  opacity: 0;
  pointer-events: none;
}
.fe-hover-glint svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: #fff;
  filter: drop-shadow(0 0 2px var(--fe-glow)) drop-shadow(0 0 5px color-mix(in srgb, var(--fe-glow) 60%, transparent));
}
@media (hover: hover) {
  .ex-wall .art-card:hover,
  .ex-wall .art-card:focus-visible {
    box-shadow:
      0 44px 80px -36px #000,
      0 0 60px -28px var(--card-color, rgba(255, 255, 255, .4)),
      0 0 90px -40px color-mix(in srgb, var(--card-color, #7fc8d8) 45%, #ffffff);
  }
}

@keyframes fe-glance {
  0%, 18%, 100% { translate: 0 0; }
  30%, 48% { translate: -.7px .1px; }
  62%, 84% { translate: .7px -.1px; }
}
@keyframes fe-curl { from { transform: skewX(-7deg); } to { transform: skewX(7deg); } }
@keyframes fe-wobble { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }
@keyframes fe-swing { from { transform: rotate(-16deg); } to { transform: rotate(14deg); } }
@keyframes fe-flicker { from { opacity: .8; } to { opacity: 1; } }

/* The artist's links ------------------------------------------------------ */
.ex-links a { position: relative; overflow: visible; }
.ex-links .ex-icon { display: block; width: 18px; height: 18px; overflow: visible; }
/* X: a little hop, with a squash on landing and a glint that pops off the top. */
.ex-link-x .ex-icon path { fill: currentColor; }
.ex-link-x:hover .ex-icon,
.ex-link-x:focus-visible .ex-icon { animation: ex-hop .7s cubic-bezier(.3, .7, .4, 1) 1; transform-origin: 50% 100%; }
.ex-links .ex-pop {
  position: absolute;
  left: 50%;
  top: 5px;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 6px 2px rgba(180, 225, 255, .7);
  opacity: 0;
  pointer-events: none;
}
.ex-link-x:hover .ex-pop,
.ex-link-x:focus-visible .ex-pop { animation: ex-pop .7s ease-out .12s 1; }
/* The other: a little red seal with a white exclamation mark that bobs. */
.ex-link-sama .ex-seal { fill: #d9443b; }
.ex-link-sama .ex-seal-rim { fill: none; stroke: rgba(255, 170, 160, .55); stroke-width: 1; }
.ex-link-sama .ex-bang { fill: #fff; transform-box: view-box; transform-origin: 12px 12px; animation: ex-bob 3.6s ease-in-out infinite; }
.ex-link-sama .ex-icon { filter: drop-shadow(0 0 4px rgba(217, 68, 59, .35)); transition: filter .3s ease; }
.ex-link-sama:hover .ex-icon,
.ex-link-sama:focus-visible .ex-icon { filter: drop-shadow(0 0 7px rgba(255, 90, 75, .7)); animation: ex-throb .6s ease-in-out 1; }
.ex-link-sama:hover .ex-bang,
.ex-link-sama:focus-visible .ex-bang { animation: ex-bounce .55s cubic-bezier(.3, .7, .4, 1) 2; }
.ex-links a:hover,
.ex-links a:focus-visible { box-shadow: 0 0 18px -6px rgba(255, 255, 255, .25); }

@keyframes ex-hop {
  0% { transform: translateY(0) scale(1, 1); }
  18% { transform: translateY(0) scale(1.14, .86); }
  45% { transform: translateY(-6px) scale(.94, 1.08); }
  70% { transform: translateY(0) scale(1.1, .9); }
  85% { transform: translateY(-1.5px) scale(.98, 1.02); }
  100% { transform: translateY(0) scale(1, 1); }
}
@keyframes ex-pop {
  0% { transform: translateY(0) scale(.2); opacity: 0; }
  30% { transform: translateY(-9px) scale(1); opacity: 1; }
  100% { transform: translateY(-16px) scale(.3); opacity: 0; }
}
@keyframes ex-bob { 0%, 70%, 100% { transform: translateY(0); } 80% { transform: translateY(-1.6px); } 90% { transform: translateY(.4px); } }
@keyframes ex-bounce { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-3px); } 70% { transform: translateY(.6px); } }
@keyframes ex-throb { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.1); } }

@media (prefers-reduced-motion: reduce) {
  .gm-ambient, .fe-layer { display: none !important; }
  .ex-links .ex-icon, .ex-links .ex-bang, .ex-links .ex-pop { animation: none !important; }
}
@media print, (forced-colors: active) {
  .gm-ambient, .fe-layer { display: none !important; }
}