/* Animation Delay Utilities */
.animation-delay-200 {
  animation-delay: 200ms;
}

.animation-delay-150 {
  animation-delay: 150ms;
}

.animation-delay-300 {
  animation-delay: 300ms;
}

.animation-delay-450 {
  animation-delay: 450ms;
}

/* 3D Transform Utilities */
.preserve-3d {
  transform-style: preserve-3d;
}

.backface-hidden {
  backface-visibility: hidden;
}

/* Hero Image Styles - Full viewport width with dynamic transform */
.hero-image-after,
.hero-image-before {
  width: 100vw;
  max-width: none;
  transform: scale(1.02) translateY(calc(var(--offset-y, 0) * 0.05px));
}

/* Slider Dynamic Width */
.slider-clip {
  width: calc(var(--slider-position, 50) * 1%);
}

/* Slider Line Position */
.slider-line {
  left: calc(var(--slider-position, 50) * 1%);
}

/* Carousel 3D Rotation */
.carousel-container {
  transform: rotateX(-2deg) rotateY(calc(var(--rotation, 0) * 1deg));
  transform-style: preserve-3d;
}

/* Carousel Card Position */
.carousel-card {
  transform: rotateY(calc(var(--angle, 0) * 1deg)) translateZ(calc(var(--radius, 200) * 1px));
  transform-style: preserve-3d;
}

/* Animation Delay Dynamic */
.animation-delay-dynamic {
  animation-delay: calc(var(--delay, 0) * 1ms);
}

/* Mobile Optimizations - Reduce animations on touch devices */
@media (hover: none) and (pointer: coarse) {

  /* Disable parallax on mobile for better scroll performance */
  .hero-image-after,
  .hero-image-before {
    transform: scale(1.02) !important;
  }

  /* Reduce motion on mobile */
  .animate-float {
    animation: none;
  }
}

/* ========================================
   LOGO REPLACEMENT - Using ::before content
   ======================================== */

/* HEADER LOGO */
header a[href="#"] {
  position: relative !important;
  display: block !important;
  width: 220px !important;
  height: 60px !important;
  overflow: visible !important;
}

header a[href="#"]::before {
  content: url('/assets/logo-ecorenov-new.png') !important;
  display: block !important;
  position: absolute !important;
  top: 50% !important;
  left: 0 !important;
  transform: translateY(-50%) scale(0.15) !important;
  transform-origin: left center !important;
  z-index: 9999 !important;
}

header a[href="#"]>div,
header a[href="#"]>span {
  display: none !important;
}

/* FOOTER LOGO */
footer .space-y-6>.flex.items-center {
  position: relative !important;
  display: block !important;
  width: 200px !important;
  height: 55px !important;
  overflow: visible !important;
}

footer .space-y-6>.flex.items-center::before {
  content: url('/assets/logo-ecorenov-new.png') !important;
  display: block !important;
  position: absolute !important;
  top: 50% !important;
  left: 0 !important;
  transform: translateY(-50%) scale(0.12) !important;
  transform-origin: left center !important;
  z-index: 9999 !important;
}

footer .space-y-6>.flex.items-center>* {
  display: none !important;
}

/* ========================================
   COLOR OVERRIDE - Logo Blue Theme
   Dark Teal: #0d5a6e | Blue: #1e5fab
   ======================================== */

/* Override emerald/accent colors with Logo Blue */
.text-accent,
.text-emerald-500,
.text-emerald-600,
.text-emerald-400 {
  color: #0d5a6e !important;
}

.bg-accent,
.bg-emerald-500,
.bg-emerald-600,
.bg-emerald-400 {
  background-color: #0d5a6e !important;
}

.hover\:bg-accent:hover,
.hover\:bg-emerald-500:hover,
.hover\:bg-emerald-400:hover,
.hover\:bg-emerald-600:hover {
  background-color: #1e5fab !important;
}

.border-emerald-500,
.border-emerald-600,
.border-accent {
  border-color: #0d5a6e !important;
}

.shadow-emerald-500\/20,
.shadow-accent\/20 {
  --tw-shadow-color: rgba(13, 90, 110, 0.2) !important;
}

/* Gradient text override - fix clipping issue */
.text-transparent,
.bg-clip-text,
span.text-transparent,
span.bg-clip-text,
.italic.text-transparent {
  background: linear-gradient(to right, #0d5a6e, #1e5fab) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  display: inline-block !important;
}

/* Button and interactive elements */
.bg-emerald-500\/10,
.bg-accent\/10 {
  background-color: rgba(13, 90, 110, 0.1) !important;
}

.bg-emerald-500\/20,
.bg-accent\/20 {
  background-color: rgba(13, 90, 110, 0.2) !important;
}

/* Mobile logo adjustments */
@media (max-width: 768px) {
  header a[href="#"] span {
    width: 160px;
    height: 45px;
  }

  footer .flex.items-center.space-x-2 span {
    width: 140px;
    height: 40px;
  }
}

/* Carousel navigation - push arrows DOWN with more spacing */
#process .relative {
  padding-bottom: 100px !important;
}

/* Arrow buttons - position them lower */
button[class*="rounded-full"][class*="shadow"] {
  position: relative !important;
  top: 40px !important;
}