:root {
  color-scheme: dark;
  --display-font:
    Impact, "AvenirNextCondensed-Heavy",
    "HelveticaNeue-CondensedBlack", Haettenschweiler,
    "Arial Narrow", "Arial Black", "Franklin Gothic Heavy",
    sans-serif;
  --paper: var(--seahorse-pink);
  --black: #050504;
  --movie-shadow: #260019;
  --movie-pink: #9a0068;
  --movie-acid: #a8d300;
  --seahorse-pink: #ff00b4;
  --back-button-pink: #dc009d;
  --link-blue: #9af7ff;
  --baldiga-blue: #d6ffff;
  --baldiga-orange: #ff7900;
  --baldiga-orange-glow: rgba(255, 121, 0, 0.34);
  --help-seahorse-blue: #5aa3ab;
  --help-seahorse-blue-glow: rgba(90, 163, 171, 0.2);
  --help-width: 11.26302cqw;
  --help-top: 25.3cqw;
  --help-right: 4.426cqw;
  --frog-green: #39ff14;
  --stage-gutter: 1rem;
  --site-page-zoom: 1.2;
  --site-page-shift-x: -3.2cqw;
  --site-page-shift-y: -10.2cqw;
  --subpage-title-enter-duration: 9200ms;
  --loading-art-size-x: 518.92%;
  --loading-art-size-y: 414.57%;
  --loading-art-pos-x: 25.17%;
  --loading-art-pos-y: 1.29%;
  --loading-art-shift-y: 220px;
  --site-load-progress: 0%;
  --frog-3d-shadow:
    drop-shadow(0.1237cqw 0.16276cqw 0 rgba(0, 45, 0, 0.9))
    drop-shadow(0.32552cqw 0.3776cqw 0.14974cqw rgba(0, 0, 0, 0.52))
    drop-shadow(-0.04557cqw -0.05208cqw 0.04557cqw rgba(216, 255, 190, 0.34));
  --link-text-shadow: 0.09em 0.11em 0.035em rgba(0, 0, 0, 0.9);
  --main-type-shadow: 0.085em 0.105em 0.035em rgba(0, 0, 0, 0.9);
  --title-load-fill: #6fa4a9;
  --title-load-deep: #3f686c;
  --title-load-highlight: rgba(223, 255, 255, 0.72);
  --link-panel-bg:
    radial-gradient(circle at 34% 22%, rgba(255, 255, 255, 0.34), transparent 36%),
    linear-gradient(135deg, rgba(196, 253, 255, 0.58), rgba(154, 247, 255, 0.34));
  --outside-panel-bg:
    linear-gradient(135deg, rgba(255, 0, 180, 0.16), rgba(255, 0, 180, 0.07)),
    rgba(255, 255, 255, 0.035);
  --subpage-type-angle: -6deg;
  --subpage-type-shadow: 0.105em 0.13em 0.045em rgba(0, 0, 0, 0.92);
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  background: #10140c;
}

body {
  display: grid;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  place-items: center;
  overflow: hidden;
  background: #10140c;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-family:
    var(--display-font);
}

.stage-frame {
  position: relative;
  display: grid;
  width: calc(100vw - var(--stage-gutter));
  width: calc(100dvw - var(--stage-gutter));
  height: calc(100vh - var(--stage-gutter));
  height: calc(100dvh - var(--stage-gutter));
  place-items: center;
  overflow: hidden;
  border-radius: clamp(8px, 0.9vw, 18px);
  background: #050504;
  box-shadow: none;
  transition:
    background 900ms ease,
    box-shadow 900ms ease;
}

.stage-frame.is-stage-loaded {
  background: #111;
  box-shadow: none;
}

.stage {
  position: relative;
  width: max(calc(100vw - var(--stage-gutter)), calc((100vh - var(--stage-gutter)) * 1.5));
  width: max(calc(100dvw - var(--stage-gutter)), calc((100dvh - var(--stage-gutter)) * 1.5));
  aspect-ratio: 3 / 2;
  container-type: size;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  contain: layout paint style;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.stage.is-image-loaded {
  background: #111;
}

.stage *,
.compact-static,
.compact-static * {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.stage-image,
.compact-static__image {
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: none;
}

html.is-compact-screen,
html.is-compact-screen body {
  width: 100%;
  height: 100%;
  min-height: 100%;
  background: #050504;
}

html.is-compact-screen body {
  display: block;
  min-height: 100svh;
  min-height: 100dvh;
  padding:
    env(safe-area-inset-top)
    env(safe-area-inset-right)
    env(safe-area-inset-bottom)
    env(safe-area-inset-left);
  touch-action: manipulation;
}

.compact-static {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  place-items: center;
  overflow: hidden;
  background: #050504;
  isolation: isolate;
}

.compact-static__canvas {
  position: relative;
  width: min(92vw, 26.5rem);
  width: min(92vw, 55.1448vh, 26.5rem);
  width: min(92dvw, 26.5rem);
  width: min(92dvw, 55.1448dvh, 26.5rem);
  aspect-ratio: 0.5994;
  overflow: hidden;
  border-radius: clamp(7px, 1.1cqw, 15px);
  background: #050504;
  container-type: size;
  opacity: 0;
  transform: scale(1.012);
  transition:
    opacity 900ms ease,
    transform 1400ms cubic-bezier(0.18, 0.78, 0.18, 1);
  box-shadow:
    inset 0 0 0 0.14cqw rgba(5, 6, 4, 0.98),
    inset 0 0 1.9cqw rgba(0, 0, 0, 0.72),
    0 0.5cqw 2.2cqw rgba(0, 0, 0, 0.74),
    0 0 0 100vmax #050504;
}

.compact-static__art {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
  background: #050504;
  transform: none;
}

html.is-compact-image-loaded .compact-static__canvas {
  opacity: 1;
  transform: none;
}

.compact-static__image {
  position: absolute;
  z-index: 0;
  left: -105.4%;
  top: -2.03%;
  width: 519%;
  height: 207.3%;
  object-fit: fill;
  filter: brightness(0.54) contrast(1.05) saturate(1);
}

.compact-static__tiles,
.compact-static__gaps {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.compact-static__tiles span,
.compact-static__gaps span {
  position: absolute;
}

.compact-static__tiles span {
  overflow: hidden;
  background:
    radial-gradient(circle at 48% 45%, rgba(255, 255, 255, 0.055), transparent 34%),
    radial-gradient(ellipse at center, transparent 36%, rgba(0, 0, 0, 0.62) 100%),
    rgba(0, 0, 0, 0.58);
  box-shadow:
    inset 0 0 1.2cqw rgba(0, 0, 0, 0.72),
    inset 0 0 0.3cqw rgba(180, 190, 168, 0.13);
}

.compact-static__tiles span:nth-child(2) {
  background:
    radial-gradient(circle at 42% 25%, rgba(255, 255, 255, 0.2), transparent 35%),
    radial-gradient(ellipse at center, transparent 48%, rgba(0, 0, 0, 0.18) 100%),
    linear-gradient(135deg, rgba(214, 255, 255, 0.5), rgba(154, 247, 255, 0.34));
  box-shadow:
    inset 0 0 0 0.18cqw rgba(5, 6, 4, 0.82),
    inset 0 0 0.34cqw rgba(214, 255, 255, 0.44),
    inset 0 0 2.45cqw rgba(214, 255, 255, 0.24),
    inset 0 0 4.2cqw rgba(0, 0, 0, 0.28),
    0 0 0.42cqw rgba(0, 0, 0, 0.5);
}

.compact-static__gaps {
  z-index: 2;
}

.compact-static__gaps span {
  background: rgba(5, 6, 4, 0.92);
  filter: blur(0.28px);
  box-shadow:
    0 0 0.75cqw rgba(0, 0, 0, 0.7),
    0 0 1.1cqw rgba(5, 6, 4, 0.74);
}

.compact-static__gaps span:nth-child(1) {
  inset: 0 0 auto;
  height: 0.9766%;
}

.compact-static__gaps span:nth-child(2) {
  inset: auto 0 0;
  height: 0.9766%;
}

.compact-static__gaps span:nth-child(3) {
  inset: 0 auto 0 0;
  width: 0.4557%;
}

.compact-static__gaps span:nth-child(4) {
  inset: 0 0 0 auto;
  width: 0.4557%;
}

.compact-static__gaps span:nth-child(5) {
  left: 19.6614%;
  top: 0;
  width: 0.6511%;
  height: 100%;
}

.compact-static__gaps span:nth-child(6) {
  left: 39.5833%;
  top: 0;
  width: 0.7162%;
  height: 100%;
}

.compact-static__gaps span:nth-child(7) {
  left: 59.5052%;
  top: 0;
  width: 0.5859%;
  height: 100%;
}

.compact-static__gaps span:nth-child(8) {
  left: 78.9713%;
  top: 0;
  width: 0.6511%;
  height: 100%;
}

.compact-static__gaps span:nth-child(9) {
  left: 0;
  top: 49.2188%;
  width: 100%;
  height: 1.1718%;
}

.compact-static__tiles span:nth-child(1) {
  left: 0.4557%;
  top: 0.9766%;
  width: 19.2057%;
  height: 48.2422%;
}

.compact-static__tiles span:nth-child(2) {
  left: 20.3125%;
  top: 0.9766%;
  width: 19.2708%;
  height: 48.2422%;
}

.compact-static__tiles span:nth-child(3) {
  left: 40.2995%;
  top: 0.9766%;
  width: 19.2057%;
  height: 48.2422%;
}

.compact-static__tiles span:nth-child(4) {
  left: 60.0911%;
  top: 0.9766%;
  width: 18.8802%;
  height: 48.2422%;
}

.compact-static__tiles span:nth-child(5) {
  left: 79.6224%;
  top: 0.9766%;
  width: 19.9219%;
  height: 48.2422%;
}

.compact-static__tiles span:nth-child(6) {
  left: 0.4557%;
  top: 50.3906%;
  width: 19.2057%;
  height: 48.6328%;
}

.compact-static__tiles span:nth-child(7) {
  left: 20.3125%;
  top: 50.3906%;
  width: 19.2708%;
  height: 48.6328%;
}

.compact-static__tiles span:nth-child(8) {
  left: 40.2995%;
  top: 50.3906%;
  width: 19.2057%;
  height: 48.6328%;
}

.compact-static__tiles span:nth-child(9) {
  left: 60.0911%;
  top: 50.3906%;
  width: 18.8802%;
  height: 48.6328%;
}

.compact-static__tiles span:nth-child(10) {
  left: 79.6224%;
  top: 50.3906%;
  width: 19.9219%;
  height: 48.6328%;
}

.compact-static__gaps,
.compact-static__tiles span {
  display: none;
}

.compact-static__tiles span:nth-child(2) {
  display: block;
  inset: 0;
  width: 100%;
  height: 100%;
}

.compact-static__canvas::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.48) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.46), transparent 24%, transparent 74%, rgba(0, 0, 0, 0.48));
}

.compact-static__help,
.compact-static__title {
  position: absolute;
  z-index: 4;
  font-family: var(--display-font);
  font-weight: 900;
  font-stretch: condensed;
  text-transform: uppercase;
}

.compact-static__help {
  top: clamp(1.9rem, 8.2vh, 4.4rem);
  top: clamp(1.9rem, min(8.2vh, 7vw), 4.4rem);
  top: clamp(1.9rem, 8.2cqh, 4.4rem);
  top: clamp(1.9rem, min(8.2cqh, 7cqw), 4.4rem);
  right: clamp(1.9rem, 11vw, 5rem);
  right: clamp(1.9rem, min(11vw, 6.4vh), 5rem);
  right: clamp(1.9rem, 11cqw, 5rem);
  right: clamp(1.9rem, min(11cqw, 6.4cqh), 5rem);
  color: var(--help-seahorse-blue);
  background: rgba(5, 6, 4, 0.78);
  border: 0.08em solid rgba(5, 6, 4, 0.96);
  text-decoration: none;
  font-size: clamp(1rem, 4.8vw, 2.25rem);
  font-size: clamp(1rem, min(4.8vw, 2.9vh), 2.25rem);
  font-size: clamp(1rem, 4.8cqw, 2.25rem);
  font-size: clamp(1rem, min(4.8cqw, 2.9cqh), 2.25rem);
  line-height: 0.84;
  letter-spacing: 0;
  padding: 0.18em 0.26em 0.14em;
  -webkit-text-stroke: 0.028em #050504;
  text-shadow:
    0.075em 0.095em 0.025em rgba(0, 0, 0, 0.95),
    0 0 0.34em var(--help-seahorse-blue-glow);
  box-shadow:
    0.12em 0.14em 0 rgba(0, 0, 0, 0.82),
    0 0 0.36em rgba(90, 163, 171, 0.08);
  transform: rotate(-1.5deg) skewX(-7deg);
}

.compact-static__help span {
  display: block;
  line-height: 0.78;
}

.compact-static__help .help-line {
  position: relative;
  width: max-content;
}

.compact-static__help .help-perch-fly {
  top: -0.4em;
  right: -0.1em;
  bottom: auto;
  width: 0.58em;
}

