feat(theme): add sleeping dark mode portrait

components/poyraz-bottom-right-follower.tsx

@@ -12,6 +12,7 @@ import {
 
 const VIDEO_SRC = "/media/cursor-portrait/poyraz-bottom-right.mp4";
 const POSTER_SRC = "/media/cursor-portrait/poyraz-bottom-right-poster.webp";
+const NIGHT_SRC = "/media/cursor-portrait/gece.webp";
 
 const SEEK_INTERVAL_MS = 1000 / 60;
 const MIN_TIME_DELTA = 0.002;
@@ -21,8 +22,8 @@ type DisplayMode =
   | "pending"
   | "interactive"
   | "poster-reduced"
-  | "hidden-mobile"
-  | "hidden-dark";
+  | "night-static"
+  | "hidden-mobile";
 
 function subscribeToMediaQuery(query: MediaQueryList, listener: () => void) {
   if (typeof query.addEventListener === "function") {
@@ -52,13 +53,13 @@ export function PoyrazBottomRightFollower() {
     const reducedMotionQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
 
     const updateDisplayMode = () => {
-      if (document.documentElement.dataset.poyrazTheme === "dark") {
-        setDisplayMode("hidden-dark");
+      if (!desktopQuery.matches || !finePointerQuery.matches) {
+        setDisplayMode("hidden-mobile");
         return;
       }
 
-      if (!desktopQuery.matches || !finePointerQuery.matches) {
-        setDisplayMode("hidden-mobile");
+      if (document.documentElement.dataset.poyrazTheme === "dark") {
+        setDisplayMode("night-static");
         return;
       }
 
@@ -252,12 +253,9 @@ export function PoyrazBottomRightFollower() {
   }, [displayMode, videoFailed]);
 
   const showVideo = displayMode === "interactive" && !videoFailed;
+  const showNight = displayMode === "night-static";
 
-  if (
-    displayMode === "pending" ||
-    displayMode === "hidden-mobile" ||
-    displayMode === "hidden-dark"
-  ) {
+  if (displayMode === "pending" || displayMode === "hidden-mobile") {
     return null;
   }
 
@@ -265,9 +263,39 @@ export function PoyrazBottomRightFollower() {
     <div
       aria-hidden="true"
       data-cursor-portrait
-      className="pointer-events-none fixed right-6 bottom-0 z-40 aspect-square w-[clamp(110px,11vw,170px)] select-none bg-white"
+      data-portrait-mode={showNight ? "night" : "day"}
+      className={`pointer-events-none fixed right-6 bottom-0 z-40 aspect-square w-[clamp(110px,11vw,170px)] select-none ${showNight ? "bg-transparent" : "bg-white"}`}
     >
-      {showVideo ? (
+      {showNight ? (
+        <>
+          <Image
+            src={NIGHT_SRC}
+            alt=""
+            fill
+            sizes="(max-width: 1545px) 11vw, 170px"
+            draggable={false}
+            className="object-contain"
+          />
+          <span
+            data-sleepy-z="1"
+            className="animate-sleepy-z absolute top-[22%] left-[31%] z-10 font-secondary text-[clamp(11px,1vw,15px)] font-bold text-red-100 drop-shadow-[0_0_5px_rgba(248,113,113,0.75)]"
+          >
+            Z
+          </span>
+          <span
+            data-sleepy-z="2"
+            className="animate-sleepy-z absolute top-[13%] left-[22%] z-10 font-secondary text-[clamp(13px,1.15vw,18px)] font-bold text-red-100 drop-shadow-[0_0_6px_rgba(248,113,113,0.8)]"
+          >
+            Z
+          </span>
+          <span
+            data-sleepy-z="3"
+            className="animate-sleepy-z absolute top-[3%] left-[12%] z-10 font-secondary text-[clamp(15px,1.3vw,21px)] font-bold text-red-100 drop-shadow-[0_0_7px_rgba(248,113,113,0.85)]"
+          >
+            Z
+          </span>
+        </>
+      ) : showVideo ? (
         <video
           ref={videoRef}
           src={VIDEO_SRC}