From d400db8969727f73b6e08336650844aa8389f2ab Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 14 Jan 2026 06:43:48 +0000
Subject: [PATCH 1/4] feat: Add trading card effect to profile picture

Add TradingCard component with Pokemon-card-inspired holographic effects:
- 3D tilt on mouse hover with perspective transform
- Holographic shine overlay with rainbow gradients and blend modes
- Animated shimmer border using primary/secondary colors
- Glare effect that follows cursor position
- Accessibility: respects prefers-reduced-motion

Wrap profile picture in About section with new trading card component.
---
 .../components/molecules/TradingCard.svelte   | 243 ++++++++++++++++++
 src/lib/components/organisms/About.svelte     |  29 ++-
 2 files changed, 260 insertions(+), 12 deletions(-)
 create mode 100644 src/lib/components/molecules/TradingCard.svelte

diff --git a/src/lib/components/molecules/TradingCard.svelte b/src/lib/components/molecules/TradingCard.svelte
new file mode 100644
index 0000000..538e533
--- /dev/null
+++ b/src/lib/components/molecules/TradingCard.svelte
@@ -0,0 +1,243 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte';
+
+    interface Props {
+        children?: Snippet;
+        class?: string;
+    }
+
+    let { children, class: className = '' }: Props = $props();
+
+    // Mouse tracking state
+    let cardElement: HTMLElement | null = $state(null);
+    let mouseX = $state(50);
+    let mouseY = $state(50);
+    let isHovering = $state(false);
+
+    // Calculate rotation based on mouse position
+    let rotateX = $derived(isHovering ? (mouseY - 50) / 5 : 0);
+    let rotateY = $derived(isHovering ? (50 - mouseX) / 5 : 0);
+
+    // Shine position follows mouse
+    let shineX = $derived(mouseX);
+    let shineY = $derived(mouseY);
+
+    function handleMouseMove(event: MouseEvent) {
+        if (!cardElement) return;
+
+        const rect = cardElement.getBoundingClientRect();
+        const x = event.clientX - rect.left;
+        const y = event.clientY - rect.top;
+
+        mouseX = (x / rect.width) * 100;
+        mouseY = (y / rect.height) * 100;
+    }
+
+    function handleMouseEnter() {
+        isHovering = true;
+    }
+
+    function handleMouseLeave() {
+        isHovering = false;
+        mouseX = 50;
+        mouseY = 50;
+    }
+</script>
+
+<div
+    class="trading-card-container {className}"
+    bind:this={cardElement}
+    onmousemove={handleMouseMove}
+    onmouseenter={handleMouseEnter}
+    onmouseleave={handleMouseLeave}
+    role="img"
+    style="
+        --mouse-x: {shineX}%;
+        --mouse-y: {shineY}%;
+        --rotate-x: {rotateX}deg;
+        --rotate-y: {rotateY}deg;
+    "
+>
+    <div class="card-perspective">
+        <div class="trading-card" class:hovering={isHovering}>
+            <!-- Card frame border -->
+            <div class="card-frame">
+                <!-- Holographic shine overlay -->
+                <div class="card-shine"></div>
+
+                <!-- Glare effect -->
+                <div class="card-glare"></div>
+
+                <!-- Content wrapper -->
+                <div class="card-content">
+                    {@render children?.()}
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<style lang="scss">
+    @use '$lib/scss/breakpoints.scss';
+
+    .trading-card-container {
+        --card-border-width: 8px;
+        --card-radius: 16px;
+        --shine-intensity: 0.4;
+        --glare-intensity: 0.15;
+
+        perspective: 1000px;
+        width: fit-content;
+    }
+
+    .card-perspective {
+        transform-style: preserve-3d;
+        transition: transform 0.15s ease-out;
+        transform: rotateX(var(--rotate-x)) rotateY(var(--rotate-y));
+    }
+
+    .trading-card {
+        position: relative;
+        border-radius: var(--card-radius);
+        transform-style: preserve-3d;
+        transition:
+            transform 0.3s ease,
+            box-shadow 0.3s ease;
+
+        // Base shadow
+        box-shadow:
+            0 10px 30px -10px rgba(0, 0, 0, 0.5),
+            0 0 0 1px rgba(var(--color--primary-rgb), 0.1);
+
+        &.hovering {
+            box-shadow:
+                0 20px 50px -15px rgba(0, 0, 0, 0.6),
+                0 0 30px rgba(var(--color--primary-rgb), 0.3),
+                0 0 60px rgba(var(--color--secondary-rgb), 0.15);
+        }
+    }
+
+    .card-frame {
+        position: relative;
+        overflow: hidden;
+        border-radius: var(--card-radius);
+        padding: var(--card-border-width);
+
+        // Holographic border gradient
+        background: linear-gradient(
+            135deg,
+            rgba(var(--color--primary-rgb), 0.8) 0%,
+            rgba(var(--color--secondary-rgb), 0.6) 25%,
+            rgba(var(--color--primary-rgb), 0.7) 50%,
+            rgba(var(--color--secondary-rgb), 0.8) 75%,
+            rgba(var(--color--primary-rgb), 0.6) 100%
+        );
+        background-size: 400% 400%;
+        animation: borderShimmer 8s ease infinite;
+    }
+
+    .card-shine {
+        position: absolute;
+        inset: 0;
+        border-radius: var(--card-radius);
+        pointer-events: none;
+        z-index: 3;
+
+        // Holographic rainbow gradient that follows mouse
+        background: radial-gradient(
+            circle at var(--mouse-x) var(--mouse-y),
+            rgba(255, 255, 255, 0.3) 0%,
+            transparent 50%
+        ),
+        linear-gradient(
+            125deg,
+            transparent 0%,
+            rgba(var(--color--secondary-rgb), var(--shine-intensity)) 20%,
+            transparent 30%,
+            rgba(255, 215, 0, var(--shine-intensity)) 45%,
+            transparent 55%,
+            rgba(var(--color--primary-rgb), var(--shine-intensity)) 70%,
+            transparent 80%,
+            rgba(var(--color--secondary-rgb), var(--shine-intensity)) 95%,
+            transparent 100%
+        );
+        background-size: 100% 100%, 300% 300%;
+        background-position:
+            0% 0%,
+            calc(var(--mouse-x) * 1%) calc(var(--mouse-y) * 1%);
+        mix-blend-mode: color-dodge;
+        opacity: 0;
+        transition: opacity 0.3s ease;
+
+        .hovering & {
+            opacity: 1;
+        }
+    }
+
+    .card-glare {
+        position: absolute;
+        inset: 0;
+        border-radius: var(--card-radius);
+        pointer-events: none;
+        z-index: 4;
+
+        // Specular highlight that follows cursor
+        background: radial-gradient(
+            ellipse 80% 50% at var(--mouse-x) var(--mouse-y),
+            rgba(255, 255, 255, var(--glare-intensity)) 0%,
+            transparent 60%
+        );
+        opacity: 0;
+        transition: opacity 0.3s ease;
+
+        .hovering & {
+            opacity: 1;
+        }
+    }
+
+    .card-content {
+        position: relative;
+        z-index: 2;
+        border-radius: calc(var(--card-radius) - var(--card-border-width) / 2);
+        overflow: hidden;
+        background: var(--color--card-background);
+
+        // Inner shadow for depth
+        box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.3);
+
+        :global(img),
+        :global(picture) {
+            display: block;
+            width: 100%;
+            height: auto;
+        }
+    }
+
+    @keyframes borderShimmer {
+        0% {
+            background-position: 0% 50%;
+        }
+        50% {
+            background-position: 100% 50%;
+        }
+        100% {
+            background-position: 0% 50%;
+        }
+    }
+
+    // Reduce motion for accessibility
+    @media (prefers-reduced-motion: reduce) {
+        .card-frame {
+            animation: none;
+        }
+
+        .card-perspective {
+            transform: none !important;
+        }
+
+        .card-shine,
+        .card-glare {
+            display: none;
+        }
+    }
+</style>
diff --git a/src/lib/components/organisms/About.svelte b/src/lib/components/organisms/About.svelte
index 288aa13..b8500e6 100644
--- a/src/lib/components/organisms/About.svelte
+++ b/src/lib/components/organisms/About.svelte
@@ -1,5 +1,6 @@
 <script>
     import Socials from '$lib/components/molecules/Socials.svelte';
