/* Liquid glass and slow motion for OA pages.
   Palette only: #06141B #11212D #253745 #4A5C6A #9BA8AB #CCD0CF.
   Without backdrop-filter the solid backgrounds from oa-editorial.css stay. */

html { background: #06141b; }

body {
  background: transparent;
}

body::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: -12%;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 18%, rgba(74, 92, 106, 0.55), rgba(6, 20, 27, 0) 34%),
    radial-gradient(circle at 88% 8%, rgba(155, 168, 171, 0.22), rgba(6, 20, 27, 0) 30%),
    radial-gradient(circle at 72% 78%, rgba(37, 55, 69, 0.72), rgba(6, 20, 27, 0) 38%);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav-bar {
    background-color: rgba(6, 20, 27, 0.72);
    -webkit-backdrop-filter: blur(18px) saturate(1.15);
    backdrop-filter: blur(18px) saturate(1.15);
    border-bottom: 1px solid rgba(204, 208, 207, 0.22);
    box-shadow: inset 0 1px 0 rgba(204, 208, 207, 0.28);
  }

  .drawer {
    background-color: rgba(17, 33, 45, 0.86);
    -webkit-backdrop-filter: blur(22px) saturate(1.15);
    backdrop-filter: blur(22px) saturate(1.15);
    border-left: 1px solid rgba(204, 208, 207, 0.18);
    box-shadow: inset 0 1px 0 rgba(204, 208, 207, 0.22);
  }

  .offer-card,
  .plans article,
  .steps article,
  .product,
  .feature,
  .announce,
  .oa-facts > div,
  .bransch-card,
  .team-card,
  .final-panel {
    background-color: rgba(17, 33, 45, 0.78);
    -webkit-backdrop-filter: blur(16px) saturate(1.12);
    backdrop-filter: blur(16px) saturate(1.12);
    border: 1px solid rgba(204, 208, 207, 0.22);
    box-shadow: inset 0 1px 0 rgba(204, 208, 207, 0.3);
  }

  .offer-card.featured,
  .plans article.pick {
    background-color: rgba(37, 55, 69, 0.82);
    border-color: rgba(155, 168, 171, 0.45);
  }

  .announce {
    background-color: rgba(17, 33, 45, 0.66);
  }
}

.hero,
.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.hero::before,
.hero::after,
.page-hero::before,
.page-hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
}

.hero::before,
.page-hero::before {
  width: 58%;
  height: 140%;
  left: -12%;
  top: -30%;
  background: radial-gradient(circle, rgba(74, 92, 106, 0.55) 0%, rgba(37, 55, 69, 0.2) 42%, rgba(6, 20, 27, 0) 70%);
}

.hero::after,
.page-hero::after {
  width: 48%;
  height: 120%;
  right: -10%;
  bottom: -40%;
  background: radial-gradient(circle, rgba(155, 168, 171, 0.28) 0%, rgba(74, 92, 106, 0.16) 46%, rgba(6, 20, 27, 0) 72%);
}

.hero > *,
.page-hero > * {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: no-preference) {
  body::before {
    animation: oa-drift 36s ease-in-out infinite alternate;
  }

  .hero::before,
  .page-hero::before {
    animation: oa-drift 32s ease-in-out infinite alternate;
  }

  .hero::after,
  .page-hero::after {
    animation: oa-drift 40s ease-in-out infinite alternate-reverse;
  }

  .nav-bar .brand svg circle:nth-of-type(2) {
    transform-origin: 50px 50px;
    animation: oa-mark 7.5s ease-in-out infinite;
  }

  .offer-card,
  .plans article,
  .steps article,
  .product,
  .feature,
  .btn,
  .btn-ink,
  .btn-line,
  .nav-cta,
  .nav-book {
    transition: transform 0.45s ease, border-color 0.45s ease, background-color 0.45s ease;
  }

  .btn:hover,
  .btn-ink:hover,
  .btn-line:hover,
  .nav-cta:hover,
  .nav-book:hover {
    transform: translateY(-2px);
  }

  html.oa-motion .oa-rise {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.7s ease, transform 0.7s ease;
  }

  html.oa-motion .oa-rise.is-in {
    opacity: 1;
    transform: none;
  }
}

@keyframes oa-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(4%, 3%, 0) scale(1.08); }
}

@keyframes oa-mark {
  0%, 100% { stroke-opacity: 0.7; }
  50% { stroke-opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  .hero::before,
  .hero::after,
  .page-hero::before,
  .page-hero::after,
  .nav-bar .brand svg circle {
    animation: none;
  }

  html { scroll-behavior: auto; }
}

@media (max-width: 700px) {
  .hero::before,
  .page-hero::before { width: 90%; }
  .hero::after,
  .page-hero::after { width: 80%; }
}