/* ==========================================================================
   Garage Door Toronto - Enhanced Animations & Interactive Design System
   ========================================================================== */

/* 1. Header & Navigation - Fully transparent over hero, dark with black border on scroll */
header.site-header,
header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  background: transparent !important;
  background-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  transition: background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              backdrop-filter 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  z-index: 50 !important;
}

header.site-header:before {
  content: "" !important;
  opacity: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

header.site-header.is-scrolled,
header.is-scrolled {
  background-color: #0b1120 !important;
  background: rgba(11, 17, 32, 0.97) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.7) !important;
  border-bottom: 1px solid #000000 !important; /* Black border on scroll as requested */
}

header.site-header.is-scrolled:before {
  opacity: 1 !important;
  background: rgba(11, 17, 32, 0.98) !important;
  backdrop-filter: blur(16px) saturate(130%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(130%) !important;
}

/* 2. Desktop Dropdown Menu - Anchored directly under Services button */
.services-dropdown-wrapper {
  position: relative !important;
}

#desktop-services {
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  right: auto !important;
  top: 100% !important;
  width: 36rem !important;
  max-width: calc(100vw - 2rem) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(10px) !important;
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.25s ease !important;
  pointer-events: none !important;
  z-index: 1000 !important;
}

.services-dropdown-wrapper:hover #desktop-services,
.services-dropdown-wrapper:focus-within #desktop-services,
.services-dropdown-wrapper.is-open #desktop-services,
#desktop-services.is-open {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

.services-dropdown-wrapper:hover .lucide-chevron-down,
.services-dropdown-wrapper.is-open .lucide-chevron-down,
.relative:hover .lucide-chevron-down {
  transform: rotate(180deg);
}

#desktop-services .lucide-chevron-down,
.services-dropdown-wrapper .lucide-chevron-down {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

#desktop-services a {
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid transparent;
}

#desktop-services a:hover {
  background-color: rgba(234, 179, 8, 0.14) !important;
  border-color: rgba(234, 179, 8, 0.35);
  transform: translateX(4px);
}

#desktop-services a:hover .font-bold {
  color: #eab308 !important;
}

/* 3. Mobile Navigation Drawer Animation */
.mobile-nav-container {
  transition: visibility 0.3s ease;
  pointer-events: none;
}

.mobile-nav-container.is-open {
  pointer-events: auto !important;
  visibility: visible !important;
}

.mobile-nav-backdrop {
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.mobile-nav-container.is-open .mobile-nav-backdrop {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.mobile-nav-aside {
  transition: translate 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: translate, transform;
}

.mobile-nav-container.is-open .mobile-nav-aside,
.mobile-nav-container.is-open aside[aria-label="Mobile menu"],
aside[aria-label="Mobile menu"].is-open {
  translate: 0px 0px !important;
  transform: none !important;
}

.mobile-services-accordion {
  overflow: hidden !important;
  transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease !important;
}

.mobile-services-accordion.is-open {
  max-height: 800px !important;
  opacity: 1 !important;
}

/* 4. Hero Carousel, Overlays & Ken-Burns Animation */
.home-hero {
  position: relative !important;
  min-height: 640px !important;
  padding-top: 130px !important;
  padding-bottom: 70px !important;
}

.page-hero {
  position: relative !important;
  min-height: 380px !important;
  padding-top: 140px !important;
  padding-bottom: 60px !important;
}

.home-hero img.hero-slide {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  z-index: 1 !important;
  opacity: 0 !important;
  transform: scale(1) !important;
  transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1),
              transform 6.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: transform, opacity;
}

.home-hero img.hero-slide.active {
  opacity: 1 !important;
  transform: scale(1.05) !important;
  z-index: 2 !important;
}

.home-hero .bg-hero-overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 4 !important;
  background: linear-gradient(90deg, rgba(11, 17, 32, 0.94) 0%, rgba(11, 17, 32, 0.82) 45%, rgba(11, 17, 32, 0.58) 100%) !important;
}

.home-hero .hero-content {
  position: relative !important;
  z-index: 10 !important;
}

