/**
 * Webflow Animation & Interaction Styles Replacement
 * ==================================================
 * This CSS replaces Webflow's IX2 (Interactions 2.0) initial states
 * and provides smooth animations for self-hosted deployment.
 */

/* ===========================================
   0. NAVBAR FIXES
   =========================================== */

/* Ensure navbar v3 is visible and has proper z-index */
.navbar.v3 {
  z-index: 1000;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: transparent !important;
  box-shadow: none !important;
}

/* Reduce navbar container height/padding */
.navbar.v3 .navbar-container._3 {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}

/* Ensure navbar global is visible and properly styled */
.navbar.global {
  z-index: 1000;
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  background-color: var(--bg-color, #151614) !important;
}

/* Nav container - use flexbox with space-between */
.navbar.global .nav-container {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

/* CRITICAL: Override Webflow's collapse behavior that hides nav on medium screens */
.navbar.global .w-nav-menu {
  display: flex !important;
  position: static !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  width: auto !important;
  height: auto !important;
  background-color: transparent !important;
  float: none !important;
  margin-left: auto !important;
}

/* Force global nav menu to display */
.navbar.global .global-nav-menu {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  width: auto !important;
  margin-left: auto !important;
  margin-right: 10px !important;
}

.navbar.global .menu-container {
  display: flex !important;
  flex: 0 0 auto !important;
  justify-content: flex-end !important;
  padding-right: 0 !important;
}

/* Use EXACT same styles as original .navlink class */
.navbar.global .navlink {
  display: flex !important;
  color: var(--white, #fff) !important;
  padding: 12px !important;
  font-weight: 400 !important;
  font-family: 'Generalsans Variable', sans-serif !important;
  font-size: 17px !important;
  transition: color 0.35s !important;
}

.navbar.global .navlink:hover {
  color: var(--accent-color, #b485f2) !important;
}

/* Hide hamburger on global navbar for desktop */
.navbar.global .menu-button,
.navbar.global .w-nav-button {
  display: none !important;
}

/* CRITICAL: Force nav menu to display on ALL desktop screens */
.navbar.v3 .w-nav-menu {
  display: flex !important;
}

/* Make sure the nav menu v3 pill background is visible */
.nav-menu.v3 {
  background-color: var(--accent-color, #b485f2) !important;
  border-radius: 80px;
  display: flex !important;
  position: relative !important;
  width: auto !important;
  height: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* Ensure menu container is visible */
.menu-container-v3 {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Ensure nav links in v3 navbar have proper contrast (black on purple) */
.navlink.v3 {
  color: var(--black, #000000) !important;
  opacity: 0.7;
  display: flex !important;
}

.navlink.v3:hover {
  opacity: 1;
}

/* Make sure cart-wrap is visible but hide hamburger menu on desktop */
.navbar.v3 .cart-wrap {
  display: flex !important;
}

/* Hide hamburger menu on desktop - not needed */
.navbar.v3 .menu-wrap,
.navbar.v3 .w-nav-button {
  display: none !important;
}

/* ===========================================
   1. IX2 CLASS - Enable Animation Initial States
   =========================================== */

/* When JavaScript loads, the w-mod-ix class is added to enable initial states */
html.w-mod-ix [data-w-id] {
  /* Elements are ready for animations */
}

/* ===========================================
   2. FADE-IN ANIMATIONS
   =========================================== */

/* Default fade-in animation */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Hero content animation */
.hero-v3 .content-wrapper,
.hero-v3 .feature-wrapper {
  animation: fadeInUp 0.6s ease-out forwards;
}

.hero-v3 .feature-wrapper {
  animation-delay: 0.3s;
}

/* ===========================================
   3. NAVIGATION MENU TRANSITIONS
   =========================================== */

/* Mobile navigation */
.w-nav-menu {
  transition: transform 400ms ease-in-out, opacity 400ms ease-in-out;
}

/* Over-right animation (slide from right) */
.w-nav[data-animation="over-right"] .w-nav-menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 400px;
  transform: translateX(100%);
  z-index: 1000;
  background-color: var(--bg-color, #151614);
}

.w-nav[data-animation="over-right"] .w-nav-menu.w--open {
  transform: translateX(0);
}

/* Menu button animation */
.w-nav-button {
  transition: background-color 200ms ease;
}

.w-nav-button.w--open {
  background-color: rgba(255, 255, 255, 0.1);
}

/* ===========================================
   4. DROPDOWN TRANSITIONS
   =========================================== */

.w-dropdown-list {
  display: none;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 200ms ease, transform 200ms ease;
}

.w-dropdown.w--open .w-dropdown-list {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

/* ===========================================
   5. SERVICE CARD HOVER EFFECTS
   =========================================== */

.service-card {
  transition: background-color 300ms ease, transform 300ms ease;
}

.service-card:hover {
  background-color: rgb(34, 35, 37);
}

.service-arrow {
  transition: transform 300ms ease;
}

.service-card:hover .service-arrow {
  transform: translate3d(10px, 0, 0);
}

/* ===========================================
   6. BLOG CARD HOVER EFFECTS
   =========================================== */

.blog-cell-v3,
.blog-cell-v2,
.blog-cell {
  overflow: hidden;
}

.blog-cell-v3 .full-image,
.blog-cell-v2 .full-image,
.blog-cell .full-image {
  transition: transform 400ms ease, filter 400ms ease;
}

.blog-cell-v3:hover .full-image,
.blog-cell-v2:hover .full-image,
.blog-cell:hover .full-image {
  transform: scale(1.05);
  filter: grayscale(0%);
}

.blog-cell-v3 .heading-h3,
.blog-cell-v2 .heading-h3,
.blog-cell .heading-h3 {
  transition: color 300ms ease;
}

.blog-cell-v3:hover .heading-h3,
.blog-cell-v2:hover .heading-h3,
.blog-cell:hover .heading-h3 {
  color: var(--accent-color, #b485f2);
}

.blog-image-frame {
  overflow: hidden;
}

/* ===========================================
   7. BUTTON HOVER EFFECTS
   =========================================== */

.button {
  transition: background-color 300ms ease, transform 200ms ease;
}

.button:hover {
  transform: translateY(-2px);
}

.secondery-button {
  transition: all 300ms ease;
}

.secondery-button .button-text {
  transition: color 300ms ease;
}

.secondery-button:hover .button-text {
  color: rgb(255, 255, 255);
}

.secondery-button .button-arrow {
  transition: transform 300ms ease;
}

.secondery-button:hover .button-arrow {
  transform: translateX(5px);
}

/* Round button hover */
.round-button {
  transition: transform 300ms ease;
}

.round-button:hover {
  transform: scale(1.1);
}

/* ===========================================
   8. FORM TRANSITIONS
   =========================================== */

.w-form-done,
.w-form-fail {
  animation: fadeIn 300ms ease forwards;
}

.text-field {
  transition: border-color 200ms ease, box-shadow 200ms ease;
}

.text-field:focus {
  border-color: var(--accent-color, #b485f2);
  box-shadow: 0 0 0 3px rgba(180, 133, 242, 0.2);
}

/* ===========================================
   9. NAVBAR SCROLL EFFECTS
   =========================================== */

.navbar {
  transition: background-color 300ms ease, box-shadow 300ms ease;
}

.navbar.scrolled {
  background-color: rgba(21, 22, 20, 0.95);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* ===========================================
   10. COLLECTION/DYNAMIC LIST STATES
   =========================================== */

.w-dyn-empty {
  display: none;
}

.w-dyn-list:not(:has(.w-dyn-items > *)) .w-dyn-empty {
  display: block;
}

/* Hide empty bound elements */
.w-dyn-bind-empty:empty {
  display: none;
}

/* ===========================================
   11. SCROLL-TRIGGERED ANIMATIONS
   =========================================== */

/* Elements that animate on scroll */
[data-w-id][style*="opacity: 0"],
[data-w-id][style*="opacity:0"] {
  transition: opacity 600ms ease-out, transform 600ms ease-out;
}

/* Container for features row animation */
.row-wrap {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 0.6s ease-out 0.2s forwards;
}

/* ===========================================
   12. UNDERLINE ANIMATIONS
   =========================================== */

.underline {
  position: relative;
  height: 2px;
  background-color: var(--accent-color, #b485f2);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 300ms ease;
}

.navlink:hover .underline,
.dropdown-link:hover .underline {
  transform: scaleX(1);
}

/* ===========================================
   13. IMAGE LOADING STATES
   =========================================== */

img {
  opacity: 1;
  transition: opacity 300ms ease;
}

img[loading="lazy"] {
  opacity: 0;
}

img[loading="lazy"].loaded,
img[loading="lazy"]:not([src=""]) {
  opacity: 1;
}

/* ===========================================
   14. CART & COMMERCE MODALS
   =========================================== */

.w-commerce-commercecartcontainerwrapper {
  opacity: 0;
  visibility: hidden;
  transition: opacity 300ms ease, visibility 300ms ease;
}

.w-commerce-commercecartcontainerwrapper[style*="display: flex"],
.w-commerce-commercecartcontainerwrapper.w--open {
  opacity: 1;
  visibility: visible;
}

.w-commerce-commercecartcontainer {
  transform: translateX(100%);
  transition: transform 400ms ease-in-out;
}

.w-commerce-commercecartcontainerwrapper--cartType-modal .w-commerce-commercecartcontainer {
  transform: scale(0.9);
  transition: transform 300ms ease;
}

.w-commerce-commercecartcontainerwrapper[style*="display: flex"] .w-commerce-commercecartcontainer,
.w-commerce-commercecartcontainerwrapper.w--open .w-commerce-commercecartcontainer {
  transform: translateX(0);
}

.w-commerce-commercecartcontainerwrapper--cartType-modal[style*="display: flex"] .w-commerce-commercecartcontainer {
  transform: scale(1);
}

/* ===========================================
   15. RESPONSIVE ADJUSTMENTS
   =========================================== */

@media screen and (max-width: 991px) {
  /* Tablet and below - ensure mobile menu works */
  .w-nav-menu {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    background-color: var(--bg-color, #151614);
  }
}

@media screen and (max-width: 767px) {
  /* Mobile - simplify animations for performance */
  .service-card:hover,
  .blog-cell-v3:hover .full-image {
    transform: none;
  }
}

/* ===========================================
   16. PREFERS-REDUCED-MOTION
   =========================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}