/* Transition Overlay Container */ .transition-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 9999; pointer-events: none; display: none; /* Hidden by default */ overflow: hidden; } /* The Curtain (The actual colored block) */ .transition-curtain { position: absolute; top: 0; left: 0; width: 150vw; /* Extra width for the skew */ height: 100vh; transform: translateX(-100%) skewX(-20deg); /* Start off-screen left by default for dark mode */ will-change: transform; } /* --- Instant Curtain (Anti-Blink) --- */ /* This pseudo-element appears immediately when JS in sets the data attribute */ html[data-transition="incoming-white"]::after { content: ""; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: #ffffff; z-index: 2147483647; /* Max z-index */ pointer-events: all; } html[data-transition="incoming-dark"]::after { content: ""; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: #111827; z-index: 2147483647; pointer-events: all; } /* Diagonal Edge using Skew */ .skew-edge { transform: skewX(-20deg); transform-origin: top; } /* --- THEMES --- */ .curtain-white { background-color: #ffffff; } .curtain-dark { background-color: #111827; /* gray-900 match */ } /* --- ANIMATIONS --- */ /* Slide IN from RIGHT (To cover screen) */ /* Used when going from Dev to Photog */ @keyframes slide-in-from-right { 0% { transform: translateX(100%) skewX(-20deg); } 100% { transform: translateX(-20%) skewX(-20deg); } } /* Slide OUT to LEFT (To reveal screen) */ /* Used when arriving at Photog */ @keyframes slide-out-to-left { 0% { transform: translateX(-20%) skewX(-20deg); } 100% { transform: translateX(-150%) skewX(-20deg); } } /* Slide IN from LEFT (To cover screen) */ /* Used when going from Photog to Dev */ @keyframes slide-in-from-left { 0% { transform: translateX(-150%) skewX(-20deg); } 100% { transform: translateX(-20%) skewX(-20deg); } } /* Slide OUT to RIGHT (To reveal screen) */ /* Used when arriving at Dev */ @keyframes slide-out-to-right { 0% { transform: translateX(-20%) skewX(-20deg); } 100% { transform: translateX(100%) skewX(-20deg); } } /* Classes to trigger animations */ .animate-in-right { display: block; animation: slide-in-from-right 0.6s cubic-bezier(0.65, 0, 0.35, 1) forwards; } .animate-out-left { display: block; animation: slide-out-to-left 0.6s cubic-bezier(0.65, 0, 0.35, 1) forwards; } .animate-in-left { display: block; animation: slide-in-from-left 0.6s cubic-bezier(0.65, 0, 0.35, 1) forwards; } .animate-out-right { display: block; animation: slide-out-to-right 0.6s cubic-bezier(0.65, 0, 0.35, 1) forwards; } /* Forced Cover States (for initial load) */ .cover-screen { display: block; transform: translateX(-20%) skewX(-20deg); }