public/css/style.css

@@ -41,52 +41,49 @@ body.setup-mode { cursor: default; }
 /* =============================================
    SLIDESHOW - VINTAGE POLAROID PILE
    ============================================= */
-#slideshow-screen { background: #1a1510; }
+#slideshow-screen { background: #1e1a14; }
 
-/* Warm blurred bg behind everything */
+/* Warm blurred bg — heavy sepia wash */
 .bg-blur {
   position: absolute; top: -30px; left: -30px;
   width: calc(100% + 60px); height: calc(100% + 60px);
   background-size: cover; background-position: center;
-  filter: blur(40px) brightness(0.25) saturate(0.5) sepia(0.3);
+  filter: blur(45px) brightness(0.2) saturate(0.3) sepia(0.6);
-  opacity: 0; transition: opacity 2s ease; z-index: 1;
+  opacity: 0; transition: opacity 3s ease; z-index: 1;
 }
 .bg-blur.visible { opacity: 1; }
 
-/* Canvas pile of accumulated polaroids */
+/* Canvas pile */
 #pile-canvas {
   position: absolute; top: 0; left: 0; width: 100%; height: 100%;
   z-index: 2; pointer-events: none;
+  transition: opacity 2s ease;
 }
 
-/* Vignette on top of pile */
+/* Vignette */
 .bg-vignette {
   position: absolute; top: 0; left: 0; width: 100%; height: 100%;
   background: radial-gradient(ellipse at center, transparent 50%, rgba(15,12,8,0.6) 100%);
   z-index: 3; pointer-events: none;
 }
 
-/* --- Main floating frame (nearly full screen) --- */
+/* --- Main floating frame --- */
 .main-frame {
   position: absolute; top: 50%; left: 50%;
   transform: translate(-50%, -50%);
   z-index: 5; opacity: 0;
   transition: opacity 1.2s ease;
-  animation: float 25s ease-in-out infinite;
+  animation: float 80s linear infinite;
 }
 .main-frame.visible { opacity: 1; }
 
+/* Slow gentle drift in one direction */
 @keyframes float {
-  0%   { transform: translate(-50%, -50%) rotate(0deg)    translateX(0)    translateY(0); }
+  0%   { transform: translate(-50%, -50%) translate(0, 0); }
-  15%  { transform: translate(-50%, -50%) rotate(0.6deg)  translateX(6px)  translateY(-4px); }
+  100% { transform: translate(-50%, -50%) translate(10px, -6px); }
-  30%  { transform: translate(-50%, -50%) rotate(-0.4deg) translateX(-4px) translateY(5px); }
-  50%  { transform: translate(-50%, -50%) rotate(0.3deg)  translateX(5px)  translateY(2px); }
-  65%  { transform: translate(-50%, -50%) rotate(-0.5deg) translateX(-6px) translateY(-3px); }
-  80%  { transform: translate(-50%, -50%) rotate(0.3deg)  translateX(3px)  translateY(5px); }
-  100% { transform: translate(-50%, -50%) rotate(0deg)    translateX(0)    translateY(0); }
 }
 
-/* Polaroid frame — used for both photos and videos */
+/* Polaroid frame */
 .main-frame .frame-border {
   background: #f5f0e8;
   padding: 10px 10px 36px 10px;
@@ -98,6 +95,7 @@ body.setup-mode { cursor: default; }
   position: relative;
 }
 
+/* No min-width/height — frame hugs the image naturally */
 .main-frame .frame-media {
   display: block;
   max-width: 88vw;
@@ -105,8 +103,6 @@ body.setup-mode { cursor: default; }
   width: auto; height: auto;
   object-fit: contain;
   background: #2a2520;
-  min-width: 50vw;
-  min-height: 40vh;
 }
 
 /* === OVERLAY === */