/* ============================================================
   TAMGA — Effects: shadows, glows, gold treatments, frames
   The identity has almost no drop-shadow; depth comes from
   light (warm amber glow / emerald glow) and thin gold rules.
   ============================================================ */
:root {
  /* ---- Shadows (used sparingly, warm-tinted) ---- */
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.45);
  --shadow-md:  0 6px 24px rgba(0,0,0,0.55);
  --shadow-lg:  0 18px 60px rgba(0,0,0,0.65);
  --shadow-inset: inset 0 1px 0 rgba(242,220,166,0.06);

  /* ---- Glows — the real depth system ---- */
  --glow-gold:    0 0 28px rgba(232,200,122,0.28);
  --glow-gold-sm: 0 0 12px rgba(232,200,122,0.32);
  --glow-emerald: 0 0 36px rgba(43,183,143,0.40);
  --glow-emerald-sm: 0 0 14px rgba(43,183,143,0.45);

  /* ---- Ornamental frame inset (the mihrab / corner-bracket rule) ---- */
  --frame-pad: clamp(14px, 2.2vw, 28px);
}

/* ------------------------------------------------------------
   Metallic gold TEXT — gradient fill used on display caps.
   Apply: <span class="gold-text">ТАМGA</span>
   ------------------------------------------------------------ */
.gold-text {
  background: linear-gradient(180deg, var(--gold-100) 0%, var(--gold-300) 34%, var(--gold-600) 72%, var(--gold-800) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ------------------------------------------------------------
   Ornamental gold hairline FRAME with notched corner brackets.
   Wrap any block: <div class="tamga-frame"> … </div>
   ------------------------------------------------------------ */
.tamga-frame {
  position: relative;
  padding: var(--frame-pad);
}
.tamga-frame::before {
  content: "";
  position: absolute;
  inset: var(--frame-pad);
  border: var(--border-frame) solid var(--line-gold);
  opacity: 0.55;
  pointer-events: none;
}
/* corner brackets */
.tamga-frame > .corner {
  position: absolute;
  width: 22px; height: 22px;
  border: var(--border-thick) solid var(--accent);
  opacity: 0.85;
  pointer-events: none;
}
.tamga-frame > .corner.tl { top: calc(var(--frame-pad) - 6px); left: calc(var(--frame-pad) - 6px); border-right: none; border-bottom: none; }
.tamga-frame > .corner.tr { top: calc(var(--frame-pad) - 6px); right: calc(var(--frame-pad) - 6px); border-left: none; border-bottom: none; }
.tamga-frame > .corner.bl { bottom: calc(var(--frame-pad) - 6px); left: calc(var(--frame-pad) - 6px); border-right: none; border-top: none; }
.tamga-frame > .corner.br { bottom: calc(var(--frame-pad) - 6px); right: calc(var(--frame-pad) - 6px); border-left: none; border-top: none; }

/* ------------------------------------------------------------
   Warm "light-ray" wash — vertical amber beam behind subjects.
   ------------------------------------------------------------ */
.tamga-ray {
  background: var(--grad-ray);
}

/* ------------------------------------------------------------
   Hairline divider with a centred tamga diamond node.
   ------------------------------------------------------------ */
.tamga-rule {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--accent-soft);
}
.tamga-rule::before,
.tamga-rule::after {
  content: "";
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, transparent, var(--line-gold), transparent);
  opacity: 0.6;
}

/* Selection */
::selection { background: rgba(43,183,143,0.30); color: var(--text-display); }