feat: dark luxury redesign with black heart branding

Complete visual overhaul: dark-only mode, rose/crimson accent system,
glassmorphism header, animated hero with floating hearts and glow orbs,
photo-backed cards, infinite team carousel with drag support,
redesigned modals with hero images, black heart logo with rose glow silhouette.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/app/styles/animations.css

@@ -3,7 +3,7 @@
 @keyframes hero-fade-in-up {
   from {
     opacity: 0;
-    transform: translateY(24px);
+    transform: translateY(32px);
   }
   to {
     opacity: 1;
@@ -14,11 +14,59 @@
 @keyframes hero-fade-in-scale {
   from {
     opacity: 0;
-    transform: scale(0.85);
+    transform: scale(0.8);
+    filter: blur(10px);
   }
   to {
     opacity: 1;
     transform: scale(1);
+    filter: blur(0);
+  }
+}
+
+@keyframes gradient-shift {
+  0%, 100% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+}
+
+@keyframes pulse-glow {
+  0%, 100% {
+    opacity: 0.4;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.7;
+    transform: scale(1.05);
+  }
+}
+
+@keyframes shimmer {
+  0% {
+    background-position: -200% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
+}
+
+@keyframes heart-float {
+  0% {
+    opacity: 0;
+    transform: translateY(0) scale(0.5);
+  }
+  10% {
+    opacity: 0.6;
+  }
+  90% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(-100vh) scale(1);
   }
 }
 
@@ -26,22 +74,95 @@
 
 .hero-logo {
   opacity: 0;
-  animation: hero-fade-in-scale 1s ease-out 0.1s forwards;
+  animation: hero-fade-in-scale 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
 }
 
 .hero-title {
   opacity: 0;
-  animation: hero-fade-in-up 0.8s ease-out 0.4s forwards;
+  animation: hero-fade-in-up 1s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards;
 }
 
 .hero-subtitle {
   opacity: 0;
-  animation: hero-fade-in-up 0.8s ease-out 0.7s forwards;
+  animation: hero-fade-in-up 1s cubic-bezier(0.16, 1, 0.3, 1) 0.8s forwards;
 }
 
 .hero-cta {
   opacity: 0;
-  animation: hero-fade-in-up 0.8s ease-out 1s forwards;
+  animation: hero-fade-in-up 1s cubic-bezier(0.16, 1, 0.3, 1) 1.1s forwards;
+}
+
+/* ===== Hero Background ===== */
+
+.hero-bg-gradient {
+  background: radial-gradient(ellipse 80% 60% at 50% -20%, rgba(225, 29, 72, 0.15), transparent),
+              radial-gradient(ellipse 60% 40% at 80% 50%, rgba(225, 29, 72, 0.08), transparent),
+              radial-gradient(ellipse 60% 40% at 20% 80%, rgba(225, 29, 72, 0.06), transparent);
+}
+
+.hero-glow-orb {
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(80px);
+  animation: pulse-glow 6s ease-in-out infinite;
+  pointer-events: none;
+}
+
+/* ===== Gradient Text ===== */
+
+.gradient-text {
+  background: linear-gradient(135deg, #fff 0%, #e11d48 50%, #fff 100%);
+  background-size: 200% 200%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  animation: gradient-shift 6s ease-in-out infinite;
+}
+
+/* Light mode gradient text */
+.gradient-text-light {
+  background: linear-gradient(135deg, #171717 0%, #e11d48 50%, #171717 100%);
+  background-size: 200% 200%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  animation: gradient-shift 6s ease-in-out infinite;
+}
+
+/* ===== Animated Border ===== */
+
+.animated-border {
+  position: relative;
+}
+
+.animated-border::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  padding: 1px;
+  background: linear-gradient(135deg, rgba(225, 29, 72, 0.3), transparent 40%, transparent 60%, rgba(225, 29, 72, 0.15));
+  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  mask-composite: exclude;
+  pointer-events: none;
+  transition: opacity 0.5s ease;
+  opacity: 0.5;
+}
+
+.animated-border:hover::before {
+  opacity: 1;
+  background: linear-gradient(135deg, rgba(225, 29, 72, 0.6), transparent 40%, transparent 60%, rgba(225, 29, 72, 0.4));
+}
+
+/* ===== Glow Effect ===== */
+
+.glow-hover {
+  transition: box-shadow 0.5s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.glow-hover:hover {
+  box-shadow: 0 0 30px rgba(225, 29, 72, 0.1), 0 0 60px rgba(225, 29, 72, 0.05);
+  transform: translateY(-4px);
 }
 
 /* ===== Scroll Reveal ===== */
@@ -49,7 +170,7 @@
 .reveal {
   opacity: 0;
   transform: translateY(30px);
-  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
+  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 .reveal.visible {
@@ -62,11 +183,11 @@
 @keyframes modal-fade-in {
   from {
     opacity: 0;
-    transform: scale(0.95);
+    transform: scale(0.95) translateY(10px);
   }
   to {
     opacity: 1;
-    transform: scale(1);
+    transform: scale(1) translateY(0);
   }
 }
 
@@ -80,11 +201,18 @@
 }
 
 .modal-overlay {
-  animation: modal-overlay-in 0.2s ease-out;
+  animation: modal-overlay-in 0.3s ease-out;
 }
 
 .modal-content {
-  animation: modal-fade-in 0.3s ease-out;
+  animation: modal-fade-in 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+/* ===== Section Divider ===== */
+
+.section-divider {
+  height: 1px;
+  background: linear-gradient(90deg, transparent, rgba(225, 29, 72, 0.3), transparent);
 }
 
 /* ===== Reduced Motion ===== */
@@ -96,6 +224,7 @@
   .hero-cta {
     animation: none !important;
     opacity: 1 !important;
+    filter: none !important;
   }
 
   .reveal {
@@ -108,4 +237,17 @@
   .modal-content {
     animation: none !important;
   }
+
+  .gradient-text,
+  .gradient-text-light {
+    animation: none !important;
+  }
+
+  .hero-glow-orb {
+    animation: none !important;
+  }
+
+  .glow-hover:hover {
+    transform: none;
+  }
 }