/* The Trading Vault — Effects
   Shadows are deep & soft (vault darkness), never bright. The light beam is
   the single signature flourish. Glass uses blur + low-opacity surface. */

:root {
  /* ---- Shadows (low-key, for raised surfaces / dialogs) ---- */
  --shadow-sm:   0 1px 2px rgba(0,0,0,.5);
  --shadow-md:   0 8px 24px rgba(0,0,0,.55);
  --shadow-lg:   0 24px 64px rgba(0,0,0,.65);
  --shadow-dialog: 0 40px 120px rgba(0,0,0,.75);

  /* Inner hairline highlight — gives surfaces a "wet stone" edge */
  --edge-inner-top: inset 0 1px 0 rgba(255,255,255,.04); /* @kind shadow */

  /* Soft white glow for focal CTAs (use once, quietly) */
  --glow-soft: 0 0 0 1px rgba(255,255,255,.06), 0 0 40px rgba(255,255,255,.05);

  /* ---- Transitions ---- */
  --ease-standard: cubic-bezier(.4, 0, .2, 1); /* @kind other */
  --ease-out:      cubic-bezier(.16, 1, .3, 1); /* @kind other */
  --dur-fast:   .14s; /* @kind other */
  --dur-base:   .18s; /* @kind other */
  --dur-slow:   .32s; /* @kind other */

  /* ---- Blur ---- */
  --blur-glass: 14px; /* @kind other */
}

/* ---- Signature: the overhead light beam ---- */
/* Apply .tv-beam to a positioned container; the ::before paints a skewed
   white gradient column. Use ONCE per view, kept quiet everywhere else. */
.tv-beam { position: relative; overflow: hidden; }
.tv-beam::before {
  content: "";
  position: absolute;
  top: -20%; left: 50%;
  width: 38%; height: 150%;
  transform: translateX(-50%) skewX(-7deg);
  background: linear-gradient(180deg,
    rgba(255,255,255,.10) 0%,
    rgba(255,255,255,.02) 45%,
    transparent 78%);
  filter: blur(6px);
  pointer-events: none;
  z-index: 0;
}

/* ---- Marble / obsidian atmosphere wash ---- */
/* Subtle radial light pooling for section backgrounds. */
.tv-atmosphere {
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(255,255,255,.05), transparent 55%),
    var(--bg-section);
}

/* Hairline divider */
.tv-divider {
  height: 1px;
  border: 0;
  background: var(--border-default);
}

/* Glass panel utility */
.tv-glass {
  background: var(--surface-glass);
  backdrop-filter: blur(var(--blur-glass));
  -webkit-backdrop-filter: blur(var(--blur-glass));
  border: 1px solid var(--border-default);
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}