/*
 * Darja Rihla Hub Depth System v1.1
 * 2026-09-07
 *
 * IMPORTANT:
 * dr-theme-tokens.css / ADR-009 owns hub colors.
 * This file consumes the active scoped tokens and does not create
 * a second hub-color registry.
 *
 * Required root pattern:
 * class="dr-world dr-world--systems dr-hub-systems"
 */

.dr-world {
  --dr-depth-accent: var(--dr-accent);
  --dr-depth-accent-2: var(--dr-accent-2);
  --dr-depth-accent-3: var(--dr-accent-3);
  --dr-depth-ink: var(--dr-accent-ink);
  --dr-depth-tint: var(--dr-hub-tint);
  --dr-depth-wash: var(--dr-hub-wash);
  --dr-depth-glow: var(--dr-hub-glow);

  --dr-depth-bg-image: none;
  --dr-depth-bg-position: 50% 50%;
  --dr-depth-bg-size: cover;
  --dr-depth-base-opacity: .64;
  --dr-depth-field-opacity: .22;
  --dr-depth-veil-opacity: .94;
  --dr-depth-blur: 52px;

  position: relative;
  isolation: isolate;
}

.dr-depth {
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  overflow: hidden;
  contain: paint;
  background: var(--dr-shell-bg-dark, #16202b);
}

.dr-depth__base,
.dr-depth__mist,
.dr-depth__field,
.dr-depth__veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.dr-depth__base {
  inset: -5%;
  background:
    linear-gradient(180deg, rgba(7,14,20,.20), rgba(7,14,20,.72)),
    var(--dr-depth-bg-image);
  background-position: center, var(--dr-depth-bg-position);
  background-size: cover, var(--dr-depth-bg-size);
  background-repeat: no-repeat;
  opacity: var(--dr-depth-base-opacity);
  transform: scale(1.035);
}

.dr-depth__mist {
  inset: -5%;
  background:
    radial-gradient(circle at 18% 22%,
      color-mix(in srgb, var(--dr-depth-accent) 26%, transparent), transparent 38%),
    radial-gradient(circle at 82% 30%,
      color-mix(in srgb, var(--dr-depth-accent-2) 20%, transparent), transparent 40%),
    radial-gradient(circle at 52% 84%,
      color-mix(in srgb, var(--dr-depth-accent-3) 14%, transparent), transparent 36%);
  filter: blur(var(--dr-depth-blur));
  opacity: .88;
}

.dr-depth__field {
  opacity: var(--dr-depth-field-opacity);
  background-image: var(--dr-depth-field-image, none);
  background-size: var(--dr-depth-field-size, auto);
  background-position: center;
  background-repeat: var(--dr-depth-field-repeat, repeat);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
}

.dr-depth__veil {
  opacity: var(--dr-depth-veil-opacity);
  background:
    linear-gradient(180deg,
      rgba(6,14,19,.28) 0%,
      rgba(6,14,19,.12) 24%,
      rgba(6,14,19,.20) 58%,
      rgba(6,14,19,.54) 100%),
    linear-gradient(90deg,
      rgba(6,14,19,.32) 0%,
      transparent 22%,
      transparent 78%,
      rgba(6,14,19,.30) 100%);
}

/* Structural motifs only. Colors always come from active ADR-009 tokens. */
.dr-world--systems,
.dr-world--framework {
  --dr-depth-field-image:
    repeating-linear-gradient(60deg,
      transparent 0 44px,
      color-mix(in srgb, var(--dr-depth-accent) 14%, transparent) 45px 46px),
    repeating-linear-gradient(-60deg,
      transparent 0 44px,
      color-mix(in srgb, var(--dr-depth-accent-2) 12%, transparent) 45px 46px);
}

.dr-world--culture {
  --dr-depth-field-image:
    repeating-linear-gradient(0deg,
      transparent 0 79px,
      color-mix(in srgb, var(--dr-depth-accent-2) 12%, transparent) 80px 81px),
    repeating-linear-gradient(90deg,
      transparent 0 119px,
      color-mix(in srgb, var(--dr-depth-accent) 11%, transparent) 120px 121px),
    radial-gradient(circle at 70% 24%,
      transparent 0 88px,
      color-mix(in srgb, var(--dr-depth-accent-3) 16%, transparent) 89px 90px,
      transparent 91px 132px,
      color-mix(in srgb, var(--dr-depth-accent-3) 10%, transparent) 133px 134px,
      transparent 135px);
}

.dr-world--cyber,
.dr-world--wordpress-security {
  --dr-depth-field-image:
    linear-gradient(color-mix(in srgb, var(--dr-depth-accent) 16%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--dr-depth-accent) 16%, transparent) 1px, transparent 1px),
    radial-gradient(circle at center, color-mix(in srgb, var(--dr-depth-accent-3) 20%, transparent) 0 1px, transparent 2px);
  --dr-depth-field-size: 64px 64px, 64px 64px, 96px 96px;
}

