/* ============================================================
 * SHADOW SPARK SHOWCASE ANIMATIONS
 * The five proof-of-concept suites from the Shadow Animation Bible
 * (ChatGPT, 2026-10-03). Each suite is ONE cinematic timeline
 * across three layers — figure / above / below — following the
 * Bible's timeline template:
 *   0–20%   normal — the audience notices something slightly wrong
 *   20–50%  the shadow misbehaves — something violates physics
 *   50–80%  the reveal — the "oh" moment
 *   80–100% return to normal — but something changed
 *
 * Layered OVER shadow-animations.css. The .shd base veil stays.
 * Showcase classes WIN specificity ties against archetype classes
 * (.shd.shd-showcase-X .shd-above = 0-3-0 beats .shd-above.shd-move).
 *
 * Markup (from DNA):
 *   <div class="shd shd-showcase shd-showcase-emperor"
 *        style="--shd-amp:0.85">
 *     <div class="shd-below"></div>
 *     <img src="...">
 *     <div class="shd-above"></div>
 *   </div>
 * ============================================================ */

.shd-showcase { position: relative; }
.shd-showcase > img { position: relative; z-index: 1; }

/* Seek support: --seek carries a negative animation-delay into every
   showcase animation, including ::before/::after pseudos (set from JS). */
.shd-showcase > img,
.shd-showcase .shd-above,
.shd-showcase .shd-below,
.shd-showcase-emperor .shd-below::before,
.shd-showcase-hollow::before,
.shd-showcase-eclipse-raven::before,
.shd-showcase-eclipse-raven .shd-above::before,
.shd-showcase-unsaid .shd-below::after,
.shd-showcase-griefmoth .shd-below::after {
  animation-delay: var(--seek, 0s) !important;
}

/* Showcase layer geometry: the cinematic beats need predictable placement,
   so showcase suites use in-stage layers instead of the ambient system's
   oversized ones. Above covers the top 64% (eclipse/crown/threads/flames
   hover over the head and upper body); below covers the bottom 44%. */
.shd-showcase .shd-above {
  top: -6%; bottom: auto; height: 64%;
  left: -12%; right: -12%;
}
.shd-showcase .shd-below {
  bottom: -4%; top: auto; height: 44%;
  left: -12%; right: -12%;
}

/* ------------------------------------------------------------
 * 1. EMPEROR — shadow-combo-emperor-x-obsidian-beetle-knight
 * "The ultimate warning: power without humility."
 * 25s. Stands perfectly still while the entire shadow world moves.
 * Reveal: an eclipse crowns him; a void kingdom rises behind;
 * below, a throne room stretches infinitely. His shadow sits on
 * the throne BEFORE the body does. Ends with a crown-ghost that
 * never fully leaves.
 * ------------------------------------------------------------ */
