:root {
  --wl-ink: #030b0a;
  --wl-field: #061c18;
  --wl-field-bright: #0d3a2f;
  --wl-gold: #f3c34e;
  --wl-gold-hot: #fff1a8;
  --wl-white: #f7f6ef;
  --wl-teal: #35d8ad;
}

/* Optional head bootstrap prevents a flash of page content before the overlay mounts. */
html.wl-intro-boot body > * {
  visibility: hidden !important;
}

html.wl-intro-boot body > .wl-intro {
  visibility: visible !important;
}

.wl-intro,
.wl-intro * {
  box-sizing: border-box;
}

.wl-intro {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--wl-white);
  background:
    radial-gradient(circle at 50% 44%, rgba(21, 79, 62, 0.62) 0, rgba(5, 25, 21, 0.22) 32%, transparent 58%),
    linear-gradient(145deg, #020908 0%, #061914 54%, #020807 100%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  isolation: isolate;
  opacity: 0;
  visibility: hidden;
  transform: translateZ(0);
}

.wl-intro.is-playing {
  opacity: 1;
  visibility: visible;
}

.wl-intro::before {
  content: "";
  position: absolute;
  inset: -18%;
  z-index: -4;
  background:
    repeating-linear-gradient(90deg, transparent 0 11.6%, rgba(255, 255, 255, 0.035) 11.7% 11.88%, transparent 12% 23.6%),
    repeating-linear-gradient(0deg, transparent 0 11.6%, rgba(255, 255, 255, 0.025) 11.7% 11.85%, transparent 12% 23.6%);
  opacity: 0;
  transform: perspective(560px) rotateX(67deg) translateY(28%) scale(1.45);
  transform-origin: 50% 100%;
}

.wl-intro.is-playing::before {
  animation: wl-field-in 1500ms 120ms cubic-bezier(.18, .75, .24, 1) both;
}

.wl-intro__vignette {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .55), transparent 16% 84%, rgba(0, 0, 0, .55)),
    radial-gradient(ellipse at center, transparent 38%, rgba(0, 0, 0, .56) 100%);
}

.wl-intro__grain {
  position: absolute;
  inset: -80%;
  z-index: 9;
  pointer-events: none;
  opacity: .038;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
  animation: wl-grain 360ms steps(2) infinite;
}

.wl-intro__wash {
  position: absolute;
  inset: 0;
  z-index: -3;
  background: linear-gradient(106deg, transparent 22%, rgba(255, 244, 185, .13) 43%, rgba(100, 234, 203, .08) 50%, transparent 68%);
  opacity: 0;
  transform: translateX(-92%) skewX(-14deg);
  mix-blend-mode: screen;
}

.wl-intro.is-playing .wl-intro__wash {
  animation: wl-wash 1250ms 360ms cubic-bezier(.18, .74, .24, 1) both;
}

.wl-intro__lights {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}

.wl-intro__light {
  position: absolute;
  top: 8%;
  width: clamp(112px, 18vw, 250px);
  aspect-ratio: 2.5 / 1;
  opacity: 0;
  filter: blur(.3px) drop-shadow(0 0 22px rgba(172, 224, 255, .52));
  background:
    radial-gradient(circle, rgba(255, 255, 255, .97) 0 9%, rgba(186, 224, 255, .72) 10% 18%, transparent 22%) 0 0 / 25% 50%;
}

.wl-intro__light::after {
  content: "";
  position: absolute;
  top: 45%;
  left: 50%;
  width: 155%;
  height: 230%;
  background: conic-gradient(from 222deg at 50% 0, transparent 0 38%, rgba(127, 210, 255, .13) 44%, transparent 49% 100%);
  transform: translateX(-50%);
  filter: blur(10px);
}

.wl-intro__light--left {
  left: clamp(-22px, 4vw, 70px);
  transform: rotate(-8deg) translate(-16px, -18px);
}

.wl-intro__light--right {
  right: clamp(-22px, 4vw, 70px);
  transform: rotate(8deg) translate(16px, -18px);
}

.wl-intro.is-playing .wl-intro__light--left {
  animation: wl-light-left 1000ms 150ms cubic-bezier(.12, .75, .25, 1) both;
}

