site-18f7b/script.js

(function() {
  'use strict';

  // Header scroll effect
  var header = document.querySelector('.header');

  function handleScroll() {
    var currentScroll = window.pageYOffset;
    
    if (currentScroll > 50) {
      header.classList.add('scrolled');
    } else {
      header.classList.remove('scrolled');
    }
  }

  window.addEventListener('scroll', handleScroll, { passive: true });

  // Mobile navigation toggle
  var navToggle = document.querySelector('.nav-toggle');
  var navLinks = document.querySelector('.nav-links');

  if (navToggle && navLinks) {
    navToggle.addEventListener('click', function() {
      var isExpanded = navToggle.getAttribute('aria-expanded') === 'true';
      navToggle.setAttribute('aria-expanded', !isExpanded);
      navToggle.setAttribute('aria-label', isExpanded ? 'פתיחת תפריט ניווט' : 'סגירת תפריט ניווט');
      navLinks.classList.toggle('active');
      
      // Animate hamburger
      var spans = navToggle.querySelectorAll('span');
      if (!isExpanded) {
        spans[0].style.transform = 'rotate(45deg) translate(5px, 5px)';
        spans[1].style.opacity = '0';
        spans[2].style.transform = 'rotate(-45deg) translate(5px, -5px)';
      } else {
        spans[0].style.transform = '';
        spans[1].style.opacity = '';
        spans[2].style.transform = '';
      }
    });

    // Close menu on link click
    navLinks.querySelectorAll('a').forEach(function(link) {
      link.addEventListener('click', function() {
        navLinks.classList.remove('active');
        navToggle.setAttribute('aria-expanded', 'false');
        navToggle.setAttribute('aria-label', 'פתיחת תפריט ניווט');
        var spans = navToggle.querySelectorAll('span');
        spans[0].style.transform = '';
        spans[1].style.opacity = '';
        spans[2].style.transform = '';
      });
    });
  }

  // Reveal on scroll
  var revealElements = document.querySelectorAll('.reveal');
  
  if ('IntersectionObserver' in window) {
    var revealObserver = new IntersectionObserver(function(entries) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          entry.target.classList.add('visible');
          revealObserver.unobserve(entry.target);
        }
      });
    }, {
      threshold: 0.1,
      rootMargin: '0px 0px -50px 0px'
    });

    revealElements.forEach(function(el) {
      revealObserver.observe(el);
    });
  } else {
    // Fallback for browsers without IntersectionObserver
    revealElements.forEach(function(el) {
      el.classList.add('visible');
    });
  }

  // Smooth scroll for anchor links
  document.querySelectorAll('a[href^="#"]').forEach(function(anchor) {
    anchor.addEventListener('click', function(e) {
      var targetId = this.getAttribute('href');
      if (targetId === '#') return;
      
      var targetElement = document.querySelector(targetId);
      if (targetElement) {
        e.preventDefault();
        var headerOffset = 80;
        var elementPosition = targetElement.getBoundingClientRect().top;
        var offsetPosition = elementPosition + window.pageYOffset - headerOffset;

        window.scrollTo({
          top: offsetPosition,
          behavior: 'smooth'
        });
      }
    });
  });

  // Add subtle parallax to hero elements (only if motion is allowed)
  var heroContent = document.querySelector('.hero-content');
  var heroLines = document.querySelector('.hero-lines');
  var prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  
  if (heroContent && heroLines && !prefersReducedMotion) {
    window.addEventListener('scroll', function() {
      var scrolled = window.pageYOffset;
      var heroSection = document.querySelector('.hero');
      if (!heroSection) return;
      var heroHeight = heroSection.offsetHeight;
      
      if (scrolled < heroHeight) {
        var rate = scrolled * 0.3;
        heroContent.style.transform = 'translateY(' + rate + 'px)';
        heroLines.style.transform = 'translateY(' + (rate * 0.5) + 'px)';
      }
    }, { passive: true });
  }

  // Gallery hover effect enhancement
  var galleryItems = document.querySelectorAll('.gallery-item');
  
  galleryItems.forEach(function(item) {
    item.addEventListener('mouseenter', function() {
      galleryItems.forEach(function(otherItem) {
        if (otherItem !== item) {
          otherItem.style.opacity = '0.6';
        }
      });
    });
    
    item.addEventListener('mouseleave', function() {
      galleryItems.forEach(function(otherItem) {
        otherItem.style.opacity = '';
      });
    });
  });

})();