/* Isolated main-site integration of the finished standalone modal. */
.funhouse-modal {

  --paper: #fff;
  --ink: #000;
  --pink: #ff2b91;
  --red: #f00;
  color: var(--ink);
  font-family: Helvetica, Arial, sans-serif;
}

.funhouse-modal,
.funhouse-modal *,
.funhouse-modal *::before,
.funhouse-modal *::after {
  box-sizing: border-box;
}

.funhouse-modal button {
  font: inherit;
}

.funhouse-modal {
  position: fixed;
  z-index: 1000;
  inset: 0;
  visibility: hidden;
  overflow: hidden;
  background: var(--paper);
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms ease, visibility 0s linear 240ms;
}

.funhouse-modal.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 240ms ease;
}

.funhouse-modal .funhouse-scroll {
  position: absolute;
  inset: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--paper);
  scrollbar-color: #999 transparent;
}

.funhouse-modal .funhouse-scroll:focus {
  outline: 0;
}

.funhouse-modal .funhouse-document,
.funhouse-modal .funhouse-banner {
  position: relative;
  width: 100%;
  margin: 0;
  background: var(--paper);
}

.funhouse-modal .banner-part {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  margin: 0;
  user-select: none;
  -webkit-user-drag: none;
}

.funhouse-modal .banner-top {
  aspect-ratio: 1920 / 641;
  object-fit: fill;
}

/* Illustrator y=641..1008. Keep this vector copy on the same 1920-unit
   responsive scale as every project-copy SVG so matching point sizes remain
   visually identical at every viewport width. */
.funhouse-modal .intro-copy {
  position: relative;
  width: 100%;
  height: 19.114583vw;
  min-height: 19.114583vw;
  aspect-ratio: 1920 / 367;
  overflow: hidden;
  background: var(--paper);
}

