<?php
namespace Softech_Addons_for_Elementor\Widgets;
if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly
}

use Elementor\Widget_Base;
use Elementor\Controls_Manager;
use Elementor\Group_Control_Typography;
use Elementor\Group_Control_Border;
use Elementor\Group_Control_Background;
use Elementor\Group_Control_Text_Shadow;

class sitsel_dual_color_heading extends Widget_Base {

	public function get_name() {
		return 'sitsel_dual_color_heading';
	}

	public function get_title()
    {
        return __('SITS Dual Color Heading', 'softech-addons-for-elementor');
    }

	public function get_icon() {
		return 'eicon-t-letter';
	}

	public function get_categories() {
		return [ 'sitsel-category' ];
	}

	protected function register_controls() {

		$this->start_controls_section(
			'content_section',
			[
				'label' => esc_html__( 'Content', 'softech-addons-for-elementor' ),
				'tab'   => Controls_Manager::TAB_CONTENT,
			]
		);

		$this->add_control(
			'first_text',
			[
				'label'       => esc_html__( 'First Part', 'softech-addons-for-elementor' ),
				'type'        => Controls_Manager::TEXT,
				'default'     => esc_html__( 'Hello', 'softech-addons-for-elementor' ),
				'placeholder' => esc_html__( 'Enter first text', 'softech-addons-for-elementor' ),
				'dynamic'     => [
					'active' => true,
				],
			]
		);

		$this->add_control(
			'second_text',
			[
				'label'       => esc_html__( 'Second Part', 'softech-addons-for-elementor' ),
				'type'        => Controls_Manager::TEXT,
				'default'     => esc_html__( 'World', 'softech-addons-for-elementor' ),
				'placeholder' => esc_html__( 'Enter second text', 'softech-addons-for-elementor' ),
				'dynamic'     => [
					'active' => true,
				],
			]
		);

		$this->add_control(
			'enable_third_text',
			[
				'label'        => esc_html__( 'Enable Third Part', 'softech-addons-for-elementor' ),
				'type'         => Controls_Manager::SWITCHER,
				'label_on'     => esc_html__( 'Yes', 'softech-addons-for-elementor' ),
				'label_off'    => esc_html__( 'No', 'softech-addons-for-elementor' ),
				'return_value' => 'yes',
				'default'      => 'no',
			]
		);

		$this->add_control(
			'third_text',
			[
				'label'       => esc_html__( 'Third Part', 'softech-addons-for-elementor' ),
				'type'        => Controls_Manager::TEXT,
				'default'     => esc_html__( 'Amazing', 'softech-addons-for-elementor' ),
				'placeholder' => esc_html__( 'Enter third text', 'softech-addons-for-elementor' ),
				'condition'   => [
					'enable_third_text' => 'yes',
				],
				'dynamic'     => [
					'active' => true,
				],
			]
		);

		$this->add_control(
			'html_tag',
			[
				'label'   => esc_html__( 'HTML Tag', 'softech-addons-for-elementor' ),
				'type'    => Controls_Manager::SELECT,
				'options' => [
					'h1'   => 'H1',
					'h2'   => 'H2',
					'h3'   => 'H3',
					'h4'   => 'H4',
					'h5'   => 'H5',
					'h6'   => 'H6',
					'div'  => 'div',
					'span' => 'span',
					'p'    => 'p',
				],
				'default' => 'h2',
			]
		);

		$this->add_responsive_control(
			'heading_alignment',
			[
				'label' => esc_html__( 'Alignment', 'softech-addons-for-elementor' ),
				'type' => Controls_Manager::CHOOSE,
				'options' => [
					'left' => [
						'title' => esc_html__( 'Left', 'softech-addons-for-elementor' ),
						'icon' => 'eicon-text-align-left',
					],
					'center' => [
						'title' => esc_html__( 'Center', 'softech-addons-for-elementor' ),
						'icon' => 'eicon-text-align-center',
					],
					'right' => [
						'title' => esc_html__( 'Right', 'softech-addons-for-elementor' ),
						'icon' => 'eicon-text-align-right',
					],
					'justify' => [
						'title' => esc_html__( 'Justify', 'softech-addons-for-elementor' ),
						'icon' => 'eicon-text-align-justify',
					],
				],
				'default' => 'left',
				'selectors' => [
					'{{WRAPPER}} .sitsel-dual-heading' => 'text-align: {{VALUE}};',
				],
			]
		);

		$this->end_controls_section();

		/**
		 * Animation Section
		 */
		$this->start_controls_section(
			'animation_section',
			[
				'label' => esc_html__( 'Animation', 'softech-addons-for-elementor' ),
				'tab'   => Controls_Manager::TAB_CONTENT,
			]
		);

		$this->add_control(
			'enable_animation',
			[
				'label'        => esc_html__( 'Enable Animation', 'softech-addons-for-elementor' ),
				'type'         => Controls_Manager::SWITCHER,
				'label_on'     => esc_html__( 'Yes', 'softech-addons-for-elementor' ),
				'label_off'    => esc_html__( 'No', 'softech-addons-for-elementor' ),
				'return_value' => 'yes',
				'default'      => 'no',
			]
		);
		// ADD THIS NEW CONTROL after the 'enable_animation' control (after line 170)

		$this->add_control(
			'animation_trigger',
			[
				'label'   => esc_html__( 'Animation Trigger', 'softech-addons-for-elementor' ),
				'type'    => Controls_Manager::SELECT,
				'options' => [
					'load'   => esc_html__( 'On Page Load', 'softech-addons-for-elementor' ),
					'scroll' => esc_html__( 'On Scroll (Viewport)', 'softech-addons-for-elementor' ),
				],
				'default'   => 'load',
				'condition' => [
					'enable_animation' => 'yes',
				],
			]
		);

		$this->add_control(
			'animation_type',
			[
				'label'   => esc_html__( 'Animation Type', 'softech-addons-for-elementor' ),
				'type'    => Controls_Manager::SELECT,
				'options' => [
					'fadeIn'          => esc_html__( 'Fade In', 'softech-addons-for-elementor' ),
					'fadeInUp'        => esc_html__( 'Fade In Up', 'softech-addons-for-elementor' ),
					'fadeInDown'      => esc_html__( 'Fade In Down', 'softech-addons-for-elementor' ),
					'fadeInLeft'      => esc_html__( 'Fade In Left', 'softech-addons-for-elementor' ),
					'fadeInRight'     => esc_html__( 'Fade In Right', 'softech-addons-for-elementor' ),
					'slideInUp'       => esc_html__( 'Slide In Up', 'softech-addons-for-elementor' ),
					'slideInDown'     => esc_html__( 'Slide In Down', 'softech-addons-for-elementor' ),
					'slideInLeft'     => esc_html__( 'Slide In Left', 'softech-addons-for-elementor' ),
					'slideInRight'    => esc_html__( 'Slide In Right', 'softech-addons-for-elementor' ),
					'zoomIn'          => esc_html__( 'Zoom In', 'softech-addons-for-elementor' ),
					'bounceIn'        => esc_html__( 'Bounce In', 'softech-addons-for-elementor' ),
					'rotateIn'        => esc_html__( 'Rotate In', 'softech-addons-for-elementor' ),
					'flipInX'         => esc_html__( 'Flip In X', 'softech-addons-for-elementor' ),
					'flipInY'         => esc_html__( 'Flip In Y', 'softech-addons-for-elementor' ),
					'typing'          => esc_html__( 'Typing Effect', 'softech-addons-for-elementor' ),
					'gradient-shift'  => esc_html__( 'Gradient Shift', 'softech-addons-for-elementor' ),
					'wave'            => esc_html__( 'Wave', 'softech-addons-for-elementor' ),
					'glitch'          => esc_html__( 'Glitch', 'softech-addons-for-elementor' ),
				],
				'default'   => 'fadeInUp',
				'condition' => [
					'enable_animation' => 'yes',
				],
			]
		);

		$this->add_control(
			'animation_duration',
			[
				'label'      => esc_html__( 'Animation Duration (ms)', 'softech-addons-for-elementor' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => [ 'ms' ],
				'range'      => [
					'ms' => [
						'min'  => 100,
						'max'  => 5000,
						'step' => 100,
					],
				],
				'default' => [
					'unit' => 'ms',
					'size' => 1000,
				],
				'condition' => [
					'enable_animation' => 'yes',
				],
			]
		);

		$this->add_control(
			'animation_delay',
			[
				'label'      => esc_html__( 'Animation Delay (ms)', 'softech-addons-for-elementor' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => [ 'ms' ],
				'range'      => [
					'ms' => [
						'min'  => 0,
						'max'  => 5000,
						'step' => 100,
					],
				],
				'default' => [
					'unit' => 'ms',
					'size' => 0,
				],
				'condition' => [
					'enable_animation' => 'yes',
				],
			]
		);

		$this->add_control(
			'stagger_animation',
			[
				'label'        => esc_html__( 'Stagger Animation', 'softech-addons-for-elementor' ),
				'description'  => esc_html__( 'Animate each part separately with delay', 'softech-addons-for-elementor' ),
				'type'         => Controls_Manager::SWITCHER,
				'label_on'     => esc_html__( 'Yes', 'softech-addons-for-elementor' ),
				'label_off'    => esc_html__( 'No', 'softech-addons-for-elementor' ),
				'return_value' => 'yes',
				'default'      => 'no',
				'condition'    => [
					'enable_animation' => 'yes',
				],
			]
		);

		$this->add_control(
			'stagger_delay',
			[
				'label'      => esc_html__( 'Stagger Delay (ms)', 'softech-addons-for-elementor' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => [ 'ms' ],
				'range'      => [
					'ms' => [
						'min'  => 0,
						'max'  => 2000,
						'step' => 50,
					],
				],
				'default' => [
					'unit' => 'ms',
					'size' => 200,
				],
				'condition' => [
					'enable_animation'  => 'yes',
					'stagger_animation' => 'yes',
				],
			]
		);

		$this->end_controls_section();

		/**
		 * First Text Style
		 */
		$this->start_controls_section(
			'style_first_text',
			[
				'label' => esc_html__( 'First Text', 'softech-addons-for-elementor' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			]
		);

		$this->add_control(
			'first_color',
			[
				'label'     => esc_html__( 'Text Color', 'softech-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .sitsel-dual-heading .first-part' => 'color: {{VALUE}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name'     => 'first_typography',
				'label'    => esc_html__( 'Typography', 'softech-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .sitsel-dual-heading .first-part',
			]
		);

		$this->add_group_control(
			Group_Control_Background::get_type(),
			[
				'name'     => 'first_background',
				'label'    => esc_html__( 'Background', 'softech-addons-for-elementor' ),
				'types'    => [ 'classic', 'gradient' ],
				'selector' => '{{WRAPPER}} .sitsel-dual-heading .first-part',
			]
		);

		$this->add_group_control(
			Group_Control_Border::get_type(),
			[
				'name'     => 'first_border',
				'label'    => esc_html__( 'Border', 'softech-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .sitsel-dual-heading .first-part',
			]
		);

		$this->add_responsive_control(
			'first_border_radius',
			[
				'label'      => esc_html__( 'Border Radius', 'softech-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%' ],
				'selectors'  => [
					'{{WRAPPER}} .sitsel-dual-heading .first-part' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Text_Shadow::get_type(),
			[
				'name'     => 'first_text_shadow',
				'label'    => esc_html__( 'Text Shadow', 'softech-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .sitsel-dual-heading .first-part',
			]
		);
        
		$this->add_responsive_control(
			'first_padding',
			[
				'label'      => esc_html__( 'Padding', 'softech-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%', 'em' ],
				'selectors'  => [
					'{{WRAPPER}} .sitsel-dual-heading .first-part' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->add_responsive_control(
			'first_margin',
			[
				'label'      => esc_html__( 'Margin', 'softech-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%', 'em' ],
				'selectors'  => [
					'{{WRAPPER}} .sitsel-dual-heading .first-part' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->end_controls_section();

		/**
		 * Second Text Style
		 */
		$this->start_controls_section(
			'style_second_text',
			[
				'label' => esc_html__( 'Second Text', 'softech-addons-for-elementor' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			]
		);

		$this->add_control(
			'second_color',
			[
				'label'     => esc_html__( 'Text Color', 'softech-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .sitsel-dual-heading .second-part' => 'color: {{VALUE}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name'     => 'second_typography',
				'label'    => esc_html__( 'Typography', 'softech-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .sitsel-dual-heading .second-part',
			]
		);

		$this->add_group_control(
			Group_Control_Background::get_type(),
			[
				'name'     => 'second_background',
				'label'    => esc_html__( 'Background', 'softech-addons-for-elementor' ),
				'types'    => [ 'classic', 'gradient' ],
				'selector' => '{{WRAPPER}} .sitsel-dual-heading .second-part',
			]
		);

		$this->add_group_control(
			Group_Control_Border::get_type(),
			[
				'name'     => 'second_border',
				'label'    => esc_html__( 'Border', 'softech-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .sitsel-dual-heading .second-part',
			]
		);

		$this->add_responsive_control(
			'second_border_radius',
			[
				'label'      => esc_html__( 'Border Radius', 'softech-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%' ],
				'selectors'  => [
					'{{WRAPPER}} .sitsel-dual-heading .second-part' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Text_Shadow::get_type(),
			[
				'name'     => 'second_text_shadow',
				'label'    => esc_html__( 'Text Shadow', 'softech-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .sitsel-dual-heading .second-part',
			]
		);

        $this->add_responsive_control(
			'second_padding',
			[
				'label'      => esc_html__( 'Padding', 'softech-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%', 'em' ],
				'selectors'  => [
					'{{WRAPPER}} .sitsel-dual-heading .second-part' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->add_responsive_control(
			'second_margin',
			[
				'label'      => esc_html__( 'Margin', 'softech-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%', 'em' ],
				'selectors'  => [
					'{{WRAPPER}} .sitsel-dual-heading .second-part' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->end_controls_section();

		/**
		 * Third Text Style
		 */
		$this->start_controls_section(
			'style_third_text',
			[
				'label'     => esc_html__( 'Third Text', 'softech-addons-for-elementor' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => [
					'enable_third_text' => 'yes',
				],
			]
		);

		$this->add_control(
			'third_color',
			[
				'label'     => esc_html__( 'Text Color', 'softech-addons-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .sitsel-dual-heading .third-part' => 'color: {{VALUE}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name'     => 'third_typography',
				'label'    => esc_html__( 'Typography', 'softech-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .sitsel-dual-heading .third-part',
			]
		);

		$this->add_group_control(
			Group_Control_Background::get_type(),
			[
				'name'     => 'third_background',
				'label'    => esc_html__( 'Background', 'softech-addons-for-elementor' ),
				'types'    => [ 'classic', 'gradient' ],
				'selector' => '{{WRAPPER}} .sitsel-dual-heading .third-part',
			]
		);

		$this->add_group_control(
			Group_Control_Border::get_type(),
			[
				'name'     => 'third_border',
				'label'    => esc_html__( 'Border', 'softech-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .sitsel-dual-heading .third-part',
			]
		);

		$this->add_responsive_control(
			'third_border_radius',
			[
				'label'      => esc_html__( 'Border Radius', 'softech-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%' ],
				'selectors'  => [
					'{{WRAPPER}} .sitsel-dual-heading .third-part' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Text_Shadow::get_type(),
			[
				'name'     => 'third_text_shadow',
				'label'    => esc_html__( 'Text Shadow', 'softech-addons-for-elementor' ),
				'selector' => '{{WRAPPER}} .sitsel-dual-heading .third-part',
			]
		);

		$this->add_responsive_control(
			'third_padding',
			[
				'label'      => esc_html__( 'Padding', 'softech-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%', 'em' ],
				'selectors'  => [
					'{{WRAPPER}} .sitsel-dual-heading .third-part' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->add_responsive_control(
			'third_margin',
			[
				'label'      => esc_html__( 'Margin', 'softech-addons-for-elementor' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%', 'em' ],
				'selectors'  => [
					'{{WRAPPER}} .sitsel-dual-heading .third-part' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->end_controls_section();
	}

	protected function render() {
		$settings        = $this->get_settings_for_display();
		$first_text      = ! empty( $settings['first_text'] ) ? $settings['first_text'] : '';
		$second_text     = ! empty( $settings['second_text'] ) ? $settings['second_text'] : '';
		$third_text      = ! empty( $settings['third_text'] ) ? $settings['third_text'] : '';
		$enable_third    = $settings['enable_third_text'] === 'yes';
		$html_tag        = ! empty( $settings['html_tag'] ) ? $settings['html_tag'] : 'h2';
		$enable_animation = $settings['enable_animation'] === 'yes';
		$animation_type  = ! empty( $settings['animation_type'] ) ? $settings['animation_type'] : 'fadeInUp';
		$stagger         = $settings['stagger_animation'] === 'yes';
		$animation_trigger = ! empty( $settings['animation_trigger'] ) ? $settings['animation_trigger'] : 'load';

		// Whitelist allowed tags
		$allowed_tags = [ 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'div', 'span', 'p' ];
		if ( ! in_array( $html_tag, $allowed_tags, true ) ) {
			$html_tag = 'h2';
		}

		// Build class names
		$wrapper_classes = [ 'sitsel-dual-heading' ];
		if ( $enable_animation ) {
			$wrapper_classes[] = 'sitsel-animated';
			$wrapper_classes[] = 'sitsel-animation-' . esc_attr( $animation_type );
			$wrapper_classes[] = 'sitsel-trigger-' . esc_attr( $animation_trigger );
			if ( $stagger ) {
				$wrapper_classes[] = 'sitsel-stagger';
			}
		}

		// Animation inline styles
		$animation_styles = '';
		if ( $enable_animation ) {
			$duration = ! empty( $settings['animation_duration']['size'] ) ? $settings['animation_duration']['size'] : 1000;
			$delay    = ! empty( $settings['animation_delay']['size'] ) ? $settings['animation_delay']['size'] : 0;
			$animation_styles = sprintf(
				'--animation-duration: %dms; --animation-delay: %dms;',
				absint( $duration ),
				absint( $delay )
			);

			if ( $stagger ) {
				$stagger_delay = ! empty( $settings['stagger_delay']['size'] ) ? $settings['stagger_delay']['size'] : 200;
				$animation_styles .= sprintf( ' --stagger-delay: %dms;', absint( $stagger_delay ) );
			}
		}

		if ( ! empty( $first_text ) || ! empty( $second_text ) || ( $enable_third && ! empty( $third_text ) ) ) {
			printf(
				'<%1$s class="%2$s" style="%3$s">',
				esc_attr( $html_tag ),
				esc_attr( implode( ' ', $wrapper_classes ) ),
				esc_attr( $animation_styles )
			);

			if ( ! empty( $first_text ) ) {
				printf(
					'<span class="first-part" data-part="1">%s</span> ',
					esc_html( $first_text )
				);
			}

			if ( ! empty( $second_text ) ) {
				printf(
					'<span class="second-part" data-part="2">%s</span>',
					esc_html( $second_text )
				);
			}

			if ( $enable_third && ! empty( $third_text ) ) {
				printf(
					' <span class="third-part" data-part="3">%s</span>',
					esc_html( $third_text )
				);
			}

			printf( '</%s>', esc_attr( $html_tag ) );

			// Output custom CSS for animations
			$this->render_animation_styles( $animation_type );
		}
	}

	/**
	 * Render animation CSS
	 */
	protected function render_animation_styles( $animation_type ) {
		?>
		<style>
		/* Base Animation Styles */
.sitsel-dual-heading.sitsel-animated {
    display: inline-block;
    width:100%;
}

.sitsel-dual-heading.sitsel-animated span {
    display: inline-block;
    animation-duration: var(--animation-duration, 1000ms);
    animation-delay: var(--animation-delay, 0ms);
    animation-fill-mode: both;
}

/* Scroll trigger: hide and prevent animation until in view */
.sitsel-dual-heading.sitsel-trigger-scroll span {
    opacity: 0;
}

.sitsel-dual-heading.sitsel-trigger-scroll.sitsel-in-view span {
    opacity: 1;
}

/* Stagger delays */
.sitsel-dual-heading.sitsel-stagger span[data-part="2"] {
    animation-delay: calc(var(--animation-delay, 0ms) + var(--stagger-delay, 200ms));
}

.sitsel-dual-heading.sitsel-stagger span[data-part="3"] {
    animation-delay: calc(var(--animation-delay, 0ms) + var(--stagger-delay, 200ms) * 2);
}

/* ===== ANIMATIONS - Apply animation-name only when triggered ===== */

/* Fade In */
@keyframes sitsel-fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.sitsel-animation-fadeIn.sitsel-trigger-load span,
.sitsel-animation-fadeIn.sitsel-trigger-scroll.sitsel-in-view span { 
    animation-name: sitsel-fadeIn; 
}

/* Fade In Up */
@keyframes sitsel-fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.sitsel-animation-fadeInUp.sitsel-trigger-load span,
.sitsel-animation-fadeInUp.sitsel-trigger-scroll.sitsel-in-view span { 
    animation-name: sitsel-fadeInUp; 
}

/* Fade In Down */
@keyframes sitsel-fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.sitsel-animation-fadeInDown.sitsel-trigger-load span,
.sitsel-animation-fadeInDown.sitsel-trigger-scroll.sitsel-in-view span { 
    animation-name: sitsel-fadeInDown; 
}

/* Fade In Left */
@keyframes sitsel-fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
.sitsel-animation-fadeInLeft.sitsel-trigger-load span,
.sitsel-animation-fadeInLeft.sitsel-trigger-scroll.sitsel-in-view span { 
    animation-name: sitsel-fadeInLeft; 
}

/* Fade In Right */
@keyframes sitsel-fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
.sitsel-animation-fadeInRight.sitsel-trigger-load span,
.sitsel-animation-fadeInRight.sitsel-trigger-scroll.sitsel-in-view span { 
    animation-name: sitsel-fadeInRight; 
}

/* Slide In Up */
@keyframes sitsel-slideInUp {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}
.sitsel-animation-slideInUp.sitsel-trigger-load span,
.sitsel-animation-slideInUp.sitsel-trigger-scroll.sitsel-in-view span { 
    animation-name: sitsel-slideInUp; 
}

/* Slide In Down */
@keyframes sitsel-slideInDown {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}
.sitsel-animation-slideInDown.sitsel-trigger-load span,
.sitsel-animation-slideInDown.sitsel-trigger-scroll.sitsel-in-view span { 
    animation-name: sitsel-slideInDown; 
}

/* Slide In Left */
@keyframes sitsel-slideInLeft {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}
.sitsel-animation-slideInLeft.sitsel-trigger-load span,
.sitsel-animation-slideInLeft.sitsel-trigger-scroll.sitsel-in-view span { 
    animation-name: sitsel-slideInLeft; 
}

/* Slide In Right */
@keyframes sitsel-slideInRight {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}
.sitsel-animation-slideInRight.sitsel-trigger-load span,
.sitsel-animation-slideInRight.sitsel-trigger-scroll.sitsel-in-view span { 
    animation-name: sitsel-slideInRight; 
}

/* Zoom In */
@keyframes sitsel-zoomIn {
    from {
        opacity: 0;
        transform: scale(0.3);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}
.sitsel-animation-zoomIn.sitsel-trigger-load span,
.sitsel-animation-zoomIn.sitsel-trigger-scroll.sitsel-in-view span { 
    animation-name: sitsel-zoomIn; 
}

/* Bounce In */
@keyframes sitsel-bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1);
    }
}
.sitsel-animation-bounceIn.sitsel-trigger-load span,
.sitsel-animation-bounceIn.sitsel-trigger-scroll.sitsel-in-view span { 
    animation-name: sitsel-bounceIn; 
}

/* Rotate In */
@keyframes sitsel-rotateIn {
    from {
        opacity: 0;
        transform: rotate(-200deg);
    }
    to {
        opacity: 1;
        transform: rotate(0);
    }
}
.sitsel-animation-rotateIn.sitsel-trigger-load span,
.sitsel-animation-rotateIn.sitsel-trigger-scroll.sitsel-in-view span { 
    animation-name: sitsel-rotateIn; 
}

/* Flip In X */
@keyframes sitsel-flipInX {
    from {
        opacity: 0;
        transform: perspective(400px) rotateX(90deg);
    }
    to {
        opacity: 1;
        transform: perspective(400px) rotateX(0);
    }
}
.sitsel-animation-flipInX.sitsel-trigger-load span,
.sitsel-animation-flipInX.sitsel-trigger-scroll.sitsel-in-view span { 
    animation-name: sitsel-flipInX; 
}

/* Flip In Y */
@keyframes sitsel-flipInY {
    from {
        opacity: 0;
        transform: perspective(400px) rotateY(90deg);
    }
    to {
        opacity: 1;
        transform: perspective(400px) rotateY(0);
    }
}
.sitsel-animation-flipInY.sitsel-trigger-load span,
.sitsel-animation-flipInY.sitsel-trigger-scroll.sitsel-in-view span { 
    animation-name: sitsel-flipInY; 
}

/* Typing Effect */
@keyframes sitsel-typing {
    from { 
        max-width: 0;
        opacity: 0;
    }
    to { 
        max-width: 100%;
        opacity: 1;
    }
}
.sitsel-animation-typing.sitsel-trigger-load span,
.sitsel-animation-typing.sitsel-trigger-scroll.sitsel-in-view span {
    animation-name: sitsel-typing;
    overflow: hidden;
    white-space: nowrap;
}

/* Gradient Shift */
@keyframes sitsel-gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
.sitsel-animation-gradient-shift.sitsel-trigger-load span,
.sitsel-animation-gradient-shift.sitsel-trigger-scroll.sitsel-in-view span {
    background: linear-gradient(45deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #667eea 75%, #764ba2 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation-name: sitsel-gradientShift;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}

/* Wave */
@keyframes sitsel-wave {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
}
.sitsel-animation-wave.sitsel-trigger-load span,
.sitsel-animation-wave.sitsel-trigger-scroll.sitsel-in-view span {
    animation-name: sitsel-wave;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

/* Glitch */
@keyframes sitsel-glitch {
    0% {
        transform: translate(0);
    }
    20% {
        transform: translate(-2px, 2px);
    }
    40% {
        transform: translate(-2px, -2px);
    }
    60% {
        transform: translate(2px, 2px);
    }
    80% {
        transform: translate(2px, -2px);
    }
    100% {
        transform: translate(0);
    }
}
.sitsel-animation-glitch.sitsel-trigger-load span,
.sitsel-animation-glitch.sitsel-trigger-scroll.sitsel-in-view span {
    animation-name: sitsel-glitch;
    animation-duration: 0.5s;
    animation-iteration-count: infinite;
}
		</style>
<!-- ADD THIS JAVASCRIPT AFTER THE CLOSING </style> TAG -->
<script>
(function() {
    // Intersection Observer for scroll-triggered animations
    if ('IntersectionObserver' in window) {
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('sitsel-in-view');
                    // Optional: stop observing after animation triggers
                    observer.unobserve(entry.target);
                }
            });
        }, {
            threshold: 0.2, // Trigger when 20% of element is visible
            rootMargin: '0px 0px -50px 0px' // Trigger slightly before element enters viewport
        });

        // Observe all scroll-triggered headings
        document.querySelectorAll('.sitsel-dual-heading.sitsel-trigger-scroll').forEach(heading => {
            observer.observe(heading);
        });
    } else {
        // Fallback for browsers without IntersectionObserver
        document.querySelectorAll('.sitsel-dual-heading.sitsel-trigger-scroll').forEach(heading => {
            heading.classList.add('sitsel-in-view');
        });
    }
})();
</script>
		<?php
	}
}