/* ============================================================
 * SHADOW SPARKS — clean gallery CSS (2026-10-03 rebuild)
 *
 * The old dark overlay system is RETIRED. This design is clean and
 * light: warm ivory, premium cards, the portraits as heroes.
 * The only "animation" is the shadow noticing you on hover —
 * slow, deliberate, predatory stillness. Never silly.
 * ============================================================ */

/* ---------- hub hero ---------- */
.sh-hero{background:var(--paper);padding:clamp(48px,7vw,96px) 0 clamp(24px,4vw,48px);text-align:center}
.sh-hero h1{font-size:clamp(2.6rem,6vw,4.2rem);margin:.2em 0 .3em;letter-spacing:-.01em}
.sh-lede{font-size:clamp(1.3rem,2.6vw,1.8rem);font-weight:700;margin:0 0 .6em}
.sh-sub{max-width:38rem;margin:0 auto 1em;color:var(--ink);font-size:1.05rem;line-height:1.65}
.sh-sub em{color:var(--ink)}
.sh-count{color:var(--muted);font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;margin-top:1.6em}

/* ---------- gallery grid ---------- */
.sh-gallery{background:var(--paper);padding-bottom:clamp(48px,6vw,88px)}
.sh-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:26px}

/* ---------- cards ---------- */
.sh-card{display:block;text-decoration:none;color:inherit;background:var(--paper2);
  border:1px solid var(--line);border-radius:20px;overflow:hidden;
  box-shadow:0 10px 30px -18px rgba(24,39,35,.35);
  transition:transform .5s cubic-bezier(.22,.8,.3,1),box-shadow .5s cubic-bezier(.22,.8,.3,1);
  position:relative}
.sh-card:hover{transform:translateY(-5px);
  box-shadow:0 26px 54px -20px rgba(24,39,35,.45),0 0 0 1px rgba(120,84,40,.25)}

/* portrait stage: clean ivory, full portrait, never cropped */
.sh-card-art{display:block;position:relative;aspect-ratio:3/4;overflow:hidden;
  background:linear-gradient(175deg,#fbf7ec 0%,#f4ecda 60%,#ece1c9 100%)}
.sh-card-art img{width:100%;height:100%;object-fit:contain;display:block;
  /* the lean: slow, deliberate — the shadow noticing you */
  transition:transform 1.1s cubic-bezier(.22,.8,.3,1);will-change:transform}

/* the noticing glow: warm light that gathers where the visitor is */
.sh-notice{position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,40%),
    rgba(255,236,190,.55),rgba(255,236,190,0) 70%);
  transition:opacity 1.2s ease}
.sh-card:hover .sh-notice,.sh-card.is-noticed .sh-notice{opacity:1}

.sh-card-name{display:block;font-weight:800;padding:14px 16px 2px;font-size:1rem;line-height:1.3}
.sh-card-type{display:block;color:var(--muted);font-size:.76rem;letter-spacing:.08em;
  text-transform:uppercase;padding:4px 16px 0}
.sh-card-teaser{display:block;font-style:italic;color:var(--muted);font-size:.88rem;
  line-height:1.5;padding:8px 16px 18px}

/* ---------- character page ---------- */
.sh-hero-art{display:block;position:relative;max-width:440px;margin:0 auto;
  aspect-ratio:3/4;border-radius:24px;overflow:hidden;
  background:linear-gradient(175deg,#fbf7ec 0%,#f4ecda 60%,#ece1c9 100%);
  border:1px solid var(--line);
  box-shadow:0 30px 70px -28px rgba(24,39,35,.4)}
.sh-hero-art img{width:100%;height:100%;object-fit:contain;display:block}
.sh-id-card{max-width:720px;margin:0 auto;text-align:center}
.sh-meta{color:var(--muted)}
.sh-page-teaser{font-size:1.1rem;max-width:32rem;margin:14px auto 0}
.sh-parents{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:18px 0}
.sh-parent{border:1px solid var(--line);border-radius:999px;padding:8px 16px;font-weight:600;background:var(--paper2)}
.sh-notsale{display:inline-block;margin-top:14px;padding:10px 22px;border:1px dashed var(--muted);
  border-radius:999px;color:var(--muted);font-weight:700}

/* ---------- lore block (full pieces land here) ---------- */
.sh-lore{margin:30px auto 0;max-width:36rem;text-align:left;
  background:var(--paper2);border:1px solid var(--line);border-radius:18px;
  padding:26px 28px;box-shadow:0 14px 34px -22px rgba(24,39,35,.4)}
.sh-lore .eyebrow{display:block;margin-bottom:10px}
.sh-lore-pending{font-style:italic;color:var(--muted);line-height:1.7;margin:0}
.sh-lore p:not(.eyebrow){line-height:1.75}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .sh-card,.sh-card-art img,.sh-notice{transition:none}
  .sh-card:hover{transform:none}
}

/* ---------- small screens ---------- */
@media (max-width:640px){
  .sh-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px}
  .sh-card-name{font-size:.9rem}
  .sh-card-teaser{font-size:.8rem}
}

/* ---------- living videos ---------- */
.sh-art.live-spark,.sh-card-art.live-spark,.sh-hero-art.live-spark{position:relative;display:block}
.sh-art.live-spark .live-video,.sh-card-art.live-spark .live-video,.sh-hero-art.live-spark .live-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  opacity:0;transition:opacity .8s ease;pointer-events:none}
.sh-art.live-spark.is-live .live-video,.sh-card-art.live-spark.is-live .live-video,.sh-hero-art.live-spark.is-live .live-video{opacity:1}