/* Screen-to-screen aircraft shutter. Transform/opacity only for mobile WebView. */
.rem-screen-wipe {
  position: fixed;
  z-index: 20000;
  inset: 0;
  display: block;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  contain: strict;
  isolation: isolate;
}

.rem-screen-wipe.is-active {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.rem-screen-wipe__panel {
  position: absolute;
  z-index: 1;
  top: -2%;
  bottom: -2%;
  width: 55%;
  overflow: hidden;
  background:
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(95, 211, 238, .045) 32px 33px),
    linear-gradient(135deg, rgba(12, 35, 59, .98), #020712 48%, #061523 100%);
  will-change: transform;
  transition: transform 420ms cubic-bezier(.72, 0, .28, 1);
}

.rem-screen-wipe__panel::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(95, 218, 246, .2);
  background:
    linear-gradient(90deg, rgba(96, 224, 249, .45), transparent 25%) top left / 42% 2px no-repeat,
    linear-gradient(90deg, transparent, rgba(96, 224, 249, .3)) bottom right / 38% 2px no-repeat;
}

.rem-screen-wipe__panel::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, transparent 4%, #72eaff 22%, rgba(103, 221, 255, .3) 50%, #72eaff 78%, transparent 96%);
  box-shadow: 0 0 14px rgba(82, 218, 255, .48);
}

.rem-screen-wipe__panel--left {
  left: 0;
  clip-path: polygon(0 0, 100% 0, 100% 36%, 92% 43%, 100% 50%, 92% 57%, 100% 64%, 100% 100%, 0 100%);
  transform: translate3d(-103%, 0, 0);
}

.rem-screen-wipe__panel--left::after { right: 0; }

.rem-screen-wipe__panel--right {
  right: 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 64%, 8% 57%, 0 50%, 8% 43%, 0 36%);
  transform: translate3d(103%, 0, 0);
}

.rem-screen-wipe__panel--right::after { left: 0; }

.rem-screen-wipe.is-closing .rem-screen-wipe__panel,
.rem-screen-wipe.is-covered .rem-screen-wipe__panel { transform: translate3d(0, 0, 0); }
.rem-screen-wipe.is-opening .rem-screen-wipe__panel--left { transform: translate3d(-103%, 0, 0); }
.rem-screen-wipe.is-opening .rem-screen-wipe__panel--right { transform: translate3d(103%, 0, 0); }

.rem-screen-wipe__panel i,
.rem-screen-wipe__panel b {
  position: absolute;
  display: block;
  height: 2px;
  background: rgba(96, 222, 249, .24);
}
.rem-screen-wipe__panel i { top: 27%; width: 38%; }
.rem-screen-wipe__panel b { bottom: 24%; width: 24%; }
.rem-screen-wipe__panel--left i { left: 9%; }
.rem-screen-wipe__panel--left b { left: 23%; }
.rem-screen-wipe__panel--right i { right: 9%; }
.rem-screen-wipe__panel--right b { right: 23%; }

.rem-screen-wipe__ship {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  width: 104px;
  height: 104px;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.66);
  transition: opacity 180ms linear, transform 400ms cubic-bezier(.2, .8, .25, 1);
}

