/* ==========================================================================
   Axel Karambizi — Navigation 3D Roll, Mobile Menu Toggle, Green Pointer & Hover Interactions
   Matches official Axel Karambizi Portfolio interaction specs
   ========================================================================== */

/* 1. Base Navbar Transitions */
nav.framer-z7I7P {
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* 2. 3D Rolling Flip Navigation Links (Home, About, Projects, Blogs, Available for work) */
.framer-xFpDQ {
  overflow: hidden !important;
  perspective: 1200px !important;
  cursor: pointer !important;
  text-decoration: none !important;
}

.framer-xFpDQ .framer-glk0yt {
  display: flex !important;
  flex-direction: column !important;
  transform-style: preserve-3d !important;
  transform-origin: 50% 0% 0px !important;
  transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  height: 24px !important;
  transform: perspective(1200px) rotateX(0deg) !important;
}

/* Face 1: Front facing regular text */
.framer-xFpDQ .framer-1kmmsyu {
  height: 24px !important;
  display: flex !important;
  align-items: center !important;
  backface-visibility: hidden !important;
  transform: translateY(0px) rotateX(0deg) !important;
  transition: opacity 0.25s ease !important;
  opacity: 1 !important;
}

/* Face 2: Bottom facing accent-colored text */
.framer-xFpDQ .framer-1f9aah8 {
  height: 24px !important;
  display: flex !important;
  align-items: center !important;
  transform: rotateX(90deg) !important;
  transform-origin: 50% 0% 0px !important;
  backface-visibility: hidden !important;
  opacity: 1 !important;
}

.framer-xFpDQ .framer-1f9aah8 p,
.framer-xFpDQ .framer-1f9aah8 span {
  color: var(--token-54672876-03f0-4dca-8fdb-32c421a5c4d1, rgb(106, 113, 223)) !important;
  --framer-text-color: var(--token-54672876-03f0-4dca-8fdb-32c421a5c4d1, rgb(106, 113, 223)) !important;
  --extracted-r6o4lv: var(--token-54672876-03f0-4dca-8fdb-32c421a5c4d1, rgb(106, 113, 223)) !important;
}

/* On Link Hover: 3D Roll up by 90deg (Desktop only) */
@media (hover: hover) and (pointer: fine) {
  .framer-xFpDQ:hover .framer-glk0yt,
  .framer-xFpDQ.hover .framer-glk0yt {
    transform: perspective(1200px) rotateX(-90deg) !important;
  }
}

/* 3. Contact Button Hover */
.framer-gBieo {
  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.3s ease, box-shadow 0.3s ease !important;
}

@media (hover: hover) and (pointer: fine) {
  .framer-gBieo:hover,
  .framer-gBieo.hover {
    transform: scale(1.04) !important;
    box-shadow: 0 4px 14px rgba(106, 113, 223, 0.3) !important;
  }
}

.framer-gBieo .framer-qveuzj {
  border-radius: 99px !important;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s ease !important;
  transform: scale(0.85) !important;
  opacity: 0 !important;
}

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

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

/* 4. Desktop Navigation Scroll States (>= 810px) */
@media (min-width: 810px) {
  /* Toggle button hidden on desktop */
  .framer-180qzzk {
    display: none !important;
  }

  /* At Top (before scroll, scrollY < 60) */
  nav.framer-z7I7P.nav-at-top {
    gap: 0px !important;
    padding: 8px 12px 8px 24px !important;
  }

  nav.framer-z7I7P.nav-at-top .framer-brfihp {
    display: none !important;
    opacity: 0 !important;
    width: 0 !important;
    max-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
  }

  nav.framer-z7I7P.nav-at-top .framer-gs57e9 {
    display: flex !important;
    opacity: 1 !important;
    width: auto !important;
    max-width: none !important;
    pointer-events: auto !important;
    overflow: visible !important;
  }

  /* When Scrolled Down (scrollY >= 60) */
  nav.framer-z7I7P.nav-scrolled {
    gap: 0px !important;
    padding: 8px 20px 8px 10px !important;
  }

  nav.framer-z7I7P.nav-scrolled .framer-brfihp {
    display: flex !important;
    opacity: 1 !important;
    width: auto !important;
    max-width: none !important;
    pointer-events: auto !important;
    overflow: visible !important;
    transition: opacity 0.3s ease !important;
  }

  nav.framer-z7I7P.nav-scrolled .framer-gs57e9 {
    display: flex !important;
    opacity: 0 !important;
    width: 0 !important;
    max-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
    transition: opacity 0.25s ease, max-width 0.35s cubic-bezier(0.16, 1, 0.3, 1), width 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  /* Hover expansion when scrolled down: reveals all menu links on hover */
  nav.framer-z7I7P.nav-scrolled:hover {
    gap: 30px !important;
    padding: 8px 16px 8px 12px !important;
  }

  nav.framer-z7I7P.nav-scrolled:hover .framer-gs57e9 {
    opacity: 1 !important;
    width: auto !important;
    max-width: 600px !important;
    pointer-events: auto !important;
    overflow: visible !important;
  }
}

/* 5. Mobile & Tablet Navigation (< 810px) */
@media (max-width: 809.98px) {
  nav.framer-z7I7P {
    position: fixed !important;
    top: 16px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 9999 !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-sizing: border-box !important;
  }

  /* Closed State (Compact Pill) */
  nav.framer-z7I7P:not(.mobile-nav-open) {
    width: auto !important;
    min-width: 250px !important;
    max-width: calc(100vw - 32px) !important;
    padding: 8px 10px 8px 12px !important;
    border-radius: 28px !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0px !important;
    background-color: var(--token-dd08076e-6859-4f97-84b7-c05dcc1e773f, rgba(255, 255, 255, 0.85)) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid var(--token-621c2752-e263-492f-8440-f4105a55d3f1, rgba(218, 218, 218, 0.6)) !important;
  }

  nav.framer-z7I7P:not(.mobile-nav-open) .framer-brfihp {
    display: flex !important;
    opacity: 1 !important;
    width: 100% !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    pointer-events: auto !important;
    overflow: visible !important;
  }

  nav.framer-z7I7P:not(.mobile-nav-open) .framer-gs57e9 {
    display: none !important;
  }

  /* Toggle Button */
  .framer-180qzzk {
    display: flex !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border-radius: 99px !important;
    background-color: var(--token-54672876-03f0-4dca-8fdb-32c421a5c4d1, rgb(106, 113, 223)) !important;
    position: relative !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10 !important;
    box-shadow: 0 2px 8px rgba(106, 113, 223, 0.3) !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .framer-1ddt0if,
  .framer-nk32ao {
    position: absolute !important;
    height: 2px !important;
    background-color: #ffffff !important;
    border-radius: 2px !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), top 0.3s ease, bottom 0.3s ease, width 0.3s ease, left 0.3s ease !important;
  }

  nav.framer-z7I7P:not(.mobile-nav-open) .framer-1ddt0if {
    width: 16px !important;
    top: 15px !important;
    left: calc(50% - 8px) !important;
    transform: none !important;
  }

  nav.framer-z7I7P:not(.mobile-nav-open) .framer-nk32ao {
    width: 16px !important;
    top: 23px !important;
    left: calc(50% - 8px) !important;
    transform: none !important;
  }

  /* Open State (Dropdown Modal Card) */
  nav.framer-z7I7P.mobile-nav-open {
    width: calc(100vw - 32px) !important;
    max-width: 320px !important;
    padding: 12px 16px 24px !important;
    border-radius: 28px !important;
    flex-direction: column !important;
    align-items: center !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2) !important;
    background-color: var(--token-dd08076e-6859-4f97-84b7-c05dcc1e773f, rgba(255, 255, 255, 0.94)) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid var(--token-621c2752-e263-492f-8440-f4105a55d3f1, rgba(218, 218, 218, 0.7)) !important;
  }

  nav.framer-z7I7P.mobile-nav-open .framer-brfihp {
    display: flex !important;
    opacity: 1 !important;
    width: 100% !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 24px !important;
    pointer-events: auto !important;
    overflow: visible !important;
  }

  nav.framer-z7I7P.mobile-nav-open .framer-fmjkww {
    display: none !important;
  }

  nav.framer-z7I7P.mobile-nav-open .framer-1ddt0if {
    width: 18px !important;
    top: 19px !important;
    left: calc(50% - 9px) !important;
    transform: rotate(45deg) !important;
  }

  nav.framer-z7I7P.mobile-nav-open .framer-nk32ao {
    width: 18px !important;
    top: 19px !important;
    left: calc(50% - 9px) !important;
    transform: rotate(-45deg) !important;
  }

  nav.framer-z7I7P.mobile-nav-open .framer-gs57e9 {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    opacity: 1 !important;
    max-width: none !important;
    align-items: center !important;
    gap: 22px !important;
    pointer-events: auto !important;
    overflow: visible !important;
  }

  nav.framer-z7I7P.mobile-nav-open .framer-1n373jv {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 20px !important;
    width: 100% !important;
  }

  nav.framer-z7I7P.mobile-nav-open .framer-xFpDQ {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 32px !important;
    text-decoration: none !important;
  }

  nav.framer-z7I7P.mobile-nav-open .framer-xFpDQ a,
  nav.framer-z7I7P.mobile-nav-open .framer-xFpDQ p,
  nav.framer-z7I7P.mobile-nav-open .framer-xFpDQ .framer-1kmmsyu {
    text-decoration: none !important;
    border-bottom: none !important;
    font-size: 16px !important;
    font-weight: 500 !important;
  }

  nav.framer-z7I7P.mobile-nav-open .framer-gBieo {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 220px !important;
    height: 48px !important;
    background-color: var(--token-54672876-03f0-4dca-8fdb-32c421a5c4d1, rgb(106, 113, 223)) !important;
    border-radius: 99px !important;
    margin-top: 8px !important;
    box-shadow: 0 4px 14px rgba(106, 113, 223, 0.35) !important;
    text-decoration: none !important;
  }

  nav.framer-z7I7P.mobile-nav-open .framer-gBieo p {
    color: #ffffff !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    text-decoration: none !important;
  }

  /* 6. Landing Picture Fit on Mobile */
  #hero img[alt*="Portrait of Axel Karambizi"],
  #hero img[alt*="alternate view"] {
    object-position: 50% 18% !important;
    transform: scale(1.3) !important;
    transform-origin: 50% 25% !important;
  }

  /* Avatar Card Badge on Mobile: Centered Waving Hand */
  .framer-DCBRB .framer-1rl3kp7-container svg {
    width: 26px !important;
    height: 26px !important;
    margin: auto !important;
  }
}

