.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.modal-panel {
  position: fixed;
  z-index: 3;
  top: 50%;
  left: 50%;
  width: 40%;
  transform: translate(-50%, -50%);
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: clamp(0.5rem, 0.25rem + 0.625vw, 1rem);
  background-color: #1d1d1d;
  border: 1px solid white;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-panel.is-portrait {
  width: 60%;
}

.modal-panel:has(
    .modal-asset-container img[src$="ukrainegas.jpg"],
    .modal-asset-container img[src$="israeliranclash.jpg"],
    .modal-asset-container img[src$="middleeastposter.jpg"],
    .modal-asset-container video,
    .modal-asset-container iframe,
    .modal-asset-container img[src$=".svg"]
  ) {
  width: 55%;
}

.modal-panel:has(
    .modal-portrait
      .modal-asset-container
      iframe[src*="flo.uri.sh/visualisation/24231607/embed"]
  ) {
  width: 60%;
}

.modal-panel.open {
  opacity: 1;
  pointer-events: auto;
}

.modal-portrait {
  display: flex;
  justify-content: space-between;
}

.modal-landscape {
  display: flex;
  flex-direction: column;
}

.modal-portrait,
.modal-landscape {
  flex: 1;
  overflow-y: auto;
}

.modal-portrait::-webkit-scrollbar,
.modal-landscape::-webkit-scrollbar {
  display: none;
}

.modal-top {
  position: relative;
  display: flex;

  justify-content: space-between;
  align-items: center;
}

.modal-top:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: #fff;
}

.modal-top .modal-top-text {
  font-family: "AkkuratLL-Regular";
  color: #fff;
  font-size: clamp(0.8125rem, 0.6188rem + 0.4844vw, 1.2rem);
  line-height: clamp(0.8125rem, 0.6188rem + 0.4844vw, 1.2rem);
}

.modal-top .close-button {
  color: #edf86f;
  width: clamp(1rem, 0.5rem + 1.25vw, 2rem);
  cursor: pointer;
}

.modal-title {
  font-family: "AkkuratLL-Bold";
  font-size: clamp(0.9rem, 0.6rem + 0.75vw, 1.5rem);
  color: #fff;
  padding: clamp(0.25rem, 0.125rem + 0.3125vw, 0.5rem) 0;
}

.modal-asset-container {
  position: relative;
}

.modal-desc {
  margin-bottom: clamp(0.5rem, 0.25rem + 0.625vw, 1rem);
  display: flex;
  justify-content: space-between;
}

.modal-desc .text {
  font-family: "AkkuratLL-Light";
  font-size: clamp(0.6rem, 0.45rem + 0.375vw, 0.9rem);
  color: #fff;
}

.modal-desc .modal-qr {
  width: clamp(3rem, 2rem + 2.5vw, 5rem);
  height: clamp(3rem, 2rem + 2.5vw, 5rem);
}

.qr-learn-more {
  font-family: "AkkuratLL-Light";
  font-size: clamp(0.6rem, 0.45rem + 0.375vw, 0.9rem);
  padding-top: 0.4rem;
}

.asset-source-text {
  font-family: "AkkuratLL-Light";
  color: #fff;
  font-size: clamp(0.5rem, 0.375rem + 0.3125vw, 0.75rem);
  text-align: justify;
}

.modal-asset-container img {
  width: 100%;
}

.modal-asset-container iframe,
.modal-asset-container video {
  width: 100%;
  height: 64vh;
}

.modal-portrait .right-section {
  width: 49%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.modal-landscape .modal-top {
  padding-bottom: 0.2rem;
}

.modal-portrait .right-section .modal-top {
  padding: clamp(0.25rem, 0.125rem + 0.3125vw, 0.5rem) 0;
}

.modal-portrait .right-section .modal-qr {
  position: relative;
  width: clamp(3rem, 2rem + 2.5vw, 5rem);
  height: clamp(3rem, 2rem + 2.5vw, 5rem);
}

.modal-portrait .modal-asset-container {
  width: 49%;
  height: 100%;
  padding: clamp(0.5rem, 0.25rem + 0.625vw, 1rem) 0;
}

.scroll-prompt {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
  height: 70px;
  background: linear-gradient(to bottom, transparent, #1d1d1d 80%);
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding-bottom: 8px;
}

.scroll-prompt-inner {
  color: #fff;
  font-family: "AkkuratLL-Regular";
  font-size: 0.8rem;

  display: flex;
  flex-direction: column;
  align-items: center;
}

.scroll-prompt .arrow {
  color: #fff;
  font-size: 1.2rem;
  line-height: 1;
  animation: subtle-bob 2s infinite ease-in-out;
}

.is-scrollable .scroll-prompt {
  opacity: 1;
}

@keyframes subtle-bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(5px);
  }
}

@media (orientation: landscape) and (max-height: 600px) {
  .modal-panel,
  .modal-panel.is-portrait,
  .modal-panel:has(
      .modal-asset-container img[src$="ukrainegas.jpg"],
      .modal-asset-container img[src$="israeliranclash.jpg"],
      .modal-asset-container img[src$="middleeastposter.jpg"],
      .modal-asset-container video,
      .modal-asset-container iframe,
      .modal-asset-container img[src$=".svg"],
      .modal-portrait
        .modal-asset-container
        iframe[src*="flo.uri.sh/visualisation/24231607/embed"]
    ) {
    width: 75%;
  }
}