/* ======================== */
/* --- Autoshow text animation --- */
.autoshow {
  opacity: 0;
  transform: translateY(50px);
  animation: text-appear 1s forwards;
  animation-delay: 0s; /* JS can override */
  will-change: opacity, transform;
}

@keyframes text-appear {
  from { opacity: 0; transform: translateY(50px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ======================== */
/* --- Image reveal animation --- */
.imageReveal {
  opacity: 0;
  transform: scale(0.95) translateY(50px);
  filter: saturate(0) contrast(4) brightness(0.1) blur(5px);
  animation: imageReveal 1s forwards;
  animation-delay: 0s; /* JS can override */
  will-change: opacity, transform, filter;
}

@keyframes imageReveal {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(50px);
    filter: saturate(0) contrast(4) brightness(0.1) blur(5px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: none;
  }
}

/* ======================== */
/* --- Line grow from left --- */
.lineshow {
  display: block;
  width: 100%;
  transform-origin: left;
  transform: scaleX(0);
  animation: none;
  will-change: transform;
}

.lineshow.active {
  animation: lineGrow 1s forwards;
}

@keyframes lineGrow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ======================== */
/* --- Line fade stagger --- */
.line-fade {
  opacity: 0;
  transform: translateY(20px);
  animation: none;
  will-change: opacity, transform;
}

.line-fade.active {
  animation: lineFadeIn 0.8s ease-out forwards;
}

@keyframes lineFadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ======================== */
/* --- Custom Elementor Button Hover --- */

/* Button wrapper */
.ani-btn {
  position: relative;
  overflow: hidden;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.4s ease;
}

/* Diagonal overlay */
.ani-btn::before {
  content: "";
  position: absolute;
  left: 0%;     
  top: 150%;       /* start fully below */
  width: 400%;     
  height: 400%;
  background: #000;
  transform: skewY(-20deg);
  z-index: -1;     
  transition: top 0.5s ease, left 0.5s ease;
}

/* Text default state */
.ani-btn .elementor-button-text {
  transition: transform 0.5s ease, color 0.4s ease;
  color: #000; 
}

/* Icon default state (SVG compatible) */
.ani-btn .elementor-button-icon svg {
  fill: #000; 
  transition: transform 0.6s ease 0.1s, fill 0.4s ease 0.1s;
}

/* Hover text */
.ani-btn:hover .elementor-button-text {
  transform: translateX(-6px);
}

/* Hover icon */
.ani-btn:hover .elementor-button-icon svg {
  transform: translateX(6px) rotate(360deg) scale(1.1);
}