.wl-intro.is-playing .wl-intro__light--right {
  animation: wl-light-right 1000ms 240ms cubic-bezier(.12, .75, .25, 1) both;
}

.wl-intro__beam {
  position: absolute;
  top: -35%;
  bottom: -35%;
  left: 50%;
  width: clamp(80px, 11vw, 180px);
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 230, 146, .19), rgba(255, 255, 255, .36), rgba(255, 225, 124, .17), transparent);
  filter: blur(11px);
  transform: translateX(-250%) rotate(12deg);
  mix-blend-mode: screen;
}

.wl-intro.is-playing .wl-intro__beam {
  animation: wl-beam 1300ms 780ms cubic-bezier(.35, 0, .65, 1) both;
}

.wl-intro__scene {
  position: relative;
  z-index: 3;
  display: grid;
  place-items: center;
  width: min(88vw, 640px);
  perspective: 1000px;
}

.wl-intro__halo,
.wl-intro__shockwave {
  position: absolute;
  top: 46%;
  left: 50%;
  width: clamp(236px, 38vw, 450px);
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(.58);
  opacity: 0;
}

.wl-intro__halo {
  border: 1px solid rgba(243, 195, 78, .45);
  background: radial-gradient(circle, rgba(243, 195, 78, .19), rgba(14, 65, 52, .08) 38%, transparent 70%);
  box-shadow: 0 0 60px rgba(243, 195, 78, .16), inset 0 0 38px rgba(243, 195, 78, .08);
}

.wl-intro.is-playing .wl-intro__halo {
  animation: wl-halo 1150ms 680ms cubic-bezier(.15, .74, .18, 1) both;
}

.wl-intro__shockwave {
  border: 2px solid rgba(255, 235, 168, .72);
  box-shadow: 0 0 28px rgba(243, 195, 78, .32);
}

.wl-intro.is-playing .wl-intro__shockwave {
  animation: wl-shockwave 820ms 1620ms cubic-bezier(.15, .7, .2, 1) both;
}

.wl-intro__logo-wrap {
  position: relative;
  width: clamp(205px, 36vw, 390px);
  opacity: 0;
  transform: translateY(24px) rotateX(12deg) scale(.7);
  transform-style: preserve-3d;
  will-change: transform, opacity, filter;
}

.wl-intro.is-playing .wl-intro__logo-wrap {
  animation: wl-logo-in 1450ms 260ms cubic-bezier(.12, .86, .18, 1.05) both,
             wl-logo-float 1600ms 1740ms ease-in-out both;
}

.wl-intro__logo-wrap::before {
  content: "";
  position: absolute;
  inset: 9%;
  z-index: -1;
  border-radius: 26%;
  background: rgba(243, 195, 78, .34);
  filter: blur(42px);
  opacity: .54;
}

.wl-intro__logo-wrap::after {
  content: "";
  position: absolute;
  inset: -3%;
  border-radius: 24%;
  border: 1px solid rgba(255, 227, 138, .5);
  opacity: 0;
  transform: scale(.88);
}

.wl-intro.is-playing .wl-intro__logo-wrap::after {
  animation: wl-frame 760ms 1180ms ease-out both;
}

.wl-intro__logo {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 22.5%;
  filter: drop-shadow(0 22px 42px rgba(0, 0, 0, .62));
  user-select: none;
}

.wl-intro__key-flash {
  position: absolute;
  top: 48.4%;
  left: 50%;
  width: 8.4%;
  aspect-ratio: .7;
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(circle, rgba(255, 252, 213, .95), rgba(255, 202, 75, .54) 32%, transparent 72%);
  filter: blur(3px);
  transform: translate(-50%, -50%) scale(.2);
  mix-blend-mode: screen;
}

.wl-intro.is-playing .wl-intro__key-flash {
  animation: wl-key-flash 720ms 1320ms ease-out both;
}

.wl-intro__eyebrow,
.wl-intro__tagline {
  margin: 0;
  text-align: center;
  text-transform: uppercase;
  opacity: 0;
}

.wl-intro__eyebrow {
  margin-top: clamp(17px, 2.5vh, 28px);
  color: var(--wl-gold);
  font-size: clamp(.64rem, 1.35vw, .78rem);
  font-weight: 800;
  letter-spacing: .26em;
  transform: translateY(10px);
}

