/* ===== FULL SCREEN OVERLAY (isolated, no html/body styling) ===== */
#triangle-door-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: transparent; /* transparent background */
  z-index: 2147483647; /* max safe z-index */
  overflow: hidden;
}

/* Container */
.triangle-container {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

/* Triangle images */
.triangle {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100vh;
  width: auto;
  max-width: none;
  transform: translateX(-50%);
  transition: 
    transform 3s cubic-bezier(0.77, 0, 0.175, 1), /* smoother ease-in-out */
    opacity 2.5s ease-in-out;
  will-change: transform, opacity;
}

/* Open animation */
.triangle-container.open .left {
  transform: translateX(calc(-70% - 110vw)) scale(1.02);
  opacity: 0.95;
}

.triangle-container.open .right {
  transform: translateX(calc(-50% + 110vw)) scale(1.02);
  opacity: 0.95;
}