/* DBM Premium Visuals: dimensional, route-specific SVG art without image weight. */

body[data-dbm-visual-engine="1"] {
  --dbm-premium-ink: #06100d;
  --dbm-premium-panel: #10251b;
  --dbm-premium-lime: #d4ff4a;
  --dbm-premium-green: #7ec820;
  --dbm-premium-orange: #ff6a35;
  --dbm-premium-amber: #f2b84b;
  --dbm-premium-cyan: #6bdcf2;
}

/* The homepage already has a full-bleed hero canvas. Keep one strong visual
   there instead of stacking the inner console on top of it. */
body.dbm-motion-home .dbm-home-visual > .dbm-instrument--home {
  display: none !important;
}

body.dbm-motion-home .dbm-home-visual .dbm-premium-hero svg {
  width: 100%;
  height: 100%;
  max-height: none;
  overflow: visible;
}

body.dbm-motion-home .dbm-home-visual .dbm-premium-hero .dbm-p-bg {
  stroke: rgba(212, 255, 74, .24);
}

.dbm-custom-scene.dbm-premium-scene {
  z-index: 1;
  padding: 8px;
  opacity: 1;
  transform: translateZ(16px);
  transform-style: preserve-3d;
}

.dbm-premium-scene svg {
  width: 100%;
  height: 100%;
  max-height: none;
  overflow: visible;
  transform: translateZ(4px);
}

.dbm-premium-scene .dbm-p-bg {
  fill: var(--dbm-premium-surface);
  stroke: rgba(212, 255, 74, .2);
  stroke-width: 1;
}

.dbm-premium-scene .dbm-p-grid {
  fill: url("#dbm-premium-grid");
  opacity: .5;
}

