/* Isolated from the public website's theme and layout. */
.fpro-intro[hidden] { display: none !important; }
.fpro-intro {
  position: fixed; inset: 0; z-index: 10000; overflow: hidden;
  background: #07825c; color: #fff; isolation: isolate;
  animation: fpro-intro-failsafe 4.5s step-end forwards;
  font-family: inherit;
}
.fpro-intro__stage {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: radial-gradient(ellipse at 50% 46%, #109972 0, #07825c 48%, #046847 100%);
}
.fpro-intro__halo {
  position: absolute; width: min(72vw, 740px); aspect-ratio: 1;
  border: 1px solid rgb(255 255 255 / .08); border-radius: 50%;
  transform: scale(.7); opacity: 0;
}
.fpro-intro__symbol {
  width: clamp(130px, 22vmin, 230px); height: auto; max-width: none;
  filter: brightness(0) invert(1); opacity: 0; transform: scale(.68) rotate(-8deg);
  will-change: transform, opacity; transform-origin: 50% 50%;
}
.fpro-intro__wordmark {
  position: absolute; top: calc(50% + clamp(85px, 14vmin, 150px));
  font-size: clamp(22px, 3vmin, 30px); font-weight: 800; letter-spacing: .23em;
  padding-left: .23em; text-align: center; opacity: 0;
}
.fpro-intro__wordmark span { display: block; font-size: 9px; font-weight: 500; letter-spacing: .5em; margin-top: 9px; }
.fpro-intro__line {
  position: absolute; left: 50%; bottom: max(45px, env(safe-area-inset-bottom));
  width: 90px; height: 1px; background: rgb(255 255 255 / .65);
  transform: translateX(-50%) scaleX(0); transform-origin: left;
}
.fpro-intro__skip {
  position: absolute; right: max(24px, env(safe-area-inset-right));
  top: max(24px, env(safe-area-inset-top)); padding: 10px 12px;
  background: transparent; color: #fff; border: 1px solid rgb(255 255 255 / .45);
  border-radius: 999px; font: inherit; font-size: 12px; cursor: pointer;
}
.fpro-intro__skip span { margin-left: 8px; }
.fpro-intro__skip:hover { background: rgb(255 255 255 / .12); }
.fpro-intro__skip:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.fpro-intro.is-playing { animation: fpro-intro-out 2.35s ease forwards, fpro-intro-failsafe 4.5s step-end forwards; }
.is-playing .fpro-intro__symbol { animation: fpro-intro-symbol 2.35s cubic-bezier(.65,0,.25,1) forwards; }
.is-playing .fpro-intro__wordmark { animation: fpro-intro-wordmark 2.35s ease forwards; }
.is-playing .fpro-intro__halo { animation: fpro-intro-halo 2.35s ease forwards; }
.is-playing .fpro-intro__line { animation: fpro-intro-line 2.35s ease forwards; }
@keyframes fpro-intro-symbol {
  0% { opacity: 0; transform: scale(.68) rotate(-8deg); }
  20% { opacity: 1; transform: scale(1) rotate(0deg); }
  52% { opacity: 1; transform: scale(1) rotate(0deg); }
  88% { opacity: 1; transform: scale(24) rotate(0deg); }
  100% { opacity: 0; transform: scale(32) rotate(0deg); }
}
@keyframes fpro-intro-out {
  0%, 60% { opacity: 1; }
  100% { opacity: 0; visibility: hidden; pointer-events: none; }
}
@keyframes fpro-intro-wordmark {
  0%, 10% { opacity: 0; transform: translateY(12px); }
  26%, 49% { opacity: 1; transform: translateY(0); }
  65%, 100% { opacity: 0; transform: translateY(-8px); }
}
@keyframes fpro-intro-halo { 0% { opacity: 0; transform: scale(.7); } 35% { opacity: 1; } 100% { opacity: 0; transform: scale(1.7); } }
@keyframes fpro-intro-line { 0% { transform: translateX(-50%) scaleX(0); } 53% { transform: translateX(-50%) scaleX(1); opacity: 1; } 65%, 100% { transform: translateX(-50%) scaleX(1); opacity: 0; } }
@keyframes fpro-intro-failsafe { to { opacity: 0; visibility: hidden; pointer-events: none; } }
@media (prefers-reduced-motion: reduce) {
  .fpro-intro { display: none !important; }
  .fpro-intro__symbol, .fpro-intro__wordmark, .fpro-intro__halo, .fpro-intro__line { animation: none !important; }
}
