/* ============================================================
   EFFECTS — Decan Symbology
   On the void, depth reads as GLOW and ENGRAVING more than as
   drop shadow. Gold is a gradient, never a flat fill, when it
   plays the role of metal.
   ============================================================ */

:root {
  /* ---- GOLD GRADIENTS (the metal) ---- */
  --grad-gold: linear-gradient(150deg, #F6E6A8 0%, #D8B85C 38%, #A57E33 72%, #6F5527 100%); /* @kind color */
  --grad-gold-soft: linear-gradient(160deg, #E8D08A 0%, #C9A24B 55%, #8A6B2E 100%); /* @kind color */
  --grad-gem: linear-gradient(150deg, #E97A9B 0%, #C13A63 55%, #7E1E3F 100%); /* @kind color */

  /* ---- VOID GRADIENTS (the ground) ---- */
  --grad-void: radial-gradient(120% 90% at 50% 18%, #161A33 0%, #0A0C1A 52%, #050609 100%); /* @kind color */
  --grad-void-panel: linear-gradient(180deg, #141832 0%, #0C0F1E 100%); /* @kind color */

  /* protection veil — darkens the foot of full-bleed imagery */
  --veil-bottom: linear-gradient(180deg, rgba(5,6,10,0) 0%, rgba(5,6,10,0.55) 62%, rgba(5,6,10,0.92) 100%); /* @kind color */
  --veil-top:    linear-gradient(180deg, rgba(5,6,10,0.85) 0%, rgba(5,6,10,0) 100%); /* @kind color */

  /* elemental field washes (behind faces) */
  --field-fire:  radial-gradient(circle at 50% 45%, rgba(232,101,31,0.30), rgba(8,10,20,0) 65%); /* @kind color */
  --field-earth: radial-gradient(circle at 50% 45%, rgba(154,138,60,0.28), rgba(8,10,20,0) 65%); /* @kind color */
  --field-air:   radial-gradient(circle at 50% 45%, rgba(123,134,214,0.28), rgba(8,10,20,0) 65%); /* @kind color */
  --field-water: radial-gradient(circle at 50% 45%, rgba(60,108,168,0.30), rgba(8,10,20,0) 65%); /* @kind color */

  /* ---- SHADOWS (depth on void) ---- */
  --shadow-sm:    0 1px 2px rgba(0,0,0,0.5);
  --shadow:       0 2px 6px rgba(0,0,0,0.45), 0 8px 24px rgba(0,0,0,0.4);
  --shadow-lg:    0 8px 18px rgba(0,0,0,0.5), 0 24px 60px rgba(0,0,0,0.55);
  --shadow-plate: 0 0 0 1px rgba(201,162,75,0.16), 0 18px 50px rgba(0,0,0,0.6);

  /* ---- GLOWS (radiant gold / gem) ---- */
  --glow-gold:      0 0 24px rgba(201,162,75,0.35);
  --glow-gold-soft: 0 0 48px rgba(201,162,75,0.18);
  --glow-gold-hard: 0 0 0 1px rgba(228,196,116,0.5), 0 0 20px rgba(201,162,75,0.45);
  --glow-gem:       0 0 18px rgba(225,85,126,0.5);
  --glow-fire:      0 0 26px rgba(232,101,31,0.45);
  --glow-air:       0 0 26px rgba(123,134,214,0.42);
  --glow-water:     0 0 26px rgba(60,108,168,0.45);

  /* ---- BEVELS (engraved metal edges) ---- */
  --bevel-up:   inset 0 1px 0 rgba(255,255,255,0.16), inset 0 -1px 0 rgba(0,0,0,0.45); /* @kind shadow */
  --bevel-down: inset 0 1px 3px rgba(0,0,0,0.6), inset 0 -1px 0 rgba(255,255,255,0.05); /* @kind shadow */

  /* ---- BLUR ---- */
  --blur-veil:  blur(14px); /* @kind other */
  --blur-mist:  blur(28px); /* @kind other */

  /* ---- MOTION ---- */
  --ease-rise:  cubic-bezier(0.22, 1, 0.36, 1);   /* @kind other */
  --ease-glide: cubic-bezier(0.4, 0, 0.2, 1);     /* @kind other */
  --dur-fast:   140ms;   /* @kind other */
  --dur:        260ms;   /* @kind other */
  --dur-slow:   520ms;   /* @kind other */
  --dur-ritual: 1200ms;  /* @kind other */
}

/* gold foil text — paint engraving onto type */
.u-gold-text {
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}