From 6bb915299f54b8f987d40fa60c0270bd82a60485 Mon Sep 17 00:00:00 2001
From: Kroonk <Tom.misch2@gmail.com>
Date: Wed, 20 May 2026 18:15:39 +0200
Subject: [PATCH] Place cat peek behind cards

---
 index.html |  2 +-
 style.css  | 38 +++++++++++++++++++++++---------------
 2 files changed, 24 insertions(+), 16 deletions(-)

diff --git a/index.html b/index.html
index 7307fe4..000dd23 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>MischLabs - Services</title>
-    <link rel="stylesheet" href="style.css?v=4">
+    <link rel="stylesheet" href="style.css?v=5">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
diff --git a/style.css b/style.css
index 8c47317..0a87fd5 100644
--- a/style.css
+++ b/style.css
@@ -185,41 +185,49 @@ main {
 
 .card > * {
     position: relative;
-    z-index: 2;
+    z-index: 3;
 }
 
 .card::before {
     content: '';
     position: absolute;
     inset: 0;
-    background: radial-gradient(
-        600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
-        rgba(255, 255, 255, 0.03),
-        transparent 40%
-    );
-    opacity: 0;
-    transition: opacity 0.3s;
+    background:
+        radial-gradient(
+            600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
+            rgba(255, 255, 255, 0.03),
+            transparent 40%
+        ),
+        var(--surface);
+    opacity: 1;
+    transition: background 0.3s;
     z-index: 1;
     border-radius: inherit;
     pointer-events: none;
 }
 
 .card:hover::before {
-    opacity: 1;
+    background:
+        radial-gradient(
+            600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
+            rgba(255, 255, 255, 0.03),
+            transparent 40%
+        ),
+        var(--surface-hover);
 }
 
 .card::after {
     content: '';
     position: absolute;
-    top: -30px;
-    right: 1.35rem;
-    width: 72px;
-    height: 58px;
+    top: -36px;
+    right: 1.15rem;
+    width: 78px;
+    height: 62px;
     background-image: url("data:image/svg+xml,%3Csvg width='96' height='76' viewBox='0 0 96 76' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22 31 17 7l22 13 18-1L79 7l-5 24c7 6 11 14 11 23 0 17-16 22-37 22S11 71 11 54c0-9 4-17 11-23Z' fill='%23f7c98f'/%3E%3Cpath d='M24 30 20 13l16 10M72 30l4-17-16 10' fill='%23f09f7f'/%3E%3Cellipse cx='35' cy='46' rx='5' ry='6' fill='%2325221f'/%3E%3Cellipse cx='61' cy='46' rx='5' ry='6' fill='%2325221f'/%3E%3Cpath d='M48 52c-2 0-4 1-4 3s2 3 4 3 4-1 4-3-2-3-4-3Z' fill='%23b65f53'/%3E%3Cpath d='M48 58c-3 5-9 5-12 1M48 58c3 5 9 5 12 1' fill='none' stroke='%2325221f' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M24 51H4M26 58H7M72 51h20M70 58h19' stroke='%2325221f' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M19 31c8-7 18-10 29-10s21 3 29 10' fill='none' stroke='rgba(255,255,255,0.5)' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
     background-repeat: no-repeat;
     background-size: contain;
     opacity: 0;
-    transform: translateY(22px) rotate(-7deg);
+    transform: translateY(34px) rotate(-7deg);
     transition:
         opacity 0.22s ease,
         transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
@@ -238,7 +246,7 @@ main {
 
 .card:hover::after {
     opacity: 1;
-    transform: translateY(0) rotate(-7deg);
+    transform: translateY(4px) rotate(-7deg);
 }
 
 /* ===== Card Icon ===== */