/* quote-elves.css: tiny machine elves that peek around quotation words.
 * Companion to js/quote-elves.js. Elves take their tint from the section's --glow.
 * Everything here is decorative: no pointer events, hidden from assistive tech,
 * and removed entirely for reduced motion, print and forced colours.
 */

.qe-host { position: relative; isolation: isolate; }

/* Painted behind the words (z-index -1 inside the section's own stacking
 * context), so text always stays on top. */
.qe-layer {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  contain: layout style;
}
.qe-layer.qe-front { z-index: 2; }

.qe-elf {
  --qe-glow: var(--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;
}
/* Each elf is clipped along the word edge it emerges from, so it reads as
 * stepping out from behind the letters. */
.qe-side-top,
.qe-side-bottom { clip-path: inset(-400px -400px 0 -400px); }
.qe-side-bottom { transform: rotate(180deg); }          /* hangs upside down below the line */
.qe-side-left { clip-path: inset(-400px 0 -400px -400px); }
.qe-side-right { clip-path: inset(-400px -400px -400px 0); }

.qe-body,
.qe-act { position: absolute; inset: 0; }
.qe-body { transform: translateY(106%); }               /* hidden until animated */
.qe-side-left .qe-body { transform: translateX(106%); }
.qe-side-right .qe-body { transform: translateX(-106%); }

.qe-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter:
    drop-shadow(0 0 1.5px color-mix(in srgb, var(--qe-glow) 60%, #ffffff))
    drop-shadow(0 0 5px color-mix(in srgb, var(--qe-glow) 60%, transparent));
}
.qe-svg.qe-flip { transform: scaleX(-1); }

.qe-halo {
  position: absolute;
  left: -28%;
  top: -20%;
  width: 156%;
  height: 140%;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--qe-glow) 40%, transparent), transparent);
  opacity: .4;
  animation: qe-pulse 1.4s ease-in-out infinite alternate;
}