+    import TradingCard from '$lib/components/molecules/TradingCard.svelte';
     import { FxReveal as Img } from '@zerodevx/svelte-img';
     import MeSrc from '$assets/images/authors/jloos.png?as=run&fit=cover';
     import { authors } from '$lib/data/authors';
@@ -37,13 +38,15 @@
         </div>
     </div>
     <div class="image">
-        <Img
-            src={MeSrc}
-            {...{ class: 'me-image' }}
-            alt="A manga comic drawing of Jan-Philip Loos sitting in front of a window showing a cyberpunk city"
-            sizes="(max-width: 1024px) 400px, 800px"
-            --reveal-transition="opacity 400ms ease-in, transform 0.8s ease-out;"
-        />
+        <TradingCard>
+            <Img
+                src={MeSrc}
+                {...{ class: 'me-image' }}
+                alt="A manga comic drawing of Jan-Philip Loos sitting in front of a window showing a cyberpunk city"
+                sizes="(max-width: 1024px) 400px, 800px"
+                --reveal-transition="opacity 400ms ease-in, transform 0.8s ease-out;"
+            />
+        </TradingCard>
     </div>
 </section>
 
@@ -115,13 +118,15 @@
         }
 
         .image {
-            border-radius: 10%;
-            border: 8px solid rgba(var(--color--primary-rgb), 0.05);
-            overflow: hidden;
-            mix-blend-mode: color-burn;
+            display: flex;
+            justify-content: center;
+            align-items: center;
 
             :global(.me-image) {
-                height: 100%;
+                display: block;
+                width: 100%;
+                max-width: 350px;
+                height: auto;
                 object-fit: cover;
                 object-position: center;
             }

From 6d543ec912807913cb14951bc4b9bdda0f57da97 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 14 Jan 2026 07:01:28 +0000
Subject: [PATCH 2/4] feat: Upgrade trading card to VMAX style with glitter
 effect

Transform the profile trading card to Pokemon VMAX style:
- Add blurred background layer using the same profile image
- Implement multi-layer glitter/sparkle effect using repeating
  radial gradients that move with cursor position
- Add holographic rainbow color-dodge overlay that shifts on hover
- Create animated rainbow border that cycles through colors
- Apply soft edge mask to blend foreground with glitter background
- Enhanced glow effects with gold accent on hover
- Keep all accessibility features (prefers-reduced-motion support)
---
 .../components/molecules/TradingCard.svelte   | 298 +++++++++++++-----
 src/lib/components/organisms/About.svelte     |   2 +-
 2 files changed, 225 insertions(+), 75 deletions(-)

diff --git a/src/lib/components/molecules/TradingCard.svelte b/src/lib/components/molecules/TradingCard.svelte
index 538e533..e4d43ce 100644
--- a/src/lib/components/molecules/TradingCard.svelte
+++ b/src/lib/components/molecules/TradingCard.svelte
@@ -1,12 +1,14 @@
 <script lang="ts">
     import type { Snippet } from 'svelte';
+    import type { Picture } from 'imagetools-core';
 
     interface Props {
         children?: Snippet;
         class?: string;
+        backgroundSrc?: Picture;
     }
 
-    let { children, class: className = '' }: Props = $props();
+    let { children, class: className = '', backgroundSrc }: Props = $props();
 
     // Mouse tracking state
     let cardElement: HTMLElement | null = $state(null);
@@ -15,13 +17,17 @@
     let isHovering = $state(false);
 
     // Calculate rotation based on mouse position
-    let rotateX = $derived(isHovering ? (mouseY - 50) / 5 : 0);
-    let rotateY = $derived(isHovering ? (50 - mouseX) / 5 : 0);
+    let rotateX = $derived(isHovering ? (mouseY - 50) / 4 : 0);
+    let rotateY = $derived(isHovering ? (50 - mouseX) / 4 : 0);
 
-    // Shine position follows mouse
+    // Shine/glitter position follows mouse with offset for parallax
     let shineX = $derived(mouseX);
     let shineY = $derived(mouseY);
 
+    // Seed for sparkle variation
+    let seedX = $derived(Math.floor(mouseX / 5) * 5);
+    let seedY = $derived(Math.floor(mouseY / 5) * 5);
+
     function handleMouseMove(event: MouseEvent) {
         if (!cardElement) return;
 
@@ -42,6 +48,25 @@
         mouseX = 50;
         mouseY = 50;
     }
+
+    // Get the best quality image URL from the Picture object
+    function getImageUrl(src: Picture | undefined): string {
+        if (!src) return '';
+        // Get the first source's largest image
+        if (src.sources && src.sources.length > 0) {
+            const srcset = src.sources[0].srcset;
+            // Extract the largest image URL from srcset
+            const parts = srcset.split(',');
+            if (parts.length > 0) {
+                const lastPart = parts[parts.length - 1].trim();
+                return lastPart.split(' ')[0];
+            }
+        }
+        // Fallback to img.src
+        return src.img?.src || '';
+    }
+
+    let bgImageUrl = $derived(getImageUrl(backgroundSrc));
 </script>
 
 <div
@@ -56,19 +81,30 @@
         --mouse-y: {shineY}%;
         --rotate-x: {rotateX}deg;
         --rotate-y: {rotateY}deg;
+        --seed-x: {seedX};
+        --seed-y: {seedY};
+        --bg-image: url('{bgImageUrl}');
     "
 >
     <div class="card-perspective">
         <div class="trading-card" class:hovering={isHovering}>
-            <!-- Card frame border -->
+            <!-- VMAX style card frame -->
             <div class="card-frame">
-                <!-- Holographic shine overlay -->
-                <div class="card-shine"></div>
+                <!-- Background layer with blurred image -->
+                {#if backgroundSrc}
+                    <div class="card-background"></div>
+                {/if}
+
+                <!-- Glitter/sparkle layer -->
+                <div class="card-glitter"></div>
 
-                <!-- Glare effect -->
+                <!-- Holographic rainbow shine -->
+                <div class="card-holo"></div>
+
+                <!-- Specular glare -->
                 <div class="card-glare"></div>
 
-                <!-- Content wrapper -->
+                <!-- Foreground content (the actual image) -->
                 <div class="card-content">
                     {@render children?.()}
                 </div>
@@ -81,18 +117,18 @@
     @use '$lib/scss/breakpoints.scss';
 
     .trading-card-container {
-        --card-border-width: 8px;
-        --card-radius: 16px;
-        --shine-intensity: 0.4;
-        --glare-intensity: 0.15;
+        --card-border-width: 10px;
+        --card-radius: 20px;
+        --glitter-size: 2px;
+        --glitter-spacing: 24px;
 
-        perspective: 1000px;
+        perspective: 1200px;
         width: fit-content;
     }
 
     .card-perspective {
         transform-style: preserve-3d;
-        transition: transform 0.15s ease-out;
+        transition: transform 0.1s ease-out;
         transform: rotateX(var(--rotate-x)) rotateY(var(--rotate-y));
     }
 
@@ -100,20 +136,22 @@
         position: relative;
         border-radius: var(--card-radius);
         transform-style: preserve-3d;
-        transition:
-            transform 0.3s ease,
-            box-shadow 0.3s ease;
+        transition: box-shadow 0.3s ease;
 
-        // Base shadow
+        // Base shadow with colored glow
         box-shadow:
-            0 10px 30px -10px rgba(0, 0, 0, 0.5),
-            0 0 0 1px rgba(var(--color--primary-rgb), 0.1);
+            0 15px 35px -10px rgba(0, 0, 0, 0.5),
+            0 0 0 1px rgba(var(--color--primary-rgb), 0.2),
+            0 0 20px rgba(var(--color--primary-rgb), 0.1),
+            0 0 40px rgba(var(--color--secondary-rgb), 0.05);
 
         &.hovering {
             box-shadow:
-                0 20px 50px -15px rgba(0, 0, 0, 0.6),
-                0 0 30px rgba(var(--color--primary-rgb), 0.3),
-                0 0 60px rgba(var(--color--secondary-rgb), 0.15);
+                0 25px 60px -15px rgba(0, 0, 0, 0.6),
+                0 0 0 2px rgba(var(--color--primary-rgb), 0.4),
+                0 0 40px rgba(var(--color--primary-rgb), 0.4),
+                0 0 80px rgba(var(--color--secondary-rgb), 0.2),
+                0 0 120px rgba(255, 215, 0, 0.1);
         }
     }
 
@@ -123,48 +161,121 @@
         border-radius: var(--card-radius);
         padding: var(--card-border-width);
 
-        // Holographic border gradient
+        // Animated holographic border - VMAX style rainbow
         background: linear-gradient(
-            135deg,
-            rgba(var(--color--primary-rgb), 0.8) 0%,
-            rgba(var(--color--secondary-rgb), 0.6) 25%,
-            rgba(var(--color--primary-rgb), 0.7) 50%,
-            rgba(var(--color--secondary-rgb), 0.8) 75%,
-            rgba(var(--color--primary-rgb), 0.6) 100%
+            var(--border-angle, 135deg),
+            rgba(var(--color--primary-rgb), 1) 0%,
+            rgba(255, 215, 0, 0.9) 15%,
+            rgba(var(--color--secondary-rgb), 1) 30%,
+            rgba(180, 100, 255, 0.9) 45%,
+            rgba(var(--color--primary-rgb), 1) 60%,
+            rgba(255, 215, 0, 0.9) 75%,
+            rgba(var(--color--secondary-rgb), 1) 90%,
+            rgba(var(--color--primary-rgb), 1) 100%
         );
-        background-size: 400% 400%;
-        animation: borderShimmer 8s ease infinite;
+        background-size: 300% 300%;
+        animation: borderRainbow 6s linear infinite;
     }
 
