/* =============================================
   SteefMade — Depth & Texture (v1 · "matte salon")
   Adds quiet material depth: film grain, soft top
   light, recessed panels, raised cards. Restrained
   on purpose — no glow spam, no extra rules.
   ============================================= */

/* ---- 1. SITE-WIDE FILM GRAIN ----
   A single fixed, very faint noise layer. Gives the
   matte, expensive "not a flat dark page" feel. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: 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.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

/* A whisper of cool top light — neutral, NOT olive,
   so it reads as studio lighting, not a brand glow. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 60% at 50% -12%, rgba(255, 255, 255, 0.045), transparent 60%);
}

/* keep real content above the texture layers.
   NOTE: do NOT include position:fixed elements here (.nav, .nav-drawer,
   .nav-overlay) — forcing them to position:relative breaks the sticky
   nav and drops the hidden drawer back into the page flow. They already
   sit above the texture via their own high z-index. */
main, footer, .brief-nav,
.brief-hero, .tariff-strip, .wizard-wrap, .wiz-nav, .success-wrap {
  position: relative;
  z-index: 1;
}

/* ---- 2. RECESSED PANEL ----
   A sunken stage that card grids sit inside, so the
   cards read as physically raised off the surface. */
.depth-panel {
  position: relative;
  padding: clamp(18px, 2.4vw, 34px);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0.04) 60%, rgba(255, 255, 255, 0.012));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    inset 0 26px 56px -42px rgba(0, 0, 0, 0.95);
}

/* ---- 3. RAISED CARDS ----
   Applied to the existing card surfaces so depth lands
   everywhere without re-marking the HTML. */
.lux-card,
.guard,
.custom-cell,
.addon-cell {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(130% 90% at 50% -20%, rgba(255, 255, 255, 0.055), transparent 58%),
    linear-gradient(180deg, var(--surface2), var(--surface));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 1px 2px rgba(0, 0, 0, 0.4),
    0 20px 44px -26px rgba(0, 0, 0, 0.9);
  transition:
    transform 300ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 300ms ease,
    border-color 300ms ease;
}

/* thin lit top edge — the "machined" detail */
.lux-card::before,
.guard::before,
.custom-cell::before,
.addon-cell::before {
  content: '';
  position: absolute;
  left: 12%;
  right: 12%;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-olive), transparent);
  opacity: 0.65;
  pointer-events: none;
}

.lux-card:hover,
.guard:hover,
.custom-cell:hover,
.addon-cell:hover {
  transform: translateY(-4px);
  border-color: var(--border-olive);
  background:
    radial-gradient(130% 90% at 50% -20%, rgba(168, 194, 79, 0.08), transparent 58%),
    linear-gradient(180deg, var(--surface2), var(--surface));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 2px 4px rgba(0, 0, 0, 0.4),
    0 32px 64px -28px rgba(0, 0, 0, 0.98);
}

/* ---- 4. DISSOLVE THE OLD SEAMLESS TILE GRIDS ----
   Guarantees / custom / addons were 1px-gap tiles over
   a border-coloured background. Turn them into floating
   cards with real gaps so the recess can show through. */
.guard-grid,
.custom-grid,
.addons-grid {
  background: transparent !important;
  border: 0 !important;
  overflow: visible !important;
  gap: clamp(12px, 1.4vw, 18px) !important;
}

/* their cells keep padding but lose the flat fill */
.custom-cell.featured {
  border-color: var(--border-olive) !important;
  background:
    radial-gradient(130% 90% at 50% -20%, rgba(168, 194, 79, 0.12), transparent 58%),
    linear-gradient(180deg, var(--surface2), var(--surface)) !important;
}

/* ---- 5. TOOLTIP-ENABLED ELEMENTS ----
   subtle affordance that there's more on hover */
[data-tip] {
  cursor: help;
}

/* ---- 6. FLOATING TOOLTIP (built by js/tooltip.js) ---- */
.lux-tip {
  position: fixed;
  z-index: 400;
  max-width: 268px;
  padding: 13px 15px 14px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--surface2), var(--surface));
  border: 1px solid var(--border-strong);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 18px 44px -14px rgba(0, 0, 0, 0.85);
  opacity: 0;
  transform: translateY(4px) scale(0.98);
  transform-origin: bottom center;
  transition: opacity 160ms ease, transform 160ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.lux-tip.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.lux-tip-term {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--olive-bright);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.lux-tip-term::before {
  content: '';
  width: 14px;
  height: 1px;
  background: var(--border-olive);
}
.lux-tip-text {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
}
.lux-tip-arrow {
  position: absolute;
  width: 10px;
  height: 10px;
  background: var(--surface);
  border-right: 1px solid var(--border-strong);
  border-bottom: 1px solid var(--border-strong);
  transform: rotate(45deg);
  left: 50%;
  margin-left: -5px;
  bottom: -6px;
}
.lux-tip.below .lux-tip-arrow {
  bottom: auto;
  top: -6px;
  border: 0;
  border-left: 1px solid var(--border-strong);
  border-top: 1px solid var(--border-strong);
}

@media (prefers-reduced-motion: reduce) {
  .lux-tip { transition: opacity 120ms ease; transform: none; }
  .lux-tip.show { transform: none; }
}