/* Parts ----------------------------------------------------------------- */
.qe-skin { fill: var(--qe-skin); }
.qe-gem { fill: var(--qe-tint); opacity: .6; animation: qe-shimmer 1.6s ease-in-out infinite alternate; }
.qe-seam { fill: none; stroke: var(--qe-facet); stroke-width: .7; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.qe-sheen { fill: none; stroke: #ffffff; stroke-width: .9; stroke-linecap: round; opacity: .8; }
.qe-hat { fill: var(--qe-tint); stroke: var(--qe-skin); stroke-width: .5; stroke-linejoin: round; }
.qe-line { fill: none; stroke: var(--qe-skin); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
.qe-thin { stroke-width: .7; }
.qe-bead { fill: #ffffff; animation: qe-twinkle .9s ease-in-out infinite alternate; }
.qe-eye,
.qe-mouth { fill: var(--qe-deep); }
.qe-glint { fill: #ffffff; }
.qe-wing { fill: var(--qe-tint); fill-opacity: .3; stroke: var(--qe-skin); stroke-width: .45; stroke-opacity: .8; }
/* Egg */
.qe-inner { fill: var(--qe-deep); }
.qe-eye-lit { fill: var(--qe-tint); }
.qe-jewel { fill: var(--qe-tint); stroke: var(--qe-facet); stroke-width: .35; animation: qe-shimmer 1.2s ease-in-out infinite alternate; }
.qe-shell { transform-box: view-box; }
/* Eye-orb */
.qe-ring { fill: none; stroke: var(--qe-tint); stroke-width: .7; opacity: .85; }
.qe-iris { fill: var(--qe-tint); }
.qe-iris-ring { fill: none; stroke: var(--qe-facet); stroke-width: .45; stroke-dasharray: .9 .7; }
.qe-look { transform-box: view-box; animation: qe-look 2.2s ease-in-out infinite; }
.qe-blink-group { transform-box: fill-box; transform-origin: center; animation: qe-blink 3.1s ease-in-out var(--qe-blink, 0s) infinite; }
.qe-lashes { transform-box: view-box; animation: qe-lash-blink 3.1s ease-in-out var(--qe-blink, 0s) infinite; }

/* Idle life: blinking, self-turning facets, wings, chatter. */
.qe-eyes { transform-box: fill-box; transform-origin: center; animation: qe-blink 3.1s ease-in-out var(--qe-blink, 0s) infinite; }
.qe-turn { transform-box: fill-box; transform-origin: center; animation: qe-turn 6s linear infinite; }
.qe-wings { transform-box: view-box; animation: qe-flutter .14s ease-in-out infinite alternate; }
.qe-mouth { transform-box: fill-box; transform-origin: center; animation: qe-chatter .5s ease-in-out infinite alternate; }
.qe-arm { transform-box: view-box; }

.is-waving .qe-arm { animation: qe-wave-raise .22s ease-out forwards, qe-wave .3s ease-in-out .22s infinite alternate; }
.is-singing .qe-mouth { animation-duration: .12s; }
.is-singing .qe-gem { animation-duration: .4s; }
.is-hatching .qe-shell { animation: qe-hatch var(--qe-act, 860ms) ease-in-out both; }
.is-winking .qe-blink-group { animation: qe-wink var(--qe-act, 800ms) ease-in-out both; }
.is-winking .qe-lashes { animation: qe-lash-wink var(--qe-act, 800ms) ease-in-out both; }
.is-winking .qe-look { animation-play-state: paused; }

.qe-spark {
  position: absolute;
  display: block;
  opacity: 0;
  pointer-events: none;
}
.qe-spark svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: #ffffff;
  filter: drop-shadow(0 0 2px var(--qe-tint)) drop-shadow(0 0 4px color-mix(in srgb, var(--qe-glow) 70%, transparent));
}

@keyframes qe-blink { 0%, 44%, 52%, 100% { transform: scaleY(1); } 48% { transform: scaleY(.1); } }
@keyframes qe-turn { to { transform: rotate(360deg); } }
@keyframes qe-shimmer { from { opacity: .3; } to { opacity: .85; } }
@keyframes qe-twinkle { from { opacity: .55; } to { opacity: 1; } }
@keyframes qe-flutter { from { transform: scaleX(1); } to { transform: scaleX(.4); } }
@keyframes qe-chatter { from { transform: scaleY(.35); } to { transform: scaleY(1.2); } }
@keyframes qe-pulse { from { opacity: .22; transform: scale(.9); } to { opacity: .5; transform: scale(1.04); } }
@keyframes qe-wave-raise { to { transform: rotate(-125deg); } }
@keyframes qe-wave { from { transform: rotate(-100deg); } to { transform: rotate(-145deg); } }
/* Lid hinges open on the left (after a shiver), holds while the eyes peer out, snaps shut. */
@keyframes qe-hatch {
  0%, 16% { transform: translate(0, 0) rotate(0deg); animation-timing-function: cubic-bezier(.3, 1.5, .5, 1); }
  34% { transform: translate(-.3px, -3.4px) rotate(-26deg); }
  72% { transform: translate(-.3px, -3px) rotate(-22deg); animation-timing-function: cubic-bezier(.6, 0, .9, .5); }
  86% { transform: translate(0, .3px) rotate(1deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}
@keyframes qe-look {
  0%, 18% { transform: translate(0, 0); }
  28%, 46% { transform: translate(-1.4px, .2px); }
  56%, 76% { transform: translate(1.4px, -.3px); }
  86%, 100% { transform: translate(0, 0); }
}
@keyframes qe-lash-blink { 0%, 44%, 52%, 100% { transform: translateY(0); } 48% { transform: translateY(5.6px); } }
@keyframes qe-wink { 0%, 100% { transform: scaleY(1); } 28%, 62% { transform: scaleY(.1); } }
@keyframes qe-lash-wink { 0%, 100% { transform: translateY(0); } 28%, 62% { transform: translateY(5.6px); } }

/* Phone: a softer glow to match the smaller figures. */
@media (max-width: 640px) {
  .qe-svg {
    filter:
      drop-shadow(0 0 1px color-mix(in srgb, var(--qe-glow) 60%, #ffffff))
      drop-shadow(0 0 3.5px color-mix(in srgb, var(--qe-glow) 55%, transparent));
  }
  .qe-halo { opacity: .3; }
}

@media (prefers-reduced-motion: reduce) {
  .qe-layer { display: none !important; }
}
@media print, (forced-colors: active) {
  .qe-layer { display: none !important; }
}