Design updates

_sass/_animations.scss

@@ -0,0 +1,254 @@
+/* Hover Effects */
+@mixin hover-lift {
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+
+    &:hover {
+        transform: translateY(-2px);
+        box-shadow: var(--shadow-lg);
+    }
+}
+
+@mixin hover-glow($color) {
+    transition: all 0.3s ease;
+
+    &:hover {
+        box-shadow: 0 0 20px $color;
+    }
+}
+
+/* Gradient Text Animation */
+@mixin animated-gradient-text {
+    background: linear-gradient(
+        120deg,
+        var(--fuchsia-400) 0%,
+        var(--purple-400) 25%,
+        var(--fire-500) 50%,
+        var(--fuchsia-400) 75%,
+        var(--purple-400) 100%
+    );
+    background-size: 200% auto;
+    color: transparent;
+    -webkit-background-clip: text;
+    background-clip: text;
+    animation: gradient-shift 8s linear infinite;
+}
+
+/* Animations */
+@keyframes gradient-shift {
+    to {
+        background-position: 200% center;
+    }
+}
+
+@keyframes float {
+    0%, 100% {
+        transform: translateY(0);
+    }
+    50% {
+        transform: translateY(-10px);
+    }
+}
+
+@keyframes glow-pulse {
+    0%, 100% {
+        box-shadow: 0 0 5px var(--fuchsia-400),
+                    0 0 15px var(--fuchsia-400),
+                    0 0 25px var(--fuchsia-400);
+    }
+    50% {
+        box-shadow: 0 0 10px var(--fuchsia-400),
+                    0 0 25px var(--fuchsia-400),
+                    0 0 35px var(--fuchsia-400);
+    }
+}
+
+@keyframes border-glow {
+    0%, 100% {
+        border-color: var(--fuchsia-400);
+        box-shadow: 0 0 10px var(--fuchsia-400);
+    }
+    50% {
+        border-color: var(--purple-400);
+        box-shadow: 0 0 20px var(--purple-400);
+    }
+}
+
+/* Page Transition Animations */
+.page-enter {
+    opacity: 0;
+    transform: translateY(20px);
+}
+
+.page-enter-active {
+    opacity: 1;
+    transform: translateY(0);
+    transition: opacity 0.5s ease, transform 0.5s ease;
+}
+
+.page-exit {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+.page-exit-active {
+    opacity: 0;
+    transform: translateY(-20px);
+    transition: opacity 0.5s ease, transform 0.5s ease;
+}
+
+/* Hover Card Effect */
+.hover-card {
+    @include hover-lift;
+    background: var(--glass-background);
+    backdrop-filter: blur(var(--glass-blur));
+    border: var(--glass-border);
+    border-radius: var(--radius-lg);
+    padding: 1.5rem;
+
+    &:hover {
+        border-color: var(--fuchsia-400);
+        animation: border-glow 2s infinite;
+    }
+}
+
+/* Floating Elements */
+.float-element {
+    animation: float 6s ease-in-out infinite;
+}
+
+/* Glowing Elements */
+.glow-element {
+    animation: glow-pulse 3s infinite;
+}
+
+/* Gradient Text */
+.gradient-text {
+    @include animated-gradient-text;
+}
+
+/* Smooth Scroll Behavior */
+html {
+    scroll-behavior: smooth;
+}
+
+/* Smooth Element Transitions */
+.smooth-transition {
+    transition: all 0.3s ease;
+}
+
+/* Image Hover Effects */
+.image-hover {
+    transition: all 0.3s ease;
+
+    &:hover {
+        transform: scale(1.05);
+        filter: brightness(1.1) drop-shadow(0 0 10px var(--fuchsia-400));
+    }
+}
+
+/* Button Hover Effects */
+.button-hover {
+    position: relative;
+    overflow: hidden;
+    transition: all 0.3s ease;
+
+    &::before {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 0;
+        height: 0;
+        background: radial-gradient(circle, var(--fuchsia-400) 0%, transparent 70%);
+        transform: translate(-50%, -50%);
+        transition: width 0.6s ease, height 0.6s ease;
+        opacity: 0;
+    }
+
+    &:hover::before {
+        width: 200%;
+        height: 200%;
+        opacity: 0.2;
+    }
+}
+
+/* Link Hover Effects */
+.link-hover {
+    position: relative;
+
+    &::after {
+        content: '';
+        position: absolute;
+        width: 100%;
+        height: 2px;
+        bottom: -2px;
+        left: 0;
+        background: var(--gradient-primary);
+        transform: scaleX(0);
+        transform-origin: right;
+        transition: transform 0.3s ease;
+    }
+
+    &:hover::after {
+        transform: scaleX(1);
+        transform-origin: left;
+    }
+}
+
+/* Card Flip Animation */
+.card-flip {
+    perspective: 1000px;
+
+    .card-inner {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        transition: transform 0.6s;
+        transform-style: preserve-3d;
+    }
+
+    &:hover .card-inner {
+        transform: rotateY(180deg);
+    }
+
+    .card-front,
+    .card-back {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        backface-visibility: hidden;
+    }
+
+    .card-back {
+        transform: rotateY(180deg);
+    }
+}
+
+/* Shimmer Effect */
+.shimmer {
+    position: relative;
+    overflow: hidden;
+
+    &::after {
+        content: '';
+        position: absolute;
+        top: -50%;
+        left: -50%;
+        width: 200%;
+        height: 200%;
+        background: linear-gradient(
+            to right,
+            transparent 0%,
+            rgba(255, 255, 255, 0.1) 50%,
+            transparent 100%
+        );
+        transform: rotate(30deg);
+        animation: shimmer 3s infinite;
+    }
+}
+
+@keyframes shimmer {
+    to {
+        transform: rotate(30deg) translate(0, 100%);
+    }
+}