/* ==========================================================================
   Axel Karambizi — Navbar 3D Roll & Hover Interactions
   Matches official Portois / Framer interaction specs
   ========================================================================== */

/* 1. 3D Rolling Flip Navigation Links */
.framer-xFpDQ.framer-o44by9 {
  overflow: hidden !important;
  perspective: 1200px !important;
  cursor: pointer !important;
  text-decoration: none !important;
}

.framer-xFpDQ.framer-o44by9 .framer-glk0yt {
  height: 24px !important;
  transform-style: preserve-3d !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

/* Face 1: Initial front text */
.framer-xFpDQ.framer-o44by9 .framer-1kmmsyu {
  height: 24px !important;
  display: flex !important;
  align-items: center !important;
  transform: translateY(0px) rotateX(0deg) !important;
  transform-origin: 50% 100% 0px !important;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s ease !important;
  opacity: 1 !important;
  backface-visibility: hidden !important;
}

/* Face 2: Flipped neon accent text */
.framer-xFpDQ.framer-o44by9 .framer-1f9aah8 {
  height: 24px !important;
  display: flex !important;
  align-items: center !important;
  transform: translateY(0px) rotateX(90deg) !important;
  transform-origin: 50% 0% 0px !important;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s ease !important;
  opacity: 0 !important;
  backface-visibility: hidden !important;
}

.framer-xFpDQ.framer-o44by9 .framer-1f9aah8 p,
.framer-xFpDQ.framer-o44by9 .framer-1f9aah8 span {
  color: #d0ff71 !important;
  --framer-text-color: #d0ff71 !important;
  --extracted-r6o4lv: #d0ff71 !important;
}

/* Active Hover State: Face 1 rolls up & out (-90deg), Face 2 rolls in (0deg) */
.framer-xFpDQ.framer-o44by9:hover .framer-1kmmsyu {
  transform: translateY(-24px) rotateX(-90deg) !important;
  opacity: 0 !important;
}

.framer-xFpDQ.framer-o44by9:hover .framer-1f9aah8 {
  transform: translateY(-24px) rotateX(0deg) !important;
  opacity: 1 !important;
}

/* 2. Contact Pill Button Hover Effect */
.framer-gBieo.framer-6a0p58 {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 99px !important;
  cursor: pointer !important;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s ease !important;
}

.framer-gBieo.framer-6a0p58:hover {
  background-color: #d0ff71 !important;
  transform: scale(1.03) !important;
  box-shadow: 0 4px 20px rgba(208, 255, 113, 0.35) !important;
}

.framer-gBieo.framer-6a0p58 .framer-qveuzj {
  background-color: #d0ff71 !important;
  border-radius: 99px !important;
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s ease !important;
  z-index: 1 !important;
}

.framer-gBieo.framer-6a0p58:hover .framer-qveuzj {
  transform: scale(18) !important;
  opacity: 1 !important;
}

.framer-gBieo.framer-6a0p58 .framer-1djaxro {
  position: relative !important;
  z-index: 2 !important;
}

.framer-gBieo.framer-6a0p58 .framer-1djaxro p,
.framer-gBieo.framer-6a0p58 .framer-1djaxro span {
  transition: color 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

.framer-gBieo.framer-6a0p58:hover .framer-1djaxro p,
.framer-gBieo.framer-6a0p58:hover .framer-1djaxro span {
  color: #111111 !important;
  --framer-text-color: #111111 !important;
  --extracted-r6o4lv: #111111 !important;
}