/* ============================================
   GEXTEC — Custom Styles
   Styles that Tailwind CDN doesn't cover
   ============================================ */

/* --- Custom pistacho cursor --- */
body {
  cursor: url('../assets/images/pistacho02.png') 16 0, auto;
}

a, button, [role="button"], input[type="submit"], input[type="button"], select, .card-hover, .video-facade {
  cursor: url('../assets/images/pistacho02.png') 16 0, pointer;
}

/* --- Base & Reset --- */
html {
  scroll-behavior: smooth;
}

body {
  background-color: #FAFDF7;
  overflow-x: hidden;
}

/* --- Scroll-triggered animations --- */
.animate-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays for grid children */
.stagger-1 { transition-delay: 0ms; }
.stagger-2 { transition-delay: 100ms; }
.stagger-3 { transition-delay: 200ms; }
.stagger-4 { transition-delay: 300ms; }
.stagger-5 { transition-delay: 400ms; }
.stagger-6 { transition-delay: 500ms; }
.stagger-7 { transition-delay: 600ms; }
.stagger-8 { transition-delay: 700ms; }
.stagger-9 { transition-delay: 800ms; }

/* --- Hero overlay gradient --- */
.hero-overlay {
  background: linear-gradient(135deg, rgba(54,83,34,0.75) 0%, rgba(54,83,34,0.35) 100%);
}

/* --- Navbar transitions --- */
.navbar-transparent {
  background-color: transparent;
  box-shadow: none;
}

.navbar-solid {
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.navbar-transparent .nav-link,
.navbar-transparent .nav-logo,
.navbar-transparent .nav-logo-sub {
  color: #fff;
}

.navbar-transparent .nav-logo-img {
  filter: brightness(0) invert(1);
  transition: filter 0.3s ease;
}

.navbar-solid .nav-logo-img {
  filter: none;
  transition: filter 0.3s ease;
}

.navbar-solid .nav-link {
  color: #365322;
}

.navbar-solid .nav-logo {
  color: #365322;
}

.navbar-solid .nav-logo-sub {
  color: #4A5568;
}

.navbar-transparent .nav-cta {
  background-color: #93C572;
  color: #fff;
}

.navbar-solid .nav-cta {
  background-color: #93C572;
  color: #fff;
}

/* --- Woolma logo enhancement --- */
.woolma-logo-hero {
  filter: brightness(0) invert(1) drop-shadow(0 2px 8px rgba(0,0,0,0.3));
}

/* --- Active nav link --- */
.nav-link {
  position: relative;
  transition: color 0.3s ease;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #93C572;
  transition: width 0.3s ease;
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

/* --- Card hover effect --- */
.card-hover {
  transition: all 0.3s ease;
}

.card-hover:hover {
  box-shadow: 0 20px 40px rgba(0,0,0,0.1);
  transform: translateY(-4px);
}

/* --- Scroll indicator animation --- */
@keyframes bounce-slow {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(10px); opacity: 0.6; }
}

.scroll-indicator {
  animation: bounce-slow 2s ease-in-out infinite;
}

/* --- Counter animation --- */
.counter-number {
  font-variant-numeric: tabular-nums;
}

/* --- Testimonial carousel --- */
.testimonial-track {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.testimonial-slide {
  min-width: 100%;
  flex-shrink: 0;
}

/* --- YouTube facade --- */
.video-facade {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
  border-radius: 12px;
  cursor: pointer;
  background-color: #1a1a1a;
}

.video-facade img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.3s ease;
}

.video-facade:hover img {
  opacity: 0.85;
}

.video-facade .play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 68px;
  height: 48px;
  z-index: 2;
  transition: transform 0.3s ease;
}

.video-facade:hover .play-btn {
  transform: translate(-50%, -50%) scale(1.1);
}

.video-facade iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* --- Mobile menu --- */
.mobile-menu {
  transform: translateX(100%);
  transition: transform 0.3s ease-in-out;
  background-color: #fff !important;
  overflow-y: auto;
}

.mobile-menu.open {
  transform: translateX(0);
}

.mobile-overlay {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-in-out;
  background-color: rgba(0, 0, 0, 0.6) !important;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.mobile-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

/* --- Accordion for services --- */
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease-out;
}

.accordion-content.open {
  max-height: 600px;
}

.accordion-icon {
  transition: transform 0.3s ease;
}

.accordion-icon.rotated {
  transform: rotate(180deg);
}

/* --- Cookie banner --- */
.cookie-banner {
  transform: translateY(100%);
  transition: transform 0.4s ease-out;
}

.cookie-banner.show {
  transform: translateY(0);
}

/* --- Timeline --- */
.timeline-line {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: #93C572;
  transform: translateX(-50%);
}

@media (max-width: 768px) {
  .timeline-line {
    left: 24px;
  }
}

.timeline-dot {
  width: 16px;
  height: 16px;
  background-color: #93C572;
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 3px #93C572;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

@media (max-width: 768px) {
  .timeline-dot {
    left: 24px;
  }
}

/* --- Form conditional field --- */
.conditional-field {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.3s ease;
}

.conditional-field.show {
  max-height: 120px;
  opacity: 1;
}

/* --- Floating phone button pulse --- */
@keyframes pulse-ring {
  0% { box-shadow: 0 0 0 0 rgba(147, 197, 114, 0.5); }
  70% { box-shadow: 0 0 0 15px rgba(147, 197, 114, 0); }
  100% { box-shadow: 0 0 0 0 rgba(147, 197, 114, 0); }
}

.pulse-animation {
  animation: pulse-ring 2s ease-out infinite;
}

/* --- CTA gradient --- */
.cta-gradient {
  background: linear-gradient(135deg, #365322 0%, #7AB356 100%);
}

/* --- Selection color --- */
::selection {
  background-color: #93C572;
  color: #fff;
}

/* --- Focus styles for accessibility --- */
:focus-visible {
  outline: 2px solid #93C572;
  outline-offset: 2px;
}

/* --- Print styles --- */
@media print {
  .no-print { display: none !important; }
  body { background: #fff; }
}