/* ========================
   BASE ANIMATIONS
======================== */
.fade-in {
    opacity: 0;
    transition: opacity 0.6s ease;
}

.fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.7s ease;
}

.fade-down {
    opacity: 0;
    transform: translateY(-30px);
    transition: all 0.7s ease;
}

.fade-left {
    opacity: 0;
    transform: translateX(30px);
    transition: all 0.7s ease;
}

.fade-right {
    opacity: 0;
    transform: translateX(-30px);
    transition: all 0.7s ease;
}

.zoom-in {
    opacity: 0;
    transform: scale(0.95);
    transition: all 0.8s ease;
}

.zoom-out {
    opacity: 0;
    transform: scale(1.05);
    transition: all 0.8s ease;
}

/* ========================
   ACTIVE STATE
======================== */
.is-visible {
    opacity: 1;
    transform: none;
}

/* ========================
   DELAYS (STAGGER)
======================== */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; }
.delay-6 { transition-delay: 0.6s; }
.delay-7 { transition-delay: 0.7s; }

/* ========================
   DURATION CONTROL
======================== */
.duration-fast { transition-duration: 0.4s; }
.duration-normal { transition-duration: 0.7s; }
.duration-slow { transition-duration: 1s; }

/* ========================
   EASING VARIATIONS
======================== */
.ease-soft { transition-timing-function: ease; }
.ease-smooth { transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1); }
.ease-bounce { transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); }

/* ========================
   HOVER EFFECTS
======================== */
.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 25px rgba(0,0,0,0.1);
}

.hover-scale {
    transition: transform 0.3s ease;
}

.hover-scale:hover {
    transform: scale(1.05);
}

.hover-glow:hover {
    box-shadow: 0 0 20px rgba(0,0,0,0.15);
}

/* ========================
   TEXT EFFECTS
======================== */
.text-fade-up span {
    display: inline-block;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease;
}

.text-fade-up.is-visible span {
    opacity: 1;
    transform: translateY(0);
}

/* ========================
   IMAGE EFFECTS
======================== */
.img-zoom {
    overflow: hidden;
}

.img-zoom img {
    transition: transform 0.6s ease;
}

.img-zoom:hover img {
    transform: scale(1.08);
}

/* ========================
   TYPE WRITTER EFFECTS
======================== */
.typewriter::after {
    content: "|";
    margin-left: 4px;
    animation: blink 1s infinite;
}

@keyframes blink {
    0%, 50%, 100% { opacity: 1; }
    25%, 75% { opacity: 0; }
}