.shd-showcase-emperor > img {
  animation: showcase-emperor-figure 25s ease-in-out infinite;
  transform-origin: 50% 88%;
}
@keyframes showcase-emperor-figure {
  0%, 20%   { filter: brightness(0.88); transform: scale(1); }
  35%       { filter: brightness(0.72); transform: scale(1.004); }
  50%, 68%  { filter: brightness(0.5) contrast(1.12); transform: scale(1.012); }
  80%       { filter: brightness(0.66); transform: scale(1.006); }
  100%      { filter: brightness(0.84); transform: scale(1); }
}
.shd-showcase-emperor .shd-above {
  background-repeat: no-repeat;
  background-image:
    /* eclipse corona ring */
    radial-gradient(circle 118px at 50% 47%,
      transparent 0%, transparent 46%,
      rgba(0,0,0,calc(0.9 * var(--shd-amp))) 47%,
      rgba(0,0,0,calc(0.9 * var(--shd-amp))) 58%,
      transparent 78%),
    /* eclipse disc */
    radial-gradient(circle 56px at 50% 47%,
      rgba(0,0,0,calc(0.97 * var(--shd-amp))) 0%,
      rgba(0,0,0,calc(0.97 * var(--shd-amp))) 100%),
    /* stars caught inside the dark */
    radial-gradient(circle 2.5px at 42% 40%, rgba(220,232,255,0.95) 0%, transparent 70%),
    radial-gradient(circle 2px at 58% 42%, rgba(220,232,255,0.85) 0%, transparent 70%),
    radial-gradient(circle 3px at 50% 53%, rgba(200,214,255,0.7) 0%, transparent 70%),
    radial-gradient(circle 1.8px at 46% 36%, rgba(255,255,255,0.8) 0%, transparent 70%),
    /* crown of gathered dark */
    radial-gradient(ellipse 10px 44px at 38% 26%, rgba(0,0,0,calc(0.85 * var(--shd-amp))) 0%, transparent 70%),
    radial-gradient(ellipse 10px 56px at 50% 22%, rgba(0,0,0,calc(0.9 * var(--shd-amp))) 0%, transparent 70%),
    radial-gradient(ellipse 10px 44px at 62% 26%, rgba(0,0,0,calc(0.85 * var(--shd-amp))) 0%, transparent 70%);
  animation: showcase-emperor-above 25s ease-in-out infinite;
  transform-origin: 50% 47%;
}
@keyframes showcase-emperor-above {
  0%, 18%   { opacity: 0; transform: scale(0.4); filter: blur(6px); }
  32%       { opacity: 0.55; transform: scale(0.75); filter: blur(3px); }
  50%, 66%  { opacity: 1; transform: scale(1.12); filter: blur(0.5px); }
  80%       { opacity: 0.5; transform: scale(0.9); filter: blur(2px); }
  92%, 100% { opacity: 0.22; transform: scale(0.72); filter: blur(4px); }
}
.shd-showcase-emperor .shd-below {
  background-repeat: no-repeat;
  background-image:
    /* throne silhouette — the shadow sits before the body does */
    radial-gradient(ellipse 60px 26px at 50% 62%,
      rgba(24,26,46,calc(0.9 * var(--shd-amp))) 0%, transparent 70%),
    radial-gradient(ellipse 16px 52px at 50% 44%,
      rgba(24,26,46,calc(0.88 * var(--shd-amp))) 0%, transparent 70%),
    /* faint cold rim on the throne's edge */
    radial-gradient(ellipse 70px 34px at 50% 62%,
      transparent 55%, rgba(90,110,180,calc(0.28 * var(--shd-amp))) 72%, transparent 85%),
    /* shadow pool */
    radial-gradient(ellipse 46% 30% at 50% 88%,
      rgba(0,0,0,calc(0.75 * var(--shd-amp))) 0%, transparent 70%);
  animation: showcase-emperor-below 25s ease-in-out infinite;
  transform-origin: 50% 100%;
}
/* throne-room columns: distant architecture rising, dissolving upward */
/* throne-room columns: distant architecture rising, dissolving upward.
   Slate, not black — they must read as silhouettes against the dark. */
.shd-showcase-emperor .shd-below::before {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg,
    rgba(38,40,66,calc(0.85 * var(--shd-amp))) 0px,
    rgba(38,40,66,calc(0.85 * var(--shd-amp))) 9px,
    transparent 9px, transparent 64px);
  -webkit-mask-image: linear-gradient(to top, black 22%, transparent 85%);
  mask-image: linear-gradient(to top, black 22%, transparent 85%);
  animation: showcase-emperor-columns 25s ease-in-out infinite;
  transform-origin: 50% 100%;
  pointer-events: none;
}
@keyframes showcase-emperor-columns {
  0%, 18%   { opacity: 0; transform: scaleY(0.3); }
  35%       { opacity: 0.55; transform: scaleY(0.7); }
  50%, 66%  { opacity: 1; transform: scaleY(1.15); }
  80%       { opacity: 0.45; transform: scaleY(0.7); }
  100%      { opacity: 0; transform: scaleY(0.3); }
}
@keyframes showcase-emperor-below {
  0%, 18%   { opacity: 0.35; transform: scaleY(0.45) scaleX(0.9); filter: blur(3px); }
  35%       { opacity: 0.7; transform: scaleY(0.8) scaleX(1); filter: blur(1.5px); }
  50%, 66%  { opacity: 1; transform: scaleY(1.25) scaleX(1.12); filter: blur(0px); }
  80%       { opacity: 0.6; transform: scaleY(0.8); filter: blur(2px); }
  100%      { opacity: 0.4; transform: scaleY(0.5) scaleX(0.92); filter: blur(3px); }
}

/* ------------------------------------------------------------
 * 2. HOLLOW SAINT — shadow-combo-hollow-saint-x-spectral-wolf
 * "The empty vessel. A beautiful warning about losing yourself."
 * 18s. Completely still — only shadow flowers bloom and die
 * beneath. Reveal: the chest opens into an endless hollow holding
 * one tiny fading light. The figure vanishes; the shadow remains.
 * ------------------------------------------------------------ */
