/* Midvinterfest Experience Lift 0.5.0
 * Progressive cinematic layer. The existing HTML/image experience remains the baseline.
 */

.mvf-hero-world {
  --mvf-portal-x: 0;
  --mvf-portal-y: 0;
  --mvf-door-glow: .34;
}

.mvf-portal-webgl,
.mvf-hall-webgl {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.mvf-portal-webgl[hidden],
.mvf-hall-webgl[hidden] {
  display: none;
}

.mvf-portal-depth-glow {
  position: absolute;
  left: 66.2%;
  top: 70.5%;
  z-index: 4;
  width: clamp(135px, 15vw, 255px);
  height: clamp(105px, 12vw, 205px);
  transform: translate(-50%, -50%) scale(calc(.96 + (var(--mvf-door-glow) * .07)));
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 58%, rgba(255, 191, 111, calc(.08 + var(--mvf-door-glow) * .10)) 0 14%, rgba(221, 120, 57, calc(.035 + var(--mvf-door-glow) * .055)) 36%, rgba(126, 75, 44, .018) 56%, transparent 76%);
  filter: blur(12px);
  opacity: .72;
  mix-blend-mode: screen;
  pointer-events: none;
  transition: transform 500ms ease, opacity 500ms ease;
}

.mvf-experience-ready .mvf-hero-media img {
  transform: scale(1.035) translate3d(calc(var(--mvf-portal-x) * -7px), calc(var(--mvf-portal-y) * -4px), 0);
  transition: transform 900ms cubic-bezier(.2,.7,.2,1);
  will-change: transform;
}

.mvf-experience-ready .mvf-hero-cloud--one {
  transform: translate3d(calc(var(--mvf-portal-x) * 13px), calc(var(--mvf-portal-y) * 4px), 0);
}

.mvf-experience-ready .mvf-hero-cloud--two {
  transform: translate3d(calc(var(--mvf-portal-x) * -10px), calc(var(--mvf-portal-y) * -3px), 0);
}

.mvf-portal.is-approaching .mvf-portal-depth-glow {
  opacity: .82;
}

.mvf-portal.is-entering .mvf-portal__content {
  transform: translateY(-5px);
}

.mvf-portal.is-entering .mvf-scroll-cue {
  opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
  .mvf-portal__choices .mvf-button {
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
  }

  .mvf-portal__choices .mvf-button:hover {
    transform: translateY(-2px);
  }

  .mvf-portal__choices .mvf-button--ember:hover {
    box-shadow: 0 12px 38px rgba(211, 107, 45, .27), inset 0 0 18px rgba(255, 220, 145, .08);
  }
}

@media (max-width: 700px) {
  .mvf-portal-depth-glow {
    left: 66%;
    top: 65%;
    width: clamp(115px, 34vw, 175px);
    height: clamp(90px, 28vw, 145px);
  }

  .mvf-portal-webgl {
    opacity: .72;
  }

  .mvf-experience-ready .mvf-hero-media img {
    transform: scale(1.025);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mvf-portal-webgl,
  .mvf-hall-webgl {
    display: none !important;
  }

  .mvf-experience-ready .mvf-hero-media img,
  .mvf-experience-ready .mvf-hero-cloud--one,
  .mvf-experience-ready .mvf-hero-cloud--two,
  .mvf-portal-depth-glow {
    transform: none !important;
    transition: none !important;
  }
}