/* ========================================== */
/* 🖥️👀 WHEN-ON-SCREEN - Timing Variations */
/* ========================================== */

/* ❗ Fast effect (0.5s transition) */
.when-on-screen-fast {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.when-on-screen-fast.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ❗ Medium effect (1.0s transition - Default) */
.when-on-screen-medium {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1.0s ease-out, transform 1.0s ease-out;
}
.when-on-screen-medium.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ❗ Slow effect (2.0s transition) */
.when-on-screen-slow {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 2.0s ease-out, transform 2.0s ease-out;
}
.when-on-screen-slow.visible {
    opacity: 1;
    transform: translateY(0);
}





/* ========================================== */
/* 🔍 SCALE EFFECTS - Predefined Scaling Variations */
/* ========================================== */

/* 🔹 Scale from 150% to 100% */
.scale-fade-1-5 {
    transform: scale(1.5);
}
.scale-fade-1-5.visible {
    transform: scale(1);
}

/* 🔹 Scale from 200% to 100% */
.scale-fade-2-0 {
    transform: scale(2.0);
}
.scale-fade-2-0.visible {
    transform: scale(1);
}

/* 🔹 Scale from 500% to 100% */
.scale-fade-3-0 {
    transform: scale(5.0);
}
.scale-fade-3-0.visible {
    transform: scale(1);
}

/* ✨ Default transition for smooth scaling */
.scale-fade-1-5,
.scale-fade-2-0,
.scale-fade-3-0 {
    transition: transform 1.5s ease-out;
}