/* 
  Aurowl Studio - Animations & Component Styles 
  Optimized for performance and modern feel.
*/

/* --- Animation Utilities --- */

/* Base state for elements that will animate up */
.animate-up {
  opacity: 0;
  transform: translateY(30px) scale(0.98);
  filter: blur(2px);
  transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), 
              transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1),
              filter 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: opacity, transform, filter;
}

.animate-up.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

/* Base state for elements that will fade in */
.animate-fade {
  opacity: 0;
  transition: opacity 1.2s ease-out;
  will-change: opacity;
}

.animate-fade.is-visible {
  opacity: 1;
}

/* Stagger delays for sequential animations */
.delay-100 { transition-delay: 0.1s; }
.delay-200 { transition-delay: 0.2s; }
.delay-300 { transition-delay: 0.3s; }

/* --- Component: Custom Slider --- */

.w-slider-mask {
  overflow: hidden;
  position: relative;
  display: block;
  z-index: 1;
}

.custom-slider-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
}

.w-slide {
  flex: 0 0 100%;
  width: 100%;
  height: auto;
  white-space: normal;
  position: relative;
}

/* Slider Dots */
.w-slider-nav {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 12px;
  z-index: 2;
}

.w-slider-dot {
  cursor: pointer;
  width: 10px;
  height: 10px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  transition: background 0.3s ease, transform 0.3s ease;
}

.w-slider-dot:hover {
  background: rgba(255, 255, 255, 0.6);
  transform: scale(1.2);
}

.w-slider-dot.w-active {
  background: white;
  transform: scale(1.2);
}

/* Slider Arrows */
.w-slider-arrow-left,
.w-slider-arrow-right {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  cursor: pointer;
  padding: 20px;
  transition: opacity 0.3s;
  opacity: 0.6;
}

.w-slider-arrow-left:hover,
.w-slider-arrow-right:hover {
  opacity: 1;
}

/* --- Component: Mobile Navbar --- */



/* --- Hover Reveal for Services --- */

.services_item_container {
  overflow: visible !important;
  position: relative;
  z-index: 5;
  transition: opacity 0.4s ease, z-index 0s; 
  will-change: opacity;
}

/* 
   Fix: Boost z-index of the hovered container so its children 
   (the revealed image) sit on top of neighboring items' borders.
*/
.services_item_container:hover {
  z-index: 50;
}

.services_text_container {
  overflow: visible !important;
  position: relative;
  z-index: 20;
  padding-right: 20px; 
}

.services_text {
  display: block;
  position: relative;
  z-index: 20;
  overflow: visible !important;
  margin-right: 0;
  padding-right: 0;
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: opacity, transform;
}

/* Focus Effect: Dim others */
.services_list_container:hover .services_text {
  opacity: 0.3;
}

/* Restore hovered item */
.services_item_container:hover .services_text {
  opacity: 1 !important;
  transform: translateX(10px);
}

/* Image Animation */
.services_item_container .services_image {
  opacity: 0;
  transform: scale(0.8) rotate(-2deg);
  transform-origin: center center;
  transition: opacity 0.4s ease-out, transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  will-change: opacity, transform;
  pointer-events: none; 
  z-index: 10;
  
  /* 
     Fix: Ensure image covers the parent's own borders.
     Borders are 2px wide. 
  */
  top: -2px !important;
  bottom: -2px !important;
}

.services_item_container:hover .services_image {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}