/* ==========================================================================
   HIGH-PERFORMANCE GPU PAGE TRANSITION SYSTEM
   ========================================================================== */
.transition-overlay-root {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 999999;
  pointer-events: none;
  overflow: hidden;
  visibility: hidden;
}

.transition-overlay-root.is-active {
  visibility: visible;
  pointer-events: auto;
}

/* ==========================================================================
   PANEL BASE STYLES
   ========================================================================== */
.transition-panel-single {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--overlay-color, #02162E);
  will-change: transform;
  transform: translate3d(-100%, 0, 0);
  transition: transform 0.55s cubic-bezier(0.76, 0, 0.24, 1);
}

.transition-curtain-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
}

.transition-curtain-panel {
  flex: 1;
  height: 100%;
  background-color: var(--overlay-color, #0A5960);
  will-change: transform;
  transition: transform 0.55s cubic-bezier(0.76, 0, 0.24, 1);
}

.transition-curtain-left {
  transform-origin: left center;
  transform: scaleX(0);
}

.transition-curtain-right {
  transform-origin: right center;
  transform: scaleX(0);
}

/* ==========================================================================
   MODE DISPLAY ISOLATION
   ========================================================================== */
.transition-overlay-root[data-type="slide-horizontal"] .transition-curtain-wrap {
  display: none !important;
}

.transition-overlay-root[data-type="curtain-center"] .transition-panel-single {
  display: none !important;
}

/* ==========================================================================
   MODE 1: HORIZONTAL SLIDE (Index & Contact - Navy #02162E)
   ========================================================================== */
.transition-overlay-root[data-type="slide-horizontal"].state-covering .transition-panel-single {
  transform: translate3d(0, 0, 0);
}

.transition-overlay-root[data-type="slide-horizontal"].state-covered .transition-panel-single {
  transition: none !important;
  transform: translate3d(0, 0, 0);
}

.transition-overlay-root[data-type="slide-horizontal"].state-revealing .transition-panel-single {
  transition: transform 0.55s cubic-bezier(0.76, 0, 0.24, 1) !important;
  transform: translate3d(100%, 0, 0);
}

/* ==========================================================================
   MODE 2: DUAL-AXIS CROSS WIPE (About Page - Maroon #8B0625)
   ========================================================================== */
.transition-overlay-root[data-type="slide-vertical"] .transition-curtain-wrap {
  display: flex !important;
}

.transition-overlay-root[data-type="slide-vertical"] .transition-curtain-right {
  display: none !important;
}

.transition-overlay-root[data-type="slide-vertical"] .transition-panel-single {
  transform: translate3d(0, -100%, 0);
  z-index: 2;
}

.transition-overlay-root[data-type="slide-vertical"].state-covering .transition-panel-single {
  transform: translate3d(0, 0, 0);
}

.transition-overlay-root[data-type="slide-vertical"].state-covered .transition-panel-single {
  transition: none !important;
  transform: translate3d(0, 0, 0);
}

.transition-overlay-root[data-type="slide-vertical"].state-revealing .transition-panel-single {
  transition: transform 0.55s cubic-bezier(0.76, 0, 0.24, 1) !important;
  transform: translate3d(0, 100%, 0);
}

.transition-overlay-root[data-type="slide-vertical"] .transition-curtain-left {
  width: 100%;
  transform-origin: left center;
  transform: translate3d(-100%, 0, 0);
  background-color: var(--overlay-color, #8B0625);
  z-index: 1;
}

.transition-overlay-root[data-type="slide-vertical"].state-covering .transition-curtain-left {
  transform: translate3d(0, 0, 0);
}

.transition-overlay-root[data-type="slide-vertical"].state-covered .transition-curtain-left {
  transition: none !important;
  transform: translate3d(0, 0, 0);
}

.transition-overlay-root[data-type="slide-vertical"].state-revealing .transition-curtain-left {
  transition: transform 0.55s cubic-bezier(0.76, 0, 0.24, 1) !important;
  transform: translate3d(100%, 0, 0);
}

/* ==========================================================================
   MODE 3: CENTER CURTAIN (Work Page - Teal #0A5960)
   ========================================================================== */
.transition-overlay-root[data-type="curtain-center"].state-covering .transition-curtain-left,
.transition-overlay-root[data-type="curtain-center"].state-covering .transition-curtain-right {
  transform: scaleX(1);
}

.transition-overlay-root[data-type="curtain-center"].state-covered .transition-curtain-left,
.transition-overlay-root[data-type="curtain-center"].state-covered .transition-curtain-right {
  transition: none !important;
  transform: scaleX(1);
}

.transition-overlay-root[data-type="curtain-center"].state-revealing .transition-curtain-left,
.transition-overlay-root[data-type="curtain-center"].state-revealing .transition-curtain-right {
  transition: transform 0.55s cubic-bezier(0.76, 0, 0.24, 1) !important;
  transform: scaleX(0);
}

/* ==========================================================================
   PERCEIVED LATENCY DELAYED PRELOADER RECTANGLES
   ========================================================================== */
.transition-delayed-loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

/* Fades in only when page loading exceeds 350ms */
.transition-overlay-root.is-loading-delayed .transition-delayed-loader {
  opacity: 1;
}

.transition-delayed-loader .preloader-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  perspective: 600px;
}

.transition-delayed-loader .loader-rect {
  width: 22px;
  height: 38px;
  border-radius: 2px;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.transition-delayed-loader .loader-rect-1 {
  background-color: #AF7C1C;
  animation: preloaderRotate 1.4s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

.transition-delayed-loader .loader-rect-2 {
  background-color: #C44753;
  animation: preloaderJump 0.9s cubic-bezier(0.33, 1, 0.68, 1) infinite alternate;
}

.transition-delayed-loader .loader-rect-3 {
  background-color: #0A5960;
  animation: preloaderScale 1.1s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}

.transition-delayed-loader .loader-rect-4 {
  background-color: #8B0625;
  animation: preloaderStretch 1.0s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite alternate;
}

.transition-delayed-loader .loader-rect-5 {
  background-color: #4C4D71;
  animation: preloaderFlip 1.5s ease-in-out infinite;
}

/* Global Keyframes for Delayed Rect Loader */
@keyframes preloaderRotate {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes preloaderJump {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-24px); }
}

@keyframes preloaderScale {
  0%   { transform: scale(0.45); opacity: 0.5; }
  100% { transform: scale(1.25); opacity: 1; }
}

@keyframes preloaderStretch {
  0%   { transform: scaleY(0.4); }
  100% { transform: scaleY(1.35); }
}

@keyframes preloaderFlip {
  0%   { transform: rotateY(0deg); }
  50%  { transform: rotateY(180deg); }
  100% { transform: rotateY(360deg); }
}