From 37b0bc654aeb3e506aaa38d9c25c028800777dba Mon Sep 17 00:00:00 2001
From: Dorian <dorian@Dorians-MacBook-Air.local>
Date: Fri, 13 Feb 2026 22:47:56 +0000
Subject: [PATCH] style: left-to-right fade animations on sovereign phases +
 match close button to film modal

- NAH! text now slides in from the left with a scale punch and glow
- Own your privacy phase slides in from the left with a smooth fade
- Close button restyled to match ContentDetailModal (circular, glassmorphism, blur)

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 docker-compose.yml           |  2 +-
 src/components/AuthModal.vue | 67 +++++++++++++++++++++++++++---------
 2 files changed, 51 insertions(+), 18 deletions(-)

diff --git a/docker-compose.yml b/docker-compose.yml
index 3bd2df9..499252f 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -20,7 +20,7 @@ services:
       context: .
       dockerfile: Dockerfile
       args:
-        CACHEBUST: "24"
+        CACHEBUST: "25"
         VITE_USE_MOCK_DATA: "false"
         VITE_CONTENT_ORIGIN: ${FRONTEND_URL}
         VITE_INDEEHUB_API_URL: /api
diff --git a/src/components/AuthModal.vue b/src/components/AuthModal.vue
index 0ffef71..a09c375 100644
--- a/src/components/AuthModal.vue
+++ b/src/components/AuthModal.vue
@@ -3,9 +3,9 @@
     <div v-if="isOpen" class="auth-modal-overlay" @click.self="closeModal">
       <div class="auth-modal-container">
         <div class="auth-modal-content">
-          <!-- Close Button -->
-          <button @click="closeModal" class="absolute top-4 right-4 text-white/60 hover:text-white transition-colors">
-            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <!-- Close Button — matches film detail modal -->
+          <button @click="closeModal" class="auth-close-btn">
+            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
             </svg>
           </button>
@@ -645,13 +645,36 @@ declare global {
   opacity: 0.85;
 }
 
-/* ── NAH! Phase ── */
+/* ── Close Button — matches film detail modal ── */
+.auth-close-btn {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  z-index: 20;
+  padding: 8px;
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border-radius: 9999px;
+  color: rgba(255, 255, 255, 0.8);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.auth-close-btn:hover {
+  color: white;
+  background: rgba(0, 0, 0, 0.8);
+  border-color: rgba(255, 255, 255, 0.15);
+}
+
+/* ── NAH! Phase — left-to-right reveal ── */
 .sovereign-nah {
   display: flex;
   align-items: center;
   justify-content: center;
   min-height: 280px;
-  animation: nahEntrance 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+  overflow: hidden;
 }
 
 .nah-text {
@@ -664,36 +687,46 @@ declare global {
   color: transparent;
   text-shadow: none;
   filter: drop-shadow(0 0 40px rgba(255, 0, 0, 0.3));
-  animation: nahPulse 0.8s ease-in-out;
+
+  /* Left-to-right fade-slide with a slight scale punch */
+  animation:
+    nahSlideIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards,
+    nahGlow 0.9s ease-in-out 0.3s;
 }
 
-@keyframes nahEntrance {
+@keyframes nahSlideIn {
   0% {
-    transform: scale(0.3) rotate(-5deg);
     opacity: 0;
+    transform: translateX(-60px) scale(0.85);
+    filter: drop-shadow(0 0 0 rgba(255, 0, 0, 0));
   }
-  50% {
-    transform: scale(1.15) rotate(2deg);
+  70% {
     opacity: 1;
+    transform: translateX(8px) scale(1.05);
   }
   100% {
-    transform: scale(1) rotate(0deg);
     opacity: 1;
+    transform: translateX(0) scale(1);
+    filter: drop-shadow(0 0 40px rgba(255, 0, 0, 0.3));
   }
 }
 
-@keyframes nahPulse {
+@keyframes nahGlow {
   0%, 100% { filter: drop-shadow(0 0 40px rgba(255, 0, 0, 0.3)); }
   50% { filter: drop-shadow(0 0 80px rgba(255, 0, 0, 0.6)); }
 }
 
-/* ── Own Your Privacy Phase ── */
+/* ── Own Your Privacy Phase — left-to-right fade ── */
 .sovereign-own-privacy {
   min-height: 280px;
   display: flex;
   align-items: center;
   justify-content: center;
-  animation: privacyFadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+  overflow: hidden;
+}
+
+.sovereign-own-privacy > div {
+  animation: privacySlideIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
 }
 
 .own-privacy-heading {
@@ -706,14 +739,14 @@ declare global {
   color: transparent;
 }
 
-@keyframes privacyFadeIn {
+@keyframes privacySlideIn {
   0% {
-    transform: translateY(20px) scale(0.95);
     opacity: 0;
+    transform: translateX(-40px);
   }
   100% {
-    transform: translateY(0) scale(1);
     opacity: 1;
+    transform: translateX(0);
   }
 }