/* Minimalist Page Fade & Slide Transitions */

/* The transition overlay is a simple fullscreen curtain that fades out on load */
.oh-transition-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background-color: var(--oh-bg-cream); /* Smooth brand neutral light cream */
  opacity: 1;
  transition: opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Block clicks when transition is active */
.oh-transition-overlay.oh-transition-overlay--active {
  pointer-events: auto;
  opacity: 1;
}

/* Hide panels as we are doing a single clean page curtain fade now */
.oh-transition-panel {
  display: none;
}

/* Reveal State: Fade out the overlay */
.oh-transition-overlay--reveal {
  opacity: 0 !important;
}

/* Elegant minimalist logo styling inside overlay */
.oh-transition-logo {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.oh-transition-overlay--reveal .oh-transition-logo {
  opacity: 0;
  transform: scale(0.9) translateY(-10px);
}

.oh-transition-logo img {
  height: 60px;
  width: auto;
}

/* Page wrapper fade-in and slide-up on enter */
.oh-page-wrapper {
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.5s cubic-bezier(0.25, 1, 0.5, 1), transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

/* When overlay fades out, page wrapper fades in and slides up */
.oh-transition-overlay--reveal ~ .oh-page-wrapper {
  opacity: 1;
  transform: translateY(0);
}

/* Page wrapper fade-out and slide-up on exit */
.oh-page-wrapper.oh-page-wrapper--exit {
  opacity: 0;
  transform: translateY(-15px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* ==========================================
   SCROLL REVEAL ANIMATIONS
   ========================================== */

.oh-reveal {
  opacity: 0;
  transform: translateY(45px); /* Increased to 45px for a clearly visible rise from below */
  transition: opacity 0.85s cubic-bezier(0.215, 0.61, 0.355, 1), 
              transform 0.85s cubic-bezier(0.215, 0.61, 0.355, 1);
  will-change: opacity, transform;
}

.oh-reveal--active {
  opacity: 1;
  transform: translateY(0);
}

/* Specific hover rule overrides to make sure cards can still translate on hover */
.oh-why-card.oh-reveal--active:hover,
.oh-infra-card.oh-reveal--active:hover,
.oh-region-card.oh-reveal--active:hover,
.oh-product-card.oh-reveal--active:hover {
  transform: translateY(-5px) !important;
}

/* Optional scale variant */
.oh-reveal--scale {
  transform: scale(0.95) translateY(45px);
}

.oh-reveal--active.oh-reveal--scale {
  transform: scale(1) translateY(0);
}