/* Living Magic — Effects: shadow, glow, glass, gradient, motion */
:root {
  /* Shadows — soft and warm, never harsh */
  --shadow-xs:  0 1px 3px rgba(7, 6, 5, 0.2);
  --shadow-sm:  0 2px 8px rgba(11, 9, 8, 0.25);
  --shadow-md:  0 12px 32px rgba(11, 9, 8, 0.35);
  --shadow-lg:  0 30px 70px rgba(11, 9, 8, 0.5);
  --shadow-sand: 0 20px 50px rgba(77, 63, 39, 0.14);

  /* Gold glow — reserved for the neon script & activation accents */
  --glow-gold:      0 0 18px rgba(216, 189, 119, 0.55);
  --glow-gold-soft: 0 0 40px rgba(216, 189, 119, 0.28);

  /* Focus — double ring: bg gap + gold */
  --focus-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--focus-ring); /* @kind other */

  /* Borders */
  --border-hair: 1px solid var(--line);
  --border-soft: 1px solid var(--line-soft);
  --border-gold: 1px solid var(--line-strong);

  /* Gold gradients — rules, foil edges, metallic text */
  --grad-gold: linear-gradient(90deg, transparent, var(--gold-500) 20%, var(--gold-300) 50%, var(--gold-500) 80%, transparent);
  --grad-gold-solid: linear-gradient(135deg, var(--gold-600), var(--gold-300) 45%, var(--gold-500) 70%, var(--gold-600));

  /* Scrims — protect text over imagery */
  --scrim-bottom: linear-gradient(to top, var(--overlay-scrim), transparent 60%);
  --scrim-full: linear-gradient(to top, rgba(11,9,8,0.78), rgba(11,9,8,0.22) 55%, rgba(11,9,8,0.5)); /* @kind other */

  /* Gilded glass recipe (pair with --glass-bg / --glass-border) */
  --glass-blur: 14px;      /* @kind other */
  --glass-saturate: 1.15;  /* @kind other */
  /* Verdigris glass blur — lighter, so the water stays legible through cards */
  --glass-verd-blur: 10px; /* @kind other */

  /* Living grounds — Verdigris atmosphere for Nocturne app surfaces.
     CSS-only depth: teal water fading to near-black, mist above, gold haze.
     Pair with .lm-grain overlay; imagery (assets/imagery/verdigris/) is
     hero-tier only, always dissolving into these grounds. */
  --ground-abyss:
    radial-gradient(1100px 520px at 18% -8%, rgba(148,193,176,.13), transparent 60%),
    radial-gradient(900px 480px at 84% 4%, rgba(198,162,83,.07), transparent 55%),
    radial-gradient(760px 620px at 70% 88%, rgba(44,88,74,.22), transparent 62%),
    radial-gradient(560px 420px at 8% 70%, rgba(31,66,55,.28), transparent 65%),
    linear-gradient(180deg, #101e1b 0%, #0a1613 34%, #081310 68%, #06100d 100%); /* @kind other */
  --ground-waterline:
    linear-gradient(180deg, rgba(245,240,231,.045) 0%, transparent 18%),
    radial-gradient(1100px 520px at 18% -8%, rgba(148,193,176,.13), transparent 60%),
    radial-gradient(900px 480px at 84% 4%, rgba(198,162,83,.07), transparent 55%),
    radial-gradient(760px 620px at 70% 88%, rgba(44,88,74,.22), transparent 62%),
    radial-gradient(560px 420px at 8% 70%, rgba(31,66,55,.28), transparent 65%),
    linear-gradient(180deg, #101e1b 0%, #0a1613 34%, #081310 68%, #06100d 100%); /* @kind other */
  --texture-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); /* @kind other */

  /* Motion — slow & meditative for reveals; crisp for controls. No bounce. */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);    /* @kind other */
  --dur-xfast:  0.15s;  /* @kind other — control feedback */
  --dur-fast:   0.25s;  /* @kind other — hovers */
  --dur-med:    0.5s;   /* @kind other — reveals */
  --dur-slow:   0.9s;   /* @kind other — ceremonial reveals */
  --dur-ambient: 6s;    /* @kind other — shimmer, drift */
  --stagger:    90ms;   /* @kind other — per-item reveal offset */
}

/* Metallic foil text */
.lm-foil {
  background: var(--grad-gold-solid);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--gold-500);
}

@keyframes lm-fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes lm-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes lm-scale-in {
  from { opacity: 0; transform: scale(0.975); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes lm-shimmer {
  0%, 100% { opacity: 0.85; text-shadow: var(--glow-gold-soft); }
  50%      { opacity: 1;    text-shadow: var(--glow-gold); }
}
@keyframes lm-drift {
  from { transform: scale(1.04) translateY(0); }
  to   { transform: scale(1.1) translateY(-1.5%); }
}
/* Subtle levitation for framed portraits & cards — pair with a deep soft shadow */
@keyframes lm-float {
  from { transform: translateY(-7px); }
  to   { transform: translateY(7px); }
}
@keyframes lm-spin {
  to { transform: rotate(360deg); }
}