.shd-showcase-hollow > img {
  animation: showcase-hollow-figure 18s ease-in-out infinite;
}
@keyframes showcase-hollow-figure {
  0%, 30%   { opacity: 1; filter: brightness(0.9); }
  50%, 62%  { opacity: 1; filter: brightness(0.82); }
  68%, 78%  { opacity: 0.07; filter: brightness(0.4) blur(3px); }
  88%       { opacity: 0.9; filter: brightness(0.88); }
  100%      { opacity: 1; filter: brightness(0.9); }
}
/* the hollow core: an endless dark with one fading light, over the chest */
.shd-showcase-hollow::before {
  content: "";
  position: absolute; z-index: 2;
  left: 50%; top: 44%;
  width: 24%; aspect-ratio: 4 / 5;
  transform: translate(-50%, -50%) scale(0.1);
  background:
    radial-gradient(circle 5px at 50% 50%,
      rgba(255,244,214,0.95) 0%, rgba(255,220,160,0.35) 40%, transparent 70%),
    radial-gradient(ellipse 50% 50% at 50% 50%,
      rgba(0,0,0,0.985) 0%, rgba(2,2,8,0.97) 62%, transparent 72%);
  border-radius: 50%;
  opacity: 0;
  animation: showcase-hollow-core 18s ease-in-out infinite;
  pointer-events: none;
}
@keyframes showcase-hollow-core {
  0%, 38%   { opacity: 0; transform: translate(-50%,-50%) scale(0.1); }
  52%, 64%  { opacity: 1; transform: translate(-50%,-50%) scale(1); }
  72%       { opacity: 0.85; transform: translate(-50%,-50%) scale(0.94); }
  82%, 100% { opacity: 0; transform: translate(-50%,-50%) scale(0.2); }
}
.shd-showcase-hollow .shd-below {
  background-repeat: no-repeat;
  background-image:
    /* blooming shadow flowers: petals open, then die */
    radial-gradient(ellipse 26px 12px at 30% 60%, rgba(8,6,16,calc(0.9 * var(--shd-amp))) 0%, transparent 70%),
    radial-gradient(ellipse 12px 26px at 30% 60%, rgba(8,6,16,calc(0.85 * var(--shd-amp))) 0%, transparent 70%),
    radial-gradient(ellipse 26px 12px at 70% 68%, rgba(10,8,18,calc(0.88 * var(--shd-amp))) 0%, transparent 70%),
    radial-gradient(ellipse 12px 26px at 70% 68%, rgba(10,8,18,calc(0.82 * var(--shd-amp))) 0%, transparent 70%),
    radial-gradient(ellipse 20px 10px at 50% 76%, rgba(6,5,14,calc(0.9 * var(--shd-amp))) 0%, transparent 70%),
    radial-gradient(ellipse 10px 20px at 50% 76%, rgba(6,5,14,calc(0.85 * var(--shd-amp))) 0%, transparent 70%),
    /* falling petal motes */
    radial-gradient(circle 3px at 36% 40%, rgba(20,16,34,0.8) 0%, transparent 70%),
    radial-gradient(circle 2.5px at 64% 34%, rgba(20,16,34,0.75) 0%, transparent 70%),
    /* the pool that outlives the figure */
    radial-gradient(ellipse 48% 30% at 50% 86%,
      rgba(0,0,0,calc(0.8 * var(--shd-amp))) 0%, transparent 70%);
  animation: showcase-hollow-below 18s ease-in-out infinite;
  transform-origin: 50% 80%;
}
@keyframes showcase-hollow-below {
  0%        { opacity: 0.4; transform: scale(0.82); filter: blur(2px); }
  25%       { opacity: 0.85; transform: scale(1.05); filter: blur(0.5px); }
  50%       { opacity: 0.55; transform: scale(0.9); filter: blur(1.5px); }
  68%, 78%  { opacity: 1; transform: scale(1.12); filter: blur(0px); }
  100%      { opacity: 0.45; transform: scale(0.84); filter: blur(2px); }
}
.shd-showcase-hollow .shd-above {
  background-repeat: no-repeat;
  background-image:
    radial-gradient(ellipse 60% 40% at 50% 60%,
      rgba(0,0,0,calc(0.4 * var(--shd-amp))) 0%, transparent 70%);
  animation: showcase-hollow-above 18s ease-in-out infinite;
}
@keyframes showcase-hollow-above {
  0%, 100%  { opacity: 0.3; }
  50%, 70%  { opacity: 0.75; }
}

