/* transitions.css */
:root {
  --transition-speed: 0.6s;
  --transition-ease: cubic-bezier(0.85, 0, 0.15, 1);
}

.transition-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
  display: flex;
  pointer-events: none;
}

.transition-overlay.active {
  pointer-events: all;
}

.shutter-panel {
  position: absolute;
  top: 0;
  width: 51%; /* Overlap to hide the line */
  height: 100%;
  background: var(--mint);
  transition: transform var(--transition-speed) var(--transition-ease);
}

.shutter-panel.left {
  left: 0;
  transform: translateX(-100%);
}

.shutter-panel.right {
  right: 0;
  transform: translateX(100%);
}

.transition-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  z-index: 100000;
  transition: opacity 0.4s ease, transform 0.6s var(--transition-ease);
  pointer-events: none;
}

.transition-logo img {
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
}

/* State: Closing (Transition Start on old page) */
.transition-overlay.closing .shutter-panel {
  transform: translateX(0);
}

.transition-overlay.closing .transition-logo {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  transition-delay: 0.1s;
}

/* State: Initial Closed (Instant on new page load) */
.transition-overlay.initial-closed .shutter-panel {
  transform: translateX(0);
  transition: none;
}
.transition-overlay.initial-closed .transition-logo {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  transition: none;
}

/* State: Opening (Transition End on new page) */
.transition-overlay.opening .shutter-panel.left {
  transform: translateX(-100%);
}

.transition-overlay.opening .shutter-panel.right {
  transform: translateX(100%);
}

.transition-overlay.opening .transition-logo {
  opacity: 0;
  transform: translate(-50%, -50%) scale(1.2);
}