﻿      /* Lazy Loading Styles */
      .hp-image-loading {
        filter: blur(10px);
        transform: scale(1.02);
        transition: filter 0.3s ease, transform 0.3s ease;
      }
      .hp-image-loaded {
        filter: blur(0);
        transform: scale(1);
        transition: filter 0.3s ease, transform 0.3s ease;
      }
      .hp-image-error {
        opacity: 0.5;
        background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
      }

      /* Placeholder shimmer effect */
      @keyframes shimmer {
        0% { background-position: -200% 0; }
        100% { background-position: 200% 0; }
      }
      .hp-image-loading::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(
          90deg,
          rgba(255, 255, 255, 0) 0%,
          rgba(255, 255, 255, 0.4) 50%,
          rgba(255, 255, 255, 0) 100%
        );
        background-size: 200% 100%;
        animation: shimmer 1.5s infinite;
      }