.compact-static__help:focus-visible {
  outline: 0.18em solid var(--help-seahorse-blue);
  outline-offset: 0.12em;
}

.compact-static__title {
  left: 50%;
  top: 63%;
  display: grid;
  justify-items: center;
  width: 92%;
  max-width: 92%;
  color: var(--seahorse-pink);
  text-align: center;
  font-size: clamp(2rem, 15.8vw, 4.2rem);
  font-size: clamp(2rem, 15.8cqw, 4.2rem);
  line-height: 0.72;
  letter-spacing: 0.012em;
  -webkit-text-stroke: 0.018em #050504;
  text-shadow: var(--main-type-shadow);
  transform: translate(-50%, -50%) perspective(52cqw) rotateX(4deg) rotateZ(-1.2deg) skewX(-8deg);
  transform-origin: center;
}

.compact-static__title span,
.compact-static__title strong {
  display: block;
  white-space: nowrap;
}

.compact-static__title strong {
  margin-top: 0.12em;
  color: var(--frog-green);
  font-size: 0.25em;
  line-height: 0.94;
  -webkit-text-stroke: 0.022em #050504;
  text-shadow:
    0.07em 0.095em 0.025em rgba(0, 0, 0, 0.92),
    0 0 0.32em rgba(57, 255, 20, 0.18);
}

html.is-compact-screen .stage-frame,
.stage-frame[hidden] {
  display: none;
}

html.is-compact-screen .compact-static {
  display: grid;
}

@media (max-width: 1024px), (pointer: coarse) {
  body {
    display: block;
    background: #050504;
  }

  .stage-frame {
    display: none;
  }

  .compact-static {
    display: grid;
  }
}

@media (orientation: landscape) and (max-width: 1024px), (orientation: landscape) and (pointer: coarse) {
  html.is-compact-screen,
  html.is-compact-screen body {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  html.is-compact-screen body {
    padding: 0;
  }

  html.is-compact-screen .compact-static__canvas {
    width: min(92vh, 55.1448vw, 26.5rem);
    width: min(92dvh, 55.1448dvw, 26.5rem);
  }
}

.stage-image {
  position: relative;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1250ms ease;
}

.stage.is-image-loaded .stage-image {
  opacity: 1;
}

.frame-mask {
  position: absolute;
  inset: 0;
  z-index: 4;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1250ms ease;
}

.stage.is-image-loaded .frame-mask {
  opacity: 1;
}

.stage.is-site-open .frame-mask {
  opacity: 0;
}

.stage.is-site-closing .frame-mask {
  opacity: 1;
  transition: none;
}

.frame-mask span {
  position: absolute;
  --steel-a: rgba(1, 2, 1, 0.98);
  --steel-b: rgba(8, 11, 8, 0.98);
  --steel-c: rgba(34, 42, 33, 0.96);
  background:
    linear-gradient(
      90deg,
      var(--steel-a) 0%,
      var(--steel-b) 34%,
      var(--steel-c) 52%,
      var(--steel-b) 66%,
      var(--steel-a) 100%
    );
  filter: none;
  transform: translateZ(0);
  box-shadow: none;
}

.frame-mask span:nth-child(1),
.frame-mask span:nth-child(2),
.frame-mask span:nth-child(9) {
  background:
    linear-gradient(
      180deg,
      var(--steel-a) 0%,
      var(--steel-b) 34%,
      var(--steel-c) 52%,
      var(--steel-b) 66%,
      var(--steel-a) 100%
    );
  box-shadow: none;
}

.frame-mask span:nth-child(3),
.frame-mask span:nth-child(4),
.frame-mask span:nth-child(5),
.frame-mask span:nth-child(6),
.frame-mask span:nth-child(7),
.frame-mask span:nth-child(8) {
  background:
    linear-gradient(
      90deg,
      var(--steel-a) 0%,
      var(--steel-b) 34%,
      var(--steel-c) 52%,
      var(--steel-b) 66%,
      var(--steel-a) 100%
    );
  box-shadow: none;
}

.frame-mask span:nth-child(1) {
  inset: 0 0 auto;
  height: 0.58594%;
}

.frame-mask span:nth-child(2) {
  inset: auto 0 0;
  height: 0.58594%;
}

.frame-mask span:nth-child(3) {
  inset: 0 auto 0 0;
  width: 0.39063%;
}

.frame-mask span:nth-child(4) {
  inset: 0 0 0 auto;
  width: 0.39063%;
}

.frame-mask span:nth-child(5) {
  left: 20.3125%;
  top: 0;
  width: 0.39063%;
  height: 100%;
}

.frame-mask span:nth-child(6) {
  left: 39.19271%;
  top: 0;
  width: 0.39063%;
  height: 100%;
}

.frame-mask span:nth-child(7) {
  left: 58.20313%;
  top: 0;
  width: 0.39063%;
  height: 100%;
}

.frame-mask span:nth-child(8) {
  left: 79.88281%;
  top: 0;
  width: 0.39063%;
  height: 100%;
}

.frame-mask span:nth-child(9) {
  left: 0;
  top: 50%;
  width: 100%;
  height: 0.58594%;
}

.neon-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1250ms ease;
}

.stage.is-image-loaded .neon-layer {
  opacity: 1;
  transition: none;
}

.neon-layer span {
  position: absolute;
  overflow: hidden;
  opacity: 1;
  --active-panel-bg: var(--link-panel-bg);
  --active-panel-flicker-low-bg:
    radial-gradient(ellipse at 50% 44%, rgba(154, 247, 255, 0.012) 0 18%, rgba(0, 0, 0, 0.25) 48%, rgba(0, 0, 0, 0.74) 100%),
    rgba(0, 0, 0, 0.54);
  --active-panel-flicker-mid-bg:
    radial-gradient(circle at 38% 25%, rgba(255, 255, 255, 0.09), transparent 32%),
    linear-gradient(135deg, rgba(196, 253, 255, 0.18), rgba(154, 247, 255, 0.08)),
    rgba(0, 0, 0, 0.34);
  --active-panel-flicker-pre-bg:
    radial-gradient(circle at 38% 25%, rgba(255, 255, 255, 0.18), transparent 35%),
    linear-gradient(135deg, rgba(196, 253, 255, 0.36), rgba(154, 247, 255, 0.2)),
    rgba(0, 0, 0, 0.18);
  --tile-vignette-opacity: 0.95;
  --tile-edge-vignette-opacity: 0.22;
  background: rgba(0, 0, 0, 0.42);
  box-shadow: none;
  contain: paint;
  transform: translateZ(0);
  transition:
    background 1200ms ease,
    box-shadow 1200ms ease,
    -webkit-backdrop-filter 1200ms ease,
    backdrop-filter 1200ms ease;
}

.neon-layer span::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: var(--tile-edge-vignette-opacity);
  background:
    radial-gradient(
      ellipse at center,
      rgba(0, 0, 0, 0) 0 56%,
      rgba(0, 0, 0, 0.18) 78%,
      rgba(0, 0, 0, 0.46) 100%
    );
}

.neon-layer span::after {
  content: "";
  position: absolute;
  inset: -0.13021cqw;
  pointer-events: none;
  opacity: var(--tile-vignette-opacity);
  background:
    radial-gradient(
      ellipse at center,
      rgba(255, 255, 255, 0.035) 0 34%,
      rgba(0, 0, 0, 0.035) 50%,
      rgba(0, 0, 0, 0.22) 76%,
      rgba(0, 0, 0, 0.52) 100%
    ),
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.2),
      transparent 18%,
      transparent 76%,
      rgba(0, 0, 0, 0.26)
    );
}

.neon-layer span.is-neon-active {
  opacity: 1;
  --tile-vignette-opacity: 0.34;
  --tile-edge-vignette-opacity: 0.16;
  -webkit-backdrop-filter: brightness(1.34) contrast(1.18) saturate(1.05);
  backdrop-filter: brightness(1.34) contrast(1.18) saturate(1.05);
  background:
    linear-gradient(135deg, rgba(255, 0, 180, 0.16), rgba(255, 0, 180, 0.07)),
    rgba(255, 255, 255, 0.035);
  box-shadow: none;
}

.neon-layer span.is-link-panel {
  opacity: 0.82;
  --tile-vignette-opacity: 0.74;
  --tile-edge-vignette-opacity: 0.18;
  background: var(--active-panel-bg);
  box-shadow: none;
}

.neon-layer span:nth-child(1),
.neon-layer span:nth-child(10) {
  --active-panel-bg: var(--outside-panel-bg);
  --active-panel-flicker-low-bg:
    radial-gradient(ellipse at 50% 44%, rgba(255, 0, 180, 0.012) 0 18%, rgba(0, 0, 0, 0.25) 48%, rgba(0, 0, 0, 0.74) 100%),
    rgba(0, 0, 0, 0.54);
  --active-panel-flicker-mid-bg:
    radial-gradient(circle at 42% 28%, rgba(255, 255, 255, 0.08), transparent 32%),
    linear-gradient(135deg, rgba(255, 0, 180, 0.13), rgba(255, 0, 180, 0.055)),
    rgba(0, 0, 0, 0.36);
  --active-panel-flicker-pre-bg:
    radial-gradient(circle at 42% 28%, rgba(255, 255, 255, 0.14), transparent 35%),
    linear-gradient(135deg, rgba(255, 0, 180, 0.18), rgba(255, 0, 180, 0.08)),
    rgba(255, 255, 255, 0.025);
}

.neon-layer span:nth-child(1).is-link-panel,
.neon-layer span:nth-child(10).is-link-panel {
  opacity: 1;
  --tile-vignette-opacity: 0.34;
  --tile-edge-vignette-opacity: 0.16;
  -webkit-backdrop-filter: brightness(1.34) contrast(1.18) saturate(1.05);
  backdrop-filter: brightness(1.34) contrast(1.18) saturate(1.05);
}

.neon-layer span.is-link-panel-flicker-in,
.neon-layer span.is-link-panel-flicker-out {
  --tile-vignette-opacity: 0.82;
  --tile-edge-vignette-opacity: 0.28;
  animation-duration: 1500ms;
  animation-fill-mode: both;
  animation-timing-function: steps(1, end);
}

.neon-layer span.is-link-panel-flicker-in {
  animation-name: link-panel-flicker-in;
}

.neon-layer span.is-link-panel-flicker-out {
  animation-name: link-panel-flicker-out;
}

@keyframes link-panel-flicker-in {
  0%,
  13%,
  26%,
  42%,
  61%,
  78% {
    opacity: 0.15;
    background: var(--active-panel-flicker-low-bg);
    box-shadow: none;
  }

  7%,
  19%,
  34%,
  53%,
  71%,
  88% {
    opacity: 0.36;
    background: var(--active-panel-flicker-mid-bg);
    box-shadow: none;
  }

  96% {
    opacity: 0.58;
    background: var(--active-panel-flicker-pre-bg);
    box-shadow: none;
  }

  100% {
    opacity: 0.86;
    background: var(--active-panel-bg);
    box-shadow: none;
  }
}

@keyframes link-panel-flicker-out {
  0% {
    opacity: 0.86;
    background: var(--active-panel-bg);
    box-shadow: none;
  }

  6%,
  18%,
  32%,
  49%,
  68% {
    opacity: 0.32;
    background: var(--active-panel-flicker-mid-bg);
    box-shadow: none;
  }

  11%,
  25%,
  41%,
  58%,
  76%,
  90%,
  100% {
    opacity: 0.15;
    background: var(--active-panel-flicker-low-bg);
    box-shadow: none;
  }
}

.stage.is-showing-site .neon-layer span,
.stage.is-site-open .neon-layer span {
  opacity: 0;
}

.stage.is-site-closing .neon-layer,
.stage.is-site-closing .neon-layer span {
  opacity: 1;
  transition: none;
}

.glass-wipe-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.stage.is-image-loaded:not(.is-site-open) .glass-wipe-layer {
  opacity: 1;
}

.stage.is-showing-site .glass-wipe-layer,
.stage.is-site-open .glass-wipe-layer {
  opacity: 0;
}

.glass-wipe {
  position: absolute;
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 1;
  transform: translateZ(0);
}

.glass-wipe::before,
.glass-wipe::after {
  content: "";
  position: absolute;
  left: var(--wipe-x, 50%);
  top: var(--wipe-y, 50%);
  width: var(--wipe-length, 42%);
  height: var(--wipe-thickness, 3%);
  border-radius: 999px;
  pointer-events: none;
  transform-origin: 0 50%;
  transform:
    translate3d(0, -50%, 0)
    rotate(var(--wipe-angle, -12deg))
    translateX(var(--wipe-start, -2%));
  animation: glass-wipe-drift var(--wipe-duration, 3600ms) cubic-bezier(0.18, 0.72, 0.2, 1) both;
}

.glass-wipe::before {
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(219, 255, 255, 0.1) 10%,
      rgba(238, 255, 255, 0.34) 37%,
      rgba(193, 252, 255, 0.3) 64%,
      rgba(154, 247, 255, 0.12) 88%,
      transparent
    );
  filter: blur(0.052cqw);
}