.dr-world--philosophy {
  --dr-depth-field-image:
    repeating-linear-gradient(90deg,
      transparent 0 12vw,
      color-mix(in srgb, var(--dr-depth-accent-3) 9%, transparent) 12.1vw 12.2vw);
}

.dr-world--health {
  --dr-depth-field-image:
    radial-gradient(ellipse at 50% 50%,
      transparent 0 18%,
      color-mix(in srgb, var(--dr-depth-accent-3) 12%, transparent) 18.4% 18.8%,
      transparent 19.2% 31%,
      color-mix(in srgb, var(--dr-depth-accent-2) 10%, transparent) 31.4% 31.8%,
      transparent 32.2%);
  --dr-depth-field-size: 620px 340px;
}

.dr-world--dutch {
  --dr-depth-field-image:
    linear-gradient(90deg,
      transparent 0 9%,
      color-mix(in srgb, var(--dr-depth-accent) 16%, transparent) 9.1% 9.3%,
      transparent 9.4% 100%),
    repeating-linear-gradient(0deg,
      transparent 0 54px,
      color-mix(in srgb, var(--dr-depth-accent-2) 8%, transparent) 55px 56px);
}

.dr-world--startup {
  --dr-depth-field-image:
    linear-gradient(color-mix(in srgb, var(--dr-depth-accent-2) 11%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--dr-depth-accent-2) 11%, transparent) 1px, transparent 1px),
    linear-gradient(color-mix(in srgb, var(--dr-depth-accent) 8%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--dr-depth-accent) 8%, transparent) 1px, transparent 1px);
  --dr-depth-field-size: 24px 24px, 24px 24px, 120px 120px, 120px 120px;
}

.dr-world .dr-glass {
  border: 1px solid color-mix(in srgb, var(--dr-depth-accent-3) 18%, transparent);
  background:
    linear-gradient(135deg, rgba(255,255,255,.055), rgba(255,255,255,.018)),
    rgba(12, 23, 31, .64);
  box-shadow:
    0 24px 70px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(16px) saturate(112%);
  -webkit-backdrop-filter: blur(16px) saturate(112%);
}

html[data-theme="light"] .dr-depth {
  background: var(--dr-hub-wash, #f5f2eb);
}

html[data-theme="light"] .dr-depth__base {
  background:
    linear-gradient(180deg, rgba(247,242,234,.16), rgba(239,230,215,.58)),
    var(--dr-depth-bg-image);
  background-position: center, var(--dr-depth-bg-position);
  background-size: cover, var(--dr-depth-bg-size);
  opacity: .50;
}

html[data-theme="light"] .dr-depth__mist { opacity: .44; }
html[data-theme="light"] .dr-depth__field { opacity: .16; }

html[data-theme="light"] .dr-depth__veil {
  background:
    linear-gradient(180deg, rgba(247,242,234,.20), rgba(247,242,234,.40) 46%, rgba(236,226,211,.66) 100%),
    linear-gradient(90deg, rgba(242,234,222,.28), transparent 24%, transparent 76%, rgba(242,234,222,.26));
}

html[data-theme="light"] .dr-world .dr-glass {
  background:
    linear-gradient(135deg, rgba(255,255,255,.54), rgba(255,255,255,.18)),
    rgba(244,238,228,.68);
  box-shadow: var(--dr-shadow, 0 14px 38px rgba(16,33,46,.10));
}

@media (max-width: 820px) {
  .dr-depth {
    position: absolute;
    min-height: 100vh;
  }

  .dr-depth__base {
    inset: 0;
    transform: none;
  }

  .dr-depth__mist {
    filter: blur(32px);
    opacity: .66;
  }

  .dr-depth__field {
    opacity: .14;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dr-depth__base,
  .dr-depth__mist,
  .dr-depth__field,
  .dr-depth__veil {
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
}