From b8b860dddd94658ffbdec70a036cbe0adfb38fd7 Mon Sep 17 00:00:00 2001
From: isaaclins <104733575+isaaclins@users.noreply.github.com>
Date: Wed, 7 Oct 2026 18:54:37 +0200
Subject: [PATCH] Film: no light lines at the edges on iPhone (own layer +
 mask, video 1px oversize, poster hidden while playing)

---
 assets/css/_home.scss | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/assets/css/_home.scss b/assets/css/_home.scss
index 4d8d954..5af9750 100644
--- a/assets/css/_home.scss
+++ b/assets/css/_home.scss
@@ -1241,6 +1241,11 @@
     overflow: hidden;
     background: #09090a;
     box-shadow: 0 0 0 1px var(--line);
+    // iOS Safari draws a video a fraction of a pixel smaller than its rounded, overflow-clipped box, so the poster
+    // underneath showed as thin light lines at the edges (Isaac 2026-10-07). Own layer + mask = clean clipping.
+    isolation: isolate;
+    transform: translateZ(0);
+    -webkit-mask-image: -webkit-radial-gradient(white, black);
 
     img,
     video {
@@ -1254,6 +1259,9 @@
     }
 
     video {
+      inset: -1px;
+      width: calc(100% + 2px);
+      height: calc(100% + 2px);
       opacity: 0;
       transition: opacity .3s var(--ease);
     }
@@ -1261,6 +1269,12 @@
     &.on video {
       opacity: 1;
     }
+
+    // once the film shows, the poster must not peek through anywhere
+    &.on picture {
+      visibility: hidden;
+      transition: visibility 0s .3s;
+    }
   }
 
   .film-btn {