-    .card-shine {
+    // Blurred background image layer
+    .card-background {
         position: absolute;
-        inset: 0;
-        border-radius: var(--card-radius);
+        inset: var(--card-border-width);
+        border-radius: calc(var(--card-radius) - var(--card-border-width));
+        z-index: 1;
+        overflow: hidden;
+
+        &::before {
+            content: '';
+            position: absolute;
+            inset: -20%;
+            background-image: var(--bg-image);
+            background-size: 140%;
+            background-position: center;
+            filter: blur(20px) saturate(1.5) brightness(0.7);
+        }
+    }
+
+    // Glitter/sparkle effect layer
+    .card-glitter {
+        position: absolute;
+        inset: var(--card-border-width);
+        border-radius: calc(var(--card-radius) - var(--card-border-width));
+        z-index: 2;
         pointer-events: none;
+        overflow: hidden;
+
+        // Multi-layer sparkle pattern
+        background:
+            // Animated sparkle dots - layer 1
+            repeating-radial-gradient(
+                circle at calc(var(--mouse-x) * 0.5 + 25%) calc(var(--mouse-y) * 0.5 + 25%),
+                rgba(255, 255, 255, 0.8) 0px,
+                rgba(255, 255, 255, 0.8) var(--glitter-size),
+                transparent var(--glitter-size),
+                transparent var(--glitter-spacing)
+            ),
+            // Sparkle dots - layer 2 (offset)
+            repeating-radial-gradient(
+                circle at calc(var(--mouse-x) * 0.3 + 50%) calc(var(--mouse-y) * 0.3 + 50%),
+                rgba(var(--color--secondary-rgb), 0.9) 0px,
+                rgba(var(--color--secondary-rgb), 0.9) calc(var(--glitter-size) * 0.8),
+                transparent calc(var(--glitter-size) * 0.8),
+                transparent calc(var(--glitter-spacing) * 1.3)
+            ),
+            // Sparkle dots - layer 3 (gold)
+            repeating-radial-gradient(
+                circle at calc(100% - var(--mouse-x) * 0.4) calc(100% - var(--mouse-y) * 0.4),
+                rgba(255, 215, 0, 0.9) 0px,
+                rgba(255, 215, 0, 0.9) calc(var(--glitter-size) * 0.6),
+                transparent calc(var(--glitter-size) * 0.6),
+                transparent calc(var(--glitter-spacing) * 0.9)
+            ),
+            // Sparkle dots - layer 4 (primary color)
+            repeating-radial-gradient(
+                circle at calc(var(--mouse-x) * 0.6 + 10%) calc(var(--mouse-y) * 0.6 + 10%),
+                rgba(var(--color--primary-rgb), 0.85) 0px,
+                rgba(var(--color--primary-rgb), 0.85) calc(var(--glitter-size) * 0.7),
+                transparent calc(var(--glitter-size) * 0.7),
+                transparent calc(var(--glitter-spacing) * 1.1)
+            );
+
+        mix-blend-mode: screen;
+        opacity: 0;
+        transition: opacity 0.4s ease;
+        animation: glitterShimmer 3s ease-in-out infinite;
+
+        .hovering & {
+            opacity: 0.9;
+        }
+    }
+
+    // Holographic rainbow effect
+    .card-holo {
+        position: absolute;
+        inset: var(--card-border-width);
+        border-radius: calc(var(--card-radius) - var(--card-border-width));
         z-index: 3;
+        pointer-events: none;
 
-        // Holographic rainbow gradient that follows mouse
-        background: radial-gradient(
-            circle at var(--mouse-x) var(--mouse-y),
-            rgba(255, 255, 255, 0.3) 0%,
-            transparent 50%
-        ),
-        linear-gradient(
-            125deg,
+        // Rainbow gradient that shifts with mouse
+        background: linear-gradient(
+            calc(var(--mouse-x) * 3.6deg),
             transparent 0%,
-            rgba(var(--color--secondary-rgb), var(--shine-intensity)) 20%,
-            transparent 30%,
-            rgba(255, 215, 0, var(--shine-intensity)) 45%,
-            transparent 55%,
-            rgba(var(--color--primary-rgb), var(--shine-intensity)) 70%,
-            transparent 80%,
-            rgba(var(--color--secondary-rgb), var(--shine-intensity)) 95%,
-            transparent 100%
+            rgba(255, 0, 128, 0.15) 10%,
+            rgba(var(--color--secondary-rgb), 0.2) 20%,
+            rgba(0, 255, 128, 0.15) 30%,
+            transparent 40%,
+            rgba(255, 215, 0, 0.15) 50%,
+            transparent 60%,
+            rgba(var(--color--primary-rgb), 0.2) 70%,
+            rgba(180, 100, 255, 0.15) 80%,
+            transparent 90%,
+            rgba(var(--color--secondary-rgb), 0.15) 100%
         );
-        background-size: 100% 100%, 300% 300%;
-        background-position:
-            0% 0%,
-            calc(var(--mouse-x) * 1%) calc(var(--mouse-y) * 1%);
+        background-size: 200% 200%;
+        background-position: calc(var(--mouse-x) * 1%) calc(var(--mouse-y) * 1%);
+
         mix-blend-mode: color-dodge;
         opacity: 0;
         transition: opacity 0.3s ease;
@@ -174,19 +285,29 @@
         }
     }
 
+    // Specular glare highlight
     .card-glare {
         position: absolute;
-        inset: 0;
-        border-radius: var(--card-radius);
-        pointer-events: none;
+        inset: var(--card-border-width);
+        border-radius: calc(var(--card-radius) - var(--card-border-width));
         z-index: 4;
+        pointer-events: none;
+
+        background:
+            // Main glare spot
+            radial-gradient(
+                ellipse 60% 40% at var(--mouse-x) var(--mouse-y),
+                rgba(255, 255, 255, 0.35) 0%,
+                rgba(255, 255, 255, 0.1) 30%,
+                transparent 70%
+            ),
+            // Secondary softer glow
+            radial-gradient(
+                ellipse 100% 80% at var(--mouse-x) var(--mouse-y),
+                rgba(255, 255, 255, 0.1) 0%,
+                transparent 50%
+            );
 
-        // Specular highlight that follows cursor
-        background: radial-gradient(
-            ellipse 80% 50% at var(--mouse-x) var(--mouse-y),
-            rgba(255, 255, 255, var(--glare-intensity)) 0%,
-            transparent 60%
-        );
         opacity: 0;
         transition: opacity 0.3s ease;
 
@@ -195,33 +316,56 @@
         }
     }
 
