/* =========================================
Base Reveal
========================================= */

.reveal {
opacity: 0;
transition: all .8s ease;
will-change: transform, opacity, filter;
}

.reveal.active {
opacity: 1;
}

/* =========================================
Fade Animations
========================================= */

.fade-up {
transform: translateY(50px);
}
.fade-up.active {
transform: translateY(0);
}

.fade-down {
transform: translateY(-50px);
}
.fade-down.active {
transform: translateY(0);
}

.fade-left {
transform: translateX(50px);
}
.fade-left.active {
transform: translateX(0);
}

.fade-right {
transform: translateX(-50px);
}
.fade-right.active {
transform: translateX(0);
}

/* =========================================
Zoom Animations
========================================= */

.zoom-in {
transform: scale(.8);
}
.zoom-in.active {
transform: scale(1);
}

.zoom-out {
transform: scale(1.2);
}
.zoom-out.active {
transform: scale(1);
}

.zoom-up {
transform: scale(.9) translateY(40px);
}
.zoom-up.active {
transform: scale(1) translateY(0);
}

/* =========================================
Blur Animations
========================================= */

.blur-up {
filter: blur(10px);
transform: translateY(40px);
}
.blur-up.active {
filter: blur(0);
transform: translateY(0);
}

.blur-in {
filter: blur(20px);
}
.blur-in.active {
filter: blur(0);
}

/* =========================================
Rotation Animations
========================================= */

.rotate-in {
transform: rotate(-5deg) scale(.9);
}
.rotate-in.active {
transform: rotate(0) scale(1);
}

.rotate-left {
transform: rotate(-15deg);
}
.rotate-left.active {
transform: rotate(0);
}

.rotate-right {
transform: rotate(15deg);
}
.rotate-right.active {
transform: rotate(0);
}

/* =========================================
Image Reveal Animations
========================================= */

.parallax-reveal {
overflow: hidden;
}

.parallax-reveal img {
transform: scale(1.2);
transition: transform 1.5s ease;
}

.parallax-reveal.active img {
transform: scale(1);
}

.pan-up {
overflow: hidden;
}

.pan-up img {
transform: scale(1.15) translateY(30px);
transition: transform 1.5s ease;
}

.pan-up.active img {
transform: scale(1) translateY(0);
}

.pan-left {
overflow: hidden;
}

.pan-left img {
transform: scale(1.15) translateX(30px);
transition: transform 1.5s ease;
}

.pan-left.active img {
transform: scale(1) translateX(0);
}

/* =========================================
Text Effects
========================================= */

.text-reveal {
letter-spacing: 10px;
}
.text-reveal.active {
letter-spacing: normal;
}

.word-lift {
transform: translateY(20px);
}
.word-lift.active {
transform: translateY(0);
}

/* =========================================
Card Effects
========================================= */

.float-up {
transform: translateY(80px);
}
.float-up.active {
transform: translateY(0);
}

.pop-in {
transform: scale(.7);
}
.pop-in.active {
transform: scale(1);
}

/* =========================================
Premium Effects
========================================= */

.tilt-reveal {
transform: perspective(1000px) rotateX(10deg);
}
.tilt-reveal.active {
transform: perspective(1000px) rotateX(0);
}

.flip-up {
transform: perspective(1000px) rotateX(20deg);
}
.flip-up.active {
transform: perspective(1000px) rotateX(0);
}