/* Load after upgrade.css. Every visual override belongs to Opale only. */
.opening > .opale-scene {
  position: absolute;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  contain: strict;
  background:
    radial-gradient(ellipse at 86% 26%, rgba(184, 166, 242, .21), transparent 47%),
    radial-gradient(ellipse at 75% 85%, rgba(242, 173, 207, .17), transparent 40%),
    radial-gradient(ellipse at 99% 62%, rgba(144, 216, 240, .14), transparent 41%),
    #fcfbff;
}
.opening > .opale-scene > .opale-canvas {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
}
body[data-ambiance="opale"] .opening {
  background: #fcfbff;
}
body[data-ambiance="opale"] .opening::before {
  background-image: url('hero-opale.png');
  transform: none;
  transition: opacity .35s ease;
}
body[data-ambiance="opale"] .opening[data-opale-ready="true"]::before {
  opacity: 0;
}
body[data-ambiance="opale"] .opening[data-opale-ready="true"] > .opale-scene {
  visibility: visible;
  opacity: 1;
}
body[data-ambiance="opale"] .opening::after {
  background:
    linear-gradient(90deg, #fff 0, rgba(255, 255, 255, .98) calc(var(--opale-copy-edge, 680px) - 70px), rgba(255, 255, 255, .78) calc(var(--opale-copy-edge, 680px) + 4px), rgba(255, 255, 255, .10) calc(var(--opale-copy-edge, 680px) + 95px), transparent calc(var(--opale-copy-edge, 680px) + 175px)),
    linear-gradient(180deg, rgba(255, 255, 255, .78) 0, rgba(255, 255, 255, .60) 70px, transparent 135px, transparent 91%, #fff 100%);
}
body[data-ambiance="opale"] .hero .site-field > .button {
  background: #533d7d;
  color: #fff;
  box-shadow: 0 2px 3px rgba(47, 28, 75, .16), inset 0 1px 0 rgba(255, 255, 255, .10);
  transition: background-color .18s ease, box-shadow .18s ease, transform .12s ease;
}
body[data-ambiance="opale"] .hero .site-field > .button:hover {
  background: #473269;
  box-shadow: 0 3px 6px rgba(47, 28, 75, .19), inset 0 1px 0 rgba(255, 255, 255, .11);
}
body[data-ambiance="opale"] .hero .site-field > .button:active {
  background: #3c295c;
  transform: scale(.96);
}
body[data-ambiance="opale"] .hero .site-field > .button:focus-visible {
  outline: 3px solid #9b7ac9;
  outline-offset: 3px;
}
body[data-ambiance="opale"] .hero .site-field:focus-within {
  box-shadow: 0 0 0 2px #886bab;
}
@media (max-width: 850px) {
  body[data-ambiance="opale"] .opening::after {
    background:
      linear-gradient(180deg, #fff 0, rgba(255, 255, 255, .97) var(--opale-copy-stop, 640px), rgba(255, 255, 255, .18) calc(var(--opale-copy-stop, 640px) + 140px), transparent 87%, #fff 100%),
      linear-gradient(90deg, rgba(255, 255, 255, .36), transparent 60%);
  }
}
@media (prefers-reduced-motion: reduce) {
  body[data-ambiance="opale"] .opening::before,
  body[data-ambiance="opale"] .hero .site-field > .button {
    transition: none;
  }
  body[data-ambiance="opale"] .hero .site-field > .button:active {
    transform: none;
  }
}