/**
 * Parallax Fade In - Styles
 * -------------------------
 * המשתנים (CSS Custom Properties) למטה מאפשרים לשלוט באפקט
 * ישירות מ-CSS, בלי לגעת ב-JS:
 *
 * --pfi-distance : כמה פיקסלים האלמנט "מתחיל" מתחת למקום הסופי שלו
 * --pfi-duration  : משך האנימציה
 * --pfi-ease      : פונקציית ה-easing
 * --pfi-delay     : עיכוב לפני התחלת האנימציה (שימושי לאפקט מדורג בין sections)
 */

.pfi-section {
    --pfi-distance: 40px;
    --pfi-duration: 0.8s;
    --pfi-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --pfi-delay: 0s;

    opacity: 0;
    transform: translateY(var(--pfi-distance));
    transition:
        opacity var(--pfi-duration) var(--pfi-ease) var(--pfi-delay),
        transform var(--pfi-duration) var(--pfi-ease) var(--pfi-delay);

    will-change: opacity, transform;
}

/* הקלאס שמתווסף ע"י ה-JS כשהאלמנט נכנס למסך */
.pfi-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* כיבוד preference של משתמשים שמעדיפים אנימציות מופחתות (נגישות) */
@media (prefers-reduced-motion: reduce) {
    .pfi-section {
        transition: none;
        transform: none;
        opacity: 1;
    }
}