/* Continuous corners for physical panels; large atmospheres dissolve into the page. */
:root {
  --radius-panel: 32px;
  --radius-device: 48px;
  --radius-note: 22px;
  --radius-icon: 15px;
  --radius-row: 18px;
}
.button,
.button.small,
.status-label,
.motion-toggle {
  border-radius: 999px;
}
.button {
  padding-inline: 28px;
}
.button.small {
  padding-inline: 21px;
}
.app-preview {
  border-radius: var(--radius-panel);
  border-color: #bec9d466;
  background: linear-gradient(150deg, #eef1fc, #e9eff6 60%, #e0f1f1);
  padding: 30px;
}
.story-item > span,
.hero-visit > i,
.journey-float > i {
  border-radius: var(--radius-icon);
}
.photo-note,
.hero-visit,
.journey-float {
  border-radius: var(--radius-note);
}
.hero-image {
  border-radius: 44px;
  animation: none;
}
.photo-aura {
  border-radius: 58px;
  background: radial-gradient(ellipse at 74% 75%, #39e5d459, #8dd0ff32 44%, #5b52ce26 65%, transparent 81%);
  inset: -34px -35px -10px -40px;
  transform: rotate(2deg);
}
.district-switch {
  border-radius: 999px;
  background: #0a193133;
  border-color: #b3cfe544;
}
.district-switch button,
.district-switch button.active {
  border-radius: 999px;
}
.menu-toggle {
  border-radius: 14px;
}
.next-section {
  background: none;
  border-top-color: transparent;
  border-bottom-color: transparent;
}
.next-section:before {
  content: '';
  position: absolute;
  inset: -20px 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 75% 62%, #39e5d41c, transparent 64%),
    radial-gradient(ellipse at 26% 46%, #5b52ce13, transparent 68%);
}
.future-constellation {
  background: none;
  border-radius: 0;
  overflow: clip;
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.constellation-tile {
  border-radius: 36px;
}
.constellation-wash {
  background-size: 100% 100%;
}
.journey-aura {
  border-radius: 0;
}
.journey-aura span {
  background: radial-gradient(ellipse at 52% 48%, #5b52ce21, transparent 66%);
}
.journey-aura span + span {
  background: radial-gradient(ellipse at 72% 72%, #39e5d43d, transparent 67%);
}
.news-item:before {
  background: radial-gradient(ellipse at 46% 50%, #e5e9ff99, #d6f7f230 40%, transparent 78%);
}
@supports (corner-shape: squircle) {
  .app-preview,
  .hero-image,
  .photo-note,
  .hero-visit,
  .journey-float,
  .constellation-tile,
  .story-item > span {
    corner-shape: squircle;
  }
  .app-preview {
    border-radius: 48px;
  }
  .hero-image {
    border-radius: 64px;
  }
  .photo-note,
  .hero-visit,
  .journey-float {
    border-radius: 30px;
  }
  .constellation-tile {
    border-radius: 48px;
  }
}
@media (max-width: 900px) {
  .app-preview {
    padding: 24px;
  }
}
@media (max-width: 680px) {
  .hero-image {
    border-radius: 32px;
  }
  .app-preview {
    border-radius: 28px;
    padding: 24px;
  }
  .photo-note,
  .hero-visit,
  .journey-float {
    border-radius: 20px;
  }
  .constellation-tile {
    border-radius: 30px;
  }
  .next-section:before {
    inset: -10px 0;
  }
  .button.small {
    padding-inline: 14px;
  }
  .button {
    padding-inline: 23px;
  }
  @supports (corner-shape: squircle) {
    .hero-image {
      border-radius: 46px;
    }
    .app-preview {
      border-radius: 40px;
    }
    .constellation-tile {
      border-radius: 42px;
    }
    .photo-note,
    .hero-visit,
    .journey-float {
      border-radius: 28px;
    }
  }
}
@media (max-width: 360px) {
  .app-preview {
    padding: 19px;
  }
  .story-item > span {
    border-radius: 13px;
  }
  .button.small {
    padding-inline: 12px;
  }
}

/* Glow layers use off-centre gradients that would otherwise stop dead at the edge of their box.
   Fading the whole layer out towards its edges keeps the glow and removes the visible rectangle. */
.journey-aura,
.next-section::before,
.app-simulator::before {
  -webkit-mask-image: radial-gradient(ellipse closest-side, #000 50%, transparent);
  mask-image: radial-gradient(ellipse closest-side, #000 50%, transparent);
}