.city-opening { position: relative; background: #0b0a11; }
.city-opening .hero { background: #0b0a11; }
.city-opening .night-city { display: none; }

.hero-atmosphere picture,
.hero-atmosphere img {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-atmosphere img { object-fit: cover; }

.hero-atmosphere::after {
  position: absolute;
  inset: 0;
  content: '';
  background:
    linear-gradient(90deg, #09090fe6, #09090fa6 39%, #09090f12 68%, transparent),
    linear-gradient(0deg, #0b0a11 0%, transparent 36%);
}

.city-opening + .one-view {
  border-top: 0;
  background:
    linear-gradient(#0b0a11, transparent 32%),
    radial-gradient(ellipse at 72% 62%, #5b39334f, transparent 49%),
    linear-gradient(120deg, #0d101a, #151224 65%, #0e0d16);
}

.intro-city-cut {
  position: absolute;
  inset: 0;
  visibility: hidden;
  pointer-events: none;
}

.raven-intro.is-ending { background: transparent; }
.raven-intro.is-ending :is(.intro-film, .intro-landscape, .intro-actions) { visibility: hidden; }
.raven-intro.is-ending .intro-city-cut { visibility: visible; }

.raven-intro.is-ending .intro-city-cut::before {
  position: absolute;
  inset: 0;
  content: '';
  background: #030407;
  animation: city-dark .9s ease-out both;
}

.raven-intro.is-ending .intro-city-cut::after {
  position: absolute;
  top: var(--cut-y, 56%);
  left: var(--cut-x, 70%);
  width: clamp(75px, 16vw, 260px);
  height: 1px;
  content: '';
  background: linear-gradient(90deg, transparent, #d4c9eb 68%, #fff4e5);
  box-shadow: 0 0 8px #f4e3ff9c;
  transform-origin: right center;
  animation: city-reflection .9s ease-in-out both;
}

@keyframes city-dark {
  0%, 20% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes city-reflection {
  0%, 12% { opacity: 0; transform: translateX(-100%) scaleX(.2); }
  31% { opacity: .95; transform: translateX(-100%) scaleX(1); }
  67% { opacity: .9; transform: translateX(-100%) scaleX(.035); }
  100% { opacity: 0; transform: translateX(-100%) scaleX(.02); }
}

@media (min-width: 761px) and (prefers-reduced-motion: no-preference) {
  .city-opening .night-city[data-city-motion] { display: block; }

  .city-opening:has([data-city-motion]) .hero {
    position: absolute;
    inset: 0 0 auto;
    z-index: 1;
    border: 0;
    background: transparent;
    opacity: var(--hero-opacity, 1);
    pointer-events: none;
  }

  .city-opening:has([data-city-motion]) .hero-inner {
    min-height: max(480px, calc(100svh - var(--raven-header-height, 78px)));
  }

  .city-opening:has([data-city-motion]) .hero :is(a, button) { pointer-events: auto; }
  .city-opening:has([data-city-arrived]) .hero:not(:has(:focus-visible)) :is(a, button) { pointer-events: none; }
  .city-opening:has([data-city-motion]) .hero:has(:focus-visible) { opacity: 1; }
  .city-opening:has([data-city-motion]) .hero-atmosphere picture { display: none; }
  .city-opening:has([data-city-motion]) .hero-atmosphere::after {
    background: radial-gradient(ellipse at 11% 47%, #09090f82, transparent 58%);
  }

  .night-city[data-city-motion] .night-city-copy { transition: opacity .3s ease; }
  .night-city[data-city-motion]:not([data-city-arrived]) .night-city-copy { visibility: hidden; opacity: 0; }
}

@media (max-width: 760px) {
  .city-opening .hero-inner {
    grid-template-columns: 1fr;
    align-items: start;
    min-height: max(560px, min(760px, calc(100svh - var(--raven-header-height, 65px))));
    padding-block: clamp(34px, 7vh, 74px) 68px;
  }

  .hero-atmosphere::after {
    background:
      linear-gradient(180deg, #09090fcf 0%, #09090fd1 23%, #09090f20 57%, transparent 72%),
      linear-gradient(0deg, #0b0a11 0%, transparent 26%);
  }

  .intro-city-cut { --cut-x: 46%; --cut-y: 55%; }
}