.ddo-particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.ddo-dashboard--motion,
.page-cabinet--shell .ddo-dashboard {
  position: relative;
}

.ddo-map-horizon {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 30vh;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.ddo-map-horizon__poster {
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(12, 18, 34, 0.95) 0%, transparent 100%);
}

.ddo-map-horizon__canvas {
  width: 100%;
  height: 100%;
  display: block;
}

#city-db-map-container {
  position: relative;
}

#city-db-map-container .city-db-map-main,
#city-db-map-container .city-db-map-wrapper {
  position: relative;
  z-index: 1;
}

html[data-ddo-motion-tier="L0"] .ddo-particles,
html[data-ddo-motion-tier="L0"] .ddo-map-horizon {
  display: none !important;
}

@media (min-width: 1024px) {
  html[data-ddo-motion-tier="L2"] .maplibregl-popup,
  html[data-ddo-motion-tier="L3"] .maplibregl-popup {
    transform: perspective(1200px) translateZ(12px);
  }
}

/* =============================================================================
   Scroll reveal (.ddo-reveal + IntersectionObserver in ddo-motion.js)
   ============================================================================= */

.ddo-reveal {
  opacity: 1;
  transform: none;
}

html:not([data-ddo-motion-tier="L0"]) .ddo-reveal:not(.is-visible) {
  opacity: 0;
  transform: translateY(16px);
}

html:not([data-ddo-motion-tier="L0"]) .ddo-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.5s var(--ddo-ease-out, ease),
    transform 0.55s var(--ddo-ease-out, ease);
}

@media (prefers-reduced-motion: reduce) {
  .ddo-reveal,
  .ddo-reveal:not(.is-visible),
  .ddo-reveal.is-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* =============================================================================
   Reveal, glow, micro-interactions (L1+; off at L0 / prefers-reduced-motion)
   ============================================================================= */

@keyframes ddo-fade-up {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ddo-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes ddo-accent-shimmer {
  0%,
  100% {
    opacity: 0.55;
    transform: translateX(-8%) scale(1);
  }
  50% {
    opacity: 0.85;
    transform: translateX(8%) scale(1.02);
  }
}

@keyframes ddo-glow-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 rgba(34, 211, 238, 0);
  }
  50% {
    box-shadow: 0 0 18px rgba(34, 211, 238, 0.35);
  }
}

@keyframes ddo-xp-shine {
  0% {
    filter: brightness(1);
  }
  40% {
    filter: brightness(1.15);
  }
  100% {
    filter: brightness(1);
  }
}

html:not([data-ddo-motion-tier="L0"]) .ddo-dashboard__hero {
  animation: ddo-fade-up 0.55s var(--ddo-ease-out, ease) both;
}

html:not([data-ddo-motion-tier="L0"]) .ddo-dashboard__layout {
  animation: ddo-fade-up 0.6s var(--ddo-ease-out, ease) 0.08s both;
}

html:not([data-ddo-motion-tier="L0"]) .ddo-dashboard__widgets > .ddo-dashboard__widget {
  animation: ddo-fade-up 0.5s var(--ddo-ease-out, ease) both;
}

html:not([data-ddo-motion-tier="L0"]) .ddo-dashboard__widgets > .ddo-dashboard__widget:nth-child(1) {
  animation-delay: 0.12s;
}

html:not([data-ddo-motion-tier="L0"]) .ddo-dashboard__widgets > .ddo-dashboard__widget:nth-child(2) {
  animation-delay: 0.2s;
}

html:not([data-ddo-motion-tier="L0"]) .ddo-dashboard__widgets > .ddo-dashboard__widget:nth-child(3) {
  animation-delay: 0.28s;
}

html:not([data-ddo-motion-tier="L0"]) .ddo-dashboard__rail > .card {
  animation: ddo-fade-up 0.5s var(--ddo-ease-out, ease) 0.18s both;
}

html:not([data-ddo-motion-tier="L0"]) .ddo-dashboard__hero::before {
  content: "";
  position: absolute;
  inset: -40% -20% auto -20%;
  height: 80%;
  background: radial-gradient(ellipse at 70% 20%, rgba(34, 211, 238, 0.18), transparent 62%);
  pointer-events: none;
  animation: ddo-accent-shimmer 8s ease-in-out infinite;
}

html:not([data-ddo-motion-tier="L0"]) .ddo-dashboard__kpi-row .kpi {
  transition:
    transform var(--ddo-transition-duration) var(--ddo-ease-spring),
    box-shadow var(--ddo-transition-duration) var(--ddo-ease-out);
}

html:not([data-ddo-motion-tier="L0"]) .ddo-dashboard__kpi-row .kpi:hover {
  transform: translateY(-2px);
}

html:not([data-ddo-motion-tier="L0"]) .ddo-dashboard__kpi-row .kpi:hover .icon-pill--accent {
  box-shadow: 0 6px 20px rgba(34, 211, 238, 0.45);
}

html:not([data-ddo-motion-tier="L0"]) .ddo-nav-item.is-active::before {
  animation: ddo-glow-pulse 2.8s ease-in-out infinite;
}

html:not([data-ddo-motion-tier="L0"]) .ddo-shell__brand-logo {
  transition: box-shadow var(--ddo-transition-duration) var(--ddo-ease-out), transform var(--ddo-transition-duration) var(--ddo-ease-spring);
}

html:not([data-ddo-motion-tier="L0"]) .ddo-shell__brand:hover .ddo-shell__brand-logo {
  transform: scale(1.04);
  box-shadow: 0 6px 22px rgba(34, 211, 238, 0.5);
}

html:not([data-ddo-motion-tier="L0"]) .ddo-xp__fill {
  animation: ddo-xp-shine 2.4s ease-in-out 0.6s 1;
}

/* Stagger for scroll-reveal on initiatives archive */
.initiatives-list .initiative-card.ddo-reveal.is-visible:nth-child(1) { transition-delay: 0.04s; }
.initiatives-list .initiative-card.ddo-reveal.is-visible:nth-child(2) { transition-delay: 0.1s; }
.initiatives-list .initiative-card.ddo-reveal.is-visible:nth-child(3) { transition-delay: 0.16s; }
.initiatives-list .initiative-card.ddo-reveal.is-visible:nth-child(n + 4) { transition-delay: 0.22s; }

html:not([data-ddo-motion-tier="L0"]) .city-game-frame.is-active {
  animation: ddo-fade-in 0.28s var(--ddo-ease-out, ease) both;
}

@media (prefers-reduced-motion: reduce) {
  html .ddo-dashboard__hero,
  html .ddo-dashboard__layout,
  html .ddo-dashboard__widgets > .ddo-dashboard__widget,
  html .ddo-dashboard__rail > .card,
  html .initiatives-list .initiative-card.ddo-reveal,
  html .city-game-frame.is-active {
    animation: none !important;
  }

  html .ddo-dashboard__hero::before {
    animation: none !important;
  }

  html .ddo-nav-item.is-active::before {
    animation: none !important;
  }

  html .ddo-xp__fill {
    animation: none !important;
  }

  html .ddo-nav-item:hover {
    transform: none !important;
  }

  html .ddo-dashboard__kpi-row .kpi:hover {
    transform: none !important;
  }
}