+    // Foreground content
     .card-content {
         position: relative;
-        z-index: 2;
-        border-radius: calc(var(--card-radius) - var(--card-border-width) / 2);
+        z-index: 5;
+        border-radius: calc(var(--card-radius) - var(--card-border-width));
         overflow: hidden;
-        background: var(--color--card-background);
-
-        // Inner shadow for depth
-        box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.3);
+        background: transparent;
 
         :global(img),
         :global(picture) {
             display: block;
             width: 100%;
             height: auto;
+            // Slight mask to blend edges with glitter background
+            mask-image: radial-gradient(
+                ellipse 95% 95% at center,
+                black 70%,
+                rgba(0, 0, 0, 0.95) 85%,
+                rgba(0, 0, 0, 0.8) 100%
+            );
+            -webkit-mask-image: radial-gradient(
+                ellipse 95% 95% at center,
+                black 70%,
+                rgba(0, 0, 0, 0.95) 85%,
+                rgba(0, 0, 0, 0.8) 100%
+            );
         }
     }
 
-    @keyframes borderShimmer {
+    @keyframes borderRainbow {
         0% {
             background-position: 0% 50%;
+            --border-angle: 0deg;
         }
         50% {
             background-position: 100% 50%;
+            --border-angle: 180deg;
         }
         100% {
             background-position: 0% 50%;
+            --border-angle: 360deg;
+        }
+    }
+
+    @keyframes glitterShimmer {
+        0%, 100% {
+            filter: brightness(1) contrast(1);
+        }
+        50% {
+            filter: brightness(1.2) contrast(1.1);
         }
     }
 
@@ -229,14 +373,20 @@
     @media (prefers-reduced-motion: reduce) {
         .card-frame {
             animation: none;
+            background-size: 100% 100%;
         }
 
         .card-perspective {
             transform: none !important;
         }
 
-        .card-shine,
-        .card-glare {
+        .card-glitter {
+            animation: none;
+        }
+
+        .card-holo,
+        .card-glare,
+        .card-glitter {
             display: none;
         }
     }
diff --git a/src/lib/components/organisms/About.svelte b/src/lib/components/organisms/About.svelte
index b8500e6..9e4571b 100644
--- a/src/lib/components/organisms/About.svelte
+++ b/src/lib/components/organisms/About.svelte
@@ -38,7 +38,7 @@
         </div>
     </div>
     <div class="image">
-        <TradingCard>
+        <TradingCard backgroundSrc={MeSrc}>
             <Img
                 src={MeSrc}
                 {...{ class: 'me-image' }}

From aee445835280589bf85d6e700adee18d5563ef7c Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 14 Jan 2026 18:43:43 +0000
Subject: [PATCH 3/4] fix: Make glitter effect visible by default, enhance on
 hover

- Increase base opacity for glitter (0.6), holo (0.5), glare (0.3)
- Add holoShift animation for continuous rainbow movement
- Enhance sparkle brightness in glitterShimmer animation
- Effects now always visible and enhanced on hover
- Update reduced-motion to show static effects instead of hiding
---
 .../components/molecules/TradingCard.svelte   | 67 ++++++++++++-------
 1 file changed, 42 insertions(+), 25 deletions(-)

diff --git a/src/lib/components/molecules/TradingCard.svelte b/src/lib/components/molecules/TradingCard.svelte
index e4d43ce..ea00a74 100644
--- a/src/lib/components/molecules/TradingCard.svelte
+++ b/src/lib/components/molecules/TradingCard.svelte
@@ -210,43 +210,43 @@
             // Animated sparkle dots - layer 1
             repeating-radial-gradient(
                 circle at calc(var(--mouse-x) * 0.5 + 25%) calc(var(--mouse-y) * 0.5 + 25%),
-                rgba(255, 255, 255, 0.8) 0px,
-                rgba(255, 255, 255, 0.8) var(--glitter-size),
+                rgba(255, 255, 255, 0.9) 0px,
+                rgba(255, 255, 255, 0.9) var(--glitter-size),
                 transparent var(--glitter-size),
                 transparent var(--glitter-spacing)
             ),
             // Sparkle dots - layer 2 (offset)
             repeating-radial-gradient(
                 circle at calc(var(--mouse-x) * 0.3 + 50%) calc(var(--mouse-y) * 0.3 + 50%),
-                rgba(var(--color--secondary-rgb), 0.9) 0px,
-                rgba(var(--color--secondary-rgb), 0.9) calc(var(--glitter-size) * 0.8),
+                rgba(var(--color--secondary-rgb), 1) 0px,
+                rgba(var(--color--secondary-rgb), 1) calc(var(--glitter-size) * 0.8),
                 transparent calc(var(--glitter-size) * 0.8),
                 transparent calc(var(--glitter-spacing) * 1.3)
             ),
             // Sparkle dots - layer 3 (gold)
             repeating-radial-gradient(
                 circle at calc(100% - var(--mouse-x) * 0.4) calc(100% - var(--mouse-y) * 0.4),
-                rgba(255, 215, 0, 0.9) 0px,
-                rgba(255, 215, 0, 0.9) calc(var(--glitter-size) * 0.6),
+                rgba(255, 215, 0, 1) 0px,
+                rgba(255, 215, 0, 1) calc(var(--glitter-size) * 0.6),
                 transparent calc(var(--glitter-size) * 0.6),
                 transparent calc(var(--glitter-spacing) * 0.9)
             ),
             // Sparkle dots - layer 4 (primary color)
             repeating-radial-gradient(
                 circle at calc(var(--mouse-x) * 0.6 + 10%) calc(var(--mouse-y) * 0.6 + 10%),
-                rgba(var(--color--primary-rgb), 0.85) 0px,
-                rgba(var(--color--primary-rgb), 0.85) calc(var(--glitter-size) * 0.7),
+                rgba(var(--color--primary-rgb), 1) 0px,
+                rgba(var(--color--primary-rgb), 1) calc(var(--glitter-size) * 0.7),
                 transparent calc(var(--glitter-size) * 0.7),
                 transparent calc(var(--glitter-spacing) * 1.1)
             );
 
         mix-blend-mode: screen;
-        opacity: 0;
+        opacity: 0.6;
         transition: opacity 0.4s ease;
         animation: glitterShimmer 3s ease-in-out infinite;
 
         .hovering & {
-            opacity: 0.9;
+            opacity: 1;
         }
     }
 
@@ -262,23 +262,24 @@
         background: linear-gradient(
             calc(var(--mouse-x) * 3.6deg),
             transparent 0%,
-            rgba(255, 0, 128, 0.15) 10%,
-            rgba(var(--color--secondary-rgb), 0.2) 20%,
-            rgba(0, 255, 128, 0.15) 30%,
+            rgba(255, 0, 128, 0.2) 10%,
+            rgba(var(--color--secondary-rgb), 0.25) 20%,
+            rgba(0, 255, 128, 0.2) 30%,
             transparent 40%,
-            rgba(255, 215, 0, 0.15) 50%,
+            rgba(255, 215, 0, 0.2) 50%,
             transparent 60%,
-            rgba(var(--color--primary-rgb), 0.2) 70%,
-            rgba(180, 100, 255, 0.15) 80%,
+            rgba(var(--color--primary-rgb), 0.25) 70%,
+            rgba(180, 100, 255, 0.2) 80%,
             transparent 90%,
-            rgba(var(--color--secondary-rgb), 0.15) 100%
+            rgba(var(--color--secondary-rgb), 0.2) 100%
         );
         background-size: 200% 200%;
         background-position: calc(var(--mouse-x) * 1%) calc(var(--mouse-y) * 1%);
 
         mix-blend-mode: color-dodge;
-        opacity: 0;
+        opacity: 0.5;
         transition: opacity 0.3s ease;
+        animation: holoShift 8s ease-in-out infinite;
 
         .hovering & {
             opacity: 1;
@@ -297,18 +298,18 @@
             // Main glare spot
             radial-gradient(
                 ellipse 60% 40% at var(--mouse-x) var(--mouse-y),
-                rgba(255, 255, 255, 0.35) 0%,
-                rgba(255, 255, 255, 0.1) 30%,
+                rgba(255, 255, 255, 0.4) 0%,
+                rgba(255, 255, 255, 0.15) 30%,
                 transparent 70%
             ),
             // Secondary softer glow
             radial-gradient(
                 ellipse 100% 80% at var(--mouse-x) var(--mouse-y),
-                rgba(255, 255, 255, 0.1) 0%,
+                rgba(255, 255, 255, 0.15) 0%,
                 transparent 50%
             );
 
-        opacity: 0;
+        opacity: 0.3;
         transition: opacity 0.3s ease;
 
         .hovering & {
@@ -365,7 +366,22 @@
             filter: brightness(1) contrast(1);
         }
         50% {
-            filter: brightness(1.2) contrast(1.1);
+            filter: brightness(1.3) contrast(1.15);
+        }
+    }
+
+    @keyframes holoShift {
+        0%, 100% {
+            background-position: 0% 50%;
+        }
+        25% {
+            background-position: 100% 0%;
+        }
+        50% {
+            background-position: 100% 100%;
+        }
+        75% {
+            background-position: 0% 100%;
         }
     }
 
@@ -380,14 +396,15 @@
             transform: none !important;
         }
 
