/**
 * MORPHING MENU ANIMATIONS
 * ------------------------
 * Shared CSS for the morphing dropdown navigation menu.
 * Include via: <link rel="stylesheet" href="css/morphing-menu.css">
 * Also requires: <script src="js/morphing-menu.js"></script>
 */

/* 1. Perspective Wrapper */
.perspective-wrapper {
  perspective: 2000px;
}

/* 2. Dropdown Container (Hidden by default) */
.dropdown-container {
  position: absolute;
  top: 100%;
  /* Below header */
  left: 0;
  width: 100%;
  z-index: 1000;
  /* Initial State */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

/* Invisible bridge to prevent dropdown from closing during mouse transition */
.dropdown-container::before {
  content: '';
  position: absolute;
  top: -40px;
  left: 0;
  width: 100%;
  height: 40px;
}

/* 3. Morphing Background */
.dropdown-bg {
  position: absolute;
  top: 0;
  left: 0;
  background: #ffffff;
  /* Explicit white */
  border-radius: 32px;
  /* Rounded corners */
  box-shadow:
    0 50px 100px -20px rgba(50, 50, 93, 0.25),
    0 30px 60px -30px rgba(0, 0, 0, 0.3),
    0 -18px 60px -10px rgba(0, 0, 0, 0.025);

  transform-origin: 0 0;
  transition: width 0.3s ease, height 0.3s ease, transform 0.3s ease;
  overflow: hidden;
  will-change: transform, width, height;
  z-index: 2;
  /* Background ON TOP of arrow to hide the seam */
}

/* 4. Arrow */
.dropdown-arrow {
  position: absolute;
  top: -7px;
  left: 0;
  /* JS sets translateX */
  width: 14px;
  height: 14px;
  background: #ffffff;
  transform: rotate(45deg);
  border-top-left-radius: 2px;
  margin-left: -7px;
  /* Center alignment */
  /* No shadow - matches dropdown exactly */
  transition: transform 0.3s ease;
  opacity: 0;
  /* Hidden until active */
  z-index: 4;
  /* Arrow ABOVE everything */
}

.dropdown-container.active .dropdown-arrow {
  opacity: 1;
}

/* Active State for Container */
.dropdown-container.active {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* 5. Content Container */
.dropdown-content-container {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  /* Crop sliding content */
  background: #ffffff;
  /* Solid background to hide text behind */
  border-radius: 32px;
  /* Match the bg shape */
  z-index: 3;
  /* Above everything else */
  transition: width 0.3s ease, height 0.3s ease, transform 0.3s ease;
  will-change: transform, width, height;
}

/* 6. Section Content Items */
.dropdown-section {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  /* Fix ghosting */
  position: absolute;
  top: 0;
  left: 0;
  /* width: max-content; REMOVED to let Tailwind w-[...] classes work */
  /* Let content dictate width - padding is set via Tailwind p-6 class */
}

/* Sliding Animations */
.dropdown-section.active {
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
  /* Make content interactive */
  opacity: 1;
}

.dropdown-section.slide-from-right {
  animation: slideInRight 0.3s forwards;
}

.dropdown-section.slide-from-left {
  animation: slideInLeft 0.3s forwards;
}

.dropdown-section.slide-to-right {
  animation: slideOutRight 0.3s forwards;
}

.dropdown-section.slide-to-left {
  animation: slideOutLeft 0.3s forwards;
}

@keyframes slideInRight {
  from {
    transform: translateX(110px);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideInLeft {
  from {
    transform: translateX(-110px);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideOutRight {
  from {
    transform: translateX(0);
    opacity: 1;
  }

  to {
    transform: translateX(110px);
    opacity: 0;
  }
}

@keyframes slideOutLeft {
  from {
    transform: translateX(0);
    opacity: 1;
  }

  to {
    transform: translateX(-110px);
    opacity: 0;
  }
}

.dropdown-section.fade-in {
  animation: fadeInMenu 0.3s forwards;
}

@keyframes fadeInMenu {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Active state for dropdown triggers (persists hover style) */
.nav-trigger.active {
  background-color: #F7F7F8;
}

.nav-trigger.active svg {
  transform: rotate(180deg);
}

/* 7. Mobile Menu Animation
 * -------------------------
 * Controls the slide-down animation for the mobile hamburger menu.
 * The toggle is handled by main.js (adds/removes .open class).
 * DO NOT add inline mobile menu handlers in HTML pages - main.js handles it.
 */
.mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.mobile-menu.open {
  max-height: 500px;
}