.glass-wipe::after {
  width: calc(var(--wipe-length, 42%) * 0.84);
  height: calc(var(--wipe-thickness, 3%) * 0.42);
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.16) 18%,
      rgba(202, 255, 255, 0.28) 54%,
      rgba(154, 247, 255, 0.12) 84%,
      transparent
    );
  filter: blur(0.026cqw);
  animation-delay: 80ms;
}

@keyframes glass-wipe-drift {
  0% {
    opacity: 0;
    transform:
      translate3d(0, -50%, 0)
      rotate(var(--wipe-angle, -12deg))
      translateX(var(--wipe-start, -2%))
      scaleX(0.28);
  }

  18% {
    opacity: var(--wipe-opacity, 0.34);
  }

  64% {
    opacity: calc(var(--wipe-opacity, 0.34) * 0.64);
  }

  100% {
    opacity: 0;
    transform:
      translate3d(0, -50%, 0)
      rotate(var(--wipe-angle, -12deg))
      translateX(var(--wipe-drift, 8%))
      scaleX(1);
  }
}

.site-window {
  position: absolute;
  display: none;
  z-index: 2;
  left: var(--window-left, 0);
  top: var(--window-top, 0);
  width: var(--window-width, 0);
  height: var(--window-height, 0);
  overflow: hidden;
  opacity: var(--window-opacity, 0);
  pointer-events: none;
  background: #06100f;
  transform: translate3d(0, 0, 0);
  transform-origin: center;
  transition: opacity 220ms ease;
  contain: layout paint;
}

.stage.is-site-open .site-window {
  display: block;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  pointer-events: none;
  transform: none;
}

.stage.is-site-open.is-site-closing .site-window {
  display: block;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transform: none;
  transition: opacity 1000ms cubic-bezier(0.18, 0.72, 0.2, 1);
}

.site-window iframe {
  position: absolute;
  left: var(--window-left-neg, 0);
  top: var(--window-top-neg, 0);
  width: var(--stage-width, 100%);
  height: var(--stage-height, 100%);
  border: 0;
  opacity: 1;
  z-index: 1;
  transform: none;
  transform-origin: top left;
  transition: opacity 2100ms cubic-bezier(0.18, 0.72, 0.2, 1) 180ms;
}

.site-window__loading-art {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  background-image:
    linear-gradient(180deg, rgba(154, 247, 255, 0.3), rgba(12, 34, 32, 0.58)),
    linear-gradient(90deg, rgba(0, 0, 0, 0.52), transparent 18%, transparent 82%, rgba(0, 0, 0, 0.48)),
    url("SHARKTANKCLEANER.png");
  background-size:
    100% 100%,
    100% 100%,
    var(--loading-art-size-x) var(--loading-art-size-y);
  background-position:
    center,
    center,
    var(--loading-art-pos-x) calc(var(--loading-art-pos-y) - var(--loading-art-shift-y));
  background-repeat: no-repeat;
  background-blend-mode: color, multiply, normal;
  filter: brightness(0.82) contrast(1.04) saturate(0.7) blur(0.2cqw);
  transition: opacity 2300ms cubic-bezier(0.16, 0.68, 0.16, 1);
  transform: translateZ(0);
}

.stage.is-site-open.is-site-loading .site-window__loading-art {
  opacity: 1;
  animation: loading-art-arrive 1800ms cubic-bezier(0.16, 0.74, 0.16, 1) both;
}

.stage.is-site-open.is-site-ready .site-window__loading-art {
  opacity: 0;
  animation: none;
}

@keyframes loading-art-arrive {
  0% {
    opacity: 0;
    filter: brightness(0.68) contrast(0.92) saturate(0.5) blur(0.34cqw);
  }

  100% {
    opacity: 1;
    filter: brightness(0.82) contrast(1.04) saturate(0.7) blur(0.2cqw);
  }
}

.site-window::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    radial-gradient(ellipse at 50% 50%, transparent 0 36%, rgba(4, 16, 15, 0.32) 62%, rgba(0, 0, 0, 0.86) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.44), transparent 17%, transparent 83%, rgba(0, 0, 0, 0.42)),
    linear-gradient(180deg, rgba(0, 0, 0, 0.34), rgba(10, 36, 35, 0.12) 34%, rgba(8, 34, 32, 0.1) 64%, rgba(0, 0, 0, 0.5)),
    repeating-radial-gradient(circle at 18% 24%, rgba(196, 253, 255, 0.022) 0 0.035cqw, transparent 0.04cqw 1.35cqw);
  opacity: 0;
  mix-blend-mode: normal;
  pointer-events: none;
  box-shadow:
    inset 0 0 11.71875cqw rgba(0, 0, 0, 0.78),
    inset 0 0 28.64583cqw rgba(0, 0, 0, 0.62),
    inset 0 0 1.5625cqw rgba(154, 247, 255, 0.08);
  transition: opacity 2100ms cubic-bezier(0.18, 0.72, 0.2, 1);
}

.stage.is-site-open .site-window::after {
  opacity: 0.985;
}

.stage.is-site-open.is-site-loading .site-window::after {
  opacity: 0.72;
}

.stage.is-site-open .site-window iframe {
  inset: auto;
  left: 50%;
  top: 50%;
  width: 112%;
  height: 112%;
  opacity: 0.62;
  filter: grayscale(1) contrast(1.02) brightness(0.72) sepia(0.02) blur(0.025cqw);
  mix-blend-mode: normal;
  transform: translate3d(calc(-50% + var(--site-page-shift-x)), calc(-50% + var(--site-page-shift-y)), 0) scale(var(--site-page-zoom));
  transform-origin: center;
}

.stage.is-site-open:not(.is-site-ready) .site-window iframe {
  opacity: 0;
}

.panel-fly-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.stage.is-image-loaded:not(.is-site-open) .panel-fly-layer {
  opacity: 1;
}

.stage.is-site-open .panel-fly-layer,
.stage.is-showing-site .panel-fly-layer {
  opacity: 0;
}

.panel-fly-box {
  position: absolute;
  display: block;
  overflow: hidden;
  pointer-events: none;
  contain: layout paint style;
}

.explorer-fly {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--explorer-fly-size, 42px);
  aspect-ratio: 1;
  pointer-events: none;
  transform:
    translate3d(calc(var(--explorer-fly-x, 50%) - 50%), calc(var(--explorer-fly-y, 50%) - 50%), 0)
    rotate(var(--explorer-fly-rotation, 0deg))
    scale(var(--explorer-fly-wobble, 1));
  transform-origin: 50% 50%;
  opacity: 1;
  filter:
    drop-shadow(0.0651cqw 0.09115cqw 0 rgba(0, 0, 0, 0.78))
    drop-shadow(0 0 0.13672cqw rgba(255, 121, 0, 0.36));
  transition: opacity 460ms ease;
  will-change: transform;
}

.explorer-fly.is-hidden {
  opacity: 0;
}

.explorer-fly__body,
.explorer-fly__head,
.explorer-fly__wing {
  position: absolute;
  display: block;
  pointer-events: none;
}