-        .card-glitter {
+        .card-glitter,
+        .card-holo {
             animation: none;
         }
 
         .card-holo,
         .card-glare,
         .card-glitter {
-            display: none;
+            opacity: 0.3;
         }
     }
 </style>

From cd0dbf21787a703b4de5300ca2a8542ba4acd7cc Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 14 Jan 2026 18:54:07 +0000
Subject: [PATCH 4/4] fix: Fix glitter effect z-index - effects now overlay on
 top of image

Complete restructure of layer ordering:
- Image content: z-index 1 (bottom)
- Glitter sparkles: z-index 10 (overlay on image)
- Holographic rainbow: z-index 11
- Specular glare: z-index 12 (topmost)

Sparkle improvements:
- Use individual radial-gradient dots for visible sparkles
- 20 sparkle points in white, cyan, gold, orange colors
- mix-blend-mode: overlay (hard-light on hover)
- sparkleFloat animation for pulsing brightness

Effects are now properly visible on top of the profile image.
---
 .../components/molecules/TradingCard.svelte   | 291 ++++++------------
 1 file changed, 100 insertions(+), 191 deletions(-)

diff --git a/src/lib/components/molecules/TradingCard.svelte b/src/lib/components/molecules/TradingCard.svelte
index ea00a74..92a2cd6 100644
--- a/src/lib/components/molecules/TradingCard.svelte
+++ b/src/lib/components/molecules/TradingCard.svelte
@@ -20,14 +20,10 @@
     let rotateX = $derived(isHovering ? (mouseY - 50) / 4 : 0);
     let rotateY = $derived(isHovering ? (50 - mouseX) / 4 : 0);
 
