/* DAVAR cinematic opener */

#davar-opener {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 50% 48%,
      #0b2c29 0%,
      #061c1a 48%,
      #03100f 100%
    );
  color: var(--motion-white, #f7fffe);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

#davar-opener[hidden] {
  display: none !important;
}

#davar-opener-scene {
  width: min(100vw, 1920px);
  height: min(100vh, 1080px);
  max-width: 100%;
  max-height: 100%;
  overflow: visible;
}

#skip-davar-intro {
  position: absolute;
  top: max(1rem, env(safe-area-inset-top));
  inset-inline-end: max(1rem, env(safe-area-inset-end));
  z-index: 2;
  border: 1px solid rgba(125, 216, 207, 0.28);
  background: rgba(6, 28, 26, 0.55);
  color: var(--motion-white, #f7fffe);
  font-family: Manrope, "Segoe UI", sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.55rem 0.9rem;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  backdrop-filter: blur(6px);
}

#skip-davar-intro:hover,
#skip-davar-intro:focus-visible {
  border-color: rgba(255, 181, 46, 0.55);
  outline: none;
}

#intro-subtitle {
  font-family: Manrope, "Segoe UI", sans-serif;
  font-size: clamp(10px, 0.8vw, 14px);
  font-weight: 600;
  letter-spacing: 0.2em;
  fill: #7dd8cf;
}

#intro-logo-fallback {
  opacity: 0;
}

/* Mobile: portrait recompose — meet (letterbox) so logo is never cropped */
@media (max-width: 768px) {
  #davar-opener-scene {
    width: 100vw;
    height: 100vh;
    max-height: 100dvh;
  }

  #skip-davar-intro {
    font-size: 0.68rem;
    padding: 0.5rem 0.75rem;
  }

  #intro-subtitle {
    font-size: 11px;
    letter-spacing: 0.16em;
  }

  /* Dense desktop-only architecture */
  #intro-building #tower-right,
  #intro-building #roof-crowns,
  #intro-building #lit-windows,
  #intro-building #left-facade-panels,
  #intro-building #right-facade-panels,
  #intro-building #network-nodes,
  #intro-building #network-lines,
  #intro-network {
    display: none !important;
  }
}

@media (max-width: 480px) {
  #intro-building #podium {
    opacity: 0.55;
  }

  #intro-grid line:nth-child(n+8) {
    display: none;
  }
}