/* Optimized for Safari & Performance */
.opener-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 99999999; /* Super high z-index */
  pointer-events: all;
}

.opener-svg {
  width: 100%;
  height: 100%;
  display: block;
  /* Hardware acceleration hint */
  will-change: transform;
}

#opener-hole {
  transform-box: fill-box;
  transform-origin: center center;
  /* Use will-change to prevent Safari flicker */
  will-change: transform;

  /* Variable defaults */
  --start-x: 0px;
  --start-y: 0px;
  --scale-start: 0.1;
  --scale-end: 250; /* Cap at 250 for Safari safety */

  opacity: 0;
  /* Initial state hidden at start location */
  transform: translate(var(--start-x), var(--start-y)) scale(var(--scale-start));
}

/* The Animation Class */
.opener-active #opener-hole {
  opacity: 1;
  animation: driveThroughTunnel 1.5s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
.mask-bg {
    fill: white;
}
/* Fade out container to unblock clicks */
.opener-finished {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

@keyframes driveThroughTunnel {
  0% {
    transform: translate(var(--start-x), var(--start-y))
      scale(var(--scale-start));
  }
  100% {
    /* Move to calculated center offset */
    transform: translate(var(--center-move-x), var(--center-move-y))
      scale(var(--scale-end));
  }
}