-    // Shine/glitter position follows mouse with offset for parallax
+    // Shine/glitter position follows mouse
     let shineX = $derived(mouseX);
     let shineY = $derived(mouseY);
 
-    // Seed for sparkle variation
-    let seedX = $derived(Math.floor(mouseX / 5) * 5);
-    let seedY = $derived(Math.floor(mouseY / 5) * 5);
-
     function handleMouseMove(event: MouseEvent) {
         if (!cardElement) return;
 
@@ -52,17 +48,14 @@
     // Get the best quality image URL from the Picture object
     function getImageUrl(src: Picture | undefined): string {
         if (!src) return '';
-        // Get the first source's largest image
         if (src.sources && src.sources.length > 0) {
             const srcset = src.sources[0].srcset;
-            // Extract the largest image URL from srcset
             const parts = srcset.split(',');
             if (parts.length > 0) {
                 const lastPart = parts[parts.length - 1].trim();
                 return lastPart.split(' ')[0];
             }
         }
-        // Fallback to img.src
         return src.img?.src || '';
     }
 
@@ -81,46 +74,34 @@
         --mouse-y: {shineY}%;
         --rotate-x: {rotateX}deg;
         --rotate-y: {rotateY}deg;
-        --seed-x: {seedX};
-        --seed-y: {seedY};
         --bg-image: url('{bgImageUrl}');
     "
 >
     <div class="card-perspective">
         <div class="trading-card" class:hovering={isHovering}>
-            <!-- VMAX style card frame -->
             <div class="card-frame">
-                <!-- Background layer with blurred image -->
-                {#if backgroundSrc}
-                    <div class="card-background"></div>
-                {/if}
+                <!-- Layer 1: Image content (bottom) -->
+                <div class="card-content">
+                    {@render children?.()}
+                </div>
 
-                <!-- Glitter/sparkle layer -->
+                <!-- Layer 2: Glitter sparkles (on top of image) -->
                 <div class="card-glitter"></div>
 
-                <!-- Holographic rainbow shine -->
+                <!-- Layer 3: Holographic rainbow (on top) -->
                 <div class="card-holo"></div>
 
-                <!-- Specular glare -->
+                <!-- Layer 4: Specular glare (topmost) -->
                 <div class="card-glare"></div>
-
-                <!-- Foreground content (the actual image) -->
-                <div class="card-content">
-                    {@render children?.()}
-                </div>
             </div>
         </div>
     </div>
 </div>
 
 <style lang="scss">
-    @use '$lib/scss/breakpoints.scss';
-
     .trading-card-container {
         --card-border-width: 10px;
         --card-radius: 20px;
-        --glitter-size: 2px;
-        --glitter-spacing: 24px;
 
         perspective: 1200px;
         width: fit-content;
@@ -128,7 +109,7 @@
 
     .card-perspective {
         transform-style: preserve-3d;
-        transition: transform 0.1s ease-out;
+        transition: transform 0.15s ease-out;
         transform: rotateX(var(--rotate-x)) rotateY(var(--rotate-y));
     }
 
@@ -138,20 +119,17 @@
         transform-style: preserve-3d;
         transition: box-shadow 0.3s ease;
 
-        // Base shadow with colored glow
         box-shadow:
             0 15px 35px -10px rgba(0, 0, 0, 0.5),
             0 0 0 1px rgba(var(--color--primary-rgb), 0.2),
-            0 0 20px rgba(var(--color--primary-rgb), 0.1),
-            0 0 40px rgba(var(--color--secondary-rgb), 0.05);
+            0 0 20px rgba(var(--color--primary-rgb), 0.1);
 
         &.hovering {
             box-shadow:
                 0 25px 60px -15px rgba(0, 0, 0, 0.6),
-                0 0 0 2px rgba(var(--color--primary-rgb), 0.4),
-                0 0 40px rgba(var(--color--primary-rgb), 0.4),
-                0 0 80px rgba(var(--color--secondary-rgb), 0.2),
-                0 0 120px rgba(255, 215, 0, 0.1);
+                0 0 0 2px rgba(var(--color--primary-rgb), 0.5),
+                0 0 50px rgba(var(--color--primary-rgb), 0.4),
+                0 0 100px rgba(var(--color--secondary-rgb), 0.2);
         }
     }
 
@@ -161,128 +139,111 @@
         border-radius: var(--card-radius);
         padding: var(--card-border-width);
 
-        // Animated holographic border - VMAX style rainbow
+        // Animated rainbow border
         background: linear-gradient(
-            var(--border-angle, 135deg),
+            135deg,
             rgba(var(--color--primary-rgb), 1) 0%,
-            rgba(255, 215, 0, 0.9) 15%,
-            rgba(var(--color--secondary-rgb), 1) 30%,
-            rgba(180, 100, 255, 0.9) 45%,
-            rgba(var(--color--primary-rgb), 1) 60%,
-            rgba(255, 215, 0, 0.9) 75%,
-            rgba(var(--color--secondary-rgb), 1) 90%,
-            rgba(var(--color--primary-rgb), 1) 100%
+            rgba(255, 215, 0, 1) 20%,
+            rgba(var(--color--secondary-rgb), 1) 40%,
+            rgba(180, 100, 255, 1) 60%,
+            rgba(var(--color--primary-rgb), 1) 80%,
+            rgba(255, 215, 0, 1) 100%
         );
-        background-size: 300% 300%;
-        animation: borderRainbow 6s linear infinite;
+        background-size: 400% 400%;
+        animation: borderRainbow 4s linear infinite;
     }
 
-    // Blurred background image layer
-    .card-background {
-        position: absolute;
-        inset: var(--card-border-width);
-        border-radius: calc(var(--card-radius) - var(--card-border-width));
+    // The actual image
+    .card-content {
+        position: relative;
         z-index: 1;
+        border-radius: calc(var(--card-radius) - var(--card-border-width));
         overflow: hidden;
 
-        &::before {
-            content: '';
-            position: absolute;
-            inset: -20%;
-            background-image: var(--bg-image);
-            background-size: 140%;
-            background-position: center;
-            filter: blur(20px) saturate(1.5) brightness(0.7);
+        :global(img),
+        :global(picture) {
+            display: block;
+            width: 100%;
+            height: auto;
         }
     }
 
-    // Glitter/sparkle effect layer
+    // Glitter/sparkle overlay - ON TOP of image
     .card-glitter {
         position: absolute;
         inset: var(--card-border-width);
         border-radius: calc(var(--card-radius) - var(--card-border-width));
-        z-index: 2;
+        z-index: 10;
         pointer-events: none;
-        overflow: hidden;
 
-        // Multi-layer sparkle pattern
-        background:
-            // Animated sparkle dots - layer 1
-            repeating-radial-gradient(
-                circle at calc(var(--mouse-x) * 0.5 + 25%) calc(var(--mouse-y) * 0.5 + 25%),
-                rgba(255, 255, 255, 0.9) 0px,
-                rgba(255, 255, 255, 0.9) var(--glitter-size),
-                transparent var(--glitter-size),
-                transparent var(--glitter-spacing)
-            ),
-            // Sparkle dots - layer 2 (offset)
-            repeating-radial-gradient(
-                circle at calc(var(--mouse-x) * 0.3 + 50%) calc(var(--mouse-y) * 0.3 + 50%),
-                rgba(var(--color--secondary-rgb), 1) 0px,
-                rgba(var(--color--secondary-rgb), 1) calc(var(--glitter-size) * 0.8),
-                transparent calc(var(--glitter-size) * 0.8),
-                transparent calc(var(--glitter-spacing) * 1.3)
-            ),
-            // Sparkle dots - layer 3 (gold)
-            repeating-radial-gradient(
-                circle at calc(100% - var(--mouse-x) * 0.4) calc(100% - var(--mouse-y) * 0.4),
-                rgba(255, 215, 0, 1) 0px,
-                rgba(255, 215, 0, 1) calc(var(--glitter-size) * 0.6),
-                transparent calc(var(--glitter-size) * 0.6),
-                transparent calc(var(--glitter-spacing) * 0.9)
-            ),
-            // Sparkle dots - layer 4 (primary color)
-            repeating-radial-gradient(
-                circle at calc(var(--mouse-x) * 0.6 + 10%) calc(var(--mouse-y) * 0.6 + 10%),
-                rgba(var(--color--primary-rgb), 1) 0px,
-                rgba(var(--color--primary-rgb), 1) calc(var(--glitter-size) * 0.7),
-                transparent calc(var(--glitter-size) * 0.7),
-                transparent calc(var(--glitter-spacing) * 1.1)
-            );
-
-        mix-blend-mode: screen;
-        opacity: 0.6;
-        transition: opacity 0.4s ease;
-        animation: glitterShimmer 3s ease-in-out infinite;
+        // Sparkle pattern using multiple gradient layers
+        background-image:
+            // White sparkles
+            radial-gradient(circle at 20% 30%, white 0px, white 2px, transparent 2px),
+            radial-gradient(circle at 80% 20%, white 0px, white 1.5px, transparent 1.5px),
+            radial-gradient(circle at 40% 70%, white 0px, white 2px, transparent 2px),
+            radial-gradient(circle at 70% 60%, white 0px, white 1px, transparent 1px),
+            radial-gradient(circle at 10% 80%, white 0px, white 1.5px, transparent 1.5px),
+            radial-gradient(circle at 90% 85%, white 0px, white 2px, transparent 2px),
+            radial-gradient(circle at 55% 15%, white 0px, white 1px, transparent 1px),
+            radial-gradient(circle at 30% 50%, white 0px, white 1.5px, transparent 1.5px),
+            // Cyan sparkles
+            radial-gradient(circle at 15% 15%, rgb(var(--color--secondary-rgb)) 0px, rgb(var(--color--secondary-rgb)) 2px, transparent 2px),
+            radial-gradient(circle at 85% 45%, rgb(var(--color--secondary-rgb)) 0px, rgb(var(--color--secondary-rgb)) 1.5px, transparent 1.5px),
+            radial-gradient(circle at 45% 85%, rgb(var(--color--secondary-rgb)) 0px, rgb(var(--color--secondary-rgb)) 2px, transparent 2px),
+            radial-gradient(circle at 65% 35%, rgb(var(--color--secondary-rgb)) 0px, rgb(var(--color--secondary-rgb)) 1px, transparent 1px),
+            // Gold sparkles
+            radial-gradient(circle at 25% 65%, gold 0px, gold 2px, transparent 2px),
+            radial-gradient(circle at 75% 75%, gold 0px, gold 1.5px, transparent 1.5px),
+            radial-gradient(circle at 50% 40%, gold 0px, gold 1px, transparent 1px),
+            radial-gradient(circle at 35% 10%, gold 0px, gold 2px, transparent 2px),
+            // Orange sparkles
+            radial-gradient(circle at 60% 90%, rgb(var(--color--primary-rgb)) 0px, rgb(var(--color--primary-rgb)) 1.5px, transparent 1.5px),
+            radial-gradient(circle at 5% 50%, rgb(var(--color--primary-rgb)) 0px, rgb(var(--color--primary-rgb)) 2px, transparent 2px),
+            radial-gradient(circle at 95% 10%, rgb(var(--color--primary-rgb)) 0px, rgb(var(--color--primary-rgb)) 1px, transparent 1px);
+
+        background-size: 100% 100%;
+        mix-blend-mode: overlay;
+        opacity: 0.7;
+        transition: opacity 0.3s ease;
+        animation: sparkleFloat 3s ease-in-out infinite;
 
         .hovering & {
             opacity: 1;
+            mix-blend-mode: hard-light;
         }
     }
 
-    // Holographic rainbow effect
+    // Holographic rainbow overlay
     .card-holo {
         position: absolute;
         inset: var(--card-border-width);
         border-radius: calc(var(--card-radius) - var(--card-border-width));
-        z-index: 3;
+        z-index: 11;
         pointer-events: none;
 
-        // Rainbow gradient that shifts with mouse
         background: linear-gradient(
-            calc(var(--mouse-x) * 3.6deg),
+            calc(var(--mouse-x) * 3.6deg + 45deg),
             transparent 0%,
-            rgba(255, 0, 128, 0.2) 10%,
-            rgba(var(--color--secondary-rgb), 0.25) 20%,
-            rgba(0, 255, 128, 0.2) 30%,
-            transparent 40%,
-            rgba(255, 215, 0, 0.2) 50%,
-            transparent 60%,
-            rgba(var(--color--primary-rgb), 0.25) 70%,
-            rgba(180, 100, 255, 0.2) 80%,
-            transparent 90%,
-            rgba(var(--color--secondary-rgb), 0.2) 100%
+            rgba(255, 0, 100, 0.3) 15%,
+            rgba(0, 255, 255, 0.3) 30%,
+            rgba(0, 255, 100, 0.3) 45%,
+            transparent 50%,
+            rgba(255, 255, 0, 0.3) 55%,
+            rgba(255, 100, 0, 0.3) 70%,
+            rgba(200, 0, 255, 0.3) 85%,
+            transparent 100%
         );
         background-size: 200% 200%;
-        background-position: calc(var(--mouse-x) * 1%) calc(var(--mouse-y) * 1%);
+        background-position: calc(var(--mouse-x) * 2%) calc(var(--mouse-y) * 2%);
 
         mix-blend-mode: color-dodge;
-        opacity: 0.5;
+        opacity: 0.4;
         transition: opacity 0.3s ease;
-        animation: holoShift 8s ease-in-out infinite;
+        animation: holoShift 6s ease-in-out infinite;
 
         .hovering & {
-            opacity: 1;
+            opacity: 0.8;
         }
     }
 
@@ -291,88 +252,47 @@
         position: absolute;
         inset: var(--card-border-width);
         border-radius: calc(var(--card-radius) - var(--card-border-width));
-        z-index: 4;
+        z-index: 12;
         pointer-events: none;
 
-        background:
-            // Main glare spot
-            radial-gradient(
-                ellipse 60% 40% at var(--mouse-x) var(--mouse-y),
-                rgba(255, 255, 255, 0.4) 0%,
-                rgba(255, 255, 255, 0.15) 30%,
-                transparent 70%
-            ),
-            // Secondary softer glow
-            radial-gradient(
-                ellipse 100% 80% at var(--mouse-x) var(--mouse-y),
-                rgba(255, 255, 255, 0.15) 0%,
-                transparent 50%
-            );
-
-        opacity: 0.3;
+        background: radial-gradient(
+            ellipse 50% 50% at var(--mouse-x) var(--mouse-y),
+            rgba(255, 255, 255, 0.6) 0%,
+            rgba(255, 255, 255, 0.2) 40%,
+            transparent 70%
+        );
+
+        opacity: 0.2;
         transition: opacity 0.3s ease;
 
         .hovering & {
-            opacity: 1;
-        }
-    }
-
-    // Foreground content
-    .card-content {
-        position: relative;
-        z-index: 5;
-        border-radius: calc(var(--card-radius) - var(--card-border-width));
-        overflow: hidden;
-        background: transparent;
-
-        :global(img),
-        :global(picture) {
-            display: block;
-            width: 100%;
-            height: auto;
-            // Slight mask to blend edges with glitter background
-            mask-image: radial-gradient(
-                ellipse 95% 95% at center,
-                black 70%,
-                rgba(0, 0, 0, 0.95) 85%,
-                rgba(0, 0, 0, 0.8) 100%
-            );
-            -webkit-mask-image: radial-gradient(
-                ellipse 95% 95% at center,
-                black 70%,
-                rgba(0, 0, 0, 0.95) 85%,
-                rgba(0, 0, 0, 0.8) 100%
-            );
+            opacity: 0.7;
         }
     }
 
     @keyframes borderRainbow {
         0% {
             background-position: 0% 50%;
-            --border-angle: 0deg;
-        }
-        50% {
-            background-position: 100% 50%;
-            --border-angle: 180deg;
         }
         100% {
-            background-position: 0% 50%;
-            --border-angle: 360deg;
+            background-position: 400% 50%;
         }
     }
 
-    @keyframes glitterShimmer {
+    @keyframes sparkleFloat {
         0%, 100% {
-            filter: brightness(1) contrast(1);
+            filter: brightness(1);
+            transform: translateY(0);
         }
         50% {
-            filter: brightness(1.3) contrast(1.15);
+            filter: brightness(1.5);
+            transform: translateY(-1px);
         }
     }
 
     @keyframes holoShift {
         0%, 100% {
-            background-position: 0% 50%;
+            background-position: 0% 0%;
         }
         25% {
             background-position: 100% 0%;
@@ -385,26 +305,15 @@
         }
     }
 
-    // Reduce motion for accessibility
     @media (prefers-reduced-motion: reduce) {
-        .card-frame {
-            animation: none;
-            background-size: 100% 100%;
-        }
-
-        .card-perspective {
-            transform: none !important;
-        }
-
+        .card-frame,
         .card-glitter,
         .card-holo {
             animation: none;
         }
 
-        .card-holo,
-        .card-glare,
-        .card-glitter {
-            opacity: 0.3;
+        .card-perspective {
+            transform: none !important;
         }
     }
 </style>