.funhouse-modal .intro-copy > img {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  min-width: 0;
  max-width: none;
  height: 100%;
  transform: none;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.funhouse-modal .lower-banner-wrap {
  position: relative;
  width: 100%;
  height: 6.354167vw;
  min-height: 6.354167vw;
  aspect-ratio: 1920 / 122;
  overflow: visible;
  background: var(--paper);
}

.funhouse-modal .banner-lower {
  position: absolute;
  inset: 0;
  height: 100%;
  object-fit: fill;
}

.funhouse-modal .frame-anchor {
  position: absolute;
  z-index: 1;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.funhouse-modal .frame-anchor-first,
.funhouse-modal .frame-line-first {
  top: 94.560164%;
}

.funhouse-modal .frame-line {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.funhouse-modal .design-section {
  position: relative;
  width: 100%;
  overflow: visible;
  background: var(--paper);
}

.funhouse-modal .snatcher-section {
  height: 92.276714vw;
  min-height: 92.276714vw;
  aspect-ratio: 1920 / 1771.7129;
}

.funhouse-modal .birdie-section {
  height: 100.089516vw;
  min-height: 100.089516vw;
  aspect-ratio: 1920 / 1921.7187;
}

.funhouse-modal .taparoo-section {
  height: 98.294172vw;
  min-height: 98.294172vw;
  aspect-ratio: 1920 / 1887.2481;
}

.funhouse-modal .section-copy,
.funhouse-modal .section-art,
.funhouse-modal .wafer {
  position: absolute;
  display: block;
  max-width: none;
  margin: 0;
}

.funhouse-modal .section-copy {
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.funhouse-modal .section-art {
  z-index: 1;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.funhouse-modal .snatcher-hero {
  top: 17.271421%;
  left: 13.541667%;
  width: 72.916667%;
  height: 40.412868%;
}

.funhouse-modal .birdie-hero {
  top: 16.510590%;
  left: 13.541667%;
  width: 72.916667%;
  height: 44.439386%;
}

.funhouse-modal .taparoo-hero {
  top: 17.091998%;
  left: 13.541667%;
  width: 72.916667%;
  height: 41.753917%;
}

/* Each lower Illustrator panel is its own spring mass. */
.funhouse-modal .wafer {
  --inertia-y: 0px;
  z-index: 3;
  overflow: hidden;
  background: var(--paper);
  transform: translate3d(0, var(--inertia-y), 0);
  will-change: transform;
  contain: layout paint;
}

.funhouse-modal .wafer > img,
.funhouse-modal .wafer > video {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.funhouse-modal .wafer > img {
  object-fit: fill;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.funhouse-modal .wafer > .wafer-vector-overlay {
  position: absolute;
  z-index: 2;
  inset: 0;
}

.funhouse-modal .snatcher-wafer {
  top: 59.963982%;
  left: 54.667188%;
  width: 26.082813%;
  height: 37.816511%;
}

.funhouse-modal .snatcher-video {
  top: 57.639119%;
  left: 0;
  width: 54.667188%;
  height: 36.687660%;
}

.funhouse-modal .birdie-video {
  top: 62.206633%;
  left: 13.541667%;
  width: 36.458333%;
  height: 31.297005%;
}

.funhouse-modal .birdie-wafer {
  top: 62.009440%;
  left: 53.681255%;
  width: 28.054167%;
  height: 34.865134%;
}

.funhouse-modal .taparoo-video {
  top: 58.847493%;
  left: 0;
  width: 50%;
  height: 34.441683%;
}

.funhouse-modal .taparoo-wafer {
  top: 61.694496%;
  left: 52.877604%;
  width: 32.245318%;
  height: 29.807422%;
}

.funhouse-modal .video-wafer video {
  position: relative;
  z-index: 2;
  object-fit: cover;
  object-position: 50% 50%;
  background: var(--paper);
  opacity: 0;
  transition: opacity 1.3s ease;
}

.funhouse-modal .video-wafer.is-loaded video {
  opacity: 1;
}

.funhouse-modal .video-loading {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  background: var(--paper);
  pointer-events: none;
}

.funhouse-modal .modal-control {
  position: fixed;
  z-index: 1010;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.funhouse-modal .control-down {
  top: 1.71875vw;
  left: 83.125vw;
  width: 5.3125vw;
  aspect-ratio: 102 / 118;
}

.funhouse-modal .control-top {
  top: 1.71875vw;
  left: 88.958333vw;
  width: 2.708333vw;
  aspect-ratio: 52 / 59;
}

.funhouse-modal .control-close {
  top: 1.71875vw;
  left: 92.5vw;
  width: 3.28125vw;
  aspect-ratio: 63 / 59;
}

.funhouse-modal .control-art,
.funhouse-modal .control-state {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.funhouse-modal .control-state {
  object-fit: fill;
  opacity: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.funhouse-modal .control-base {
  opacity: 1;
}

.funhouse-modal .modal-control:hover .control-base,
.funhouse-modal .modal-control:focus-visible .control-base,
.funhouse-modal .modal-control:active .control-base,
.funhouse-modal .modal-control:hover .control-active,
.funhouse-modal .modal-control:focus-visible .control-active {
  opacity: 0;
}

.funhouse-modal .modal-control:hover .control-hover,
.funhouse-modal .modal-control:focus-visible .control-hover {
  opacity: 1;
}

.funhouse-modal .modal-control:active .control-hover {
  opacity: 0;
}

.funhouse-modal .modal-control:active .control-active {
  opacity: 1;
}

.funhouse-modal .modal-control:focus-visible {
  outline: 3px solid var(--pink);
  outline-offset: 4px;
}

.funhouse-modal .control-down[aria-disabled="true"] {
  cursor: default;
}

.funhouse-modal .visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
  .funhouse-modal,
  .funhouse-modal .video-wafer video {
    transition-duration: .01ms !important;
  }

  .funhouse-modal .wafer {
    transform: none !important;
  }
}