@import url("https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

.fira-sans-thin {
  font-family: "Fira Sans", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.fira-sans-extralight {
  font-family: "Fira Sans", sans-serif;
  font-weight: 200;
  font-style: normal;
}

.fira-sans-light {
  font-family: "Fira Sans", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.fira-sans-regular {
  font-family: "Fira Sans", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.fira-sans-medium {
  font-family: "Fira Sans", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.fira-sans-semibold {
  font-family: "Fira Sans", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.fira-sans-bold {
  font-family: "Fira Sans", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.fira-sans-extrabold {
  font-family: "Fira Sans", sans-serif;
  font-weight: 800;
  font-style: normal;
}

.fira-sans-black {
  font-family: "Fira Sans", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.fira-sans-thin-italic {
  font-family: "Fira Sans", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.fira-sans-extralight-italic {
  font-family: "Fira Sans", sans-serif;
  font-weight: 200;
  font-style: italic;
}

.fira-sans-light-italic {
  font-family: "Fira Sans", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.fira-sans-regular-italic {
  font-family: "Fira Sans", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.fira-sans-medium-italic {
  font-family: "Fira Sans", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.fira-sans-semibold-italic {
  font-family: "Fira Sans", sans-serif;
  font-weight: 600;
  font-style: italic;
}

.fira-sans-bold-italic {
  font-family: "Fira Sans", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.fira-sans-extrabold-italic {
  font-family: "Fira Sans", sans-serif;
  font-weight: 800;
  font-style: italic;
}

.fira-sans-black-italic {
  font-family: "Fira Sans", sans-serif;
  font-weight: 900;
  font-style: italic;
}

/* ══════════════════════════════════════════════════════════
   Modern Fixed Transparent & Scrolled Navbar System
   ══════════════════════════════════════════════════════════ */

#site-header {
  --scroll-progress: 0;
  background-color: rgba(
    255,
    255,
    255,
    calc(0.92 * var(--scroll-progress))
  ) !important;
  backdrop-filter: blur(calc(16px * var(--scroll-progress))) !important;
  -webkit-backdrop-filter: blur(calc(16px * var(--scroll-progress))) !important;
  box-shadow:
    0 15px 35px -5px rgba(0, 0, 0, calc(0.1 * var(--scroll-progress))),
    0 5px 15px -5px rgba(0, 0, 0, calc(0.05 * var(--scroll-progress))) !important;
  border-bottom: 1px solid rgba(0, 0, 0, calc(0.06 * var(--scroll-progress))) !important;
  padding-top: calc(1.75rem - 0.9rem * var(--scroll-progress)) !important;
  padding-bottom: calc(1.75rem - 0.9rem * var(--scroll-progress)) !important;
  transition: none !important; /* Fully driven by scroll position */
}

/* Brand logo and text in dynamic state */
#site-header #nav-brand img {
  filter: brightness(calc(1 - var(--scroll-progress)))
    invert(calc(1 - var(--scroll-progress))) !important;
  transition: transform 0.3s ease !important;
}
#site-header #nav-brand span:first-child {
  color: color-mix(
    in srgb,
    var(--color-text-primary) calc(var(--scroll-progress) * 100%),
    #ffffff
  ) !important;
}
#site-header #nav-brand span:last-child {
  color: color-mix(
    in srgb,
    var(--color-text-muted) calc(var(--scroll-progress) * 100%),
    rgba(255, 255, 255, 0.65)
  ) !important;
}

/* Nav links standard styling */
#desktop-nav a:not(.px-5) {
  padding: 0.5rem 1.15rem !important;
  border-radius: 0.5rem !important;
  transition: background-color 0.2s ease, transform 0.2s ease !important;
  border-bottom: none !important;
  display: inline-block;
}

/* Nav links in dynamic state */
#site-header #desktop-nav a:not(.px-5) {
  color: color-mix(
    in srgb,
    var(--color-text-body) calc(var(--scroll-progress) * 100%),
    rgba(255, 255, 255, 0.85)
  ) !important;
  background-color: transparent !important;
}
#site-header #desktop-nav a:not(.px-5):not(.nav-active):hover {
  color: color-mix(
    in srgb,
    var(--color-primary) calc(var(--scroll-progress) * 100%),
    #ffffff
  ) !important;
  background-color: color-mix(
    in srgb,
    rgba(249, 115, 22, 0.05) calc(var(--scroll-progress) * 100%),
    rgba(255, 255, 255, 0.1)
  ) !important;
}
#site-header #desktop-nav a.nav-active {
  color: var(--color-primary) !important;
  background-color: color-mix(
    in srgb,
    rgba(249, 115, 22, 0.09) calc(var(--scroll-progress) * 100%),
    rgba(255, 255, 255, 0.18)
  ) !important;
}

/* Hamburger button in dynamic state */
#site-header #mobile-menu-btn span {
  background-color: color-mix(
    in srgb,
    var(--color-text-primary) calc(var(--scroll-progress) * 100%),
    #ffffff
  ) !important;
}

#site-header.menu-open {
  background-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  border-bottom-color: transparent !important;
  padding-top: 1.75rem !important;
  padding-bottom: 1.75rem !important;
  transition:
    background-color 0.15s ease,
    box-shadow 0.15s ease,
    border-color 0.15s ease,
    padding-top 0.4s ease,
    padding-bottom 0.4s ease !important;
}

#site-header #nav-brand {
  transition: opacity 0.1s ease !important;
}

#site-header.menu-open #nav-brand {
  opacity: 0 !important;
  pointer-events: none !important;
}
#site-header.menu-open #mobile-menu-btn span {
  background-color: var(--color-text-primary) !important;
}

/* ── mobile side drawer menu custom styles ──────────────── */
#mobile-menu {
  box-shadow: -10px 0 35px rgba(0, 0, 0, 0.08);
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#mobile-menu.active {
  transform: translateX(0) !important;
}

#mobile-menu a {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#mobile-menu a:not(.px-8) {
  color: var(--color-text-muted) !important;
  background-color: transparent !important;
}

#mobile-menu a.nav-active:not(.px-8) {
  color: var(--color-primary) !important;
  background-color: rgba(249, 115, 22, 0.08) !important;
}

#mobile-menu a:not(.px-8):hover {
  color: var(--color-primary) !important;
  background-color: rgba(249, 115, 22, 0.04) !important;
}

#mobile-menu nav a span {
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

#mobile-menu nav a:hover span {
  transform: translateX(6px);
}

/* ─── Scroll Reveal Animations ────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(30px) scale(0.96);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: transform, opacity;
}

.reveal.revealed {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
}

/* Staggered Delays */
.reveal-delay-1 { transition-delay: 0.05s !important; }
.reveal-delay-2 { transition-delay: 0.15s !important; }
.reveal-delay-3 { transition-delay: 0.25s !important; }
.reveal-delay-4 { transition-delay: 0.35s !important; }
.reveal-delay-5 { transition-delay: 0.45s !important; }