/* 6. Vibrant Green Navbar Status Dot & Radar Pulse */
.framer-y6vg2z {
  background-color: var(--token-4baed98b-3751-4e60-b570-600a506f091e, #0bde66) !important;
  box-shadow: 0 0 6px rgba(11, 222, 102, 0.7) !important;
}

.framer-13y1z4t {
  background-color: var(--token-4baed98b-3751-4e60-b570-600a506f091e, #0bde66) !important;
  border-radius: 50% !important;
  animation: greenRadarPulse 2s cubic-bezier(0.2, 0.8, 0.2, 1) infinite !important;
}

@keyframes greenRadarPulse {
  0% {
    transform: translate(-50%, -50%) scale(0.6);
    opacity: 0.9;
  }
  60% {
    transform: translate(-50%, -50%) scale(2.8);
    opacity: 0;
  }
  100% {
    transform: translate(-50%, -50%) scale(2.8);
    opacity: 0;
  }
}

/* 7. Active Custom Green Pointer (Cursor Follower) */
.framer-SsumL {
  background-color: var(--token-4baed98b-3751-4e60-b570-600a506f091e, #0bde66) !important;
  box-shadow: 0 0 12px rgba(11, 222, 102, 0.55) !important;
  border-radius: 99px !important;
  pointer-events: none !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 999999 !important;
  width: 16px !important;
  height: 16px !important;
  margin-top: -8px !important;
  margin-left: -8px !important;
  will-change: transform, opacity !important;
  transition: opacity 0.25s ease, width 0.2s cubic-bezier(0.16, 1, 0.3, 1), height 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease !important;
}

.framer-SsumL.cursor-hover {
  transform: translate(0, 0) scale(2.2) !important;
  background-color: rgba(11, 222, 102, 0.8) !important;
  box-shadow: 0 0 22px rgba(11, 222, 102, 0.85) !important;
}

.framer-SsumL.cursor-hidden {
  opacity: 0 !important;
}

/* 8. Avatar Card Badge: Replacing 'Hi' Text with Animated Waving Hand */
.framer-owsqmh-container {
  z-index: 25 !important;
}

.framer-DCBRB {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.framer-DCBRB .framer-1txd3hn {
  display: none !important;
}

.framer-DCBRB .framer-1rl3kp7-container {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
  opacity: 1 !important;
}

.framer-DCBRB .framer-1rl3kp7-container svg {
  display: block !important;
  width: 52px !important;
  height: 52px !important;
  transform-origin: 75% 75% !important;
  animation: handWaving 2.2s cubic-bezier(0.4, 0, 0.2, 1) infinite !important;
}

@keyframes handWaving {
  0%, 100% { transform: rotate(0deg); }
  12% { transform: rotate(18deg); }
  24% { transform: rotate(-10deg); }
  36% { transform: rotate(18deg); }
  48% { transform: rotate(-6deg); }
  60% { transform: rotate(14deg); }
  72% { transform: rotate(0deg); }
}

/* 9. Permanently Hide 'Get Template' & 'New Release' Floating Widgets */
.framer-rcd755-container,
.framer-1fin31n-container,
[data-framer-name*="Get Template"],
[data-framer-name*="New Release"],
[name*="Get Template"],
[name*="New Release"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* 10. Services Section & What I Can Do For You Layout & Typography Fixes */
#service,
.framer-1mkj5ho {
  height: auto !important;
  min-height: 100vh !important;
  overflow: visible !important;
  padding-top: 160px !important;
  padding-bottom: 120px !important;
  scroll-margin-top: 110px !important;
}

#service .framer-cby2j3,
.framer-1mkj5ho .framer-cby2j3 {
  height: auto !important;
  min-height: min-content !important;
  overflow: visible !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

#service .framer-aukzsn,
.framer-1mkj5ho .framer-aukzsn {
  height: auto !important;
  overflow: visible !important;
  width: 100% !important;
  max-width: 650px !important;
}

#service .framer-8g10km,
.framer-1mkj5ho .framer-8g10km {
  height: auto !important;
  overflow: visible !important;
  margin-bottom: 24px !important;
}

#service .framer-1qlmjyg,
.framer-1mkj5ho .framer-1qlmjyg {
  height: auto !important;
  overflow: visible !important;
  width: 100% !important;
}

/* Ensure the heading never gets sliced or clipped, and scales gracefully */
#service h2.framer-text,
.framer-1mkj5ho h2.framer-text {
  overflow: visible !important;
  font-size: clamp(32px, 4.5vw, 54px) !important;
  line-height: 1.25 !important;
  letter-spacing: 0.01em !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  margin: 0 !important;
  word-break: break-word !important;
  white-space: normal !important;
}

#service .framer-dhjg6f,
.framer-1mkj5ho .framer-dhjg6f {
  overflow: visible !important;
  height: auto !important;
}

@media (max-width: 809.98px) {
  #service,
  .framer-1mkj5ho {
    padding-top: 150px !important;
    padding-bottom: 70px !important;
    scroll-margin-top: 90px !important;
  }
  #service h2.framer-text,
  .framer-1mkj5ho h2.framer-text {
    font-size: clamp(26px, 7.2vw, 36px) !important;
    line-height: 1.25 !important;
    margin-top: 8px !important;
  }
}

/* 11. Permanently Visible Floating Theme Toggle (Dark & Light Mode) */
.framer-1978dwj-container {
  position: fixed !important;
  bottom: 24px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 99999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.4)) !important;
  cursor: pointer !important;
}

.framer-1978dwj-container .framer-fidmwm {
  cursor: pointer !important;
  pointer-events: auto !important;
}

@media (max-width: 809.98px) {
  .framer-1978dwj-container {
    bottom: 20px !important;
  }
}