.dbm-premium-scene .dbm-p-grid-line,
.dbm-premium-scene .dbm-p-rule {
  fill: none;
  stroke: rgba(215, 255, 190, .14);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.dbm-premium-scene .dbm-p-rule { stroke: rgba(212, 255, 74, .28); }

.dbm-premium-scene .dbm-p-glow {
  filter: url("#dbm-premium-glow");
}

.dbm-premium-scene .dbm-p-trace,
.dbm-premium-scene .dbm-p-bridge,
.dbm-premium-scene .dbm-p-beam {
  fill: none;
  stroke: var(--dbm-premium-lime);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 9 13;
  vector-effect: non-scaling-stroke;
  animation: dbm-premium-dash 8s linear infinite;
}

.dbm-premium-scene .dbm-p-beam { stroke: var(--dbm-premium-cyan); stroke-width: 2; opacity: .72; }
.dbm-premium-scene .dbm-p-bridge { stroke: var(--dbm-premium-orange); }

.dbm-premium-scene .dbm-p-plate {
  fill: rgba(16, 37, 27, .94);
  stroke: rgba(212, 255, 74, .35);
  stroke-width: 1;
}

.dbm-premium-scene .dbm-p-plate--cool { fill: rgba(10, 31, 34, .94); stroke: rgba(107, 220, 242, .45); }
.dbm-premium-scene .dbm-p-plate--warm { fill: rgba(49, 27, 18, .94); stroke: rgba(255, 106, 53, .52); }

.dbm-premium-scene .dbm-p-face {
  fill: rgba(212, 255, 74, .12);
  stroke: rgba(212, 255, 74, .56);
  stroke-width: 1;
}

.dbm-premium-scene .dbm-p-face--cool { fill: rgba(107, 220, 242, .12); stroke: rgba(107, 220, 242, .62); }
.dbm-premium-scene .dbm-p-face--warm { fill: rgba(255, 106, 53, .14); stroke: rgba(255, 106, 53, .68); }

.dbm-premium-scene .dbm-p-marker {
  fill: var(--dbm-premium-lime);
  stroke: var(--dbm-premium-ink);
  stroke-width: 3;
  filter: drop-shadow(0 0 7px currentColor);
  animation: dbm-premium-pulse 2.8s ease-in-out infinite;
}

.dbm-premium-scene .dbm-p-marker--hot { fill: var(--dbm-premium-orange); color: var(--dbm-premium-orange); }
.dbm-premium-scene .dbm-p-marker--amber { fill: var(--dbm-premium-amber); color: var(--dbm-premium-amber); }
.dbm-premium-scene .dbm-p-marker--cool { fill: var(--dbm-premium-cyan); color: var(--dbm-premium-cyan); }

.dbm-premium-scene .dbm-p-beacon {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  opacity: .55;
  transform-box: fill-box;
  transform-origin: center;
  animation: dbm-premium-ring 2.8s ease-out infinite;
}

.dbm-premium-scene .dbm-p-scan {
  fill: var(--dbm-premium-scan);
  opacity: .5;
  transform-box: fill-box;
  transform-origin: center;
  animation: dbm-premium-scan 5.5s linear infinite;
}

.dbm-premium-scene .dbm-p-dash {
  fill: none;
  stroke: rgba(215, 255, 190, .28);
  stroke-width: 1;
  stroke-dasharray: 3 8;
  vector-effect: non-scaling-stroke;
}

.dbm-premium-scene .dbm-p-label,
.dbm-premium-scene .dbm-p-stamp {
  fill: #eaf7ed;
  font: 800 10px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .1em;
}

.dbm-premium-scene .dbm-p-label--muted { fill: #9bb2a5; }
.dbm-premium-scene .dbm-p-label--lime { fill: var(--dbm-premium-lime); }
.dbm-premium-scene .dbm-p-label--orange { fill: var(--dbm-premium-orange); }
.dbm-premium-scene .dbm-p-label--cyan { fill: var(--dbm-premium-cyan); }

.dbm-premium-scene .dbm-p-stamp {
  fill: var(--dbm-premium-lime);
  font-size: 9px;
  letter-spacing: .16em;
}

.dbm-premium-scene .dbm-p-float { animation: dbm-premium-breathe 5.2s ease-in-out infinite; }
.dbm-premium-scene .dbm-p-float--slow { animation-delay: -2.2s; animation-duration: 6.8s; }
.dbm-premium-scene .dbm-p-packet { animation: dbm-premium-packet 5.2s ease-in-out infinite; }

@keyframes dbm-premium-dash { to { stroke-dashoffset: -176; } }
@keyframes dbm-premium-pulse { 0%, 100% { opacity: .82; } 50% { opacity: 1; } }
@keyframes dbm-premium-ring { 0% { opacity: .65; transform: scale(.6); } 100% { opacity: 0; transform: scale(2.2); } }
@keyframes dbm-premium-scan { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes dbm-premium-breathe { 0%, 100% { opacity: .86; } 50% { opacity: 1; } }
@keyframes dbm-premium-packet { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(8px, -5px); } }

@media (prefers-reduced-motion: reduce) {
  .dbm-premium-scene *,
  .dbm-premium-scene *::before,
  .dbm-premium-scene *::after {
    animation: none !important;
    transition: none !important;
  }
}

@media (max-width: 720px) {
  .dbm-custom-scene.dbm-premium-scene { padding: 2px; }
  .dbm-premium-scene .dbm-p-label { font-size: 9px; }
  .dbm-premium-scene .dbm-p-stamp { font-size: 8px; }
}

@media (max-width: 800px) {
  body.dbm-home .dbm-home-hero {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    min-height: 0 !important;
    padding: 28px 0 42px !important;
  }

  body.dbm-home .dbm-home-intro { order: 1; }

  body.dbm-home .dbm-home-visual {
    order: 2;
    width: 100%;
    min-height: 480px !important;
  }

  body.dbm-home .dbm-home-visual .dbm-premium-hero {
    position: absolute;
    inset: 0;
  }
}