From 04b447d514fe51dc68e60bc6525f0d116202afb8 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Thu, 5 Mar 2026 16:48:29 +0000
Subject: [PATCH] Add src/app/styles/animations.css

---
 src/app/styles/animations.css | 184 ++++++++++++++++++++++++++++++++++
 1 file changed, 184 insertions(+)
 create mode 100644 src/app/styles/animations.css

diff --git a/src/app/styles/animations.css b/src/app/styles/animations.css
new file mode 100644
index 0000000..55dfa6b
--- /dev/null
+++ b/src/app/styles/animations.css
@@ -0,0 +1,184 @@
+@keyframes cinemaHover {
+  0% {
+    --tilt-x: 0deg;
+    --tilt-y: 0deg;
+    transform: perspective(1200px) rotateX(0deg) rotateY(0deg) scale(1);
+  }
+}
+
+@keyframes parallaxShift {
+  0% {
+    transform: translateZ(0px);
+  }
+  100% {
+    transform: translateZ(20px);
+  }
+}
+
+@keyframes holographicSheen {
+  0% {
+    background-position: 0% center;
+  }
+  100% {
+    background-position: 100% center;
+  }
+}
+
+@keyframes glowPulse {
+  0%, 100% {
+    box-shadow: 0 0 20px rgba(255, 255, 255, 0.3), inset 0 0 20px rgba(255, 255, 255, 0.1);
+  }
+  50% {
+    box-shadow: 0 0 40px rgba(255, 255, 255, 0.6), inset 0 0 40px rgba(255, 255, 255, 0.2);
+  }
+}
+
+@keyframes scrollReveal {
+  0% {
+    opacity: 0;
+    clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
+  }
+  100% {
+    opacity: 1;
+    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
+  }
+}
+
+@keyframes luminousWaveBottom {
+  0% {
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+}
+
+@keyframes luminousWaveTop {
+  0% {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+}
+
+@keyframes scrollParallax {
+  0% {
+    transform: translateY(0px);
+  }
+  100% {
+    transform: translateY(var(--parallax-distance));
+  }
+}
+
+.hero-cinematic-card {
+  perspective: 1200px;
+  position: relative;
+  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.hero-cinematic-card:hover {
+  transform: scale(1.02);
+  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.4));
+}
+
+.hero-cinematic-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(
+    135deg,
+    rgba(255, 255, 255, 0.1) 0%,
+    rgba(255, 255, 255, 0) 50%,
+    rgba(0, 0, 0, 0.1) 100%
+  );
+  border-radius: inherit;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.6s ease;
+}
+
+.hero-cinematic-card:hover::before {
+  opacity: 1;
+}
+
+.scroll-parallax-layer {
+  --parallax-distance: var(--scroll-distance, 0px);
+  position: relative;
+}
+
+.scroll-parallax-layer.layer-1 {
+  --parallax-distance: calc(var(--scroll-distance, 0px) * 0.3);
+}
+
+.scroll-parallax-layer.layer-2 {
+  --parallax-distance: calc(var(--scroll-distance, 0px) * 0.5);
+}
+
+.scroll-parallax-layer.layer-3 {
+  --parallax-distance: calc(var(--scroll-distance, 0px) * 0.7);
+}
+
+.section-reveal {
+  animation: scrollReveal 0.8s ease-out forwards;
+  animation-timeline: view();
+  animation-range: entry 0% cover 30%;
+}
+
+.glow-pulse {
+  animation: glowPulse 3s ease-in-out infinite;
+}
+
+.luminous-wave {
+  position: absolute;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    rgba(255, 255, 255, 0.4) 50%,
+    transparent 100%
+  );
+  pointer-events: none;
+}
+
+.luminous-wave.bottom {
+  animation: luminousWaveBottom 6s ease-in-out infinite;
+}
+
+.luminous-wave.top {
+  animation: luminousWaveTop 8s ease-in-out infinite;
+}
+
+.headline-stagger {
+  animation: scrollReveal 1s ease-out forwards;
+  animation-timeline: view();
+  animation-range: entry 0% cover 25%;
+}
+
+.cta-stagger {
+  animation: scrollReveal 1.2s ease-out 0.2s forwards;
+  animation-timeline: view();
+  animation-range: entry 0% cover 25%;
+  opacity: 0;
+}
+
+.micro-detail-glow {
+  position: relative;
+  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.micro-detail-glow:hover {
+  filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.6));
+}
-- 
2.49.1