.page-hero {
  position: relative !important;
}

.page-hero .bg-hero-overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 4 !important;
  background: linear-gradient(90deg, rgba(11, 17, 32, 0.93) 0%, rgba(11, 17, 32, 0.78) 100%) !important;
}

.page-hero .container-site {
  position: relative !important;
  z-index: 10 !important;
}

.hero-dot-btn {
  cursor: pointer;
  outline: none;
  transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.35s ease !important;
}

.hero-dot-btn.active {
  width: 2.5rem !important;
  background-color: #eab308 !important;
}

.hero-dot-btn:not(.active) {
  width: 1.25rem !important;
  background-color: rgba(255, 255, 255, 0.45) !important;
}

.hero-dot-btn:hover:not(.active) {
  background-color: rgba(255, 255, 255, 0.85) !important;
}

/* 5. Service Bento Cards Hover Effects */
.service-tile {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.35s ease !important;
  will-change: transform;
}

.service-tile:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 20px 35px -10px rgba(0, 0, 0, 0.5), 0 0 25px rgba(234, 179, 8, 0.2) !important;
  border-color: rgba(234, 179, 8, 0.5) !important;
}

.service-tile .service-tile-image {
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: transform;
}

.service-tile:hover .service-tile-image {
  transform: scale(1.08) !important;
}

.service-tile:hover .service-tile-cta {
  background-color: #eab308 !important;
  color: #0b1120 !important;
  border-color: #eab308 !important;
  box-shadow: 0 4px 15px rgba(234, 179, 8, 0.4);
}

.service-tile .service-tile-cta svg {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.service-tile:hover .service-tile-cta svg {
  transform: translate(3px, -3px);
}

/* 6. Buttons & Interactive Links */
.btn-primary, .header-call {
  position: relative;
  overflow: hidden;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.25s ease !important;
}

.btn-primary:hover, .header-call:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px -4px rgba(234, 179, 8, 0.5) !important;
}

.btn-primary:active, .header-call:active {
  transform: translateY(0);
}

.btn-ghost {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.25s ease,
              border-color 0.25s ease !important;
}

.btn-ghost:hover {
  transform: translateY(-2px);
  background-color: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
}

.btn-ghost:active {
  transform: translateY(0);
}

/* 7. Scroll Reveal Smooth Animations */
.scroll-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

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

/* Stagger delays for children */
.stagger-1 { transition-delay: 0.08s; }
.stagger-2 { transition-delay: 0.16s; }
.stagger-3 { transition-delay: 0.24s; }
.stagger-4 { transition-delay: 0.32s; }

/* 8. FAQ Details & Summary Animation */
details {
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

details[open] {
  background-color: rgba(234, 179, 8, 0.04);
}

details summary {
  cursor: pointer;
  user-select: none;
  transition: color 0.2s ease;
}

details summary:hover {
  color: #eab308;
}

details summary svg {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

details[open] summary svg {
  transform: rotate(45deg);
}

/* 9. Smooth Scrolling */
html {
  scroll-behavior: smooth;
}

/* 10. Quote Form Toast Alert */
.quote-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 999999;
  background: #0f172a;
  color: #fff;
  border: 1px solid #eab308;
  padding: 16px 24px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  gap: 12px;
  transform: translateY(100px);
  opacity: 0;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.quote-toast.show {
  transform: translateY(0);
  opacity: 1;
}

/* 11. Testimonials 3-Card Carousel Styling */
#testimonials-track {
  display: flex !important;
  width: 100% !important;
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: transform;
}

.testimonial-slide {
  width: 33.333333% !important;
  min-width: 33.333333% !important;
  max-width: 33.333333% !important;
  flex: 0 0 33.333333% !important;
  box-sizing: border-box !important;
}

@media (max-width: 1024px) {
  .testimonial-slide {
    width: 50% !important;
    min-width: 50% !important;
    max-width: 50% !important;
    flex: 0 0 50% !important;
  }
}

@media (max-width: 640px) {
  .testimonial-slide {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
}


#lovable-badge, aside#lovable-badge {
    display: none !important;
}