.explorer-fly__body {
  left: 38%;
  top: 31%;
  width: 24%;
  height: 46%;
  border: 0.095em solid rgba(35, 9, 0, 0.86);
  border-radius: 48% 52% 42% 46%;
  background:
    linear-gradient(90deg, rgba(42, 11, 0, 0.22), transparent 34%, rgba(255, 210, 111, 0.34) 52%, transparent 74%),
    linear-gradient(180deg, #ffb01a 0%, var(--baldiga-orange) 43%, #d64d00 100%);
  box-shadow:
    inset -0.07em -0.12em 0 rgba(41, 8, 0, 0.42),
    inset 0.07em 0.06em 0 rgba(255, 229, 140, 0.52);
  transform: rotate(3deg);
}

.explorer-fly__body::before,
.explorer-fly__body::after {
  content: "";
  position: absolute;
  left: 10%;
  width: 80%;
  height: 0.085em;
  border-radius: 999px;
  background: rgba(47, 10, 0, 0.66);
}

.explorer-fly__body::before {
  top: 35%;
}

.explorer-fly__body::after {
  top: 61%;
}

.explorer-fly__head {
  left: 32%;
  top: 14%;
  width: 36%;
  height: 30%;
  border: 0.095em solid rgba(35, 9, 0, 0.9);
  border-radius: 52% 48% 46% 50%;
  background:
    radial-gradient(circle at 34% 34%, rgba(255, 235, 158, 0.72), transparent 17%),
    radial-gradient(circle at 66% 37%, rgba(255, 235, 158, 0.48), transparent 16%),
    linear-gradient(180deg, #ffbd24, #ff7900 64%, #c94600);
}

.explorer-fly__head::before,
.explorer-fly__head::after {
  content: "";
  position: absolute;
  top: -42%;
  width: 34%;
  height: 56%;
  border-top: 0.07em solid rgba(35, 9, 0, 0.78);
  transform-origin: 50% 100%;
}

.explorer-fly__head::before {
  left: -10%;
  transform: rotate(-34deg);
}

.explorer-fly__head::after {
  right: -10%;
  transform: rotate(34deg);
}

.explorer-fly__wing {
  top: 25%;
  width: 36%;
  height: 42%;
  border: 0.075em solid rgba(48, 12, 0, 0.58);
  background:
    radial-gradient(circle at 42% 28%, rgba(255, 238, 166, 0.44), transparent 23%),
    linear-gradient(145deg, rgba(255, 190, 36, 0.44), rgba(255, 121, 0, 0.13));
  box-shadow: inset 0 0 0.16em rgba(255, 225, 132, 0.18);
  opacity: 0.88;
  animation: fly-wing-buzz 152ms ease-in-out infinite alternate;
}

.explorer-fly:not(.is-escaping) .explorer-fly__wing {
  opacity: 0.68;
  animation-duration: 330ms;
}

.explorer-fly.is-paused:not(.is-escaping) .explorer-fly__wing {
  opacity: 0.86;
  animation-duration: 170ms;
}

.explorer-fly.is-escaping .explorer-fly__wing {
  opacity: 0.98;
  animation-duration: 76ms;
}

.explorer-fly__wing--left {
  left: 10%;
  border-radius: 72% 35% 63% 38%;
  transform-origin: 78% 62%;
  --wing-rest: rotate(-31deg) skewY(-8deg);
  --wing-buzz: rotate(-47deg) skewY(-13deg) scaleY(0.9);
  transform: var(--wing-rest);
}

.explorer-fly__wing--right {
  right: 10%;
  border-radius: 35% 72% 38% 63%;
  transform-origin: 22% 62%;
  --wing-rest: rotate(31deg) skewY(8deg);
  --wing-buzz: rotate(47deg) skewY(13deg) scaleY(0.9);
  transform: var(--wing-rest);
  animation-delay: -76ms;
}

.explorer-fly::before,
.explorer-fly::after {
  content: "";
  position: absolute;
  top: 48%;
  width: 37%;
  height: 32%;
  border-top: 0.08em solid rgba(35, 9, 0, 0.78);
  opacity: 0.84;
}

.explorer-fly::before {
  left: 17%;
  transform: rotate(-22deg);
}

.explorer-fly::after {
  right: 17%;
  transform: rotate(22deg);
}

.help-perch-fly {
  position: absolute;
  z-index: 2;
  display: block;
  aspect-ratio: 1;
  pointer-events: none;
  transform: rotate(-14deg);
  transform-origin: 50% 64%;
  filter:
    drop-shadow(0.045em 0.055em 0 rgba(0, 0, 0, 0.78))
    drop-shadow(0 0 0.13em rgba(255, 121, 0, 0.34));
  transition:
    opacity 520ms cubic-bezier(0.16, 0.84, 0.22, 1),
    transform 760ms cubic-bezier(0.14, 0.78, 0.18, 1),
    filter 520ms ease;
  will-change: transform, opacity;
}

.help-perch-fly i {
  position: absolute;
  display: block;
  pointer-events: none;
}

.help-perch-fly__body {
  left: 39%;
  top: 32%;
  width: 24%;
  height: 45%;
  border: 0.075em solid rgba(35, 9, 0, 0.86);
  border-radius: 48% 52% 42% 46%;
  background:
    linear-gradient(90deg, rgba(42, 11, 0, 0.22), transparent 34%, rgba(255, 210, 111, 0.34) 52%, transparent 74%),
    linear-gradient(180deg, #ffb01a 0%, var(--baldiga-orange) 43%, #d64d00 100%);
  box-shadow:
    inset -0.055em -0.095em 0 rgba(41, 8, 0, 0.42),
    inset 0.055em 0.045em 0 rgba(255, 229, 140, 0.52);
}

.help-perch-fly__body::before,
.help-perch-fly__body::after {
  content: "";
  position: absolute;
  left: 9%;
  width: 82%;
  height: 0.07em;
  border-radius: 999px;
  background: rgba(47, 10, 0, 0.64);
}

.help-perch-fly__body::before {
  top: 35%;
}

.help-perch-fly__body::after {
  top: 62%;
}

.help-perch-fly__head {
  left: 33%;
  top: 15%;
  width: 34%;
  height: 28%;
  border: 0.075em solid rgba(35, 9, 0, 0.9);
  border-radius: 52% 48% 46% 50%;
  background:
    radial-gradient(circle at 34% 34%, rgba(255, 235, 158, 0.72), transparent 17%),
    radial-gradient(circle at 66% 37%, rgba(255, 235, 158, 0.48), transparent 16%),
    linear-gradient(180deg, #ffbd24, #ff7900 64%, #c94600);
}

.help-perch-fly__head::before,
.help-perch-fly__head::after {
  content: "";
  position: absolute;
  top: -40%;
  width: 34%;
  height: 54%;
  border-top: 0.055em solid rgba(35, 9, 0, 0.78);
  transform-origin: 50% 100%;
}

.help-perch-fly__head::before {
  left: -10%;
  transform: rotate(-34deg);
}

.help-perch-fly__head::after {
  right: -10%;
  transform: rotate(34deg);
}

.help-perch-fly__wing {
  top: 25%;
  width: 36%;
  height: 42%;
  border: 0.06em solid rgba(48, 12, 0, 0.58);
  background:
    radial-gradient(circle at 42% 28%, rgba(255, 238, 166, 0.44), transparent 23%),
    linear-gradient(145deg, rgba(255, 190, 36, 0.44), rgba(255, 121, 0, 0.13));
  box-shadow: inset 0 0 0.13em rgba(255, 225, 132, 0.18);
  opacity: 0.76;
  animation: fly-wing-buzz 260ms ease-in-out infinite alternate;
}

.help-perch-fly__wing--left {
  left: 10%;
  border-radius: 72% 35% 63% 38%;
  transform-origin: 78% 62%;
  --wing-rest: rotate(-31deg) skewY(-8deg);
  --wing-buzz: rotate(-43deg) skewY(-11deg) scaleY(0.92);
  transform: var(--wing-rest);
}

.help-perch-fly__wing--right {
  right: 10%;
  border-radius: 35% 72% 38% 63%;
  transform-origin: 22% 62%;
  --wing-rest: rotate(31deg) skewY(8deg);
  --wing-buzz: rotate(43deg) skewY(11deg) scaleY(0.92);
  transform: var(--wing-rest);
  animation-delay: -130ms;
}

.help-perch-fly::before,
.help-perch-fly::after {
  content: "";
  position: absolute;
  top: 48%;
  width: 37%;
  height: 32%;
  border-top: 0.065em solid rgba(35, 9, 0, 0.78);
  opacity: 0.82;
}

.help-perch-fly::before {
  left: 17%;
  transform: rotate(-22deg);
}

.help-perch-fly::after {
  right: 17%;
  transform: rotate(22deg);
}

.fly-trail-layer {
  position: absolute;
  inset: 0;
  z-index: 30;
  overflow: hidden;
  pointer-events: none;
  opacity: 1;
}

.fly-trail {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--trail-size, 8px);
  height: calc(var(--trail-size, 8px) * 0.64);
  border-radius: 58% 42% 54% 46%;
  background:
    radial-gradient(circle at 38% 42%, rgba(255, 218, 107, 0.52), transparent 34%),
    linear-gradient(90deg, rgba(255, 121, 0, 0), rgba(255, 121, 0, var(--trail-opacity, 0.42)) 62%, rgba(255, 185, 41, 0.22));
  box-shadow:
    0 0 0.16em rgba(255, 121, 0, 0.24),
    0.08em 0.08em 0 rgba(0, 0, 0, 0.22);
  opacity: var(--trail-opacity, 0.42);
  transform:
    translate3d(calc(var(--trail-x, 0px) - 50%), calc(var(--trail-y, 0px) - 50%), 0)
    rotate(var(--trail-rotation, 0deg))
    scale(var(--trail-scale, 1));
  filter: blur(0.025em);
  animation: fly-trail-dim 980ms cubic-bezier(0.12, 0.72, 0.2, 1) forwards;
  will-change: opacity, transform, filter;
}

.stage:not(.is-image-loaded) .fly-trail,
.stage.is-site-loading .fly-trail,
.stage.is-frog-control-active .fly-trail {
  display: none;
}

.fly-cursor {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 31;
  width: clamp(24px, 2.39583cqw, 48px);
  aspect-ratio: 1;
  opacity: 0;
  pointer-events: none;
  transform:
    translate3d(calc(var(--fly-x, 0px) - 50%), calc(var(--fly-y, 0px) - 50%), 0)
    rotate(var(--fly-rotation, 0deg))
    scale(var(--fly-scale, 1));
  transform-origin: 50% 50%;
  filter:
    drop-shadow(0.0651cqw 0.08464cqw 0 rgba(0, 0, 0, 0.74))
    drop-shadow(0 0 0.11719cqw rgba(255, 121, 0, 0.36));
  transition: opacity 720ms cubic-bezier(0.18, 0.72, 0.2, 1);
  will-change: transform, opacity;
}

.stage.has-fly-cursor:not(.is-frog-control-active) .fly-cursor {
  opacity: 0.96;
}

.stage.has-fly-cursor.is-fly-dimmed:not(.is-frog-control-active) .fly-cursor {
  opacity: 0;
}

.stage.is-frog-catching.has-fly-cursor:not(.is-frog-control-active) .fly-cursor {
  opacity: 0.9;
}

.stage.is-fly-eaten .fly-cursor {
  opacity: 0 !important;
  transform:
    translate3d(calc(var(--fly-x, 0px) - 50%), calc(var(--fly-y, 0px) - 50%), 0)
    rotate(var(--fly-rotation, 0deg))
    scale(0.08);
  transition:
    opacity 45ms linear,
    transform 70ms cubic-bezier(0.42, 0, 1, 1);
}

.stage.is-frog-catching .fly-cursor__wing {
  animation-duration: 82ms;
}

.stage:not(.is-image-loaded) .fly-cursor,
.stage.is-frog-control-active .fly-cursor,
.stage.is-site-loading .fly-cursor,
.stage.is-frog-celebrating .fly-cursor {
  opacity: 0;
}

.fly-cursor__body,
.fly-cursor__head,
.fly-cursor__wing {
  position: absolute;
  display: block;
  pointer-events: none;
}

.fly-cursor__body {
  left: 38%;
  top: 31%;
  width: 24%;
  height: 46%;
  border: 0.095em solid rgba(35, 9, 0, 0.86);
  border-radius: 48% 52% 42% 46%;
  background:
    linear-gradient(90deg, rgba(42, 11, 0, 0.22), transparent 34%, rgba(255, 210, 111, 0.34) 52%, transparent 74%),
    linear-gradient(180deg, #ffb01a 0%, var(--baldiga-orange) 43%, #d64d00 100%);
  box-shadow:
    inset -0.07em -0.12em 0 rgba(41, 8, 0, 0.42),
    inset 0.07em 0.06em 0 rgba(255, 229, 140, 0.52);
  transform: rotate(3deg);
}

.fly-cursor__body::before,
.fly-cursor__body::after {
  content: "";
  position: absolute;
  left: 10%;
  width: 80%;
  height: 0.085em;
  border-radius: 999px;
  background: rgba(47, 10, 0, 0.66);
}

.fly-cursor__body::before {
  top: 35%;
}

.fly-cursor__body::after {
  top: 61%;
}

.fly-cursor__head {
  left: 32%;
  top: 14%;
  width: 36%;
  height: 30%;
  border: 0.095em solid rgba(35, 9, 0, 0.9);
  border-radius: 52% 48% 46% 50%;
  background:
    radial-gradient(circle at 34% 34%, rgba(255, 235, 158, 0.72), transparent 17%),
    radial-gradient(circle at 66% 37%, rgba(255, 235, 158, 0.48), transparent 16%),
    linear-gradient(180deg, #ffbd24, #ff7900 64%, #c94600);
}

.fly-cursor__head::before,
.fly-cursor__head::after {
  content: "";
  position: absolute;
  top: -42%;
  width: 34%;
  height: 56%;
  border-top: 0.07em solid rgba(35, 9, 0, 0.78);
  transform-origin: 50% 100%;
}

.fly-cursor__head::before {
  left: -10%;
  transform: rotate(-34deg);
}

.fly-cursor__head::after {
  right: -10%;
  transform: rotate(34deg);
}

.fly-cursor__wing {
  top: 25%;
  width: 36%;
  height: 42%;
  border: 0.075em solid rgba(48, 12, 0, 0.58);
  background:
    radial-gradient(circle at 42% 28%, rgba(255, 238, 166, 0.44), transparent 23%),
    linear-gradient(145deg, rgba(255, 190, 36, 0.44), rgba(255, 121, 0, 0.13));
  box-shadow: inset 0 0 0.16em rgba(255, 225, 132, 0.18);
  opacity: 0.88;
  animation: fly-wing-buzz 132ms ease-in-out infinite alternate;
}

.fly-cursor__wing--left {
  left: 10%;
  border-radius: 72% 35% 63% 38%;
  transform-origin: 78% 62%;
  --wing-rest: rotate(-34deg) skewY(-9deg);
  --wing-buzz: rotate(-48deg) skewY(-14deg) scaleY(0.9);
  transform: var(--wing-rest);
}

.fly-cursor__wing--right {
  right: 10%;
  border-radius: 35% 72% 38% 63%;
  transform-origin: 22% 62%;
  --wing-rest: rotate(34deg) skewY(9deg);
  --wing-buzz: rotate(48deg) skewY(14deg) scaleY(0.9);
  transform: var(--wing-rest);
  animation-delay: -66ms;
}

.fly-cursor::before,
.fly-cursor::after {
  content: "";
  position: absolute;
  top: 48%;
  width: 37%;
  height: 32%;
  border-top: 0.08em solid rgba(35, 9, 0, 0.78);
  opacity: 0.84;
}

.fly-cursor::before {
  left: 17%;
  transform: rotate(-22deg);
}

.fly-cursor::after {
  right: 17%;
  transform: rotate(22deg);
}

@keyframes fly-wing-buzz {
  0% {
    opacity: 0.68;
    transform: var(--wing-rest);
  }

  100% {
    opacity: 0.96;
    transform: var(--wing-buzz);
  }
}

@keyframes fly-trail-dim {
  0% {
    opacity: var(--trail-opacity, 0.42);
    filter: blur(0.018em);
  }

  100% {
    opacity: 0;
    filter: blur(0.18em);
    transform:
      translate3d(calc(var(--trail-x, 0px) - 50%), calc(var(--trail-y, 0px) - 50%), 0)
      rotate(var(--trail-rotation, 0deg))
      scale(calc(var(--trail-scale, 1) * 0.58));
  }
}

.frog-cursor {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 30;
  width: 5.98958cqw;
  aspect-ratio: 1;
  background: url("assets/performance/frog-cursor-256.png") center / contain no-repeat;
  filter:
    saturate(3.4)
    brightness(1.34)
    contrast(1.16)
    var(--frog-3d-shadow);
  opacity: 0;
  pointer-events: none;
  transform:
    translate3d(calc(var(--frog-x, 0px) - 50%), calc(var(--frog-y, 0px) - 24%), 0)
    rotate(var(--frog-rotation, 0deg))
    scale(var(--frog-breath-x, 1), var(--frog-breath-y, 1));
  transform-origin: 50% 24%;
  transition: opacity 90ms ease;
  backface-visibility: hidden;
  will-change: transform;
}

.stage.has-frog-cursor .frog-cursor {
  opacity: 1;
}

.stage.is-frog-waiting.has-frog-cursor .frog-cursor {
  animation: frog-waiting-pulse 1850ms cubic-bezier(0.18, 0.72, 0.22, 1) infinite;
}

.stage.is-frog-catching.has-frog-cursor .frog-cursor {
  filter:
    saturate(3.7)
    brightness(1.46)
    contrast(1.18)
    var(--frog-3d-shadow);
}

.stage:not(.is-frog-ready) .frog-cursor {
  transition: none;
}

.stage:not(.is-image-loaded).has-frog-cursor .frog-cursor {
  opacity: 0;
  animation: none;
}

.frog-cursor::before,
.frog-cursor::after {
  content: "";
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  pointer-events: none;
  -webkit-mask: url("assets/performance/frog-cursor-256.png") center / contain no-repeat;
  mask: url("assets/performance/frog-cursor-256.png") center / contain no-repeat;
}

.stage.has-frog-cursor .frog-cursor::before {
  background:
    radial-gradient(ellipse at 48% 57%, rgba(170, 255, 134, 0.34) 0 18%, rgba(57, 255, 20, 0.23) 31%, transparent 50%),
    radial-gradient(ellipse at 46% 31%, rgba(230, 255, 220, 0.26), transparent 25%);
  mix-blend-mode: screen;
  opacity: 0.2;
  transform-origin: 48% 57%;
  animation: frog-soft-breath 3600ms ease-in-out infinite;
}

.stage.has-frog-cursor .frog-cursor::after {
  background: rgba(57, 255, 20, 0.18);
  filter: blur(0.045cqw);
  mix-blend-mode: screen;
  opacity: 0.13;
  transform-origin: 48% 58%;
  animation: frog-soft-breath-glow 3600ms ease-in-out infinite;
}

.stage.is-frog-catching.has-frog-cursor .frog-cursor::before,
.stage.is-frog-catching.has-frog-cursor .frog-cursor::after,
.stage.is-frog-celebrating.has-frog-cursor .frog-cursor::before,
.stage.is-frog-celebrating.has-frog-cursor .frog-cursor::after,
.stage.is-site-loading.has-frog-cursor .frog-cursor::before,
.stage.is-site-loading.has-frog-cursor .frog-cursor::after {
  animation: none;
  opacity: 0;
}

@keyframes frog-soft-breath {
  0%,
  100% {
    opacity: 0.18;
    transform: scale(0.982, 0.968);
  }

  48% {
    opacity: 0.38;
    transform: scale(1.04, 1.065);
  }
}

@keyframes frog-soft-breath-glow {
  0%,
  100% {
    opacity: 0.09;
    transform: scale(0.974, 0.964);
  }

  48% {
    opacity: 0.22;
    transform: scale(1.055, 1.08);
  }
}

.stage.is-site-loading .frog-cursor {
  opacity: 0 !important;
  animation: none;
}

.loading-frog {
  position: absolute;
  left: 50%;
  top: 67%;
  z-index: 34;
  width: 124px;
  width: 9.11458cqw;
  aspect-ratio: 1;
  overflow: visible;
  background: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  filter:
    drop-shadow(0.1888cqw 0.23438cqw 0.04557cqw rgba(0, 0, 0, 0.72))
    drop-shadow(0 0 0.71615cqw rgba(57, 255, 20, 0.18));
  transform: translate3d(-50%, -50%, 0) rotate(-7deg) scale(1);
  transform-origin: center;
  transition: opacity 240ms cubic-bezier(0.18, 0.72, 0.2, 1);
  will-change: transform, opacity;
}

.loading-frog__base,
.loading-frog__fill,
.loading-frog__fill img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.loading-frog__base,
.loading-frog__fill img {
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.loading-frog__base {
  opacity: 1;
  filter:
    drop-shadow(0 0 0.32552cqw rgba(154, 247, 255, 0.36));
}

.loading-frog__fill {
  overflow: hidden;
  clip-path: inset(calc(100% - var(--site-load-progress, 0%)) 0 0 0);
  transition: clip-path 180ms linear;
}

.loading-frog__fill img {
  filter:
    saturate(4.2)
    brightness(1.42)
    contrast(1.12)
    drop-shadow(0 0 0.45573cqw rgba(57, 255, 20, 0.44));
}

.loading-frog::before {
  content: "";
  position: absolute;
  inset: 5% 6% 8% 7%;
  z-index: 2;
  display: block;
  border-radius: 48%;
  background:
    radial-gradient(circle at 33% 20%, rgba(255, 255, 255, 0.54), transparent 15%),
    radial-gradient(circle at 57% 67%, rgba(255, 255, 255, 0.16), transparent 22%);
  mix-blend-mode: screen;
  opacity: 0.62;
  pointer-events: none;
}

.stage.is-loading-frog-visible .loading-frog,
.stage.is-site-open.is-site-loading .loading-frog {
  opacity: 1;
  visibility: visible;
  animation: loading-frog-breathe 2100ms ease-in-out infinite;
}

@keyframes loading-frog-breathe {
  0%,
  100% {
    transform: translate3d(-50%, -50%, 0) rotate(-7deg) scale(0.985);
  }

  50% {
    transform: translate3d(-50%, -50%, 0) rotate(-4deg) scale(1.035);
  }
}

@keyframes frog-waiting-pulse {
  0%,
  100% {
    transform: translate3d(calc(var(--frog-x, 0px) - 50%), calc(var(--frog-y, 0px) - 24%), 0) rotate(var(--frog-rotation, 0deg)) scale(0.96);
    filter:
      saturate(3.2)
      brightness(1.22)
      contrast(1.12)
      var(--frog-3d-shadow);
  }

  48% {
    transform: translate3d(calc(var(--frog-x, 0px) - 50%), calc(var(--frog-y, 0px) - 24%), 0) rotate(calc(var(--frog-rotation, 0deg) + 2deg)) scale(1.08);
    filter:
      saturate(4.1)
      brightness(1.54)
      contrast(1.18)
      var(--frog-3d-shadow)
      drop-shadow(0 0 0.78125cqw rgba(57, 255, 20, 0.42));
  }
}

.stage.is-frog-celebrating .frog-cursor {
  animation: frog-celebrate 1180ms cubic-bezier(0.22, 0.86, 0.26, 1) both;
}

@keyframes frog-loading-pulse {
  0%,
  100% {
    transform: translate3d(calc(var(--frog-x, 0px) - 50%), calc(var(--frog-y, 0px) - 24%), 0) rotate(var(--frog-rotation, 0deg)) scale(0.94);
    filter:
      saturate(3.05)
      brightness(1.08)
      contrast(1.1)
      var(--frog-3d-shadow);
  }

  48% {
    transform: translate3d(calc(var(--frog-x, 0px) - 50%), calc(var(--frog-y, 0px) - 24%), 0) rotate(var(--frog-rotation, 0deg)) scale(1.09);
    filter:
      saturate(4.2)
      brightness(1.56)
      contrast(1.2)
      var(--frog-3d-shadow)
      drop-shadow(0 0 0.78125cqw rgba(168, 211, 0, 0.58));
  }
}

@keyframes frog-celebrate {
  0% {
    transform: translate3d(calc(var(--frog-x, 0px) - 50%), calc(var(--frog-y, 0px) - 24%), 0) rotate(var(--frog-rotation, 0deg)) scale(1);
    filter: saturate(3.4) brightness(1.34) contrast(1.16) var(--frog-3d-shadow);
  }

  18% {
    transform: translate3d(calc(var(--frog-x, 0px) - 50%), calc(var(--frog-y, 0px) - 34%), 0) rotate(calc(var(--frog-rotation, 0deg) - 9deg)) scale(1.08, 0.94);
  }

  37% {
    transform: translate3d(calc(var(--frog-x, 0px) - 50%), calc(var(--frog-y, 0px) - 20%), 0) rotate(calc(var(--frog-rotation, 0deg) + 11deg)) scale(0.96, 1.07);
    filter: saturate(4.2) brightness(1.5) contrast(1.18) var(--frog-3d-shadow);
  }

  58% {
    transform: translate3d(calc(var(--frog-x, 0px) - 50%), calc(var(--frog-y, 0px) - 31%), 0) rotate(calc(var(--frog-rotation, 0deg) - 6deg)) scale(1.05, 0.97);
  }

  78% {
    transform: translate3d(calc(var(--frog-x, 0px) - 50%), calc(var(--frog-y, 0px) - 23%), 0) rotate(calc(var(--frog-rotation, 0deg) + 5deg)) scale(0.99, 1.03);
  }

  100% {
    transform: translate3d(calc(var(--frog-x, 0px) - 50%), calc(var(--frog-y, 0px) - 24%), 0) rotate(var(--frog-rotation, 0deg)) scale(1);
    filter: saturate(3.4) brightness(1.34) contrast(1.16) var(--frog-3d-shadow);
  }
}

.bubble-layer {
  position: absolute;
  inset: 0;
  z-index: 29;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.stage.is-image-loaded .bubble-layer {
  opacity: 1;
}

.frog-bubble {
  position: absolute;
  left: var(--bubble-x, 50%);
  top: var(--bubble-y, 50%);
  width: var(--bubble-size, 0.57292cqw);
  aspect-ratio: 1;
  border: 0.1237cqw solid rgba(196, 253, 255, 0.78);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  box-shadow:
    inset 0.08464cqw 0.08464cqw 0 rgba(255, 255, 255, 0.38),
    0 0 0.29297cqw rgba(154, 247, 255, 0.28);
  opacity: 0;
  transform: translate3d(-50%, -50%, 0) scale(0.35);
  animation: frog-bubble-rise var(--bubble-duration, 3200ms) ease-out both;
  backface-visibility: hidden;
}

@keyframes frog-bubble-rise {
  0% {
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) scale(0.35);
  }
  16% {
    opacity: 0.74;
  }
  72% {
    opacity: 0.62;
  }
  100% {
    opacity: 0;
    transform: translate3d(calc(-50% + var(--bubble-drift, 0px)), calc(-50% - var(--bubble-rise, 9.375cqw)), 0) scale(1);
  }
}

.water-plant-layer {
  position: absolute;
  inset: 0;
  z-index: 4;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1800ms cubic-bezier(0.18, 0.72, 0.2, 1);
}

.stage.is-site-open.is-site-ready .water-plant-layer {
  opacity: 0.82;
}

.stage.is-site-open.is-site-closing .water-plant-layer,
.stage:not(.is-site-open) .water-plant-layer {
  opacity: 0;
}

.water-plant {
  position: absolute;
  left: var(--plant-x, 50%);
  bottom: -0.8%;
  width: var(--plant-width, 4%);
  height: var(--plant-height, 28%);
  opacity: var(--plant-opacity, 0.56);
  transform: translate3d(-50%, 0, 0);
  filter:
    drop-shadow(0.06cqw 0.08cqw 0 rgba(0, 0, 0, 0.44))
    drop-shadow(0 0 0.22cqw rgba(154, 247, 255, 0.14));
  mix-blend-mode: multiply;
}

.water-plant__body {
  position: absolute;
  inset: 0;
  transform-origin: 50% 100%;
  transform: scaleY(0.04);
  animation: water-plant-grow var(--plant-grow, 6200ms) cubic-bezier(0.16, 0.72, 0.16, 1) var(--plant-grow-delay, 0ms) both;
}

.water-plant__body::before {
  content: "";
  position: absolute;
  left: 48%;
  bottom: 0;
  width: 9%;
  height: 100%;
  border-radius: 80% 80% 22% 22%;
  background:
    linear-gradient(90deg, rgba(6, 26, 20, 0.84), rgba(31, 112, 96, 0.68) 48%, rgba(4, 18, 15, 0.88));
  transform: translateX(-50%) rotate(-2deg);
  box-shadow: inset 0.04cqw 0 0 rgba(191, 255, 237, 0.16);
}

.water-plant__blade {
  position: absolute;
  left: var(--blade-x, 50%);
  bottom: 0;
  width: var(--blade-width, 16%);
  height: var(--blade-height, 86%);
  border-radius: 72% 72% 18% 18% / 92% 92% 12% 12%;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.26), rgba(107, 205, 180, 0.36) 42%, rgba(6, 42, 34, 0.72)),
    linear-gradient(180deg, rgba(154, 247, 255, 0.08), rgba(14, 76, 62, 0.5) 42%, rgba(0, 8, 7, 0.82));
  transform-origin: 50% 100%;
  transform: translateX(-50%) rotate(var(--blade-angle, 0deg));
  animation: water-plant-current var(--blade-duration, 7600ms) ease-in-out var(--blade-delay, 0ms) infinite alternate;
  will-change: transform;
}

@keyframes water-plant-grow {
  0% {
    opacity: 0;
    transform: scaleY(0.04) translateY(10%);
  }

  38% {
    opacity: 0.72;
  }

  100% {
    opacity: 1;
    transform: scaleY(1) translateY(0);
  }
}

@keyframes water-plant-current {
  0% {
    transform: translateX(-50%) rotate(calc(var(--blade-angle, 0deg) - var(--blade-sway, 7deg))) skewX(-2deg);
  }

  48% {
    transform: translateX(calc(-50% + 0.18cqw)) rotate(calc(var(--blade-angle, 0deg) + var(--blade-sway-mid, 2.4deg))) skewX(1.2deg);
  }

  100% {
    transform: translateX(calc(-50% - 0.12cqw)) rotate(calc(var(--blade-angle, 0deg) + var(--blade-sway, 7deg))) skewX(2.4deg);
  }
}

.seahorse-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1250ms ease;
}

.stage.is-image-loaded .seahorse-layer {
  opacity: 1;
}

.stage.is-site-open .seahorse-layer {
  opacity: 1;
}

.seahorse-swim-box {
  position: absolute;
  overflow: hidden;
  pointer-events: none;
  contain: layout paint;
}

.seahorse {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--swim-size, 5.20833cqw);
  aspect-ratio: var(--seahorse-ratio, 1 / 1);
  background: var(--seahorse-image) center / contain no-repeat;
  opacity: var(--seahorse-opacity, 0.84);
  filter:
    hue-rotate(-132deg)
    saturate(var(--seahorse-saturation, 1.5))
    brightness(var(--seahorse-brightness, 1))
    contrast(var(--seahorse-contrast, 1))
    drop-shadow(0.08cqw 0.1cqw 0 rgba(0, 0, 0, 0.46))
    drop-shadow(0 0 0.22cqw rgba(0, 231, 255, 0.22));
  transform: translate3d(calc(var(--swim-x-start, 0px) + var(--avoid-x, 0px)), calc(var(--swim-y-start, 50%) + var(--avoid-y, 0px)), 0) rotate(var(--swim-tilt-start, 0deg)) scale(var(--swim-flip, 1), var(--seahorse-depth-y, 1));
  transform-origin: 50% 42%;
  animation: seahorse-swim var(--swim-duration, 90000ms) linear var(--swim-delay, 0ms) both;
  backface-visibility: hidden;
  will-change: transform;
}

.seahorse-bubble {
  position: absolute;
  left: var(--bubble-x, 50%);
  top: var(--bubble-y, 50%);
  z-index: 2;
  width: var(--bubble-size, 4px);
  aspect-ratio: 1;
  border: max(1px, 0.04cqw) solid rgba(225, 255, 255, 0.72);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  box-shadow:
    inset 0.035cqw 0.035cqw 0 rgba(255, 255, 255, 0.4),
    0 0 0.22cqw rgba(154, 247, 255, 0.28);
  opacity: 0;
  transform: translate3d(-50%, -50%, 0) scale(0.2);
  animation: seahorse-bubble-rise var(--bubble-duration, 3600ms) ease-out var(--bubble-delay, 0ms) both;
  backface-visibility: hidden;
  will-change: transform, opacity;
}

@keyframes seahorse-bubble-rise {
  0% {
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) scale(0.2);
  }
  18% {
    opacity: var(--bubble-opacity, 0.42);
  }
  76% {
    opacity: var(--bubble-opacity-mid, 0.3);
  }
  100% {
    opacity: 0;
    transform: translate3d(calc(-50% + var(--bubble-drift, 0px)), calc(-50% - var(--bubble-rise, 42px)), 0) scale(1.2);
  }
}

@keyframes seahorse-swim {
  0% {
    transform: translate3d(calc(var(--swim-x-start, 0px) + var(--avoid-x, 0px)), calc(var(--swim-y-start, 50%) + var(--avoid-y, 0px)), 0) rotate(var(--swim-tilt-start, 0deg)) scale(var(--swim-flip, 1), var(--seahorse-depth-y, 1));
  }
  25% {
    transform: translate3d(calc(var(--swim-x-25, 25%) + var(--avoid-x, 0px)), calc(var(--swim-y-25, 50%) + var(--avoid-y, 0px)), 0) rotate(var(--swim-tilt-25, 0deg)) scale(var(--swim-flip, 1), var(--seahorse-depth-y, 1));
  }
  50% {
    transform: translate3d(calc(var(--swim-x-mid, 50%) + var(--avoid-x, 0px)), calc(var(--swim-y-mid, 50%) + var(--avoid-y, 0px)), 0) rotate(var(--swim-tilt-mid, 0deg)) scale(var(--swim-flip, 1), var(--seahorse-depth-y, 1));
  }
  75% {
    transform: translate3d(calc(var(--swim-x-75, 75%) + var(--avoid-x, 0px)), calc(var(--swim-y-75, 50%) + var(--avoid-y, 0px)), 0) rotate(var(--swim-tilt-75, 0deg)) scale(var(--swim-flip, 1), var(--seahorse-depth-y, 1));
  }
  100% {
    transform: translate3d(calc(var(--swim-x-end, 100%) + var(--avoid-x, 0px)), calc(var(--swim-y-end, 50%) + var(--avoid-y, 0px)), 0) rotate(var(--swim-tilt-end, 0deg)) scale(var(--swim-flip, 1), var(--seahorse-depth-y, 1));
  }
}

@media (pointer: fine) {
  .stage.has-frog-cursor,
  .stage.has-frog-cursor * {
    cursor: none;
  }

  .stage.has-fly-cursor:not(.is-frog-control-active),
  .stage.has-fly-cursor:not(.is-frog-control-active) * {
    cursor: none;
  }

  .stage.is-frog-control-active.has-frog-cursor,
  .stage.is-frog-control-active.has-frog-cursor * {
    cursor: none;
  }
}

.neon-layer span:nth-child(1),
.project-hotspots a:nth-child(1) {
  left: 0.39063%;
  top: 0.58594%;
  width: 19.92188%;
  height: 49.41406%;
}

.neon-layer span:nth-child(2),
.project-hotspots a:nth-child(2) {
  left: 20.70313%;
  top: 0.58594%;
  width: 18.48958%;
  height: 49.41406%;
}

.neon-layer span:nth-child(3),
.project-hotspots a:nth-child(3) {
  left: 39.58333%;
  top: 0.58594%;
  width: 18.61979%;
  height: 49.41406%;
}

.neon-layer span:nth-child(4),
.project-hotspots a:nth-child(4) {
  left: 58.59375%;
  top: 0.58594%;
  width: 21.28906%;
  height: 49.41406%;
}

.neon-layer span:nth-child(5),
.project-hotspots a:nth-child(5) {
  left: 80.27344%;
  top: 0.58594%;
  width: 19.33594%;
  height: 49.41406%;
}

.neon-layer span:nth-child(6),
.project-hotspots a:nth-child(6) {
  left: 0.39063%;
  top: 50.58594%;
  width: 19.92188%;
  height: 48.82813%;
}

.neon-layer span:nth-child(7),
.project-hotspots a:nth-child(7) {
  left: 20.70313%;
  top: 50.58594%;
  width: 18.48958%;
  height: 48.82813%;
}

.neon-layer span:nth-child(8),
.project-hotspots a:nth-child(8) {
  left: 39.58333%;
  top: 50.58594%;
  width: 18.61979%;
  height: 48.82813%;
}

.neon-layer span:nth-child(9),
.project-hotspots a:nth-child(9) {
  left: 58.59375%;
  top: 50.58594%;
  width: 21.28906%;
  height: 48.82813%;
}

.neon-layer span:nth-child(10),
.project-hotspots a:nth-child(10) {
  left: 80.27344%;
  top: 50.58594%;
  width: 19.33594%;
  height: 48.82813%;
}

.title-layer {
  --main-title-angle: var(--subpage-type-angle);
  --main-title-offset-y: 2.2cqw;
  --title-shadow:
    0.03em 0.04em 0.022em rgba(0, 0, 0, 0.44),
    -0.006em -0.007em 0.01em rgba(255, 220, 247, 0.1);
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  grid-template-columns: 1fr;
  align-content: center;
  justify-items: center;
  padding: 3.3% 2.7%;
  pointer-events: none;
  color: var(--paper);
  font-family: var(--display-font);
  font-weight: 900;
  font-stretch: condensed;
  text-transform: uppercase;
  transform: perspective(49.47917cqw) rotateX(5deg) rotateZ(var(--main-title-angle)) skewX(-8deg) translateY(var(--main-title-offset-y));
  transform-origin: center;
  text-align: center;
  text-shadow: var(--title-shadow);
  transform-style: preserve-3d;
  opacity: 0;
  filter: brightness(1) saturate(1);
  transition:
    opacity 1300ms cubic-bezier(0.18, 0.72, 0.2, 1),
    filter 1300ms cubic-bezier(0.18, 0.72, 0.2, 1);
}

.stage.is-title-ready .title-layer {
  opacity: 1;
}

.stage.is-title-ready.is-frog-idle:not(.is-frog-control-active):not(.is-frog-catching):not(.is-showing-site):not(.is-site-open) .title-layer {
  opacity: 0.36;
  filter: brightness(0.54) saturate(0.66);
}

.stage.is-title-ready.is-frog-control-active .title-layer {
  opacity: 1;
  filter: brightness(1.04) saturate(1.08);
}

.stage.is-title-home-pulse .title-layer {
  animation: title-home-pulse 1650ms cubic-bezier(0.15, 0.7, 0.16, 1) both;
}

.stage.is-title-loaded-pulse .title-layer {
  animation: title-loaded-pulse 1550ms cubic-bezier(0.14, 0.72, 0.18, 1) both;
}

.stage.is-showing-site .title-layer,
.stage.is-site-open .title-layer {
  opacity: 0;
  visibility: hidden;
  transition: none;
}

.title-layer p {
  margin: 0 0 -0.2em;
  font-size: 11.78385cqw;
  font-weight: 900;
  line-height: 0.7;
  letter-spacing: 0.012em;
  text-shadow: var(--title-shadow);
  -webkit-text-stroke: 0.003em rgba(7, 3, 2, 0.18);
  paint-order: fill stroke;
}

h1 {
  display: block;
  margin: 0;
  font-size: 12.82552cqw;
  font-weight: 900;
  line-height: 0.7;
  letter-spacing: 0.012em;
  white-space: nowrap;
  text-shadow: var(--title-shadow);
  -webkit-text-stroke: 0.003em rgba(7, 3, 2, 0.18);
  paint-order: fill stroke;
}

.title-line {
  display: block;
  overflow: visible;
  line-height: 0.7;
}

.title-line + .title-line {
  margin-top: -0.2em;
}

.letter {
  --glyph-y: 0px;
  --glyph-scale-y: 1;
  display: inline-block;
  line-height: 0.9;
  padding-top: 0.018em;
  margin-top: -0.018em;
  text-shadow: var(--title-shadow);
  transform-origin: center;
  transform: translate3d(var(--push-x, 0), calc(var(--push-y, 0) + var(--glyph-y)), 0) rotate(var(--push-r, 0deg)) scaleY(var(--glyph-scale-y));
  backface-visibility: hidden;
  will-change: transform;
}

.title-line:first-child .letter:first-child,
.title-line:nth-child(3) .letter:first-child {
  --glyph-y: -0.012em;
  --glyph-scale-y: 1.012;
  padding-top: 0.034em;
  margin-top: -0.034em;
}

.stage.is-image-loaded .letter {
  color: var(--seahorse-pink);
  background: none;
  -webkit-text-fill-color: var(--seahorse-pink);
}

.stage:not(.is-image-loaded) .title-layer p,
.stage:not(.is-image-loaded) .title-layer h1,
.stage:not(.is-image-loaded) .letter {
  color: transparent;
}

.stage:not(.is-image-loaded) .letter {
  background:
    linear-gradient(
      0deg,
      var(--title-load-fill) 0%,
      var(--title-load-fill) max(0%, calc(var(--title-load-progress, 0%) - 4.8%)),
      var(--title-load-highlight) calc(var(--title-load-progress, 0%) + var(--title-wave, 0%)),
      var(--title-load-deep) min(100%, calc(var(--title-load-progress, 0%) + 8.4%)),
      var(--title-load-deep) 100%
    );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@keyframes title-home-pulse {
  0% {
    filter: brightness(1) saturate(1);
    transform: perspective(49.47917cqw) rotateX(5deg) rotateZ(var(--main-title-angle)) skewX(-8deg) translateY(var(--main-title-offset-y)) scale(1);
    text-shadow: var(--title-shadow);
  }

  28% {
    filter: brightness(1.2) saturate(1.28);
    transform: perspective(49.47917cqw) rotateX(5deg) rotateZ(var(--main-title-angle)) skewX(-8deg) translateY(calc(var(--main-title-offset-y) - 0.18cqw)) scale(1.014, 1.024);
    text-shadow: 0.095em 0.12em 0.045em rgba(0, 0, 0, 0.9);
  }

  54% {
    filter: brightness(1.08) saturate(1.14);
    transform: perspective(49.47917cqw) rotateX(5deg) rotateZ(var(--main-title-angle)) skewX(-8deg) translateY(calc(var(--main-title-offset-y) + 0.07cqw)) scale(0.998, 0.994);
  }

  76% {
    filter: brightness(1.13) saturate(1.18);
    transform: perspective(49.47917cqw) rotateX(5deg) rotateZ(var(--main-title-angle)) skewX(-8deg) translateY(calc(var(--main-title-offset-y) - 0.06cqw)) scale(1.006, 1.011);
  }

  100% {
    filter: brightness(1) saturate(1);
    transform: perspective(49.47917cqw) rotateX(5deg) rotateZ(var(--main-title-angle)) skewX(-8deg) translateY(var(--main-title-offset-y)) scale(1);
    text-shadow: var(--title-shadow);
  }
}

@keyframes title-loaded-pulse {
  0% {
    filter: brightness(1) saturate(1);
    transform: perspective(49.47917cqw) rotateX(5deg) rotateZ(var(--main-title-angle)) skewX(-8deg) translateY(var(--main-title-offset-y)) scale(1);
    text-shadow: var(--title-shadow);
  }

  34% {
    filter: brightness(1.18) saturate(1.22);
    transform: perspective(49.47917cqw) rotateX(5deg) rotateZ(var(--main-title-angle)) skewX(-8deg) translateY(var(--main-title-offset-y)) scale(1.018, 1.026);
    text-shadow:
      0.095em 0.12em 0.045em rgba(0, 0, 0, 0.92),
      0 0 0.12em rgba(154, 247, 255, 0.08);
  }

  66% {
    filter: brightness(1.06) saturate(1.1);
    transform: perspective(49.47917cqw) rotateX(5deg) rotateZ(var(--main-title-angle)) skewX(-8deg) translateY(var(--main-title-offset-y)) scale(0.998, 0.996);
  }

  100% {
    filter: brightness(1) saturate(1);
    transform: perspective(49.47917cqw) rotateX(5deg) rotateZ(var(--main-title-angle)) skewX(-8deg) translateY(var(--main-title-offset-y)) scale(1);
    text-shadow: var(--title-shadow);
  }
}

.made-layer {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 1.10677cqw;
  padding: 4%;
  color: var(--seahorse-pink);
  font-family:
    Impact, Haettenschweiler, "Arial Black", "Franklin Gothic Heavy", sans-serif;
  pointer-events: none;
  opacity: 0;
  text-align: center;
  text-transform: uppercase;
  filter: brightness(1) saturate(1);
  transform: perspective(49.47917cqw) rotateX(5deg) rotateZ(var(--subpage-type-angle)) skewX(-8deg) translateY(34cqw);
  transition:
    opacity var(--subpage-title-enter-duration) cubic-bezier(0.18, 0.72, 0.2, 1),
    filter 1300ms cubic-bezier(0.18, 0.72, 0.2, 1),
    transform var(--subpage-title-enter-duration) cubic-bezier(0.12, 0.74, 0.16, 1);
  text-shadow: var(--subpage-type-shadow);
}

.made-layer span {
  padding: 0;
  border: 0;
  background: none;
  font-size: 2.66927cqw;
  font-weight: 900;
  line-height: 0.86;
  letter-spacing: 0.025em;
  -webkit-text-stroke: 0.018em #070302;
  paint-order: stroke fill;
}

.made-layer .made-by {
  font-size: 2.34375cqw;
}

.made-layer .made-cleaner-link {
  appearance: none;
  position: relative;
  display: block;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  font-size: 5.79427cqw;
  font-weight: 900;
  line-height: 0.84;
  letter-spacing: 0.02em;
  font-family: inherit;
  text-decoration: none;
  -webkit-text-stroke: 0.018em #070302;
  paint-order: stroke fill;
  opacity: 1;
  pointer-events: none;
  text-shadow: var(--subpage-type-shadow);
  text-transform: uppercase;
  transform: translate3d(0, 0, 0) scale(1);
  transform-origin: center;
  transition:
    color 520ms ease,
    filter 520ms ease,
    text-shadow 640ms ease,
    transform 780ms cubic-bezier(0.16, 0.74, 0.18, 1);
}

.made-layer .made-cleaner-link::before {
  content: "";
  position: absolute;
  inset: -0.42em -0.5em;
  display: block;
}

.stage.is-site-open.is-site-ready .made-cleaner-link {
  pointer-events: none;
}

.stage.is-site-open.is-site-ready.is-back-magnet .made-cleaner-link {
  z-index: 10;
  filter: brightness(1.18) saturate(1.16);
  text-shadow:
    var(--subpage-type-shadow),
    0 0 0.14em rgba(255, 0, 180, 0.18);
  transform: translate3d(0, 0, 0) scale(1.045);
}

.stage.is-back-hit .made-cleaner-link,
.stage.is-back-hit .made-cleaner-link:hover,
.stage.is-back-hit .made-cleaner-link:focus-visible {
  animation: target-hit-flicker 1500ms steps(1, end) both;
  color: var(--frog-green);
  pointer-events: none;
  text-shadow: 0.09em 0.11em 0.04em rgba(0, 0, 0, 0.92);
}

.stage.is-site-open.is-site-ready.is-site-closing .made-cleaner-link,
.stage.is-site-open.is-site-ready.is-site-closing .made-cleaner-link:hover,
.stage.is-site-open.is-site-ready.is-site-closing .made-cleaner-link:focus-visible,
.stage.is-site-open.is-site-ready.is-site-closing.is-back-magnet .made-cleaner-link,
.stage.is-site-open.is-site-ready.is-site-closing.is-back-magnet .made-cleaner-link:hover,
.stage.is-site-open.is-site-ready.is-site-closing.is-back-magnet .made-cleaner-link:focus-visible,
.stage.is-back-hit.is-site-closing .made-cleaner-link,
.stage.is-back-hit.is-site-closing .made-cleaner-link:hover,
.stage.is-back-hit.is-site-closing .made-cleaner-link:focus-visible {
  pointer-events: none;
  animation: none;
}

.stage.is-site-open.is-site-ready .made-layer {
  opacity: 1;
  transform: perspective(49.47917cqw) rotateX(5deg) rotateZ(var(--subpage-type-angle)) skewX(-8deg) translateY(6.96615cqw);
}

.stage.is-site-open.is-site-ready.is-site-title-entering .made-layer {
  opacity: 1;
  pointer-events: none;
  transform: perspective(49.47917cqw) rotateX(5deg) rotateZ(var(--subpage-type-angle)) skewX(-8deg) translateY(6.96615cqw);
  transition:
    opacity var(--subpage-title-enter-duration) cubic-bezier(0.18, 0.72, 0.2, 1),
    filter 1300ms cubic-bezier(0.18, 0.72, 0.2, 1),
    transform var(--subpage-title-enter-duration) cubic-bezier(0.12, 0.74, 0.16, 1);
}

.stage.is-site-open.is-site-ready.is-site-title-entering .made-cleaner-link {
  pointer-events: none;
}

.stage.is-site-open.is-site-closing .made-layer {
  opacity: 0;
  pointer-events: none;
  transform: perspective(49.47917cqw) rotateX(5deg) rotateZ(var(--subpage-type-angle)) skewX(-8deg) translateY(6.96615cqw);
  transition: opacity 900ms cubic-bezier(0.18, 0.72, 0.2, 1);
}

.help-link {
  position: absolute;
  top: var(--help-top);
  right: var(--help-right);
  left: auto;
  z-index: 8;
  display: grid;
  grid-auto-rows: min-content;
  row-gap: 0;
  height: auto;
  width: var(--help-width);
  place-items: center;
  border: 0;
  border-radius: 0;
  padding: 0;
  color: var(--help-seahorse-blue);
  background: transparent;
  box-shadow: none;
  font: 900 3.0599cqw / 0.82 Impact, Haettenschweiler, "Arial Black", sans-serif;
  letter-spacing: 0.02em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  text-shadow: var(--link-text-shadow);
  -webkit-text-stroke: 0.018em #070302;
  paint-order: stroke fill;
  opacity: 0;
  pointer-events: none;
  transform: perspective(49.47917cqw) rotateX(5deg) rotateZ(var(--subpage-type-angle)) skewX(-8deg);
  transform-origin: center;
  transition:
    opacity 900ms ease,
    color 260ms ease,
    transform 980ms cubic-bezier(0.12, 0.68, 0.14, 1),
    text-shadow 520ms ease;
}

.help-link span:not(.help-perch-fly) {
  display: block;
  line-height: 0.78;
}

.help-link .help-line {
  position: relative;
  width: max-content;
  justify-self: center;
}

.help-link .help-perch-fly {
  top: -0.44em;
  right: -0.1em;
  bottom: auto;
  width: 0.62em;
}

.stage.is-help-fly-away .help-link .help-perch-fly {
  opacity: 0.9;
  transform:
    translate3d(var(--help-fly-x, 0px), var(--help-fly-y, -1em), 0)
    rotate(var(--help-fly-rot, -42deg))
    scale(1.04);
  filter:
    drop-shadow(0.055em 0.06em 0 rgba(0, 0, 0, 0.72))
    drop-shadow(0 0 0.18em rgba(255, 121, 0, 0.48));
}

.stage.is-help-fly-away .help-link .help-perch-fly__wing {
  opacity: 0.96;
  animation-duration: 92ms;
}

.stage.is-image-loaded:not(.is-site-open) .help-link {
  opacity: 0;
  pointer-events: none;
  filter: brightness(0.62) saturate(0.7);
}

.stage.is-image-loaded.is-help-rollover:not(.is-site-open) .help-link,
.stage.is-image-loaded.is-help-rollover:not(.is-site-open) .help-link:hover,
.stage.is-image-loaded.is-help-rollover:not(.is-site-open) .help-link:focus-visible,
.stage.is-image-loaded.is-help-magnet:not(.is-site-open) .help-link,
.stage.is-image-loaded.is-help-magnet:not(.is-site-open) .help-link:hover,
.stage.is-image-loaded.is-help-magnet:not(.is-site-open) .help-link:focus-visible {
  color: var(--help-seahorse-blue);
  background: transparent;
  outline: 0;
  opacity: 1;
  pointer-events: auto;
  filter: brightness(1.14) saturate(1.2);
  transform: perspective(49.47917cqw) rotateX(5deg) rotateZ(var(--subpage-type-angle)) skewX(-8deg) scale(1.1);
  box-shadow: none;
}

.stage.is-image-loaded.is-help-magnet:not(.is-site-open) .help-link,
.stage.is-image-loaded.is-help-magnet:not(.is-site-open) .help-link:hover,
.stage.is-image-loaded.is-help-magnet:not(.is-site-open) .help-link:focus-visible {
  transform: translate3d(calc(var(--help-x, 0px) - var(--help-home-x, 0px)), calc(var(--help-y, 0px) - var(--help-home-y, 0px)), 0) perspective(49.47917cqw) rotateX(5deg) rotateZ(var(--subpage-type-angle)) skewX(-8deg) scale(1.04);
  transition:
    opacity 420ms ease,
    color 520ms ease,
    filter 520ms ease,
    transform 980ms cubic-bezier(0.16, 0.84, 0.18, 1),
    text-shadow 520ms ease;
}

.stage.is-site-open .help-link {
  opacity: 0;
  pointer-events: none;
}

.stage.is-help-rollover,
.stage.is-help-magnet {
  cursor: pointer;
}

.stage.is-help-magnet .help-link,
.stage.is-help-magnet .help-link:hover,
.stage.is-help-magnet .help-link:focus-visible {
  top: var(--help-top);
  right: var(--help-right);
  left: auto;
  z-index: 10;
  color: var(--help-seahorse-blue);
  background: transparent;
  box-shadow: none;
  outline: 0;
  opacity: 1;
  pointer-events: auto;
  filter: brightness(1.14) saturate(1.2);
  transition:
    color 120ms ease,
    text-shadow 120ms ease;
}

.site-hover-button {
  appearance: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 8;
  display: grid;
  min-width: 0;
  width: max-content;
  height: auto;
  place-items: center;
  border: 0;
  border-radius: 0;
  padding: 0;
  color: var(--baldiga-orange);
  background: transparent;
  box-shadow: none;
  font: 900 3.51563cqw / 0.76 Impact, Haettenschweiler, "Arial Black", sans-serif;
  letter-spacing: 0.02em;
  opacity: 0;
  pointer-events: none;
  text-transform: uppercase;
  text-shadow: var(--link-text-shadow);
  -webkit-text-stroke: 0.018em #070302;
  paint-order: stroke fill;
  cursor: pointer;
  transform: translate3d(calc(var(--site-label-x, 50%) - 50%), calc(var(--site-label-y, 50%) - 40%), 0) rotate(-4deg) scale(0.86);
  transition:
    opacity 420ms ease,
    color 520ms ease,
    transform 980ms cubic-bezier(0.16, 0.84, 0.18, 1),
    text-shadow 520ms ease;
  will-change: opacity, transform;
}

.site-hover-button span {
  display: block;
}

.stage.is-site-label-visible:not(.is-site-open) .site-hover-button {
  opacity: 1;
  pointer-events: auto;
  background: transparent;
  box-shadow: none;
  transform: translate3d(calc(var(--site-label-x, 50%) - 50%), calc(var(--site-label-y, 50%) - 50%), 0) rotate(-4deg) scale(1);
}

.help-link::before,
.site-hover-button::before,
.external-link::before,
.back-button::before {
  content: "";
  position: absolute;
  inset: -2.34375cqw;
  display: block;
}

.site-hover-button::before {
  inset: -2.08333cqw;
}

.back-button::before {
  inset: -4.42708cqw;
}

.external-link::before {
  inset: -3.38542cqw -4.81771cqw;
}

.back-button,
.external-link {
  position: absolute;
  top: 11.45833cqw;
  z-index: 8;
  display: grid;
  height: 3.45052cqw;
  place-items: center;
  border: 0.19531cqw solid #050504;
  border-radius: 0;
  padding: 0;
  color: #050504;
  background: var(--seahorse-pink);
  box-shadow:
    0.1888cqw 0.1888cqw 0 #050504,
    0.35156cqw 0.35156cqw 0 rgba(0, 0, 0, 0.42);
  font: 900 2.47396cqw / 0.8 Impact, Haettenschweiler, "Arial Black", sans-serif;
  letter-spacing: 0;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: rotate(-1.5deg) translateY(25cqw);
  transition:
    opacity 3600ms cubic-bezier(0.18, 0.72, 0.2, 1) 900ms,
    transform 6800ms cubic-bezier(0.1, 0.72, 0.16, 1);
}

.back-button {
  top: 10.35156cqw;
  right: 7.94271cqw;
  width: 4.6875cqw;
  height: 4.6875cqw;
  transform: translate3d(0, 25cqw, 0) perspective(49.47917cqw) rotateX(5deg) rotateZ(-10deg) skewX(-8deg);
}

.external-link {
  top: 22.78646cqw;
  right: auto;
  left: 50%;
  width: 38.02083cqw;
  height: 4.88281cqw;
  min-width: 0;
  padding: 0 2.21354cqw;
  background: var(--link-blue);
  box-shadow:
    0.1888cqw 0.1888cqw 0 #050504,
    0.35156cqw 0.35156cqw 0 rgba(0, 0, 0, 0.42),
    0 0 1.04167cqw rgba(154, 247, 255, 0.46);
  text-decoration: none;
  font-size: 1.88802cqw;
  transform:
    translate3d(0, 25cqw, 0)
    translateX(-50%)
    perspective(49.47917cqw)
    rotateX(5deg)
    rotateZ(var(--subpage-type-angle))
    skewX(-8deg);
}

.back-button:focus-visible {
  background: var(--link-blue);
  outline: 0;
  transform: rotate(7deg) scale(1.14);
  box-shadow:
    0.29297cqw 0.29297cqw 0 #050504,
    0.54036cqw 0.54036cqw 0 rgba(0, 0, 0, 0.42),
    0 0 1.23698cqw rgba(154, 247, 255, 0.5);
}

.stage.is-site-open.is-site-ready .back-button,
.stage.is-site-open.is-site-ready .external-link {
  opacity: 1;
  pointer-events: none;
  transform: rotate(4deg) translateY(0);
}

.stage.is-site-open.is-site-ready.is-back-magnet .back-button,
.stage.is-site-open.is-site-ready.is-back-magnet .back-button:hover,
.stage.is-site-open.is-site-ready.is-back-magnet .back-button:focus-visible {
  z-index: 11;
  background: var(--seahorse-pink);
  transform: translate3d(calc(var(--back-x, 0px) - var(--back-home-x, 0px)), calc(var(--back-y, 0px) - var(--back-home-y, 0px)), 0) rotate(5deg) scale(1.025);
  transition:
    opacity 180ms ease,
    background 220ms ease,
    box-shadow 360ms ease;
}

.external-link,
.stage.is-site-open.is-site-ready .external-link,
.stage.is-site-open.is-site-ready.is-external-magnet .external-link {
  width: auto;
  min-width: 0;
  height: auto;
  border: 0;
  padding: 0;
  color: var(--baldiga-orange);
  background: transparent;
  box-shadow: none;
  font:
    900 8.85417cqw / 0.68 Impact,
    Haettenschweiler,
    "Arial Black",
    "Franklin Gothic Heavy",
    sans-serif;
  letter-spacing: 0.012em;
  text-decoration: none;
  text-shadow: var(--subpage-type-shadow);
  text-transform: none;
  -webkit-text-stroke: 0.018em #070302;
  paint-order: stroke fill;
  transition:
    opacity var(--subpage-title-enter-duration) cubic-bezier(0.18, 0.72, 0.2, 1),
    text-shadow 760ms ease,
    filter 520ms ease,
    color 520ms ease,
    transform var(--subpage-title-enter-duration) cubic-bezier(0.12, 0.74, 0.16, 1);
}

.stage.is-site-open.is-site-ready .external-link {
  transform:
    translate3d(0, 0, 0)
    translateX(-50%)
    perspective(49.47917cqw)
    rotateX(5deg)
    rotateZ(var(--subpage-type-angle))
    skewX(-8deg);
}

.stage.is-site-open.is-site-ready.is-external-magnet .external-link {
  z-index: 10;
  transform:
    translate3d(0, 0, 0)
    translateX(-50%)
    perspective(49.47917cqw)
    rotateX(5deg)
    rotateZ(var(--subpage-type-angle))
    skewX(-8deg)
    scale(1.045);
}

.stage.is-site-open.is-site-ready.is-site-title-entering .external-link,
.stage.is-site-open.is-site-ready.is-site-title-entering.is-external-magnet .external-link {
  opacity: 1;
  pointer-events: none;
  transform:
    translate3d(0, 0, 0)
    translateX(-50%)
    perspective(49.47917cqw)
    rotateX(5deg)
    rotateZ(var(--subpage-type-angle))
    skewX(-8deg);
  transition:
    opacity var(--subpage-title-enter-duration) cubic-bezier(0.18, 0.72, 0.2, 1),
    transform var(--subpage-title-enter-duration) cubic-bezier(0.12, 0.74, 0.16, 1);
}

.stage.is-site-open.is-site-ready.is-external-magnet .external-link {
  filter: brightness(1.22) saturate(1.2);
  text-shadow:
    var(--subpage-type-shadow),
    0 0 0.14em var(--baldiga-orange-glow);
}

.stage.is-site-open.is-site-ready .back-button,
.stage.is-site-open.is-site-ready .back-button:hover,
.stage.is-site-open.is-site-ready .back-button:focus-visible,
.stage.is-site-open.is-site-ready.is-back-magnet .back-button,
.stage.is-site-open.is-site-ready.is-back-magnet .back-button:hover,
.stage.is-site-open.is-site-ready.is-back-magnet .back-button:focus-visible {
  width: auto;
  min-width: 0;
  height: auto;
  border: 0;
  padding: 0;
  color: var(--back-button-pink);
  background: transparent;
  box-shadow: none;
  font:
    900 4.81771cqw / 0.84 Impact,
    Haettenschweiler,
    "Arial Black",
    "Franklin Gothic Heavy",
    sans-serif;
  letter-spacing: 0.02em;
  text-shadow: var(--main-type-shadow);
  -webkit-text-stroke: 0.018em #070302;
  paint-order: stroke fill;
  transition:
    opacity 3600ms cubic-bezier(0.18, 0.72, 0.2, 1) 900ms,
    transform 6800ms cubic-bezier(0.1, 0.72, 0.16, 1),
    text-shadow 760ms ease,
    color 520ms ease;
}

.stage.is-site-open.is-site-ready .back-button {
  transform: perspective(49.47917cqw) rotateX(5deg) rotateZ(-10deg) skewX(-8deg);
}

.stage.is-site-open.is-site-ready .back-button:focus-visible {
  outline: 0;
  transform: perspective(49.47917cqw) rotateX(5deg) rotateZ(-10deg) skewX(-8deg) scale(1.095);
}

.stage.is-site-open.is-site-ready.is-back-magnet .back-button,
.stage.is-site-open.is-site-ready.is-back-magnet .back-button:hover,
.stage.is-site-open.is-site-ready.is-back-magnet .back-button:focus-visible {
  transform:
    translate3d(calc(var(--back-x, 0px) - var(--back-home-x, 0px)), calc(var(--back-y, 0px) - var(--back-home-y, 0px)), 0)
    perspective(49.47917cqw)
    rotateX(5deg)
    rotateZ(-10deg)
    skewX(-8deg)
    scale(1.065);
}

.stage.is-site-open.is-site-ready:not(.is-site-title-entering) .external-link,
.stage.is-site-open.is-site-ready:not(.is-site-title-entering) .back-button {
  transition:
    opacity 360ms ease,
    transform 620ms cubic-bezier(0.16, 0.74, 0.18, 1),
    text-shadow 520ms ease,
    filter 520ms ease,
    color 520ms ease;
}

.stage.is-site-open.is-site-ready:not(.is-site-title-entering) .made-layer,
.stage.is-site-open.is-site-ready:not(.is-site-title-entering) .external-link {
  transition:
    opacity 3600ms cubic-bezier(0.18, 0.72, 0.2, 1),
    filter 2600ms cubic-bezier(0.18, 0.72, 0.2, 1),
    transform 620ms cubic-bezier(0.16, 0.74, 0.18, 1),
    text-shadow 520ms ease,
    color 520ms ease;
}

.stage.is-site-open.is-site-ready.is-subpage-text-dimmed:not(.is-site-title-entering):not(.is-site-closing):not(.is-frog-control-active):not(.is-back-hit) .made-layer,
.stage.is-site-open.is-site-ready.is-subpage-text-dimmed:not(.is-site-title-entering):not(.is-site-closing):not(.is-frog-control-active):not(.is-back-hit) .external-link {
  opacity: 0;
  filter: brightness(0.48) saturate(0.58);
}

.stage.is-site-open.is-site-ready .back-button:focus-visible {
  text-shadow:
    var(--main-type-shadow),
    0 0 0.22em rgba(255, 0, 180, 0.34);
}

.stage.is-help-hit .help-link {
  animation: help-target-hit-flicker 1500ms steps(1, end) both;
  color: var(--help-seahorse-blue);
  opacity: 0.42;
  pointer-events: none;
  text-shadow:
    0.09em 0.11em 0.04em rgba(0, 0, 0, 0.92),
    0 0 0.2em var(--help-seahorse-blue-glow);
}

.stage.is-back-hit .back-button,
.stage.is-back-hit .back-button:hover,
.stage.is-back-hit .back-button:focus-visible {
  animation: target-hit-flicker 1500ms steps(1, end) both;
  color: var(--frog-green);
  opacity: 1;
  pointer-events: none;
  text-shadow: 0.09em 0.11em 0.04em rgba(0, 0, 0, 0.92);
}

@keyframes help-target-hit-flicker {
  0%,
  100% {
    color: var(--help-seahorse-blue);
    opacity: 0.34;
    filter: brightness(1.08) saturate(1.24);
    text-shadow:
      0.09em 0.11em 0.04em rgba(0, 0, 0, 0.92),
      0 0 0.18em var(--help-seahorse-blue-glow);
  }

  8%,
  14%,
  27%,
  45%,
  64%,
  81% {
    color: var(--help-seahorse-blue);
    opacity: 0.52;
    filter: brightness(1.48) saturate(1.7);
    text-shadow:
      0.1em 0.12em 0.05em rgba(0, 0, 0, 0.94),
      0 0 0.24em rgba(111, 203, 212, 0.42);
  }

  11%,
  20%,
  34%,
  52%,
  72%,
  90% {
    color: var(--help-seahorse-blue);
    opacity: 0.42;
    filter: brightness(0.9) saturate(1.05);
    text-shadow: 0.075em 0.095em 0.035em rgba(0, 0, 0, 0.86);
  }
}

@keyframes target-hit-flicker {
  0%,
  100% {
    color: var(--seahorse-pink);
    opacity: 1;
    filter: brightness(1.16) saturate(1.45);
    text-shadow: 0.09em 0.11em 0.04em rgba(0, 0, 0, 0.92);
  }

  8%,
  14%,
  27%,
  45%,
  64%,
  81% {
    color: var(--frog-green);
    opacity: 1;
    filter: brightness(1.45) saturate(1.8);
    text-shadow: 0.1em 0.12em 0.05em rgba(0, 0, 0, 0.94);
  }

  11%,
  20%,
  34%,
  52%,
  72%,
  90% {
    color: var(--seahorse-pink);
    opacity: 0.86;
    filter: brightness(0.92) saturate(1.15);
    text-shadow: 0.075em 0.095em 0.035em rgba(0, 0, 0, 0.86);
  }
}

.stage.is-site-open.is-site-ready.is-site-closing .external-link,
.stage.is-site-open.is-site-ready.is-site-closing .external-link:focus-visible,
.stage.is-site-open.is-site-ready.is-site-closing.is-external-magnet .external-link,
.stage.is-site-open.is-site-ready.is-site-closing.is-external-magnet .external-link:focus-visible {
  opacity: 0;
  pointer-events: none;
  transform:
    translate3d(0, 0, 0)
    translateX(-50%)
    perspective(49.47917cqw)
    rotateX(5deg)
    rotateZ(var(--subpage-type-angle))
    skewX(-8deg);
  transition: opacity 900ms cubic-bezier(0.18, 0.72, 0.2, 1);
}

.stage.is-site-open.is-site-ready.is-site-closing .back-button,
.stage.is-site-open.is-site-ready.is-site-closing .back-button:not(:hover):not(:focus-visible),
.stage.is-site-open.is-site-ready.is-site-closing .back-button:hover,
.stage.is-site-open.is-site-ready.is-site-closing .back-button:focus-visible,
.stage.is-site-open.is-site-ready.is-site-closing.is-back-magnet .back-button,
.stage.is-site-open.is-site-ready.is-site-closing.is-back-magnet .back-button:hover,
.stage.is-site-open.is-site-ready.is-site-closing.is-back-magnet .back-button:focus-visible,
.stage.is-back-hit.is-site-closing .back-button,
.stage.is-back-hit.is-site-closing .back-button:hover,
.stage.is-back-hit.is-site-closing .back-button:focus-visible {
  opacity: 0;
  pointer-events: none;
  animation: none;
  transform: perspective(49.47917cqw) rotateX(5deg) rotateZ(-10deg) skewX(-8deg);
  transition: opacity 900ms cubic-bezier(0.18, 0.72, 0.2, 1);
}

.project-hotspots {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
}

.project-hotspots a {
  position: absolute;
  display: block;
  cursor: default;
  outline: none;
  pointer-events: none;
}

.project-hotspots a[data-site] {
  cursor: pointer;
}

.stage.is-site-open .project-hotspots {
  pointer-events: none;
}

.stage.is-frog-waiting .project-hotspots,
.stage.is-frog-waiting .help-link,
.stage.is-frog-waiting .site-hover-button {
  pointer-events: none;
}
