/* Decorative depth only. The existing hero image and readable content are layer 5.
   Transform/opacity replaces the brief's background-size and shadow animations. */
.dbm-start-here{box-sizing:border-box;margin:20px 0;padding:18px 20px;background:#07100f;color:#e8dfcf;border-left:3px solid #c8ff3d;font:500 14px/1.65 ui-monospace,monospace;overflow-wrap:anywhere}
.dbm-start-here strong{display:block;margin-bottom:8px;color:#c8ff3d;font-size:12px;letter-spacing:.08em}
.dbm-start-here a{display:block;width:fit-content;max-width:100%;padding:5px 0;color:#e8dfcf;text-decoration:underline;text-underline-offset:4px}
.dbm-start-here a:focus-visible{outline:2px solid #71d8ff;outline-offset:3px}
.dbm-e-hero{position:relative;isolation:isolate}
.dbm-e-hero>div,.dbm-e-hero>aside{position:relative;z-index:2}
.dbm-e-depth{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none;border-radius:inherit}
.dbm-e-layer{position:absolute;inset:-5px;pointer-events:none}
.dbm-e-terrain{opacity:.16;background:repeating-radial-gradient(ellipse at 75% 70%,transparent 0 28px,#71d8ff 29px,transparent 30px 56px)}
.dbm-e-skyline{opacity:.13;background:url('/assets/spokane-green-network.webp') center bottom/cover;clip-path:polygon(0 100%,0 70%,18% 70%,18% 55%,25% 55%,25% 65%,43% 65%,43% 38%,48% 38%,48% 62%,60% 62%,60% 48%,68% 48%,68% 72%,85% 72%,85% 60%,100% 60%,100% 100%)}
.dbm-e-grid{opacity:.09;background:linear-gradient(#71d8ff 1px,transparent 1px),linear-gradient(90deg,#71d8ff 1px,transparent 1px);background-size:64px 64px}
.dbm-e-signals i{position:absolute;left:65%;top:24%;width:6px;height:6px;background:#c8ff3d;border-radius:50%;box-shadow:0 0 12px #c8ff3d}
.dbm-e-signals i:nth-child(2){left:86%;top:43%;transform:scale(.8)}
.dbm-e-signals i:nth-child(3){left:73%;top:76%;transform:scale(1.2)}
.dbm-e-signals i:nth-child(4){left:53%;top:57%;transform:scale(.7)}
.dbm-e-signals i::after{content:"";position:absolute;inset:-8px;border:1px solid #c8ff3d;border-radius:50%;opacity:.4}
.dbm-e-surface:is(.card,.offer-card,.tool-card){position:relative;transform-style:preserve-3d}
.dbm-e-surface:is(.card,.offer-card,.tool-card)::after{content:"";position:absolute;left:5%;right:5%;top:0;height:2px;background:#c8ff3d;opacity:0;pointer-events:none}
.dbm-e-contact{position:relative}
.dbm-e-contact:not(.dbm-e-book){background:transparent!important;border:1px solid #9abd8c;color:inherit!important}
.dbm-e-contact.dbm-e-book{background:#c8ff3d!important;color:#07100f!important}
.dbm-e-contact.dbm-e-pressed,.dbm-e-contact.dbm-e-flash{outline:2px solid #c8ff3d;outline-offset:2px}
.dbm-e-contact::after{content:"";position:absolute;inset:0;border-radius:inherit;background:#c8ff3d;opacity:0;pointer-events:none}
.dbm-e-contact.dbm-e-flash::after{opacity:.22}
.dbm-e-selected{border-left:3px solid #c8ff3d!important}
.dbm-e-status{font:700 11px/1.5 ui-monospace,monospace;color:inherit;overflow-wrap:anywhere}
.dbm-e-status::before{content:"● ";color:#c8ff3d}
@media(prefers-reduced-motion:no-preference){
  .dbm-e-terrain{animation:dbmElevationDrift 30s ease-in-out infinite alternate}
  .dbm-e-signals i::after{animation:dbmElevationPulse 4s ease-in-out infinite}
  .dbm-e-enter:not(.dbm-e-hero){animation:dbmElevationEnter .5s ease-out backwards;will-change:transform}
  .dbm-e-enter:nth-child(2){animation-delay:.08s}.dbm-e-enter:nth-child(3){animation-delay:.16s}.dbm-e-enter:nth-child(4){animation-delay:.24s}
  .dbm-e-contact.dbm-e-book.dbm-e-enter{animation:dbmElevationPulse .5s ease-out}
  .dbm-e-contact::after{transition:opacity .15s}
  .dbm-e-selected{animation:dbmElevationOutput .3s ease-out}
  .dbm-e-output{animation:dbmElevationOutput .25s ease-out}
  .dbm-e-output + .dbm-e-status::before{animation:dbmElevationPulse .5s ease-out}
  .dbm-e-surface:not(.dbm-e-inview),.dbm-e-surface:not(.dbm-e-inview) *,.dbm-e-surface:not(.dbm-e-inview)::after,.dbm-e-surface:not(.dbm-e-inview) *::after{animation-play-state:paused!important}
  .dbm-e-hidden .dbm-e-surface,.dbm-e-hidden .dbm-e-surface *,.dbm-e-hidden .dbm-e-surface *::after{animation-play-state:paused!important}
  @media(hover:hover) and (pointer:fine){
    .dbm-e-terrain{translate:calc(var(--dbm-e-x,0px) * .25) calc(var(--dbm-e-y,0px) * .25)}
    .dbm-e-skyline{transform:translate(calc(var(--dbm-e-x,0px) * .5),calc(var(--dbm-e-y,0px) * .5))}
    .dbm-e-grid{transform:translate(calc(var(--dbm-e-x,0px) * .75),calc(var(--dbm-e-y,0px) * .75))}
    .dbm-e-signals{transform:translate(var(--dbm-e-x,0px),var(--dbm-e-y,0px))}
    .dbm-e-surface:is(.card,.offer-card,.tool-card):hover{transform:perspective(900px) rotateX(2deg) rotateY(-2deg);border-color:#b6dc93;transition:transform .2s}
    .dbm-e-surface:is(.card,.offer-card,.tool-card):hover::after{animation:dbmElevationScan .4s ease-out}
    .dbm-e-contact:hover{transform:translateY(2px);box-shadow:none}
  }
}
@keyframes dbmElevationDrift{to{transform:translateX(2px)}}
@keyframes dbmElevationPulse{50%{opacity:.55;transform:scale(1.035)}}
@keyframes dbmElevationEnter{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes dbmElevationOutput{from{opacity:.55}to{opacity:1}}
@keyframes dbmElevationScan{0%{opacity:0;transform:translateY(0)}20%{opacity:.7}100%{opacity:0;transform:translateY(180px)}}