/* 
 * Menu animation styles for Flatsome overlay
 * Adds slide down/up animation similar to simonekatherineinteriors.com
 */

/* Initial state for nav-sidebar - hidden borders and content */
.nav-sidebar {
  min-height: 100vh;
  min-height: -webkit-fill-available;
  min-width: 440px;
  width: 34vw;
  margin: auto;
  position: static;
  display: flex;
  flex-direction: column !important;
  justify-content: center;
  border-left: 1px solid rgba(109, 94, 73, 0);
  border-right: 1px solid rgba(109, 94, 73, 0);
  opacity: 0;
  transition: border-color 0.5s cubic-bezier(0.77, 0, 0.175, 1) 0.4s, opacity 0.5s cubic-bezier(0.77, 0, 0.175, 1) 0.4s;
}

/* Active state for nav-sidebar - visible borders and content */
.mfp-ready .nav-sidebar {
  border-left: 1px solid rgba(109, 94, 73, 1);
  border-right: 1px solid rgba(109, 94, 73, 1);
  opacity: 1;
}

/* Closing state for nav-sidebar - hide instantly */
.mfp-removing .nav-sidebar {
  border-left: 1px solid rgba(109, 94, 73, 0);
  border-right: 1px solid rgba(109, 94, 73, 0);
  opacity: 0;
  transition: border-color 0s, opacity 0s;
}

/* Initial state for menu overlay - hidden at top */
.mfp-bg.off-canvas.off-canvas-center.main-menu-overlay {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.5s cubic-bezier(0.77, 0, 0.175, 1) !important;
  pointer-events: auto !important;
}

/* Active state for menu overlay - fully visible */
.mfp-bg.off-canvas.off-canvas-center.main-menu-overlay.mfp-ready {
  clip-path: inset(0 0 0 0);
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}

/* Closing state for menu overlay - slides up */
.mfp-bg.off-canvas.off-canvas-center.main-menu-overlay.mfp-removing {
  clip-path: inset(0 0 100% 0);
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  transition: clip-path 1.1s cubic-bezier(0.77, 0, 0.175, 1), opacity 0s 1.1s !important; /* Delay opacity change until clip-path completes */
}

/* Prevent content from disappearing during close animation */
.mfp-wrap.off-canvas.off-canvas-center.mfp-removing {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}

.mfp-removing .mfp-content {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Menu items animation - initial state */
.mfp-content .off-canvas-center .nav li {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s ease 0.4s, transform 0.3s ease 0.4s;
}

/* Staggered animation for menu items - delayed to start after background */
.mfp-ready .mfp-content .off-canvas-center .nav li:nth-child(1) {
  transition-delay: 0.4s;
}

.mfp-ready .mfp-content .off-canvas-center .nav li:nth-child(2) {
  transition-delay: 0.43s;
}

.mfp-ready .mfp-content .off-canvas-center .nav li:nth-child(3) {
  transition-delay: 0.46s;
}

.mfp-ready .mfp-content .off-canvas-center .nav li:nth-child(4) {
  transition-delay: 0.49s;
}

.mfp-ready .mfp-content .off-canvas-center .nav li:nth-child(5) {
  transition-delay: 0.52s;
}

.mfp-ready .mfp-content .off-canvas-center .nav li:nth-child(6) {
  transition-delay: 0.55s;
}

.mfp-ready .mfp-content .off-canvas-center .nav li:nth-child(7) {
  transition-delay: 0.58s;
}

.mfp-ready .mfp-content .off-canvas-center .nav li:nth-child(8) {
  transition-delay: 0.61s;
}

/* Active state for menu items */
.mfp-ready .mfp-content .off-canvas-center .nav li {
  opacity: 1;
  transform: translateY(0);
}

/* Instant hide for menu items when closing */
.mfp-removing .mfp-content .off-canvas-center .nav li {
  opacity: 0 !important;
  transform: translateY(-20px);
  transition: opacity 0s, transform 0s !important;
  transition-delay: 0s !important;
}

/* Ensure menu content is visible */
.mfp-content .off-canvas-center {
  opacity: 1;
}

/* Fix for Close button */
.mfp-content .mfp-close {
  opacity: 0;
  transition: opacity 0.2s ease 0.4s;
}

.mfp-ready .mfp-content .mfp-close {
  opacity: 1;
}

.mfp-removing .mfp-content .mfp-close {
  opacity: 0 !important;
  transition: opacity 0s !important;
  transition-delay: 0s !important;
}

/* Hide Menu text instantly when clicked */
.menu-clicked {
  opacity: 0 !important;
  transition: opacity 0s !important;
}

/* Fallback for browsers that don't support clip-path */
@supports not (clip-path: inset(0 0 0 0)) {
  .mfp-bg.off-canvas.off-canvas-center.main-menu-overlay {
    transform: translateY(-100%);
    transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1) !important;
  }
  
  .mfp-bg.off-canvas.off-canvas-center.main-menu-overlay.mfp-ready {
    transform: translateY(0);
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
  }
  
  .mfp-bg.off-canvas.off-canvas-center.main-menu-overlay.mfp-removing {
    transform: translateY(-100%);
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    transition: transform 1.1s cubic-bezier(0.77, 0, 0.175, 1), opacity 0s 1.1s !important;
  }
}

/* Force same transition for PC (larger screens) */
@media (min-width: 850px) {
  .mfp-bg.off-canvas.off-canvas-center.main-menu-overlay {
    transition: clip-path 0.5s cubic-bezier(0.77, 0, 0.175, 1) !important;
  }
  .mfp-bg.off-canvas.off-canvas-center.main-menu-overlay.mfp-removing {
    transition: clip-path 1.1s cubic-bezier(0.77, 0, 0.175, 1), opacity 0s 1.1s !important;
  }
  @supports not (clip-path: inset(0 0 0 0)) {
    .mfp-bg.off-canvas.off-canvas-center.main-menu-overlay {
      transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1) !important;
    }
    .mfp-bg.off-canvas.off-canvas-center.main-menu-overlay.mfp-removing {
      transition: transform 1.1s cubic-bezier(0.77, 0, 0.175, 1), opacity 0s 1.1s !important;
    }
  }
}

/* Accessibility - respect user preferences */
@media (prefers-reduced-motion: reduce) {
  .mfp-bg.off-canvas.off-canvas-center.main-menu-overlay,
  .mfp-content .off-canvas-center .nav li,
  .mfp-content .mfp-close,
  .nav-sidebar {
    transition: none !important;
  }
}