/* ============================================================
   LORE DEPTH LAYER v1  ·  lore-depth.css  ·  2026-06-28
   Single-source CSS mirror of Hive_Infrastructure/LORE_Design_System_v1.md
   (§3 depth, §4 motion, §6 gradient wash). ADDITIVE ONLY: sets only
   elevation/motion/background properties that page CSS does not already
   declare. Linked AFTER each page's inline <style> so it layers cleanly.
   Honors prefers-reduced-motion. Reversible: remove the <link>.

   USAGE
   - Automatic:  .catalog-card (homepage grid), .btn.solid (all CTAs),
                 .hero (homepage radial wash).
   - Opt-in:     add .lore-elevated      -> soft gold-tinted lift (cream surfaces)
                 add .lore-elevated.on-ink -> warm gold halo (dark surfaces)
                 add .lore-glow          -> gold ambient glow (dark media, e.g. video)
                 add .lore-wash          -> radial luminosity wash on a section
   ============================================================ */

/* ---- gold-tinted elevation ladder (cream surfaces) ---- */
.catalog-card,
.lore-elevated{
  box-shadow:0 1px 2px rgba(11,11,11,0.04), 0 16px 38px -26px rgba(168,132,47,0.30);
  transition:transform .42s cubic-bezier(.2,.7,.2,1), box-shadow .42s ease;
}
.catalog-card:hover,
.lore-elevated:hover{
  transform:translateY(-6px);
  box-shadow:0 2px 5px rgba(11,11,11,0.05), 0 30px 60px -28px rgba(168,132,47,0.42);
}

/* ---- dark surfaces: warm gold halo instead of a cold shadow ---- */
.catalog-card[style*="#15110c"]:hover,
.lore-elevated.on-ink{
  box-shadow:0 2px 5px rgba(0,0,0,0.30), 0 26px 60px -30px rgba(201,169,97,0.38);
}
.lore-elevated.on-ink:hover{
  transform:translateY(-6px);
  box-shadow:0 2px 5px rgba(0,0,0,0.30), 0 34px 70px -28px rgba(201,169,97,0.45);
}

/* ---- dark media (video player): steady ambient gold glow, no lift ---- */
.lore-glow{
  box-shadow:0 24px 70px -34px rgba(201,169,97,0.45), 0 2px 6px rgba(0,0,0,0.35);
}

/* ---- hero / section luminosity wash (light only, stays in-palette) ---- */
.hero,
.lore-wash{
  background:radial-gradient(ellipse 92% 72% at 50% 38%, #FFFDF7 0%, var(--cream) 62%);
}

/* ---- solid CTAs: subtle tactile lift (shadow only; color/border untouched) ---- */
.btn.solid{box-shadow:0 10px 24px -16px rgba(11,11,11,0.50);}

@media (prefers-reduced-motion:reduce){
  .catalog-card,.lore-elevated{transition:none;}
  .catalog-card:hover,.lore-elevated:hover,.lore-elevated.on-ink:hover{transform:none;}
}