/* Scroll progress bar */
.dh-progress {
  position: fixed; inset: 0 0 auto 0; height: 2px;
  z-index: 9000;
  background: transparent;
  pointer-events: none;
}
.dh-progress-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg,
    var(--accent-warm-from, #ff8a5b),
    var(--accent-cool-to, #6e7bff));
  box-shadow: 0 0 12px color-mix(in oklab, var(--accent-cool-from, #7b9eff) 60%, transparent);
  transition: width 80ms linear;
}

/* Grain overlay */
.dh-grain {
  position: fixed; inset: -50%;
  pointer-events: none;
  z-index: 8500;
  opacity: 0.035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.9 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 160px 160px;
  animation: dh-grain-shift 1.4s steps(6) infinite;
}
@keyframes dh-grain-shift {
  0%   { transform: translate(0,0); }
  20%  { transform: translate(-3%, 2%); }
  40%  { transform: translate(2%, -3%); }
  60%  { transform: translate(-2%, -2%); }
  80%  { transform: translate(3%, 1%); }
  100% { transform: translate(0,0); }
}
@media (prefers-reduced-motion: reduce) {
  .dh-grain { animation: none; }
}

/* Floating shapes */
.dh-shapes {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}
.dh-shapes .sh {
  position: absolute;
  opacity: 0.5;
  will-change: transform;
}
.dh-shapes .sh-circle {
  width: 88px; height: 88px;
  border: 1px solid color-mix(in oklab, var(--fg, #0a0a0f) 9%, transparent);
  border-radius: 999px;
  animation: dh-float-a 22s ease-in-out infinite;
}
.dh-shapes .sh-circle-s {
  width: 38px; height: 38px;
  border: 1px solid color-mix(in oklab, var(--fg, #0a0a0f) 11%, transparent);
  border-radius: 999px;
  animation: dh-float-b 18s ease-in-out infinite;
}
.dh-shapes .sh-square {
  width: 64px; height: 64px;
  border: 1px solid color-mix(in oklab, var(--fg, #0a0a0f) 8%, transparent);
  transform: rotate(8deg);
  animation: dh-float-b 26s ease-in-out infinite;
}
.dh-shapes .sh-cross {
  width: 22px; height: 22px;
  background:
    linear-gradient(color-mix(in oklab, var(--fg, #0a0a0f) 18%, transparent),
                    color-mix(in oklab, var(--fg, #0a0a0f) 18%, transparent)) center/100% 1px no-repeat,
    linear-gradient(color-mix(in oklab, var(--fg, #0a0a0f) 18%, transparent),
                    color-mix(in oklab, var(--fg, #0a0a0f) 18%, transparent)) center/1px 100% no-repeat;
  animation: dh-float-a 19s ease-in-out infinite;
}
.dh-shapes .sh-tri {
  width: 0; height: 0;
  border-left: 24px solid transparent;
  border-right: 24px solid transparent;
  border-bottom: 40px solid color-mix(in oklab, var(--fg, #0a0a0f) 7%, transparent);
  animation: dh-float-b 30s ease-in-out infinite;
}
.dh-shapes .sh-dot {
  width: 6px; height: 6px; border-radius: 999px;
  background: color-mix(in oklab, var(--accent-cool-from, #7b9eff) 70%, transparent);
  box-shadow: 0 0 14px color-mix(in oklab, var(--accent-cool-from, #7b9eff) 60%, transparent);
  animation: dh-float-a 14s ease-in-out infinite;
}
@keyframes dh-float-a {
  0%, 100% { transform: translate(0,0) rotate(0deg); }
  33%      { transform: translate(18px, -22px) rotate(6deg); }
  66%      { transform: translate(-12px, 14px) rotate(-4deg); }
}
@keyframes dh-float-b {
  0%, 100% { transform: translate(0,0) rotate(8deg); }
  50%      { transform: translate(-22px, -16px) rotate(-3deg); }
}
@media (prefers-reduced-motion: reduce) {
  .dh-shapes .sh { animation: none !important; }
}

/* Grid lines */
.dh-grid {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(to right,  color-mix(in oklab, var(--fg, #0a0a0f) 4%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklab, var(--fg, #0a0a0f) 4%, transparent) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 85%);
}

@media (max-width: 720px) {
  .dh-shapes, .dh-grid { display: none; }
}

/* ─────────────────────────────────────────────────────────────
   Ambient gradient orbs (premium soft light bloom)
─────────────────────────────────────────────────────────────── */
.dh-orbs {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.dh-orbs .orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.22;
  will-change: transform;
}
.dh-orbs .orb-1 {
  top: -10%; left: -8%;
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(124, 92, 255, 0.35) 0%, transparent 70%);
  animation: dh-orb-drift-a 32s ease-in-out infinite;
}
.dh-orbs .orb-2 {
  display: none;
}
.dh-orbs .orb-3 {
  display: none;
}
@keyframes dh-orb-drift-a {
  0%, 100% { transform: translate(0,0)        scale(1);    }
  33%      { transform: translate(60px,-40px) scale(1.08); }
  66%      { transform: translate(-40px,30px) scale(0.95); }
}
@keyframes dh-orb-drift-b {
  0%, 100% { transform: translate(0,0)         scale(1);    }
  50%      { transform: translate(-50px,-30px) scale(1.10); }
}
@media (prefers-reduced-motion: reduce) {
  .dh-orbs .orb { animation: none; }
}
@media (max-width: 760px) {
  .dh-orbs .orb { filter: blur(60px); opacity: 0.18; }
  .dh-orbs .orb-1 { width: 320px; height: 320px; }
}
@media (max-width: 480px) {
  .dh-orbs .orb { filter: blur(50px); opacity: 0.14; }
  .dh-orbs .orb-1 { width: 240px; height: 240px; top: -8%; left: -12%; }
}

/* ─────────────────────────────────────────────────────────────
   Vertical side mark (fixed left edge)
─────────────────────────────────────────────────────────────── */
.dh-sidemark {
  position: fixed;
  left: 20px;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
  transform-origin: center;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono, monospace);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--fg, #0a0a0f) 50%, transparent);
  pointer-events: none;
  z-index: 60;
  white-space: nowrap;
  font-weight: 500;
}
.dh-sidemark .sm-line {
  display: inline-block;
  width: 28px; height: 1px;
  background: currentColor;
  opacity: 0.6;
}
.dh-sidemark .sm-dot {
  opacity: 0.5;
  font-size: 12px;
}
@media (max-width: 1200px) {
  .dh-sidemark { display: none; }
}

/* ─────────────────────────────────────────────────────────────
   Marquee strip (horizontal infinite scrolling text)
─────────────────────────────────────────────────────────────── */
.dh-marquee {
  position: relative;
  overflow: hidden;
  margin: 32px 0 0;
  padding: 14px 0;
  border-top: 1px solid color-mix(in oklab, var(--fg, #0a0a0f) 6%, transparent);
  border-bottom: 1px solid color-mix(in oklab, var(--fg, #0a0a0f) 6%, transparent);
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.dh-marquee::before,
.dh-marquee::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--accent-cool-from, #7C3BFF);
  transform: translateY(-50%);
  opacity: 0.6;
  z-index: 2;
}
.dh-marquee::before { left: 8%; }
.dh-marquee::after  { right: 8%; }
.dh-marquee-track {
  display: inline-flex;
  align-items: center;
  /* No flex gap — spacing comes from each item's margin-right so the
     duplicate halves are guaranteed to be exactly the same width and the
     animation can wrap perfectly. The shift distance is set by JS
     (--marquee-shift) so the loop stays seamless on any viewport width. */
  white-space: nowrap;
  animation: dh-marquee-roll 48s linear infinite;
  will-change: transform;
  --marquee-shift: -50%;
}
.dh-marquee-track > * {
  margin-right: 32px;
  flex-shrink: 0;
}
@keyframes dh-marquee-roll {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(var(--marquee-shift), 0, 0); }
}
.dh-marquee .mq-item {
  font-family: var(--font-mono, monospace);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: color-mix(in oklab, var(--fg, #0a0a0f) 65%, transparent);
  flex-shrink: 0;
}
.dh-marquee .mq-item.mq-accent {
  color: var(--accent-cool-from, #7C3BFF);
  font-weight: 700;
}
.dh-marquee .mq-sep {
  display: inline-block;
  width: 6px; height: 6px;
  flex-shrink: 0;
  position: relative;
}
.dh-marquee .mq-sep::before {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in oklab, var(--fg, #0a0a0f) 30%, transparent);
  border-radius: 50%;
}
@media (prefers-reduced-motion: reduce) {
  /* Don't kill the marquee outright — slow it down so motion-sensitive
     users still see the content scroll past at a gentle pace. */
  .dh-marquee-track { animation-duration: 120s; }
}
@media (max-width: 760px) {
  .dh-marquee { margin: 20px 0 0; padding: 10px 0; }
  .dh-marquee .mq-item { font-size: 11px; letter-spacing: 0.14em; }
  .dh-marquee-track { animation-duration: 32s; }
  .dh-marquee-track > * { margin-right: 22px; }
  .dh-marquee::before, .dh-marquee::after { width: 3px; height: 3px; }
}
@media (max-width: 480px) {
  .dh-marquee { padding: 8px 0; margin: 16px 0 0; }
  .dh-marquee .mq-item { font-size: 10px; letter-spacing: 0.12em; }
  .dh-marquee-track > * { margin-right: 18px; }
  .dh-marquee::before, .dh-marquee::after { display: none; }
}