/* ------------------------------------------------------------
 * 3. ECLIPSE RAVEN — shadow-combo-neon-serpent-x-crimson-eclipse-raven
 * "The cosmic dreamer who chose emptiness over connection."
 * 20s. Feathers open onto miniature galaxies. Reveal: the body
 * fractures into a starless universe — then reconstitutes, but
 * the shadow below keeps constellations the sky never showed.
 * ------------------------------------------------------------ */
.shd-showcase-eclipse-raven > img {
  animation: showcase-raven-figure 20s ease-in-out infinite;
  transform-origin: 50% 60%;
}
@keyframes showcase-raven-figure {
  0%, 22%   { opacity: 1; filter: brightness(0.9); transform: scale(1); }
  40%       { opacity: 0.94; filter: brightness(0.78); transform: scale(1.01); }
  /* the body recedes into dark while the fracture veil opens over it */
  55%, 68%  { opacity: 0.55; filter: brightness(0.5) contrast(1.25); transform: scale(1.03); }
  80%       { opacity: 0.9; filter: brightness(0.85); transform: scale(1.005); }
  100%      { opacity: 1; filter: brightness(0.9); transform: scale(1); }
}
/* fracture veil: cracked dark shards with stars behind the cracks */
.shd-showcase-eclipse-raven::before {
  content: "";
  position: absolute; z-index: 2;
  inset: 12% 8%;
  background:
    radial-gradient(circle 2.5px at 30% 24%, rgba(235,242,255,0.95) 0%, transparent 70%),
    radial-gradient(circle 2px at 58% 38%, rgba(220,232,255,0.9) 0%, transparent 70%),
    radial-gradient(circle 3px at 44% 58%, rgba(255,244,250,0.85) 0%, transparent 70%),
    radial-gradient(circle 2px at 68% 66%, rgba(220,232,255,0.85) 0%, transparent 70%),
    radial-gradient(circle 2.5px at 36% 78%, rgba(235,242,255,0.8) 0%, transparent 70%),
    conic-gradient(from 12deg at 40% 40%,
      rgba(0,0,0,0.92) 0deg 38deg, transparent 38deg 52deg,
      rgba(0,0,0,0.88) 52deg 96deg, transparent 96deg 112deg,
      rgba(0,0,0,0.92) 112deg 168deg, transparent 168deg 184deg,
      rgba(0,0,0,0.88) 184deg 238deg, transparent 238deg 254deg,
      rgba(0,0,0,0.92) 254deg 310deg, transparent 310deg 326deg,
      rgba(0,0,0,0.9) 326deg 360deg),
    radial-gradient(ellipse 70% 60% at 50% 50%,
      rgba(2,2,10,0.55) 0%, transparent 75%);
  background-repeat: no-repeat;
  opacity: 0;
  animation: showcase-raven-fracture 20s ease-in-out infinite;
  pointer-events: none;
}
@keyframes showcase-raven-fracture {
  0%, 42%   { opacity: 0; transform: scale(0.92) rotate(0deg); filter: blur(3px); }
  55%, 68%  { opacity: 1; transform: scale(1.04) rotate(2deg); filter: blur(0px); }
  80%       { opacity: 0.25; transform: scale(0.97); filter: blur(2px); }
  92%, 100% { opacity: 0; transform: scale(0.92); filter: blur(3px); }
}
.shd-showcase-eclipse-raven .shd-above {
  background-repeat: no-repeat;
  background-image:
    /* the eclipse */
    radial-gradient(circle 74px,
      rgba(0,0,0,calc(0.96 * var(--shd-amp))) 0%,
      rgba(0,0,0,calc(0.96 * var(--shd-amp))) 100%),
    radial-gradient(circle 104px,
      transparent 0%, transparent 62%,
      rgba(120,40,60,calc(0.5 * var(--shd-amp))) 72%,
      transparent 88%),
    /* stars */
    radial-gradient(circle 2.5px at 24% 26%, rgba(255,255,255,0.95) 0%, transparent 70%),
    radial-gradient(circle 2px at 76% 22%, rgba(220,230,255,0.9) 0%, transparent 70%),
    radial-gradient(circle 3px at 60% 18%, rgba(255,240,240,0.8) 0%, transparent 70%),
    radial-gradient(circle 1.8px at 38% 30%, rgba(255,255,255,0.85) 0%, transparent 70%);
  background-size:
    150px 150px,
    210px 210px,
    auto, auto, auto, auto;
  background-position:
    50% 28%,
    50% 28%,
    0 0, 0 0, 0 0, 0 0;
  animation: showcase-raven-above 20s ease-in-out infinite;
  transform-origin: 50% 30%;
}
/* galaxy swirls live on their own layer so their edges can dissolve */
.shd-showcase-eclipse-raven .shd-above::before {
  content: "";
  position: absolute; inset: 0;
  background-repeat: no-repeat;
  background-image:
    conic-gradient(from 0deg,
      transparent 0deg, rgba(150,170,255,0.22) 40deg, transparent 90deg,
      transparent 180deg, rgba(190,140,255,0.18) 230deg, transparent 280deg),
    conic-gradient(from 90deg,
      transparent 0deg, rgba(150,200,255,0.2) 50deg, transparent 100deg,
      transparent 200deg, rgba(255,170,200,0.15) 250deg, transparent 300deg);
  background-size: 240px 240px, 200px 200px;
  background-position: 28% 48%, 68% 54%;
  -webkit-mask-image:
    radial-gradient(circle, black 32%, transparent 68%),
    radial-gradient(circle, black 32%, transparent 68%);
  -webkit-mask-size: 240px 240px, 200px 200px;
  -webkit-mask-position: 28% 48%, 68% 54%;
  -webkit-mask-repeat: no-repeat;
  mask-image:
    radial-gradient(circle, black 32%, transparent 68%),
    radial-gradient(circle, black 32%, transparent 68%);
  mask-size: 240px 240px, 200px 200px;
  mask-position: 28% 48%, 68% 54%;
  mask-repeat: no-repeat;
  animation: showcase-raven-swirls 20s linear infinite;
  pointer-events: none;
}
@keyframes showcase-raven-swirls {
  0%   { opacity: 0; transform: rotate(0deg); }
  30%  { opacity: 0.7; }
  55%, 68% { opacity: 1; }
  85%, 100% { opacity: 0; transform: rotate(40deg); }
}
@keyframes showcase-raven-above {
  0%, 20%   { opacity: 0; transform: scale(0.5) rotate(0deg); filter: blur(5px); }
  38%       { opacity: 0.7; transform: scale(0.85) rotate(8deg); filter: blur(2px); }
  55%, 68%  { opacity: 1; transform: scale(1.1) rotate(-6deg); filter: blur(0px); }
  82%       { opacity: 0.45; transform: scale(0.9) rotate(4deg); filter: blur(2px); }
  100%      { opacity: 0.12; transform: scale(0.6) rotate(0deg); filter: blur(5px); }
}
.shd-showcase-eclipse-raven .shd-below {
  background-repeat: no-repeat;
  background-image:
    /* constellation lines the sky never showed */
    linear-gradient(32deg, transparent 46.5%, rgba(170,190,255,0.32) 47.2%, rgba(170,190,255,0.32) 47.8%, transparent 48.5%),
    linear-gradient(-24deg, transparent 52.5%, rgba(170,190,255,0.26) 53.2%, rgba(170,190,255,0.26) 53.8%, transparent 54.5%),
    linear-gradient(64deg, transparent 60.5%, rgba(200,170,255,0.22) 61.2%, rgba(200,170,255,0.22) 61.8%, transparent 62.5%),
    /* constellation stars */
    radial-gradient(circle 3px at 30% 55%, rgba(220,232,255,0.95) 0%, transparent 70%),
    radial-gradient(circle 2.5px at 48% 68%, rgba(220,232,255,0.9) 0%, transparent 70%),
    radial-gradient(circle 3px at 66% 58%, rgba(255,240,250,0.85) 0%, transparent 70%),
    radial-gradient(circle 2px at 56% 46%, rgba(220,232,255,0.8) 0%, transparent 70%),
    /* cosmic void garden */
    radial-gradient(ellipse 40px 18px at 36% 78%, rgba(10,8,24,calc(0.9 * var(--shd-amp))) 0%, transparent 70%),
    radial-gradient(ellipse 34px 16px at 62% 82%, rgba(12,8,26,calc(0.88 * var(--shd-amp))) 0%, transparent 70%),
    radial-gradient(ellipse 48% 30% at 50% 88%,
      rgba(0,0,0,calc(0.72 * var(--shd-amp))) 0%, transparent 70%);
  animation: showcase-raven-below 20s ease-in-out infinite;
}
@keyframes showcase-raven-below {
  0%, 30%   { opacity: 0.25; filter: blur(3px); }
  55%, 70%  { opacity: 1; filter: blur(0px); }
  85%       { opacity: 0.6; filter: blur(1px); }
  100%      { opacity: 0.35; filter: blur(2.5px); }
}

