/**
 * Custom Elementor Widgets - Fade Animations (Elementor motion style)
 * Triggered when .widget-visible is added
 * Supports: fast, normal, slow, delay-1 to delay-5
 */

/* === Keyframes (Elementor-based motion) === */
@keyframes wdsFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes wdsFadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes wdsFadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes wdsFadeInLeft {
  from {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes wdsFadeInRight {
  from {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* === Animation variables === */
:root {
  --fade-speed: 0.8s;
  --fade-delay: 0s;
}

/* Speeds */
.fast   { --fade-speed: 0.4s; }
.normal { --fade-speed: 0.8s; }
.slow   { --fade-speed: 1.2s; }

/* Delays */
.delay-1 { --fade-delay: 0.2s; }
.delay-2 { --fade-delay: 0.4s; }
.delay-3 { --fade-delay: 0.6s; }
.delay-4 { --fade-delay: 0.8s; }
.delay-5 { --fade-delay: 1s; }

/* === Hidden state === */
.fade-in,
.fade-up,
.fade-down,
.fade-left,
.fade-right {
  opacity: 0;
}

/* === Triggered when .widget-visible is added === */
.widget-visible .fade-in {
  animation: wdsFadeIn var(--fade-speed) ease-out var(--fade-delay) forwards;
}

.widget-visible .fade-up {
  animation: wdsFadeInUp var(--fade-speed) ease-out var(--fade-delay) forwards;
}

.widget-visible .fade-down {
  animation: wdsFadeInDown var(--fade-speed) ease-out var(--fade-delay) forwards;
}

.widget-visible .fade-left {
  animation: wdsFadeInLeft var(--fade-speed) ease-out var(--fade-delay) forwards;
}

.widget-visible .fade-right {
  animation: wdsFadeInRight var(--fade-speed) ease-out var(--fade-delay) forwards;
}

/* === Elementor Editor Mode (always visible) === */
body.elementor-editor-active .fade-in,
body.elementor-editor-active .fade-up,
body.elementor-editor-active .fade-down,
body.elementor-editor-active .fade-left,
body.elementor-editor-active .fade-right {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

/* Word-by-word clip-up animation */
.text-clip-up .text {
    display: inline-block;
    transform: translate3d(0, 80%, 0);
    -webkit-clip-path: inset(0 0 100%);
    clip-path: inset(0 0 100%);
    transition: transform 0.8s cubic-bezier(0, 0.55, 0.45, 1), 
                clip-path 0.8s cubic-bezier(0, 0.55, 0.45, 1);
    will-change: transform;
    white-space: pre-wrap;
    line-height: 1.1;
}

.widget-visible .text-clip-up .text.animate {
    transform: translate3d(0, 0%, 0);
    -webkit-clip-path: inset(0 0 -10%);
    clip-path: inset(0 0 -10%);
}