.rem-screen-wipe.is-closing .rem-screen-wipe__ship,
.rem-screen-wipe.is-covered .rem-screen-wipe__ship {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.rem-screen-wipe.is-opening .rem-screen-wipe__ship {
  opacity: 0;
  transform: translate(-50%, -62%) scale(1.35);
}

.rem-screen-wipe__core,
.rem-screen-wipe__wing,
.rem-screen-wipe__drive {
  position: absolute;
  display: block;
}
.rem-screen-wipe__core {
  z-index: 2;
  top: 9px;
  left: 40px;
  width: 24px;
  height: 69px;
  clip-path: polygon(50% 0, 100% 34%, 78% 100%, 22% 100%, 0 34%);
  background: linear-gradient(90deg, #43738a, #f2fcff 42% 58%, #43738a);
  box-shadow: 0 0 12px rgba(110, 233, 255, .58);
}
.rem-screen-wipe__wing {
  z-index: 1;
  top: 36px;
  width: 49px;
  height: 42px;
  background: linear-gradient(150deg, #b9eaf3, #285269 55%, #071421);
}
.rem-screen-wipe__wing--left { left: 4px; clip-path: polygon(100% 0, 100% 100%, 0 86%, 43% 47%, 4% 34%); }
.rem-screen-wipe__wing--right { right: 4px; clip-path: polygon(0 0, 0 100%, 100% 86%, 57% 47%, 96% 34%); }
.rem-screen-wipe__drive {
  z-index: 0;
  top: 72px;
  left: 45px;
  width: 14px;
  height: 31px;
  clip-path: polygon(12% 0, 88% 0, 62% 100%, 38% 100%);
  background: linear-gradient(#eaffff, #4de5ff 36%, transparent);
  filter: drop-shadow(0 0 5px #4de5ff);
}

.rem-screen-wipe__label {
  position: absolute;
  z-index: 4;
  top: calc(50% + 74px);
  right: 0;
  left: 0;
  margin: 0;
  color: #a9d9e5;
  font: 700 9px/1 "Bahnschrift", "Yu Gothic UI", sans-serif;
  letter-spacing: .24em;
  text-align: center;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 180ms linear, transform 300ms ease;
}
.rem-screen-wipe.is-closing .rem-screen-wipe__label,
.rem-screen-wipe.is-covered .rem-screen-wipe__label { opacity: .85; transform: translateY(0); }
.rem-screen-wipe.is-opening .rem-screen-wipe__label { opacity: 0; transform: translateY(-5px); }

/* Blend the title mark into the same atmosphere instead of a detached cutout. */
#title-screen .neo-title-main::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -150% -18%;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, rgba(44, 169, 211, .18) 0, rgba(16, 78, 128, .09) 25%, transparent 58%),
    repeating-radial-gradient(ellipse at center, transparent 0 75px, rgba(84, 203, 237, .07) 76px 77px, transparent 78px 112px);
  opacity: .9;
}
#title-screen .title-logo-art {
  position: relative;
  mix-blend-mode: screen !important;
  opacity: .97;
  filter: drop-shadow(0 0 5px rgba(101, 226, 255, .2)) drop-shadow(0 0 22px rgba(32, 143, 197, .15)) !important;
}

/* Side facilities are transparent line icons belonging to the hangar scene. */
#menu-screen.main-menu--premium.rem-menu-v3.home-overhaul .home-side-actions .menu-dock-btn > i {
  overflow: visible !important;
  clip-path: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: drop-shadow(0 0 6px rgba(94, 220, 255, .24));
}
#menu-screen.main-menu--premium.rem-menu-v3.home-overhaul .home-side-actions .menu-dock-btn > i::before,
#menu-screen.main-menu--premium.rem-menu-v3.home-overhaul .home-side-actions .menu-dock-btn > i::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  pointer-events: none;
}
#menu-screen.main-menu--premium.rem-menu-v3.home-overhaul .home-side-actions .menu-dock-btn > i::before {
  top: 0;
  left: 0;
  border-top: 1px solid rgba(113, 226, 251, .55);
  border-left: 1px solid rgba(113, 226, 251, .55);
}
#menu-screen.main-menu--premium.rem-menu-v3.home-overhaul .home-side-actions .menu-dock-btn > i::after {
  right: 0;
  bottom: 0;
  border-right: 1px solid rgba(113, 226, 251, .36);
  border-bottom: 1px solid rgba(113, 226, 251, .36);
}
#menu-screen.main-menu--premium.rem-menu-v3.home-overhaul .home-side-actions .menu-dock-btn:active > i {
  transform: translateX(-50%) scale(.92) !important;
  filter: drop-shadow(0 0 9px rgba(130, 238, 255, .55));
}

@media (prefers-reduced-motion: reduce) {
  .rem-screen-wipe__panel { transition-duration: 180ms; }
  .rem-screen-wipe__ship, .rem-screen-wipe__label { transition-duration: 160ms; }
}