/* ------------------------------------------------------------
 * 4. THE UNSAID — shadow-combo-pseudoscorpion-x-the-unsaid
 * "The master manipulator. Creativity became control."
 * 22s. Deep stillness. Invisible threads lower from above and
 * stitch figure to shadow. Reveal: the shadow tapestry unfolds
 * below — every connected life a knot of light — and the shadow
 * moves FIRST; the figure only follows. One thread never releases.
 * ------------------------------------------------------------ */
.shd-showcase-unsaid > img {
  animation: showcase-unsaid-figure 22s ease-in-out infinite;
  transform-origin: 50% 90%;
}
@keyframes showcase-unsaid-figure {
  0%, 30%   { transform: translateX(0) rotate(0deg); filter: brightness(0.88); }
  48%       { transform: translateX(0) rotate(0deg); filter: brightness(0.82); }
  /* the shadow tugs: the figure sways AFTER */
  58%       { transform: translateX(7px) rotate(0.7deg); filter: brightness(0.76); }
  66%       { transform: translateX(-5px) rotate(-0.5deg); filter: brightness(0.8); }
  74%       { transform: translateX(2px) rotate(0.2deg); filter: brightness(0.86); }
  84%, 100% { transform: translateX(0) rotate(0deg); filter: brightness(0.88); }
}
/* the shadow that acts first: a dark double, offset, moving early */
.shd-showcase-unsaid .shd-below::after {
  content: "";
  position: absolute;
  left: 50%; top: 6%;
  width: 44%; height: 78%;
  transform: translateX(-38%);
  background: radial-gradient(ellipse 50% 50% at 50% 50%,
    rgba(0,0,0,calc(0.55 * var(--shd-amp))) 0%, transparent 70%);
  filter: blur(6px);
  animation: showcase-unsaid-double 22s ease-in-out infinite;
  pointer-events: none;
}
@keyframes showcase-unsaid-double {
  0%, 42%   { transform: translateX(-38%); opacity: 0.5; }
  /* moves BEFORE the figure does */
  52%       { transform: translateX(-8%); opacity: 0.85; }
  60%       { transform: translateX(-52%); opacity: 0.8; }
  70%       { transform: translateX(-30%); opacity: 0.7; }
  82%, 100% { transform: translateX(-38%); opacity: 0.5; }
}
.shd-showcase-unsaid .shd-above {
  background-repeat: no-repeat;
  background-image:
    /* hairline threads, nearly invisible until the reveal */
    repeating-linear-gradient(94deg,
      transparent 0px, transparent 26px,
      rgba(200,200,220,0.5) 26px, rgba(200,200,220,0.5) 27px,
      transparent 27px, transparent 60px),
    repeating-linear-gradient(86deg,
      transparent 0px, transparent 44px,
      rgba(200,200,220,0.4) 44px, rgba(200,200,220,0.4) 45px,
      transparent 45px, transparent 88px),
    radial-gradient(ellipse 70% 50% at 50% 70%,
      rgba(0,0,0,calc(0.35 * var(--shd-amp))) 0%, transparent 70%);
  animation: showcase-unsaid-above 22s ease-in-out infinite;
}
@keyframes showcase-unsaid-above {
  0%, 28%   { opacity: 0; transform: translateY(-14px); }
  45%       { opacity: 0.4; transform: translateY(-4px); }
  58%, 72%  { opacity: 1; transform: translateY(6px); }
  84%       { opacity: 0.35; transform: translateY(0px); }
  100%      { opacity: 0.12; transform: translateY(-10px); }
}
.shd-showcase-unsaid .shd-below {
  background-repeat: no-repeat;
  background-image:
    /* the tapestry: woven lives */
    repeating-linear-gradient(0deg,
      rgba(0,0,0,calc(0.5 * var(--shd-amp))) 0px,
      rgba(0,0,0,calc(0.5 * var(--shd-amp))) 3px,
      transparent 3px, transparent 16px),
    repeating-linear-gradient(90deg,
      rgba(0,0,0,calc(0.5 * var(--shd-amp))) 0px,
      rgba(0,0,0,calc(0.5 * var(--shd-amp))) 3px,
      transparent 3px, transparent 16px),
    /* knots of light: every connected life */
    radial-gradient(circle 4px at 28% 52%, rgba(255,244,214,0.95) 0%, transparent 70%),
    radial-gradient(circle 3px at 52% 64%, rgba(255,244,214,0.9) 0%, transparent 70%),
    radial-gradient(circle 4px at 70% 50%, rgba(230,220,255,0.9) 0%, transparent 70%),
    radial-gradient(circle 3px at 44% 78%, rgba(255,244,214,0.85) 0%, transparent 70%),
    radial-gradient(circle 2.5px at 62% 80%, rgba(230,220,255,0.8) 0%, transparent 70%),
    radial-gradient(ellipse 48% 32% at 50% 82%,
      rgba(0,0,0,calc(0.7 * var(--shd-amp))) 0%, transparent 70%);
  animation: showcase-unsaid-below 22s ease-in-out infinite;
  transform-origin: 50% 100%;
}
@keyframes showcase-unsaid-below {
  0%, 30%   { opacity: 0.2; transform: scaleY(0.4); filter: blur(3px); }
  48%       { opacity: 0.55; transform: scaleY(0.75); filter: blur(1.5px); }
  58%, 72%  { opacity: 1; transform: scaleY(1.1); filter: blur(0px); }
  84%       { opacity: 0.5; transform: scaleY(0.8); filter: blur(1.5px); }
  100%      { opacity: 0.3; transform: scaleY(0.5); filter: blur(2.5px); }
}