.wl-intro__tagline {
  margin-top: 8px;
  color: rgba(247, 246, 239, .92);
  font-size: clamp(.78rem, 2vw, 1rem);
  font-weight: 850;
  letter-spacing: .12em;
  transform: translateY(10px);
}

.wl-intro.is-playing .wl-intro__eyebrow {
  animation: wl-copy-in 620ms 1560ms ease-out both;
}

.wl-intro.is-playing .wl-intro__tagline {
  animation: wl-copy-in 620ms 1690ms ease-out both;
}

.wl-intro__rule {
  width: min(280px, 58vw);
  height: 1px;
  margin-top: 13px;
  opacity: 0;
  background: linear-gradient(90deg, transparent, var(--wl-gold), transparent);
  transform: scaleX(.12);
}

.wl-intro.is-playing .wl-intro__rule {
  animation: wl-rule 700ms 1800ms ease-out both;
}

.wl-intro__controls {
  position: absolute;
  top: max(18px, env(safe-area-inset-top));
  right: max(18px, env(safe-area-inset-right));
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 9px;
  opacity: 0;
}

.wl-intro.is-playing .wl-intro__controls {
  animation: wl-controls-in 360ms 300ms ease-out both;
}

.wl-intro__button {
  min-height: 38px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  color: rgba(255, 255, 255, .78);
  background: rgba(0, 0, 0, .24);
  box-shadow: inset 0 1px rgba(255, 255, 255, .05);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  font: inherit;
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}

.wl-intro__button:hover,
.wl-intro__button:focus-visible {
  color: #fff;
  border-color: rgba(243, 195, 78, .68);
  background: rgba(243, 195, 78, .1);
  outline: none;
}

.wl-intro__button--sound {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 13px;
}

.wl-intro__button--sound::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #77817f;
  box-shadow: 0 0 0 transparent;
  transition: background 160ms ease, box-shadow 160ms ease;
}

.wl-intro__button--sound[aria-pressed="true"]::before {
  background: var(--wl-teal);
  box-shadow: 0 0 10px rgba(53, 216, 173, .7);
}

.wl-intro__button--skip {
  padding: 0 15px;
}

.wl-intro__progress {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 20;
  height: 2px;
  overflow: hidden;
  background: rgba(255, 255, 255, .06);
}

.wl-intro__progress::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--wl-teal), var(--wl-gold-hot), var(--wl-gold));
  transform: translateX(-100%);
  transform-origin: left;
}

.wl-intro.is-playing .wl-intro__progress::after {
  animation: wl-progress var(--wl-intro-duration, 3400ms) linear both;
}

.wl-intro.is-exiting {
  pointer-events: none;
  animation: wl-intro-out 560ms cubic-bezier(.65, 0, .9, .35) both;
}

.wl-intro.is-exiting .wl-intro__scene {
  animation: wl-scene-out 560ms cubic-bezier(.65, 0, .9, .35) both;
}

html.wl-intro-open,
html.wl-intro-open body {
  overflow: hidden !important;
  overscroll-behavior: none;
}

@keyframes wl-field-in {
  0% { opacity: 0; transform: perspective(560px) rotateX(67deg) translateY(40%) scale(1.55); }
  100% { opacity: .72; transform: perspective(560px) rotateX(67deg) translateY(22%) scale(1.32); }
}

@keyframes wl-wash {
  0% { opacity: 0; transform: translateX(-92%) skewX(-14deg); }
  22% { opacity: 1; }
  100% { opacity: 0; transform: translateX(92%) skewX(-14deg); }
}

@keyframes wl-light-left {
  0% { opacity: 0; transform: rotate(-8deg) translate(-16px, -18px) scale(.8); }
  45%, 100% { opacity: .9; transform: rotate(-4deg) translate(0, 0) scale(1); }
}

@keyframes wl-light-right {
  0% { opacity: 0; transform: rotate(8deg) translate(16px, -18px) scale(.8); }
  45%, 100% { opacity: .9; transform: rotate(4deg) translate(0, 0) scale(1); }
}