/* ------------------------------------------------------------
 * 5. GRIEFMOTH — shadow-combo-armoredpill-x-griefmoth
 * "The wounded soul who let pain become identity."
 * 17s. Ghost flames flicker without heat — cold light, no warmth.
 * Reveal: the shadow shows a younger version reaching upward,
 * ignored; the figure absorbs its own shadow fire, again.
 * Ash remains.
 * ------------------------------------------------------------ */
.shd-showcase-griefmoth > img {
  animation: showcase-griefmoth-figure 17s ease-in-out infinite;
  transform-origin: 50% 70%;
}
@keyframes showcase-griefmoth-figure {
  0%, 25%   { filter: brightness(0.9); transform: scale(1); }
  45%       { filter: brightness(0.8); transform: scale(1.008); }
  /* absorbing its own fire: light pulls inward, edges darken */
  58%, 68%  { filter: brightness(0.62) contrast(1.15) saturate(0.85);
              transform: scale(0.992); }
  80%       { filter: brightness(0.85); transform: scale(1.004); }
  100%      { filter: brightness(0.9); transform: scale(1); }
}
.shd-showcase-griefmoth .shd-above {
  background-repeat: no-repeat;
  background-image:
    /* cold ghost flames — pale, heatless, licking upward */
    radial-gradient(ellipse 30px 78px at 30% 72%,
      rgba(205,222,245,0.75) 0%, rgba(160,185,230,0.35) 55%, transparent 72%),
    radial-gradient(ellipse 26px 92px at 50% 80%,
      rgba(220,232,250,0.8) 0%, rgba(170,195,235,0.38) 55%, transparent 72%),
    radial-gradient(ellipse 28px 70px at 68% 74%,
      rgba(205,222,245,0.7) 0%, rgba(160,185,230,0.32) 55%, transparent 72%),
    radial-gradient(ellipse 18px 50px at 42% 88%,
      rgba(225,236,252,0.75) 0%, transparent 70%),
    radial-gradient(ellipse 16px 60px at 60% 66%,
      rgba(200,218,244,0.6) 0%, rgba(160,185,230,0.28) 55%, transparent 72%),
    /* rising ash */
    radial-gradient(circle 3px at 38% 38%, rgba(170,170,190,0.8) 0%, transparent 70%),
    radial-gradient(circle 2.5px at 58% 30%, rgba(170,170,190,0.75) 0%, transparent 70%),
    radial-gradient(circle 3.5px at 50% 44%, rgba(160,160,180,0.7) 0%, transparent 70%);
  animation: showcase-griefmoth-above 17s ease-in-out infinite;
  transform-origin: 50% 100%;
}
@keyframes showcase-griefmoth-above {
  0%, 20%   { opacity: 0.25; transform: scaleY(0.7) skewX(0deg); filter: blur(2px); }
  38%       { opacity: 0.75; transform: scaleY(1) skewX(-2deg); filter: blur(1px); }
  50%       { opacity: 0.9; transform: scaleY(1.12) skewX(2.5deg); filter: blur(0.5px); }
  62%       { opacity: 0.95; transform: scaleY(1.05) skewX(-2deg); filter: blur(0.5px); }
  74%       { opacity: 0.5; transform: scaleY(0.85) skewX(1deg); filter: blur(1.5px); }
  100%      { opacity: 0.3; transform: scaleY(0.72) skewX(0deg); filter: blur(2px); }
}
/* the younger version, reaching upward — rising, then sinking unanswered */
.shd-showcase-griefmoth .shd-below::after {
  content: "";
  position: absolute;
  left: 30%; bottom: 8%;
  width: 15%; height: 52%;
  transform: translateX(-50%);
  background:
    /* faint cold rim — the ghost-fire light catches its edge */
    radial-gradient(ellipse 24px 48px at 50% 52%,
      transparent 50%, rgba(185,205,240,calc(0.38 * var(--shd-amp))) 66%, transparent 84%),
    radial-gradient(ellipse 17px 36px at 50% 62%,
      rgba(0,0,0,calc(0.72 * var(--shd-amp))) 0%, transparent 70%),
    radial-gradient(ellipse 11px 24px at 50% 26%,
      rgba(0,0,0,calc(0.68 * var(--shd-amp))) 0%, transparent 70%),
    /* the upraised arm */
    radial-gradient(ellipse 7px 32px at 68% 28%,
      rgba(0,0,0,calc(0.62 * var(--shd-amp))) 0%, transparent 70%);
  filter: blur(2px);
  opacity: 0;
  animation: showcase-griefmoth-youth 17s ease-in-out infinite;
  pointer-events: none;
}
@keyframes showcase-griefmoth-youth {
  0%, 40%   { opacity: 0; transform: translateX(-50%) translateY(34%) scale(0.8); }
  54%, 64%  { opacity: 0.9; transform: translateX(-50%) translateY(-14%) scale(1); }
  76%       { opacity: 0.4; transform: translateX(-50%) translateY(18%) scale(0.9); }
  88%, 100% { opacity: 0; transform: translateX(-50%) translateY(38%) scale(0.78); }
}
.shd-showcase-griefmoth .shd-below {
  background-repeat: no-repeat;
  background-image:
    /* spilled memory: ash spreading */
    radial-gradient(ellipse 30% 16% at 42% 74%,
      rgba(40,38,52,calc(0.75 * var(--shd-amp))) 0%, transparent 70%),
    radial-gradient(ellipse 24% 13% at 62% 80%,
      rgba(34,32,46,calc(0.7 * var(--shd-amp))) 0%, transparent 70%),
    radial-gradient(circle 2.5px at 36% 58%, rgba(150,150,170,0.7) 0%, transparent 70%),
    radial-gradient(circle 2px at 64% 62%, rgba(150,150,170,0.65) 0%, transparent 70%),
    radial-gradient(ellipse 48% 30% at 50% 88%,
      rgba(0,0,0,calc(0.72 * var(--shd-amp))) 0%, transparent 70%);
  animation: showcase-griefmoth-below 17s ease-in-out infinite;
}
@keyframes showcase-griefmoth-below {
  0%, 30%   { opacity: 0.4; filter: blur(2px); }
  55%, 70%  { opacity: 1; filter: blur(0px); }
  100%      { opacity: 0.5; filter: blur(1.5px); }
}

/* ------------------------------------------------------------
 * Reduced motion: freeze every showcase on its opening frame.
 * ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .shd-showcase > img,
  .shd-showcase .shd-above,
  .shd-showcase .shd-below,
  .shd-showcase-emperor .shd-below::before,
  .shd-showcase-hollow::before,
  .shd-showcase-eclipse-raven::before,
  .shd-showcase-eclipse-raven .shd-above::before,
  .shd-showcase-unsaid .shd-below::after,
  .shd-showcase-griefmoth .shd-below::after {
    animation: none !important;
  }
  .shd-showcase-emperor .shd-above { opacity: 0.22; }
  .shd-showcase-hollow .shd-below { opacity: 0.45; }
  .shd-showcase-eclipse-raven .shd-above { opacity: 0.12; }
  .shd-showcase-unsaid .shd-above { opacity: 0.12; }
  .shd-showcase-griefmoth .shd-above { opacity: 0.3; }
}