@keyframes wl-beam {
  0% { opacity: 0; transform: translateX(-250%) rotate(12deg); }
  28% { opacity: .9; }
  72% { opacity: .68; }
  100% { opacity: 0; transform: translateX(180%) rotate(12deg); }
}

@keyframes wl-halo {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.58); }
  45% { opacity: .8; }
  100% { opacity: .16; transform: translate(-50%, -50%) scale(1.12); }
}

@keyframes wl-shockwave {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.72); }
  15% { opacity: .72; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.36); }
}

@keyframes wl-logo-in {
  0% { opacity: 0; filter: blur(12px) brightness(1.45); transform: translateY(24px) rotateX(12deg) scale(.7); }
  52% { opacity: 1; filter: blur(0) brightness(1.14); transform: translateY(-7px) rotateX(-2deg) scale(1.035); }
  74% { filter: brightness(1.06); transform: translateY(1px) rotateX(1deg) scale(.99); }
  100% { opacity: 1; filter: brightness(1); transform: translateY(0) rotateX(0) scale(1); }
}

@keyframes wl-logo-float {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-4px) scale(1.008); }
}

@keyframes wl-frame {
  0% { opacity: 0; transform: scale(.88); }
  34% { opacity: .85; }
  100% { opacity: 0; transform: scale(1.09); }
}

@keyframes wl-key-flash {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.2); }
  24% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(2.6); }
}

@keyframes wl-copy-in {
  0% { opacity: 0; transform: translateY(10px); letter-spacing: .34em; }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes wl-rule {
  0% { opacity: 0; transform: scaleX(.12); }
  100% { opacity: .78; transform: scaleX(1); }
}

@keyframes wl-controls-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes wl-progress {
  to { transform: translateX(0); }
}

@keyframes wl-grain {
  0% { transform: translate(0, 0); }
  25% { transform: translate(2%, -1%); }
  50% { transform: translate(-1%, 2%); }
  75% { transform: translate(1%, 1%); }
  100% { transform: translate(-2%, -1%); }
}

@keyframes wl-scene-out {
  to { opacity: 0; filter: blur(9px); transform: scale(1.075); }
}

@keyframes wl-intro-out {
  0% { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}

@media (max-width: 520px) {
  .wl-intro__scene { width: 92vw; }
  .wl-intro__logo-wrap { width: min(67vw, 310px); }
  .wl-intro__light { top: 13%; width: 122px; }
  .wl-intro__controls { top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); }
  .wl-intro__button { min-height: 34px; font-size: .58rem; }
  .wl-intro__button--sound { padding-inline: 10px; }
  .wl-intro__button--skip { padding-inline: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .wl-intro__grain,
  .wl-intro__wash,
  .wl-intro__beam,
  .wl-intro__halo,
  .wl-intro__shockwave,
  .wl-intro__key-flash,
  .wl-intro__logo-wrap::after,
  .wl-intro__progress {
    display: none;
  }

  .wl-intro::before,
  .wl-intro.is-playing::before,
  .wl-intro__light,
  .wl-intro.is-playing .wl-intro__light,
  .wl-intro__logo-wrap,
  .wl-intro.is-playing .wl-intro__logo-wrap,
  .wl-intro__eyebrow,
  .wl-intro.is-playing .wl-intro__eyebrow,
  .wl-intro__tagline,
  .wl-intro.is-playing .wl-intro__tagline,
  .wl-intro__rule,
  .wl-intro.is-playing .wl-intro__rule,
  .wl-intro__controls,
  .wl-intro.is-playing .wl-intro__controls {
    animation: none;
  }

  .wl-intro::before { opacity: .3; }
  .wl-intro__light { opacity: .32; }
  .wl-intro__logo-wrap { opacity: 1; filter: none; transform: none; }
  .wl-intro__eyebrow,
  .wl-intro__tagline,
  .wl-intro__rule,
  .wl-intro__controls { opacity: 1; transform: none; }
  .wl-intro.is-exiting { animation-duration: 220ms; }
  .wl-intro.is-exiting .wl-intro__scene { animation: none; }
}

@media (forced-colors: active) {
  .wl-intro { background: Canvas; color: CanvasText; }
  .wl-intro__button { border: 1px solid ButtonText; color: ButtonText; background: ButtonFace; }
}