current working holographic pattern for desktop/mobile (needs work still)

2026-03-22 19:29:08 -04:00
20 changed files with 826 additions and 740 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -26,9 +26,6 @@ pnpm-debug.log*
 # imges from tcgplayer
 public/cards/*

-# static assets
-/static/
-
 # anything test
 test.*

--- a/scripts/list-missing-images.ts
+++ b/scripts/list-missing-images.ts
@@ -12,7 +12,7 @@ async function findMissingImages() {
      .where(sql`${schema.tcgcards.sealed} = false`);
    const missingImages: string[] = [];
    for (const card of cards) {
-        const imagePath = path.join(process.cwd(), 'static', 'cards', `${card.productId}.jpg`);
+        const imagePath = path.join(process.cwd(), 'public', 'cards', `${card.productId}.jpg`);
        try {
            await fs.access(imagePath);
        } catch (err) {
--- a/scripts/pokemon-helper.ts
+++ b/scripts/pokemon-helper.ts
@@ -54,7 +54,6 @@ export const createCardCollection = async () => {
            { name: 'productLineName', type: 'string', facet: true },
            { name: 'rarityName', type: 'string', facet: true },
            { name: 'setName', type: 'string', facet: true },
-            { name: 'setCode', type: 'string' },
            { name: 'cardType', type: 'string', facet: true },
            { name: 'energyType', type: 'string', facet: true },
            { name: 'number', type: 'string', sort: true },
@@ -95,15 +94,7 @@ export const upsertCardCollection = async (db:DBInstance) => {
        with: { set: true, tcgdata: true, prices: true },
    });
    await client.collections('cards').documents().import(pokemon.map(card => {
-        // Use the NM SKU price matching the card's variant (kept fresh by syncPrices)
-        // Fall back to any NM sku, then to tcgdata price
-        const nmSku = card.prices.find(p => p.condition === 'Near Mint' && p.variant === card.variant)
-                   ?? card.prices.find(p => p.condition === 'Near Mint');
-        const marketPrice = nmSku?.marketPrice
-            ? DollarToInt(nmSku.marketPrice)
-            : card.tcgdata?.marketPrice
-                ? DollarToInt(card.tcgdata.marketPrice)
-                : null;
+        const marketPrice = card.tcgdata?.marketPrice ? DollarToInt(card.tcgdata.marketPrice) : null;

        return {
            id: card.cardId.toString(),
@@ -114,13 +105,12 @@ export const upsertCardCollection = async (db:DBInstance) => {
            productLineName: card.productLineName,
            rarityName: card.rarityName,
            setName: card.set?.setName || "",
-            setCode: card.set?.setCode || "",
            cardType: card.cardType || "",
            energyType: card.energyType || "",
            number: card.number,
            Artist: card.artist || "",
            sealed: card.sealed,
-            content: [card.productName, card.productLineName, card.set?.setName || "", card.set?.setCode || "", card.number, card.rarityName, card.artist || ""].join(' '),
+            content: [card.productName, card.productLineName, card.set?.setName || "", card.number, card.rarityName, card.artist || ""].join(' '),
            releaseDate: card.tcgdata?.releaseDate ? Math.floor(new Date(card.tcgdata.releaseDate).getTime() / 1000) : 0,
            ...(marketPrice !== null && { marketPrice }),
            sku_id: card.prices.map(price => price.skuId.toString())
--- a/scripts/preload-tcgplayer.ts
+++ b/scripts/preload-tcgplayer.ts
@@ -242,7 +242,7 @@ async function syncProductLine(productLine: string, field: string, fieldValue: s
      }

      // get image if it doesn't already exist
-      const imagePath = path.join(process.cwd(), 'static', 'cards', `${item.productId}.jpg`);
+      const imagePath = path.join(process.cwd(), 'public', 'cards', `${item.productId}.jpg`);
      if (!await helper.FileExists(imagePath)) {
        const imageResponse = await fetch(`https://tcgplayer-cdn.tcgplayer.com/product/${item.productId}_in_1000x1000.jpg`);
        if (imageResponse.ok) {
@@ -280,6 +280,6 @@ else {
 await helper.UpdateVariants(db);

 // index the card updates
-await helper.upsertCardCollection(db);
+helper.upsertCardCollection(db);

 await ClosePool();
--- a/scripts/sync-prices.ts
+++ b/scripts/sync-prices.ts
@@ -154,7 +154,6 @@ const updateLatestSales = async (updatedCards: Set<number>) => {
 const start = Date.now();
 const updatedCards = await syncPrices();
 await helper.upsertSkuCollection(db);
-await helper.upsertCardCollection(db);  
 //console.log(updatedCards);
 //console.log(updatedCards.size);
 //await updateLatestSales(updatedCards);
--- a/src/assets/css/_card.scss
+++ b/src/assets/css/_card.scss
@@ -40,8 +40,8 @@
 // =============================================================================

 // Shared texture/asset references
-$grain:       url('/public/holofoils/grain.webp');
-$glitter:     url('/public/holofoils/glitter.png');
+$grain:       url('/holofoils/grain.webp');
+$glitter:     url('/holofoils/glitter.png');
 $glittersize: 25%;


@@ -190,7 +190,7 @@ $glittersize: 25%;
 /// No-mask fallback for cards using the illusion foil pattern.
@mixin no-mask-illusion {
  --mask: none;
-  --foil: url('/public/holofoils/illusion.png');
+  --foil: url('/holofoils/illusion.png');
  --imgsize: 33%;
  -webkit-mask-image: var(--mask);
  mask-image: var(--mask);
@@ -919,7 +919,7 @@ $glittersize: 25%;
    --space: 4%;
    clip-path: var(--clip);
    background-image:
-      url('/public/holofoils/cosmos-bottom.png'),
+      url('/holofoils/cosmos-bottom.png'),
      $cosmos-stripe,
      radial-gradient(
        farthest-corner circle at var(--pointer-x) var(--pointer-y),
@@ -939,7 +939,7 @@ $glittersize: 25%;
    &::before {
      content: '';
      z-index: 2;
-      background-image: url('/public/holofoils/cosmos-middle-trans.png'), $cosmos-stripe;
+      background-image: url('/holofoils/cosmos-middle-trans.png'), $cosmos-stripe;
      background-blend-mode: lighten, multiply;
      background-position:
        var(--cosmosbg, center center),
@@ -953,7 +953,7 @@ $glittersize: 25%;
    &::after {
      content: '';
      z-index: 3;
-      background-image: url('/public/holofoils/cosmos-top-trans.png'), $cosmos-stripe;
+      background-image: url('/holofoils/cosmos-top-trans.png'), $cosmos-stripe;
      background-blend-mode: multiply, multiply;
      background-position:
        var(--cosmosbg, center center),
@@ -1081,7 +1081,7 @@ $glittersize: 25%;
    .card__shine,
    .card__shine::after {
      --mask:    none;
-      --foil:    url('/public/holofoils/trainerbg.png');
+      --foil:    url('/holofoils/trainerbg.png');
      --imgsize: 25% auto;
    }
    .card__shine::after { background-blend-mode: difference; }
@@ -1205,7 +1205,7 @@ $glittersize: 25%;
  }

  &:not(.masked) .card__shine {
-    --foil:    url('/public/holofoils/illusion-mask.png');
+    --foil:    url('/holofoils/illusion-mask.png');
    --imgsize: 33%;
  }
 }
@@ -1377,7 +1377,7 @@ $glittersize: 25%;
  .card__glare         { @extend %secret-rare-glare; }

  &:not(.masked) .card__shine {
-    --foil:    url('/public/holofoils/geometric.png');
+    --foil:    url('/holofoils/geometric.png');
    --imgsize: 33%;
    filter: brightness(calc((var(--pointer-from-center) * 0.3) + 0.2)) contrast(2) saturate(0.75);
  }
@@ -1648,7 +1648,7 @@ $glittersize: 25%;
  }

  &:not(.masked) .card__shine {
-    --foil:    url('/public/holofoils/illusion-mask.png');
+    --foil:    url('/holofoils/illusion-mask.png');
    --imgsize: 33%;
  }
 }
@@ -1719,7 +1719,7 @@ $glittersize: 25%;
  &:not(.masked) {
    .card__shine,
    .card__shine::after {
-      --foil:    url('/public/holofoils/trainerbg.png');
+      --foil:    url('/holofoils/trainerbg.png');
      --imgsize: 20%;
      background-blend-mode: color-burn, hue, hard-light;
      filter: brightness(calc((var(--pointer-from-center) * 0.05) + .6)) contrast(1.5) saturate(1.2);
@@ -1828,7 +1828,7 @@ $glittersize: 25%;

  &:not(.masked) {
    .card__shine {
-      --foil:    url('/public/holofoils/geometric.png');
+      --foil:    url('/holofoils/geometric.png');
      --imgsize: 33%;
      filter: brightness(calc((var(--pointer-from-center) * 0.3) + 0.2)) contrast(2) saturate(0.75);
    }
@@ -2027,7 +2027,7 @@ $glittersize: 25%;
    .card__shine,
    .card__shine::after {
      --mask:    none;
-      --foil:    url('/public/holofoils/vmaxbg.jpg');
+      --foil:    url('/holofoils/vmaxbg.jpg');
      --imgsize: 60% 30%;
    }
  }
@@ -2102,7 +2102,7 @@ $glittersize: 25%;
    .card__shine,
    .card__shine::after {
      --mask:    none;
-      --foil:    url('/public/holofoils/ancient.png');
+      --foil:    url('/holofoils/ancient.png');
      --imgsize: 18% 15%;
      background-blend-mode: exclusion, hue, hard-light;
      filter: brightness(calc((var(--pointer-from-center) * .25) + .35)) contrast(1.8) saturate(1.75);
--- a/src/assets/css/_holofoil-integration.scss
+++ b/src/assets/css/_holofoil-integration.scss
@@ -1,19 +1,40 @@
 // =============================================================================
 // HOLOFOIL INTEGRATION
-// _holofoil-integration.scss
+// =============================================================================
+//
+// Three effect zones, determined by rarity and variant:
+//
+// NONE — no effect at all
+//   variant = Normal  (or no recognised rarity/variant)
+//
+// INVERSE — effect on borders only (everything except the art window)
+//   variant = Reverse Holofoil
+//   rarity  = Prism Rare
+//
+// ART WINDOW — effect clipped to the artwork area only
+//   rarity  = Rare | Amazing Rare | Classic Collection | Holo Rare
+//   variant = Holofoil | 1st Edition Holofoil
+//
+// FULL CARD — effect over the entire card
+//   rarity  = Ultra Rare | Character Rare | Illustration Rare |
+//             Special Illustration Rare | Double Rare | Hyper Rare |
+//             Mega Rare | Mega Attack Rare | ACE Spec Rare | ACE Rare |
+//             Art Rare | Special Art Rare | Black White Rare |
+//             Character Super Rare | Mega Ultra Rare | Rare BREAK |
+//             Secret Rare | Shiny Holo Rare | Shiny Rare |
+//             Shiny Secret Rare | Shiny Ultra Rare
+//
 // =============================================================================

-@import "card";
-

 // -----------------------------------------------------------------------------
-// 1.  WRAPPER NORMALISATION
+// 1. CSS CUSTOM PROPERTIES — set on every wrapper element
 // -----------------------------------------------------------------------------

-%holofoil-wrapper-base {
-  --card-aspect:  0.718;
-  --card-radius:  4.55% / 3.5%;
+.image-grow,
+.card-image-wrap {

+  // Pointer tracking — updated by holofoil-init.js on mousemove
  --pointer-x:           50%;
  --pointer-y:           50%;
  --background-x:        50%;
@@ -21,29 +42,23 @@
  --pointer-from-center: 0;
  --pointer-from-top:    0.5;
  --pointer-from-left:   0.5;
-  --card-scale:          1;
  --card-opacity:        0;
+  --card-scale:          1;

-  --grain:       url('/public/holofoils/grain.webp');
-  --glitter:     url('/public/holofoils/glitter.png');
-  --glittersize: 25%;
-  --space:       5%;
-  --angle:       133deg;
-  --imgsize:     cover;
+  // Card geometry — matches Bootstrap's rounded-4 (--bs-border-radius-xl)
+  --card-radius: var(--bs-border-radius-xl, 0.375rem);

-  --red:    #f80e35;
-  --yellow: #eedf10;
-  --green:  #21e985;
-  --blue:   #0dbde9;
-  --violet: #c929f1;
-
-  --clip:              inset(9.85% 8% 52.85% 8%);
-  --clip-invert:       polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 0 47.15%, 91.5% 47.15%, 91.5% 9.85%, 8% 9.85%, 8% 47.15%, 0 50%);
-  --clip-stage:        polygon(91.5% 9.85%, 57% 9.85%, 54% 12%, 17% 12%, 16% 14%, 12% 16%, 8% 16%, 8% 47.15%, 92% 47.15%);
-  --clip-stage-invert: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 0 47.15%, 91.5% 47.15%, 91.5% 9.85%, 57% 9.85%, 54% 12%, 17% 12%, 16% 14%, 12% 16%, 8% 16%, 8% 47.15%, 0 50%);
-  --clip-trainer:      inset(14.5% 8.5% 48.2% 8.5%);
-  --clip-borders:      inset(2.8% 4% round 2.55% / 1.5%);
+  // Art window clip — original poke-holo values, correct for standard TCG card scans
+  // inset(top right bottom left): top=9.85%, sides=8%, bottom=52.85% (art bottom at 47.15%)
+  --clip-art: inset(9.85% 8% 52.85% 8%);

+  // Sunpillar palette
+  --sunpillar-1: hsl(2,   100%, 73%);
+  --sunpillar-2: hsl(53,  100%, 69%);
+  --sunpillar-3: hsl(93,  100%, 69%);
+  --sunpillar-4: hsl(176, 100%, 76%);
+  --sunpillar-5: hsl(228, 100%, 74%);
+  --sunpillar-6: hsl(283, 100%, 73%);
  --sunpillar-clr-1: var(--sunpillar-1);
  --sunpillar-clr-2: var(--sunpillar-2);
  --sunpillar-clr-3: var(--sunpillar-3);
@@ -51,14 +66,23 @@
  --sunpillar-clr-5: var(--sunpillar-5);
  --sunpillar-clr-6: var(--sunpillar-6);

-  // NOTE: no overflow:hidden here -- that would clip the lift/scale transform
-  // on .image-grow. Overflow is handled by the child .holo-shine/.holo-glare.
-  position: relative;
-  isolation: isolate;
-  border-radius: var(--card-radius);
-}
+  // Colour tokens
+  --red:    #f80e35;
+  --yellow: #eedf10;
+  --green:  #21e985;
+  --blue:   #0dbde9;
+  --violet: #c929f1;

-%holofoil-energy-glows {
+  // Glow
+  --card-glow: hsl(175, 100%, 90%);
+
+  // Texture assets
+  --grain:       url('/holofoils/grain.webp');
+  --glitter:     url('/holofoils/glitter.png');
+  --glittersize: 25%;
+  --foil:        none;
+
+  // Energy glow overrides
  &[data-energy="Water"]     { --card-glow: hsl(192, 97%,  60%); }
  &[data-energy="Fire"]      { --card-glow: hsl(9,   81%,  59%); }
  &[data-energy="Grass"]     { --card-glow: hsl(96,  81%,  65%); }
@@ -69,22 +93,49 @@
  &[data-energy="Metal"]     { --card-glow: hsl(184, 20%,  70%); }
  &[data-energy="Dragon"]    { --card-glow: hsl(51,  60%,  35%); }
  &[data-energy="Fairy"]     { --card-glow: hsl(323, 100%, 89%); }
+
+  // Hover activates opacity; JS updates pointer vars
+  &:hover,
+  &[data-holo-active] { --card-opacity: 0.2; }
+
+  display: block;  // ensure wrapper is a block-level containing block
+  position: relative;
+  isolation: isolate;
+  border-radius: var(--card-radius);
 }


 // -----------------------------------------------------------------------------
-// 2.  SHINE + GLARE CHILD DIVS
+// 2. HOLO-SHINE AND HOLO-GLARE BASE STRUCTURE
 // -----------------------------------------------------------------------------

-%shine-base {
+.holo-shine,
+.holo-glare {
  pointer-events: none;
+  display: block;
  position: absolute;
  inset: 0;
  border-radius: var(--card-radius);
-  overflow: hidden; // clipping lives here, not on the parent
-  z-index: 3;
+  // NO overflow:hidden — it interferes with clip-path on the element itself
  will-change: transform, opacity, background-image, background-size,
               background-position, background-blend-mode, filter;
+}
+
+// The img inside has mb-2 but the wrapper already has the right size from
+// aspect-ratio on .card-image — zero the margin so img fills wrapper flush.
+.image-grow > img,
+.card-image-wrap > img {
+  display: block;
+  margin-bottom: 0 !important;
+  width: 100% !important;
+  height: 100% !important;
+  object-fit: cover;
+}
+
+.holo-shine {
+  z-index: 3;
+  mix-blend-mode: color-dodge;
+  opacity: var(--card-opacity);

  &::before,
  &::after {
@@ -92,69 +143,355 @@
    position: absolute;
    inset: 0;
    border-radius: var(--card-radius);
+    // Sunpillar palette shift for ::before depth layer
+    --sunpillar-clr-1: var(--sunpillar-5);
+    --sunpillar-clr-2: var(--sunpillar-6);
+    --sunpillar-clr-3: var(--sunpillar-1);
+    --sunpillar-clr-4: var(--sunpillar-2);
+    --sunpillar-clr-5: var(--sunpillar-3);
+    --sunpillar-clr-6: var(--sunpillar-4);
+  }
+
+  &::after {
+    // Second palette shift for uppermost pseudo layer
+    --sunpillar-clr-1: var(--sunpillar-6);
+    --sunpillar-clr-2: var(--sunpillar-1);
+    --sunpillar-clr-3: var(--sunpillar-2);
+    --sunpillar-clr-4: var(--sunpillar-3);
+    --sunpillar-clr-5: var(--sunpillar-4);
+    --sunpillar-clr-6: var(--sunpillar-5);
  }
 }

-%glare-base {
-  pointer-events: none;
+.holo-glare {
+  z-index: 4;
+  mix-blend-mode: overlay;
+  opacity: var(--card-opacity);
+  background-image: radial-gradient(
+    farthest-corner circle at var(--pointer-x) var(--pointer-y),
+    hsla(0, 0%, 100%, 0.8)  10%,
+    hsla(0, 0%, 100%, 0.65) 20%,
+    hsla(0, 0%, 0%,   0.5)  90%
+  );
+
+  // Grain texture on ::before — soft-light blend adds physical substrate feel
+  &::before {
+    content: '';
    position: absolute;
    inset: 0;
-  border-radius: var(--card-radius);
-  z-index: 4;
-  transform: translateZ(0);
-  overflow: hidden;
-  will-change: transform, opacity, background-image, background-size,
-    background-position, background-blend-mode, filter;
+    background-image: var(--grain);
+    background-size: 33%;
+    background-repeat: repeat;
+    mix-blend-mode: soft-light;
+    opacity: 0.15;
+  }
+
+  // Glitter texture on ::after — overlay blend adds sparkle points
+  &::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background-image: var(--glitter);
+    background-size: var(--glittersize) var(--glittersize);
+    background-repeat: repeat;
+    background-position:
+      calc(50% - ((5px * 2) * var(--pointer-from-left)) + 5px)
+      calc(50% - ((5px * 2) * var(--pointer-from-top))  + 5px);
+    mix-blend-mode: overlay;
+    opacity: calc(var(--card-opacity) * 0.6);
+  }
+
 }


 // -----------------------------------------------------------------------------
-// 3.  MODES
+// 3. ZONE HELPERS — reusable effect mixin
+// The standard prismatic effect, applied at different clip regions below.
 // -----------------------------------------------------------------------------

-// -- 3a. GRID -----------------------------------------------------------------
-// No idle animation. Effect is invisible until hover.
+// Standard shine background (used by ART WINDOW and FULL CARD zones)
+@mixin prismatic-shine {
+  background-image:
+    var(--grain),
+    repeating-linear-gradient(110deg,
+      var(--violet), var(--blue), var(--green), var(--yellow), var(--red),
+      var(--violet), var(--blue), var(--green), var(--yellow), var(--red),
+      var(--violet), var(--blue), var(--green), var(--yellow), var(--red)
+    );
+  background-position:
+    center center,
+    calc(((50% - var(--background-x)) * 2.6) + 50%)
+    calc(((50% - var(--background-y)) * 3.5) + 50%);
+  background-size: 33%, 400% 400%;
+  background-repeat: repeat, no-repeat;
+  background-blend-mode: soft-light, normal;
+  filter: brightness(.8) contrast(.85) saturate(.75);
+}

-.image-grow,
-.card-image-wrap {
-  @extend %holofoil-wrapper-base;
-  @extend %holofoil-energy-glows;
+@mixin prismatic-glare {
+  opacity: calc(var(--card-opacity) * 0.4);
+  filter: brightness(0.8) contrast(1.5);
+}

-  // No effect if the image fell back to default.jpg
-  &[data-default="true"] {
+
+// -----------------------------------------------------------------------------
+// 4. ZONE 0 — NORMAL: no effect
+// -----------------------------------------------------------------------------
+
+.image-grow[data-variant="Normal" i],
+.card-image-wrap[data-variant="Normal" i] {
  .holo-shine,
  .holo-glare { display: none !important; }
 }

-  .holo-shine { @extend %shine-base; }
-  .holo-glare { @extend %glare-base; }
+
+// -----------------------------------------------------------------------------
+// 5. ZONE 1 — ART WINDOW EFFECT
+// rarity: Rare, Amazing Rare, Classic Collection, Holo Rare
+// variant: Holofoil, 1st Edition Holofoil
+// -----------------------------------------------------------------------------
+
+.image-grow[data-rarity="Rare" i]:not([data-variant="Reverse Holofoil" i]):not([data-variant="Normal" i]),
+.card-image-wrap[data-rarity="Rare" i]:not([data-variant="Reverse Holofoil" i]):not([data-variant="Normal" i]),
+.image-grow[data-rarity="Amazing Rare" i]:not([data-variant="Reverse Holofoil" i]),
+.card-image-wrap[data-rarity="Amazing Rare" i]:not([data-variant="Reverse Holofoil" i]),
+.image-grow[data-rarity="Classic Collection" i]:not([data-variant="Reverse Holofoil" i]),
+.card-image-wrap[data-rarity="Classic Collection" i]:not([data-variant="Reverse Holofoil" i]),
+.image-grow[data-rarity="Holo Rare" i]:not([data-variant="Reverse Holofoil" i]),
+.card-image-wrap[data-rarity="Holo Rare" i]:not([data-variant="Reverse Holofoil" i]),
+.image-grow[data-variant="Holofoil" i]:not([data-variant="Reverse Holofoil" i]),
+.card-image-wrap[data-variant="Holofoil" i]:not([data-variant="Reverse Holofoil" i]),
+.image-grow[data-variant="1st Edition Holofoil" i],
+.card-image-wrap[data-variant="1st Edition Holofoil" i] {
+
+  .holo-shine {
+    clip-path: var(--clip-art);
+    @include prismatic-shine;
+  }
+
+  .holo-glare {
+    clip-path: var(--clip-art);
+    @include prismatic-glare;
+  }
 }


-// -- 3b. GRID HOVER -----------------------------------------------------------
-// The existing main.scss .image-grow:hover handles lift + scale.
-// We layer the holo effect on top without overriding transform or transition.
+// -----------------------------------------------------------------------------
+// 5b. ZONE 1 BORDER ADDITION — Holofoil + 1st Edition Holofoil
+//
+// Real holofoil cards have the foil stamp on both the art window AND the card
+// border. The element carries the art window clip; ::before carries the border
+// clip via the same zero-width tunnel polygon as Zone 3.
+// ::before inherits background-image/size/position from the parent via inherit.
+// -----------------------------------------------------------------------------

-.image-grow:hover,
-.image-grow[data-holo-active] {
-  --card-opacity: 0.45;
+.image-grow[data-variant="Holofoil" i]:not([data-variant="Reverse Holofoil" i]),
+.card-image-wrap[data-variant="Holofoil" i]:not([data-variant="Reverse Holofoil" i]),
+.image-grow[data-variant="1st Edition Holofoil" i],
+.card-image-wrap[data-variant="1st Edition Holofoil" i] {
+
+  .holo-shine {
+    &::before {
+      background-image: inherit;
+      background-size: inherit;
+      background-position: inherit;
+      background-repeat: inherit;
+      background-blend-mode: inherit;
+      filter: inherit;
+      mix-blend-mode: color-dodge;
+      clip-path: polygon(
+        0% 0%, 0% 100%, 100% 100%, 100% 0%, 0% 0%,
+        8% 9.85%, 92% 9.85%, 92% 47.15%, 8% 47.15%, 8% 9.85%
+      );
+    }
+  }
+
+  .holo-glare {
+    &::before {
+      clip-path: polygon(
+        0% 0%, 0% 100%, 100% 100%, 100% 0%, 0% 0%,
+        8% 9.85%, 92% 9.85%, 92% 47.15%, 8% 47.15%, 8% 9.85%
+      );
+    }
+  }
 }


-// -- 3c. MODAL ----------------------------------------------------------------
-// Sweeps once per minute. Peaks at 0.35.
-// Pointer tracking bumps opacity to 0.45 while hovering.
+// -----------------------------------------------------------------------------
+// 6. ZONE 2 — FULL CARD EFFECT
+// -----------------------------------------------------------------------------

-@keyframes holo-modal-pulse {
+.image-grow[data-rarity="Ultra Rare" i]:not([data-variant="Reverse Holofoil" i]),
+.card-image-wrap[data-rarity="Ultra Rare" i]:not([data-variant="Reverse Holofoil" i]),
+.image-grow[data-rarity="Character Rare" i]:not([data-variant="Reverse Holofoil" i]),
+.card-image-wrap[data-rarity="Character Rare" i]:not([data-variant="Reverse Holofoil" i]),
+.image-grow[data-rarity="Illustration Rare" i]:not([data-variant="Reverse Holofoil" i]),
+.card-image-wrap[data-rarity="Illustration Rare" i]:not([data-variant="Reverse Holofoil" i]),
+.image-grow[data-rarity="Special Illustration Rare" i]:not([data-variant="Reverse Holofoil" i]),
+.card-image-wrap[data-rarity="Special Illustration Rare" i]:not([data-variant="Reverse Holofoil" i]),
+.image-grow[data-rarity="Double Rare" i]:not([data-variant="Reverse Holofoil" i]),
+.card-image-wrap[data-rarity="Double Rare" i]:not([data-variant="Reverse Holofoil" i]),
+.image-grow[data-rarity="Hyper Rare" i]:not([data-variant="Reverse Holofoil" i]),
+.card-image-wrap[data-rarity="Hyper Rare" i]:not([data-variant="Reverse Holofoil" i]),
+.image-grow[data-rarity="Mega Rare" i]:not([data-variant="Reverse Holofoil" i]),
+.card-image-wrap[data-rarity="Mega Rare" i]:not([data-variant="Reverse Holofoil" i]),
+.image-grow[data-rarity="Mega Attack Rare" i]:not([data-variant="Reverse Holofoil" i]),
+.card-image-wrap[data-rarity="Mega Attack Rare" i]:not([data-variant="Reverse Holofoil" i]),
+.image-grow[data-rarity="ACE Spec Rare" i]:not([data-variant="Reverse Holofoil" i]),
+.card-image-wrap[data-rarity="ACE Spec Rare" i]:not([data-variant="Reverse Holofoil" i]),
+.image-grow[data-rarity="ACE Rare" i]:not([data-variant="Reverse Holofoil" i]),
+.card-image-wrap[data-rarity="ACE Rare" i]:not([data-variant="Reverse Holofoil" i]),
+.image-grow[data-rarity="Art Rare" i]:not([data-variant="Reverse Holofoil" i]),
+.card-image-wrap[data-rarity="Art Rare" i]:not([data-variant="Reverse Holofoil" i]),
+.image-grow[data-rarity="Special Art Rare" i]:not([data-variant="Reverse Holofoil" i]),
+.card-image-wrap[data-rarity="Special Art Rare" i]:not([data-variant="Reverse Holofoil" i]),
+.image-grow[data-rarity="Black White Rare" i]:not([data-variant="Reverse Holofoil" i]),
+.card-image-wrap[data-rarity="Black White Rare" i]:not([data-variant="Reverse Holofoil" i]),
+.image-grow[data-rarity="Character Super Rare" i]:not([data-variant="Reverse Holofoil" i]),
+.card-image-wrap[data-rarity="Character Super Rare" i]:not([data-variant="Reverse Holofoil" i]),
+.image-grow[data-rarity="Mega Ultra Rare" i]:not([data-variant="Reverse Holofoil" i]),
+.card-image-wrap[data-rarity="Mega Ultra Rare" i]:not([data-variant="Reverse Holofoil" i]),
+.image-grow[data-rarity="Rare BREAK" i]:not([data-variant="Reverse Holofoil" i]),
+.card-image-wrap[data-rarity="Rare BREAK" i]:not([data-variant="Reverse Holofoil" i]),
+.image-grow[data-rarity="Secret Rare" i]:not([data-variant="Reverse Holofoil" i]),
+.card-image-wrap[data-rarity="Secret Rare" i]:not([data-variant="Reverse Holofoil" i]),
+.image-grow[data-rarity="Shiny Holo Rare" i]:not([data-variant="Reverse Holofoil" i]),
+.card-image-wrap[data-rarity="Shiny Holo Rare" i]:not([data-variant="Reverse Holofoil" i]),
+.image-grow[data-rarity="Shiny Rare" i]:not([data-variant="Reverse Holofoil" i]),
+.card-image-wrap[data-rarity="Shiny Rare" i]:not([data-variant="Reverse Holofoil" i]),
+.image-grow[data-rarity="Shiny Secret Rare" i]:not([data-variant="Reverse Holofoil" i]),
+.card-image-wrap[data-rarity="Shiny Secret Rare" i]:not([data-variant="Reverse Holofoil" i]),
+.image-grow[data-rarity="Shiny Ultra Rare" i]:not([data-variant="Reverse Holofoil" i]),
+.card-image-wrap[data-rarity="Shiny Ultra Rare" i]:not([data-variant="Reverse Holofoil" i]) {
+
+  .holo-shine {
+    clip-path: none;
+    @include prismatic-shine;
+  }
+
+  .holo-glare {
+    clip-path: none;
+    @include prismatic-glare;
+  }
+}
+
+
+// -----------------------------------------------------------------------------
+// 7. ZONE 3 — INVERSE (borders only): Reverse Holofoil + Prism Rare
+//
+// Applies the effect to everything EXCEPT the art window.
+// Uses the "zero-width tunnel" technique from css-tricks.com/cutting-inner-part-element-using-clip-path/
+// Outer rectangle drawn anticlockwise, closes back to 0% 0%, then the inner
+// art window rectangle is drawn clockwise — nonzero winding treats the inner
+// shape as a hole, leaving the art window transparent.
+//
+// Outer (anticlockwise): 0 0 → 0 100% → 100% 100% → 100% 0 → 0 0
+// Inner art window (clockwise): 8% 9.85% → 92% 9.85% → 92% 47.15% → 8% 47.15%
+// -----------------------------------------------------------------------------
+
+.image-grow[data-variant="Reverse Holofoil" i],
+.card-image-wrap[data-variant="Reverse Holofoil" i],
+.image-grow[data-rarity="Prism Rare" i],
+.card-image-wrap[data-rarity="Prism Rare" i] {
+
+  // Energy colour tint — multiply blend darkens the card toward --card-glow.
+  // z-index 2 puts it above the card image (z-index 1) but below holo-shine (3).
+  // Opacity tied to --card-opacity so it appears/disappears with the hover effect.
+  &::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: var(--card-radius);
+    background: var(--card-glow);
+    mix-blend-mode: multiply;
+    opacity: calc(var(--card-opacity) * 0.5);
+    z-index: 2;
+    pointer-events: none;
+    clip-path: polygon(
+      0% 0%, 0% 100%, 100% 100%, 100% 0%, 0% 0%,
+      8% 9.85%, 92% 9.85%, 92% 47.15%, 8% 47.15%, 8% 9.85%
+    );
+  }
+
+  .holo-shine {
+    // Energy-aware gradient — weaves --card-glow (set per data-energy on the
+    // wrapper) into the prismatic colour sequence so each energy type gets a
+    // tinted shimmer: Grass = green, Fire = orange, Water = cyan, etc.
+    background-image:
+      var(--grain),
+      repeating-linear-gradient(110deg,
+        var(--card-glow),
+        var(--blue),
+        var(--card-glow),
+        var(--green),
+        var(--yellow),
+        var(--card-glow),
+        var(--red),
+        var(--violet),
+        var(--card-glow)
+      );
+    background-position:
+      center center,
+      calc(((50% - var(--background-x)) * 2.6) + 50%)
+      calc(((50% - var(--background-y)) * 3.5) + 50%);
+    background-size: 33%, 400% 400%;
+    background-repeat: repeat, no-repeat;
+    background-blend-mode: soft-light, normal;
+    filter: brightness(1.0) contrast(1.0) saturate(1.4);
+    clip-path: polygon(
+      0% 0%, 0% 100%, 100% 100%, 100% 0%, 0% 0%,
+      8% 9.85%, 92% 9.85%, 92% 47.15%, 8% 47.15%, 8% 9.85%
+    ) !important;
+  }
+
+  .holo-glare {
+    @include prismatic-glare;
+    // Hot-spot tinted with energy colour to match the shine treatment
+    background-image: radial-gradient(
+      farthest-corner circle at var(--pointer-x) var(--pointer-y),
+      var(--card-glow)           0%,
+      hsla(0, 0%, 100%, 0.3)   20%,
+      hsla(0, 0%, 0%,   0.5)   90%
+    );
+    clip-path: polygon(
+      0% 0%, 0% 100%, 100% 100%, 100% 0%, 0% 0%,
+      8% 9.85%, 92% 9.85%, 92% 47.15%, 8% 47.15%, 8% 9.85%
+    ) !important;
+  }
+}
+
+
+// -----------------------------------------------------------------------------
+// 8. MODAL ANIMATION
+// -----------------------------------------------------------------------------
+
+// Note: --card-opacity is intentionally NOT registered via @property.
+// Registering it as <number> makes it interpolatable, causing the browser
+// to smoothly transition it when JS sets it via inline style — creating the
+// unwanted slow fade-in. Without registration it changes instantly.
+@property --pointer-x         { syntax: '<percentage>'; inherits: true; initial-value: 50%;  }
+@property --pointer-y         { syntax: '<percentage>'; inherits: true; initial-value: 50%;  }
+@property --background-x      { syntax: '<percentage>'; inherits: true; initial-value: 50%;  }
+@property --background-y      { syntax: '<percentage>'; inherits: true; initial-value: 50%;  }
+@property --pointer-from-center { syntax: '<number>';   inherits: true; initial-value: 0;    }
+@property --pointer-from-left   { syntax: '<number>';   inherits: true; initial-value: 0.5;  }
+@property --pointer-from-top    { syntax: '<number>';   inherits: true; initial-value: 0.5;  }
+
+@keyframes holo-modal-opacity {
+  0%       { opacity: 0; }
+  4%       { opacity: 0; }
+  8%       { opacity: 0.35; }
+  85%      { opacity: 0.35; }
+  90%, 100%{ opacity: 0; }
+}
+
+@keyframes holo-modal-position {
  0%   {
-    --card-opacity: 0;
    --pointer-x: 50%; --pointer-y: 50%;
    --background-x: 50%; --background-y: 50%;
    --pointer-from-center: 0; --pointer-from-left: 0.5; --pointer-from-top: 0.5;
  }
-  4%  { --card-opacity: 0; }
  8%   {
-    --card-opacity: 0.35;
    --pointer-x: 25%; --pointer-y: 15%;
    --background-x: 38%; --background-y: 28%;
    --pointer-from-center: 0.85; --pointer-from-left: 0.25; --pointer-from-top: 0.15;
@@ -175,14 +512,11 @@
    --pointer-from-center: 0.8; --pointer-from-left: 0.35; --pointer-from-top: 0.80;
  }
  85%  {
-    --card-opacity: 0.35;
    --pointer-x: 25%; --pointer-y: 15%;
    --background-x: 38%; --background-y: 28%;
    --pointer-from-center: 0.85;
  }
-  90%  { --card-opacity: 0; }
  100% {
-    --card-opacity: 0;
    --pointer-x: 50%; --pointer-y: 50%;
    --background-x: 50%; --background-y: 50%;
    --pointer-from-center: 0;
@@ -190,160 +524,162 @@
 }

 .card-image-wrap.holo-modal-mode {
-  --card-opacity: 0;
+  // Animate pointer vars on the wrapper so CSS custom props interpolate
+  animation: holo-modal-position 60s ease-in-out infinite;
+  animation-delay: var(--shimmer-delay, -2s);

  .holo-shine,
  .holo-glare {
-    animation: holo-modal-pulse 60s ease-in-out infinite;
+    // Animate opacity directly — no @property needed, native interpolation
+    animation: holo-modal-opacity 60s ease-in-out infinite;
    animation-delay: var(--shimmer-delay, -2s);
  }

  &[data-holo-active] {
-    --card-opacity: 0.45;
+    animation-play-state: paused;
+    .holo-shine { opacity: 0.20; }
+    .holo-glare { opacity: calc(0.20 * 0.4); }
+  }
+}
+
+
+// -----------------------------------------------------------------------------
+// 9. MOBILE / TOUCH — static holofoil overlay, no JS tracking
+//
+// @media (hover: none) targets touchscreens only.
+// Technique from joshdance.com/100/Day50: two rainbow gradients at opposing
+// fixed positions interact via blend modes to create a static holographic sheen.
+// Where the two gradient bands cross, the additive blending creates bright
+// rainbow intersections that read as a light-catch effect — no pointer needed.
+//
+// Implementation:
+//   - .holo-shine gets the two-gradient stack at fixed diagonal positions
+//   - ::before moves in the opposite direction (negative position) so the
+//     crossing point creates the characteristic holofoil bright intersection
+//   - opacity is always-on at a low value — no hover event needed
+//   - will-change reset to auto — no GPU layer reservation needed
+//   - Glitter hidden — parallax position is meaningless without tracking
+//   - No CSS animation on touch — pure static CSS, zero JS involvement
+// -----------------------------------------------------------------------------
+
+@media (hover: none) {
+
  .holo-shine,
-    .holo-glare { animation-play-state: paused; }
-  }
+  .holo-glare {
+    will-change: auto;
  }

+  // Disable any animation on modal cards on touch — static treatment handles it
+  .card-image-wrap.holo-modal-mode {
+    animation: none;

-// -----------------------------------------------------------------------------
-// 4.  RARITY -> CLIP-PATH BRIDGE
-// -----------------------------------------------------------------------------
+    .holo-shine,
+    .holo-glare { animation: none; }
+  }
+
+  // Suppress glitter — parallax position is meaningless without pointer tracking
+  .holo-glare::after { display: none; }
+
+  // ── Static holofoil overlay for all effect zones on touch ─────────────────
+  // Override the JS-driven background-position values with fixed diagonals.
+  // The ::before pseudo moves in the opposite direction to create crossing bands.

  .image-grow,
  .card-image-wrap {

-  // No effect on common/uncommon or unrecognised wrapper
-  &[data-rarity="common"],
-  &[data-rarity="uncommon"],
-  &:not([data-rarity]) {
-    .holo-shine,
-    .holo-glare { display: none; }
+    // Zone 1 — art window
+    &[data-rarity="Rare" i]:not([data-variant="Reverse Holofoil" i]):not([data-variant="Normal" i]),
+    &[data-rarity="Amazing Rare" i]:not([data-variant="Reverse Holofoil" i]),
+    &[data-rarity="Classic Collection" i]:not([data-variant="Reverse Holofoil" i]),
+    &[data-rarity="Holo Rare" i]:not([data-variant="Reverse Holofoil" i]),
+    &[data-variant="Holofoil" i]:not([data-variant="Reverse Holofoil" i]),
+    &[data-variant="1st Edition Holofoil" i],
+    // Zone 2 — full card
+    &[data-rarity="Ultra Rare" i]:not([data-variant="Reverse Holofoil" i]),
+    &[data-rarity="Character Rare" i]:not([data-variant="Reverse Holofoil" i]),
+    &[data-rarity="Illustration Rare" i]:not([data-variant="Reverse Holofoil" i]),
+    &[data-rarity="Special Illustration Rare" i]:not([data-variant="Reverse Holofoil" i]),
+    &[data-rarity="Double Rare" i]:not([data-variant="Reverse Holofoil" i]),
+    &[data-rarity="Hyper Rare" i]:not([data-variant="Reverse Holofoil" i]),
+    &[data-rarity="Mega Rare" i]:not([data-variant="Reverse Holofoil" i]),
+    &[data-rarity="Mega Attack Rare" i]:not([data-variant="Reverse Holofoil" i]),
+    &[data-rarity="ACE Spec Rare" i]:not([data-variant="Reverse Holofoil" i]),
+    &[data-rarity="ACE Rare" i]:not([data-variant="Reverse Holofoil" i]),
+    &[data-rarity="Art Rare" i]:not([data-variant="Reverse Holofoil" i]),
+    &[data-rarity="Special Art Rare" i]:not([data-variant="Reverse Holofoil" i]),
+    &[data-rarity="Black White Rare" i]:not([data-variant="Reverse Holofoil" i]),
+    &[data-rarity="Character Super Rare" i]:not([data-variant="Reverse Holofoil" i]),
+    &[data-rarity="Mega Ultra Rare" i]:not([data-variant="Reverse Holofoil" i]),
+    &[data-rarity="Rare BREAK" i]:not([data-variant="Reverse Holofoil" i]),
+    &[data-rarity="Secret Rare" i]:not([data-variant="Reverse Holofoil" i]),
+    &[data-rarity="Shiny Holo Rare" i]:not([data-variant="Reverse Holofoil" i]),
+    &[data-rarity="Shiny Rare" i]:not([data-variant="Reverse Holofoil" i]),
+    &[data-rarity="Shiny Secret Rare" i]:not([data-variant="Reverse Holofoil" i]),
+    &[data-rarity="Shiny Ultra Rare" i]:not([data-variant="Reverse Holofoil" i]),
+    // Zone 3 — inverse (Reverse Holofoil + Prism Rare)
+    // Energy colour woven in via --card-glow, same as desktop Zone 3
+    &[data-variant="Reverse Holofoil" i],
+    &[data-rarity="Prism Rare" i] {
+
+      // Energy colour multiply tint — kept subtle on mobile
+      &::after {
+        opacity: 0.04;
      }

-  // Standard holo — artwork area only
-  &[data-rarity="rare holo"] {
-    .holo-shine                               { clip-path: var(--clip); }
-    &[data-subtypes^="stage"]      .holo-shine { clip-path: var(--clip-stage); }
-    &[data-subtypes^="supporter"]  .holo-shine,
-    &[data-subtypes^="item"]       .holo-shine { clip-path: var(--clip-trainer); }
-  }
-
-  // Cosmos holo
-  &[data-rarity="rare holo cosmos"] {
-    .holo-shine                               { clip-path: var(--clip); }
-    &[data-subtypes^="stage"]      .holo-shine { clip-path: var(--clip-stage); }
-    &[data-subtypes^="supporter"]  .holo-shine { clip-path: var(--clip-trainer); }
-  }
-
-  &[data-rarity="radiant rare"]               { .holo-shine { clip-path: var(--clip-borders); } }
-  &[data-rarity="amazing rare"]               { .holo-shine { clip-path: var(--clip); } }
-
-  &[data-rarity="trainer gallery rare holo"],
-  &[data-rarity="rare holo"][data-trainer-gallery="true"] {
-    .holo-shine { clip-path: var(--clip-borders); }
-  }
-
-  &[data-rarity="rare shiny"] {
-    .holo-shine                            { clip-path: var(--clip); }
-    &[data-subtypes^="stage"] .holo-shine  { clip-path: var(--clip-stage); }
-  }
-
-  // Reverse holo by rarity — borders only
-  &[data-rarity$="reverse holo"]     { .holo-shine { clip-path: var(--clip-invert); } }
-  // Reverse Holofoil variant — borders only
-  &[data-variant="Reverse Holofoil"] { .holo-shine { clip-path: var(--clip-invert); } }
-
-  // True holofoil variants + full-bleed rarities — no clip
-  &[data-variant="Holofoil"],
-  &[data-variant="1st Edition Holofoil"],
-  &[data-variant="Unlimited Holofoil"],
-  &[data-rarity="rare ultra"],
-  &[data-rarity="rare holo v"],
-  &[data-rarity="rare holo vmax"],
-  &[data-rarity="rare holo vstar"],
-  &[data-rarity="rare shiny v"],
-  &[data-rarity="rare shiny vmax"],
-  &[data-rarity="rare rainbow"],
-  &[data-rarity="rare rainbow alt"],
-  &[data-rarity="rare secret"] {
-    .holo-shine { clip-path: none; }
-  }
-
-  // Foil variant shine/glare — clip handled above per variant type
-  &[data-variant="Holofoil"],
-  &[data-variant="Reverse Holofoil"],
-  &[data-variant="1st Edition Holofoil"],
-  &[data-variant="Unlimited Holofoil"] {
      .holo-shine {
        background-image:
-        radial-gradient(
-          circle at var(--pointer-x) var(--pointer-y),
-          #fff 5%, #000 50%, #fff 80%
-        ),
-        linear-gradient(
-          var(--foil-angle, -45deg),
-          #000 15%, #fff, #000 85%
+          var(--grain),
+          repeating-linear-gradient(110deg,
+            var(--card-glow),
+            var(--blue),
+            var(--card-glow),
+            var(--green),
+            var(--yellow),
+            var(--card-glow),
+            var(--red),
+            var(--violet),
+            var(--card-glow)
          );
-      background-blend-mode: soft-light, difference;
-      background-size: 120% 120%, 200% 200%;
-      background-position:
-        center center,
-        calc(100% * var(--pointer-from-left)) calc(100% * var(--pointer-from-top));
-      filter: brightness(var(--foil-brightness, 0.4)) contrast(1.3) saturate(var(--foil-saturation, 0.5));
-      mix-blend-mode: color-dodge;
-      opacity: calc((var(--card-opacity) * 0.9) - (var(--pointer-from-center) * 0.1));
-    }
+        background-size: 33%, 400% 400%;
+        background-repeat: repeat, no-repeat;
+        background-blend-mode: soft-light, normal;
+        background-position: center, 38% 25%;
+        filter: brightness(1.0) contrast(1.1) saturate(1.0);
+        opacity: 0.35;

-    .holo-glare {
-      opacity: calc(var(--card-opacity) * 0.5);
-      background-image: radial-gradient(
-        farthest-corner circle at var(--pointer-x) var(--pointer-y),
-        hsla(0, 0%, 100%, 0.5)  10%,
-        hsla(0, 0%, 100%, 0.25) 30%,
-        hsla(0, 0%, 0%,   0.4)  90%
-      );
-      filter: brightness(0.7) contrast(1.2);
-      mix-blend-mode: overlay;
-    }
-  }
-}
-
-
-// -----------------------------------------------------------------------------
-// 5.  DEFAULT HOLO SHINE / GLARE
-//     Fallback for rarities not explicitly handled above.
-// -----------------------------------------------------------------------------
-
-.image-grow,
-.card-image-wrap {
-  &[data-rarity]:not([data-rarity="common"]):not([data-rarity="uncommon"]) {
-
-    .holo-shine {
+        &::before {
          background-image:
            repeating-linear-gradient(110deg,
-          var(--violet), var(--blue), var(--green), var(--yellow), var(--red),
-          var(--violet), var(--blue), var(--green), var(--yellow), var(--red)
+              var(--card-glow),
+              var(--blue),
+              var(--card-glow),
+              var(--green),
+              var(--yellow),
+              var(--card-glow),
+              var(--red),
+              var(--violet),
+              var(--card-glow)
            );
-      background-position:
-        calc(((50% - var(--background-x)) * 2.6) + 50%)
-        calc(((50% - var(--background-y)) * 3.5) + 50%);
          background-size: 400% 400%;
-      filter: brightness(0.7) contrast(0.9) saturate(0.8);
+          background-position: 62% 75%;
          mix-blend-mode: color-dodge;
-      opacity: calc(var(--card-opacity) * 0.6);
+          opacity: 0.18;
+          filter: brightness(1.0) contrast(1.1) saturate(1.0);
+        }
+
+        &::after { display: none; }
      }

      .holo-glare {
+        opacity: 0.15;
        background-image: radial-gradient(
-        farthest-corner circle at var(--pointer-x) var(--pointer-y),
-        hsla(0, 0%, 100%, 0.35) 10%,
-        hsla(0, 0%, 100%, 0.15) 30%,
-        hsla(0, 0%, 0%,   0.35) 90%
+          farthest-corner circle at 35% 25%,
+          var(--card-glow)          0%,
+          hsla(0, 0%, 100%, 0.2)   30%,
+          hsla(0, 0%, 0%,   0.3)   90%
        );
-      opacity: calc(var(--card-opacity) * 0.4);
-      mix-blend-mode: overlay;
-      filter: brightness(0.7) contrast(1.1);
+        filter: brightness(0.8) contrast(1.5);
+      }
    }
  }
 }
--- a/src/assets/css/main.scss
+++ b/src/assets/css/main.scss
@@ -24,7 +24,7 @@ $container-max-widths: (
@import "_bootstrap";

 // ── Holofoil ──────────────────────────────────────────────────────────────
-//@import "_holofoil-integration";   // also pulls in _card.scss
+@import "_holofoil-integration";   // also pulls in _card.scss

 /* --------------------------------------------------
   Root Variables
--- a/src/assets/js/holofoil-init.js
+++ b/src/assets/js/holofoil-init.js
@@ -1,53 +1,57 @@
 /**
 * holofoil-init.js
- * -----------------------------------------------------------------------------
 * Instruments .image-grow and .card-image-wrap with the holofoil effect system.
- *
- *  GRID (.image-grow)
- *    Effect is invisible at rest. On hover, pointer tracking drives the shine
- *    and glare layers. The card lift/scale comes from main.scss as before.
- *
- *  MODAL (.card-image-wrap)
- *    Effect sweeps autonomously once per minute via CSS animation.
- *    Pointer tracking takes over while the user hovers the image.
- *
- *  DEFAULT FALLBACK
- *    If data-default="true" is set (onerror in the Astro markup), no effect
- *    is applied -- even if the attribute appears after stamp() has run.
- * -----------------------------------------------------------------------------
 */

 (function HolofoilSystem() {

  'use strict';

-  // -- Constants --------------------------------------------------------------
+  // Variants that receive NO effect
+  const NO_EFFECT_VARIANTS = new Set(['normal']);

-  const SHIMMER_SEL = [
-    '.image-grow[data-rarity]',
-    '.image-grow[data-variant="Holofoil"]',
-    '.image-grow[data-variant="1st Edition Holofoil"]',
-    '.image-grow[data-variant="Unlimited Holofoil"]',
-    '.image-grow[data-variant="Reverse Holofoil"]',
-    '.card-image-wrap[data-rarity]',
-    '.card-image-wrap[data-variant="Holofoil"]',
-    '.card-image-wrap[data-variant="1st Edition Holofoil"]',
-    '.card-image-wrap[data-variant="Unlimited Holofoil"]',
-    '.card-image-wrap[data-variant="Reverse Holofoil"]',
-  ].join(',');
+  // Variants that always receive an effect regardless of rarity
+  const HOLO_VARIANTS = new Set([
+    'reverse holofoil',
+    'holofoil',
+    '1st edition holofoil',
+  ]);
+
+  // Rarities that receive an effect
+  const HOLO_RARITIES = new Set([
+    // Art window zone
+    'rare',
+    'amazing rare',
+    'classic collection',
+    'holo rare',
+    // Full card zone
+    'ultra rare',
+    'character rare',
+    'illustration rare',
+    'special illustration rare',
+    'double rare',
+    'hyper rare',
+    'mega rare',
+    'mega attack rare',
+    'ace spec rare',
+    'ace rare',
+    'art rare',
+    'special art rare',
+    'black white rare',
+    'character super rare',
+    'mega ultra rare',
+    'rare break',
+    'secret rare',
+    'shiny holo rare',
+    'shiny rare',
+    'shiny secret rare',
+    'shiny ultra rare',
+    // Inverse zone
+    'prism rare',
+  ]);

  const ALL_WRAPPERS_SEL = '.image-grow, .card-image-wrap';

-  // Foil variant visual randomisation
-  const FOIL_ANGLE_MIN = -65,  FOIL_ANGLE_MAX = -25;
-  const FOIL_BRITE_MIN = 0.18, FOIL_BRITE_MAX = 0.32;
-  const FOIL_SAT_MIN   = 0.40, FOIL_SAT_MAX   = 0.75;
-
-  const SKIP_RARITIES = new Set(['common', 'uncommon', '']);
-
-
-  // -- Helpers ----------------------------------------------------------------
-
  const rand = (min, max) => parseFloat((Math.random() * (max - min) + min).toFixed(2));
  const clamp01 = n => Math.max(0, Math.min(1, n));

@@ -61,8 +65,8 @@
      fromLeft,
      fromTop,
      fromCenter,
-      bgX:        50 + (fromLeft - 0.5) * 30,
-      bgY:        50 + (fromTop  - 0.5) * 30,
+      bgX: 50 + (fromLeft - 0.5) * -30,
+      bgY: 50 + (fromTop  - 0.5) * -30,
    };
  }

@@ -76,12 +80,18 @@
    el.style.setProperty('--background-y',        v.bgY.toFixed(1) + '%');
  }

-  const isHoloVariant  = v => ['Holofoil', 'Reverse Holofoil', '1st Edition Holofoil', 'Unlimited Holofoil'].includes(v);
-  const isModalWrapper = el => el.classList.contains('card-image-wrap');
-  const isDefault      = el => el.dataset.default === 'true';
-
-
-  // -- Child injection --------------------------------------------------------
+  function shouldHaveEffect(el) {
+    if (el.dataset.default === 'true') return false;
+    // Also check if the card image itself is the default fallback
+    const img = el.querySelector('img');
+    if (img && img.src && img.src.endsWith('/cards/default.jpg')) return false;
+    const variant = (el.dataset.variant || '').toLowerCase().trim();
+    const rarity  = (el.dataset.rarity  || '').toLowerCase().trim();
+    if (NO_EFFECT_VARIANTS.has(variant)) return false;
+    if (HOLO_VARIANTS.has(variant)) return true;
+    if (HOLO_RARITIES.has(rarity))  return true;
+    return false;
+  }

  function injectChildren(el) {
    if (el.querySelector('.holo-shine')) return;
@@ -93,18 +103,10 @@
    el.appendChild(glare);
  }

-
-  // -- Default image guard ----------------------------------------------------
-
-  /**
-   * Watch for the onerror handler in the Astro markup setting data-default="true"
-   * after stamp() has already run. Hide the effect children immediately when seen.
-   */
  function watchForDefault(el) {
-    if (isDefault(el)) return;
-
+    if (el.dataset.default === 'true') return;
    var observer = new MutationObserver(function() {
-      if (isDefault(el)) {
+      if (el.dataset.default === 'true') {
        var shine = el.querySelector('.holo-shine');
        var glare = el.querySelector('.holo-glare');
        if (shine) shine.style.display = 'none';
@@ -112,81 +114,54 @@
        observer.disconnect();
      }
    });
-
    observer.observe(el, { attributes: true, attributeFilter: ['data-default'] });
  }

-
-  // -- Stamp ------------------------------------------------------------------
+  const canHover = window.matchMedia('(hover: hover)').matches;

  function stamp(el) {
    if (el.dataset.holoInit) return;
-
-    // Skip if already a default fallback image
-    if (isDefault(el)) {
+    if (!shouldHaveEffect(el)) {
      el.dataset.holoInit = 'skip';
      return;
    }
-
-    const rarity  = (el.dataset.rarity  || '').toLowerCase();
-    const variant =  el.dataset.variant  || '';
-
-    const hasHoloRarity  = rarity && !SKIP_RARITIES.has(rarity);
-    const hasHoloVariant = isHoloVariant(variant);
-
-    if (!hasHoloRarity && !hasHoloVariant) {
-      el.dataset.holoInit = 'skip';
-      return;
-    }
-
    injectChildren(el);
-
-    // Per-card foil visual randomisation (angle/brightness/saturation)
-    if (hasHoloVariant) {
-      el.style.setProperty('--foil-angle',      Math.round(rand(FOIL_ANGLE_MIN, FOIL_ANGLE_MAX)) + 'deg');
-      el.style.setProperty('--foil-brightness', rand(FOIL_BRITE_MIN, FOIL_BRITE_MAX).toFixed(2));
-      el.style.setProperty('--foil-saturation', rand(FOIL_SAT_MIN,   FOIL_SAT_MAX  ).toFixed(2));
-    }
-
-    // Modal-only: set a stable delay offset for the autonomous CSS animation
-    if (isModalWrapper(el)) {
+    if (el.classList.contains('card-image-wrap')) {
+      if (canHover) {
+        // Desktop: use hover + pointer tracking, same as grid cards.
+        // No animation — CSS :hover rule controls --card-opacity directly.
+        el.classList.remove('holo-modal-mode');
+      } else {
+        // Touch: use the autonomous CSS animation sweep.
        el.classList.add('holo-modal-mode');
        el.style.setProperty('--shimmer-delay', rand(-8, 0) + 's');
      }
-
+    }
    watchForDefault(el);
-
    el.dataset.holoInit = '1';
  }

-  function stampAll(root) {
-    (root || document).querySelectorAll(ALL_WRAPPERS_SEL).forEach(stamp);
-  }
-
-
-  // -- Pointer tracking -------------------------------------------------------
-
  const pointerState = new WeakMap();

  function onPointerEnter(e) {
    const el = e.currentTarget;
-    if (el.dataset.holoInit !== '1' || isDefault(el)) return;
-
+    if (el.dataset.holoInit !== '1') return;
    el.dataset.holoActive = '1';
+    // Inline style wins over CSS immediately — @property not registered for
+    // --card-opacity so no interpolation. All calc() multipliers in child
+    // rules (glare * 0.4, glitter * 0.6) work correctly from this single var.
+    el.style.setProperty('--card-opacity', '0.2');
    if (!pointerState.has(el)) pointerState.set(el, { rafId: null });
  }

  function onPointerMove(e) {
    const el = e.currentTarget;
    if (el.dataset.holoInit !== '1') return;
-
    const state = pointerState.get(el);
    if (!state) return;
-
    if (state.rafId) cancelAnimationFrame(state.rafId);
    state.rafId = requestAnimationFrame(function() {
-      const rect = el.getBoundingClientRect();
-      applyPointerVars(el, pointerVars(e.clientX, e.clientY, rect));
+      applyPointerVars(el, pointerVars(e.clientX, e.clientY, el.getBoundingClientRect()));
      state.rafId = null;
    });
  }
@@ -194,46 +169,39 @@
  function onPointerLeave(e) {
    const el = e.currentTarget;
    if (el.dataset.holoInit !== '1') return;
-
    const state = pointerState.get(el);
    if (state && state.rafId) { cancelAnimationFrame(state.rafId); state.rafId = null; }
-
    delete el.dataset.holoActive;
-
-    if (isModalWrapper(el)) {
-      // Let the CSS animation resume driving --card-opacity
+    // Remove inline style so CSS default (--card-opacity: 0) takes over instantly
    el.style.removeProperty('--card-opacity');
  }
-  }

  function attachListeners(el) {
    if (el.dataset.holoListeners) return;
+    // On touch-only devices the CSS static shimmer handles the effect.
+    // Skip JS pointer tracking — pointermove never fires on touchscreens
+    // and registering listeners wastes memory with no benefit.
+    if (!window.matchMedia('(hover: hover)').matches) return;
    el.addEventListener('pointerenter', onPointerEnter, { passive: true });
    el.addEventListener('pointermove',  onPointerMove,  { passive: true });
    el.addEventListener('pointerleave', onPointerLeave, { passive: true });
    el.dataset.holoListeners = '1';
  }

-  function attachAllListeners(root) {
-    (root || document).querySelectorAll(SHIMMER_SEL).forEach(function(el) {
+  function stampAll(root) {
+    (root || document).querySelectorAll(ALL_WRAPPERS_SEL).forEach(function(el) {
      stamp(el);
      if (el.dataset.holoInit === '1') attachListeners(el);
    });
  }

-
-  // -- MutationObserver: react to HTMX / infinite scroll ----------------------
-
  function observeGrid() {
    var grid = document.getElementById('cardGrid');
    if (!grid) return;
-
    new MutationObserver(function(mutations) {
-      for (var i = 0; i < mutations.length; i++) {
-        var nodes = mutations[i].addedNodes;
-        for (var j = 0; j < nodes.length; j++) {
-          var node = nodes[j];
-          if (node.nodeType !== 1) continue;
+      mutations.forEach(function(m) {
+        m.addedNodes.forEach(function(node) {
+          if (node.nodeType !== 1) return;
          if (node.matches && node.matches(ALL_WRAPPERS_SEL)) {
            stamp(node);
            if (node.dataset.holoInit === '1') attachListeners(node);
@@ -244,8 +212,8 @@
              if (el.dataset.holoInit === '1') attachListeners(el);
            });
          }
-        }
-      }
+        });
+      });
    }).observe(grid, { childList: true, subtree: true });
  }

@@ -253,20 +221,32 @@
    var modal = document.getElementById('cardModal');
    if (!modal) return;

-    new MutationObserver(function() {
-      modal.querySelectorAll(ALL_WRAPPERS_SEL).forEach(function(el) {
+    new MutationObserver(function(mutations) {
+      mutations.forEach(function(m) {
+        m.addedNodes.forEach(function(node) {
+          if (node.nodeType !== 1) return;
+
+          var wrappers = [];
+          if (node.matches && node.matches(ALL_WRAPPERS_SEL)) wrappers.push(node);
+          if (node.querySelectorAll) {
+            node.querySelectorAll(ALL_WRAPPERS_SEL).forEach(function(el) {
+              wrappers.push(el);
+            });
+          }
+
+          wrappers.forEach(function(el) {
+            // Reset stamp so each new card is evaluated fresh
+            delete el.dataset.holoInit;
            stamp(el);
            if (el.dataset.holoInit === '1') attachListeners(el);
          });
+        });
+      });
    }).observe(modal, { childList: true, subtree: true });
  }

-
-  // -- Bootstrap --------------------------------------------------------------
-
  function init() {
    stampAll();
-    attachAllListeners();
    observeGrid();
    observeModal();
  }
--- a/src/components/CardGrid.astro
+++ b/src/components/CardGrid.astro
@@ -44,7 +44,7 @@ import BackToTop from "./BackToTop.astro"

 <BackToTop />

-<!-- <script src="src/assets/js/holofoil-init.js" is:inline></script> -->
+<script src="src/assets/js/holofoil-init.js" is:inline></script>

 <script is:inline>
 (function () {
@@ -112,9 +112,6 @@ import BackToTop from "./BackToTop.astro"

  // ── Global helpers ────────────────────────────────────────────────────────
  window.copyImage = async function(img) {
-    const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) ||
-      (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1);
-
    try {
      const canvas = document.createElement("canvas");
      const ctx = canvas.getContext("2d");
@@ -130,17 +127,10 @@ import BackToTop from "./BackToTop.astro"
        clean.src = img.src;
      });

+      if (navigator.clipboard && navigator.clipboard.write) {
        const blob = await new Promise((resolve, reject) => {
          canvas.toBlob(b => b ? resolve(b) : reject(new Error('toBlob failed')), 'image/png');
        });
-
-      if (isIOS) {
-        const file = new File([blob], 'card.png', { type: 'image/png' });
-        await navigator.share({ files: [file] });
-        return;
-      }
-
-      if (navigator.clipboard && navigator.clipboard.write) {
        await navigator.clipboard.write([new ClipboardItem({ "image/png": blob })]);
        showCopyToast('📋 Image copied!', '#198754');
      } else {
@@ -159,7 +149,6 @@ import BackToTop from "./BackToTop.astro"
        }
      }
    } catch (err) {
-      if (err.name === 'AbortError') return;
      console.error('Failed:', err);
      showCopyToast('❌ Copy failed', '#dc3545');
    }
@@ -399,11 +388,5 @@ import BackToTop from "./BackToTop.astro"
    currentCardId = null;
    updateNavButtons(null);
  });
-
-  // ── AdSense re-init on infinite scroll ───────────────────────────────────
-  document.addEventListener('htmx:afterSwap', () => {
-    (window.adsbygoogle = window.adsbygoogle || []).push({});
-  });
-
 })();
 </script>
--- a/src/components/LeftSidebarDesktop.astro
+++ b/src/components/LeftSidebarDesktop.astro
@@ -1,7 +0,0 @@
-<div class="d-none d-xl-block sticky-top mt-5" style="top: 70px;">
-<ins class="adsbygoogle"
-     style="display:block"
-     data-ad-format="autorelaxed"
-     data-ad-client="ca-pub-1140571217687341"
-     data-ad-slot="8889263515"></ins>
-</div>
--- a/src/layouts/Main.astro
+++ b/src/layouts/Main.astro
@@ -16,7 +16,6 @@ const { title } = Astro.props;
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="htmx-config" content='{"historyCacheSize": 50}'/>
-    <meta name="google-adsense-account" content="ca-pub-1140571217687341">
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <link rel="icon" href="/favicon.ico" />
    <title>{title}</title>
--- a/src/middleware.ts
+++ b/src/middleware.ts
@@ -1,45 +1,17 @@
-import { clerkMiddleware, createRouteMatcher, clerkClient } from '@clerk/astro/server';
+// src/middleware.ts
+import { clerkMiddleware, createRouteMatcher } from '@clerk/astro/server';
+import type { AstroMiddlewareRequest, AstroMiddlewareResponse } from 'astro';

-const isProtectedRoute = createRouteMatcher(['/pokemon']);
-const isAdminRoute = createRouteMatcher(['/admin']);
+const isProtectedRoute = createRouteMatcher([
+  '/pokemon',
+]);

-const TARGET_ORG_ID = "org_3Baav9czkRLLlC7g89oJWqRRulK";
-
-export const onRequest = clerkMiddleware(async (auth, context) => {
-  const { isAuthenticated, userId, redirectToSignIn } = auth();
+export const onRequest = clerkMiddleware((auth, context) => {
+  const { isAuthenticated, redirectToSignIn } = auth()

  if (!isAuthenticated && isProtectedRoute(context.request)) {
-    return redirectToSignIn();
-  }
+    // Add custom logic to run before redirecting

-  if (isAdminRoute(context.request)) {
-    if (!isAuthenticated || !userId) {
-      return redirectToSignIn();
-    }
-
-    try {
-      const client = await clerkClient(context); // pass context here
-      const memberships = await client.organizations.getOrganizationMembershipList({
-        organizationId: TARGET_ORG_ID,
-      });
-
-      console.log("Total memberships found:", memberships.data.length);
-      console.log("Current userId:", userId);
-      console.log("Memberships:", JSON.stringify(memberships.data.map(m => ({
-        userId: m.publicUserData?.userId,
-        role: m.role,
-      })), null, 2));
-
-      const userMembership = memberships.data.find(
-        (m) => m.publicUserData?.userId === userId
-      );
-
-      if (!userMembership || userMembership.role !== "org:admin") {
-        return context.redirect("/");
-      }
-    } catch (e) {
-      console.error("Clerk membership check failed:", e);
-      return context.redirect("/");
-    }
+    return redirectToSignIn()
  }
 });
--- a/src/pages/admin.astro
+++ b/src/pages/admin.astro
@@ -1,18 +0,0 @@
---
-export const prerender = false;
-import Layout from '../layouts/Main.astro';
-import NavItems from '../components/NavItems.astro';
-import NavBar from '../components/NavBar.astro';
-import Footer from '../components/Footer.astro';
---
-<Layout title="Admin Panel">
-  <NavBar slot="navbar">
-    <NavItems slot="navItems" />
-  </NavBar>
-  <div class="row mb-4" slot="page">
-    <div class="col-12">
-      <h1>Admin Panel</h1>
-    </div>
-  </div>
-  <Footer slot="footer" />
-</Layout>
--- a/src/pages/api/upload.ts
+++ b/src/pages/api/upload.ts
@@ -1,95 +0,0 @@
-// src/pages/api/upload.ts
-import type { APIRoute } from 'astro';
-import { parse, stringify, transform } from 'csv';
-import { Readable } from 'stream';
-import { client } from '../../db/typesense';
-import chalk from 'chalk';
-import { db, ClosePool } from '../../db/index';
-
-// Define the transformation logic
-const transformer = transform({ parallel: 1 }, async function(this: any, row: any, callback: any) {
-try {
-    // Specific query bsaed on tcgcollector CSV
-    const query = String(Object.values(row)[1]);
-    const setname = String(Object.values(row)[4]).replace(/Wizards of the coast promos/ig,'WoTC Promo');
-    const cardNumber = String(Object.values(row)[7]);
-    console.log(`${query} ${cardNumber} : ${setname}`);
-
-    // Use Typesense to find the card because we can easily use the combined fields
-    let cards = await client.collections('cards').documents().search({ q: query, query_by: 'productName', filter_by: `setName:\`${setname}\` && number:${cardNumber}` });
-    if (cards.hits?.length === 0) {
-        // Try without card number
-        cards = await client.collections('cards').documents().search({ q: query, query_by: 'productName', filter_by: `setName:\`${setname}\`` });
-    }
-    if (cards.hits?.length === 0) {
-        // Try without set name
-        cards = await client.collections('cards').documents().search({ q: query, query_by: 'productName', filter_by: `number:${cardNumber}` });
-    }
-    if (cards.hits?.length === 0) {
-        // I give up, just output the values from the csv
-        console.log(chalk.red('  - not found'));
-        const newRow = { ...row };
-        newRow.Variant = '';
-        newRow.marketPrice = '';
-        this.push(newRow);
-    }
-    else {
-        for (const card of cards.hits?.map((hit: any) => hit.document) ?? []) {
-            console.log(chalk.blue(`  - ${card.cardId} : ${card.productName} : ${card.number}`), chalk.yellow(`${card.setName}`), chalk.green(`${card.variant}`));
-            const variant = await db.query.cards.findFirst({
-                with: { prices: true, tcgdata: true },
-                where: { cardId: card.cardId }
-            });
-            const newRow = { ...row };
-            newRow.Variant = variant?.variant;
-            newRow.marketPrice = variant?.prices.find(p => p.condition === 'Near Mint')?.marketPrice;
-            this.push(newRow);
-        }
-    }
-
-    callback();
-} catch (error) {
-    callback(error);
-}
-});
-
-
-export const POST: APIRoute = async ({ request }) => {
-  try {
-    const formData = await request.formData();
-    const file = formData.get('file') as File;
-    const inputStream = Readable.from(file.stream());
-
-    if (!file) {
-      return new Response('No file uploaded', { status: 400 });
-    }
-
-    // Pipe the streams: Read -> Parse -> Transform -> Stringify -> Write
-    const outputStream = inputStream
-        .on('error', (error) => console.error('Input stream error:', error))
-        .pipe(parse({ columns: true, trim: true }))
-        .on('error', (error) => console.error('Parse error:', error))
-        .pipe(transformer)
-        .on('error', (error) => console.error('Transform error:', error))
-        .pipe(stringify({ header: true }))
-        .on('error', (error) => console.error('Stringify error:', error));
-
-    // outputStream.on('finish', () => {
-    //     ClosePool();
-    // }).on('error', (error) => {
-    //     ClosePool();
-    // });
-
-    
-    return new Response(outputStream as any, {
-        headers: {
-            'Content-Type': 'text/csv',
-            'Content-Disposition': 'attachment; filename=transformed.csv',
-        },
-    });
-
-  } catch (error) {
-    console.error('Error processing CSV stream:', error);
-    return new Response('Internal Server Error', { status: 500 });
-  }
-};
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -4,7 +4,7 @@ import Layout from '../layouts/Main.astro';
 import NavItems from '../components/NavItems.astro';
 import NavBar from '../components/NavBar.astro';
 import Footer from '../components/Footer.astro';
-import { Show, SignInButton, SignUpButton, SignOutButton, GoogleOneTap, UserAvatar, UserButton, UserProfile } from '@clerk/astro/components'
+import { Show, SignInButton, SignUpButton, SignOutButton } from '@clerk/astro/components'
 ---
 <Layout title="Rigid's App Thing">
    <NavBar slot="navbar">
@@ -16,41 +16,31 @@ import { Show, SignInButton, SignUpButton, SignOutButton, GoogleOneTap, UserAvat
            <p class="text-secondary">(working title)</p>
        </div>
        <div class="col-12 col-md-6 mb-2">
-            <h2 class="mt-3">The Pokémon card tracker you actually want.</h2>
+            <h2 class="mt-3">Welcome!</h2>
            <p class="mt-2">
-                Browse real market prices and condition data across 70,000+ cards! No more 
-                juggling multiple tabs or guessing what your cards are worth.
+                You've been selected to participate in the closed beta! This single page web application is meant to elevate condition/variant data for the Pokemon TCG. In future iterations, we will add vendor inventory/collection management features, as well.
            </p>
            <p class="my-2">
-                We're now open to everyone. Create a free account to get started — 
-                collection and inventory management tools are coming soon as part of a 
-                premium plan.
+                After the closed beta is complete, the app will move into a more open beta. Feel free to play "Who's that Pokémon?" with the random Pokémon generator <a href="/404">here</a>. Refresh the page to see a new Pokémon!
            </p>
            <Show when="signed-in">
-                <a href="/pokemon" class="btn btn-warning mt-2">Take me to the cards!</a>
+                <a href="/pokemon" class="btn btn-warning mt-2">Take me to the cards</a>
            </Show>
        </div>
        <div class="col-12 col-md-6 d-flex justify-content-end align-items-start mt-3">
-            <div class="d-flex gap-3 mx-auto">
+            <div class="d-flex gap-3">
                <Show when="signed-out">
-                <div class="card border p-5 w-100">
-                    <SignUpButton asChild mode="modal">
-                    <button class="btn btn-success w-100 mb-2">Create free account</button>
-                    </SignUpButton>
                    <SignInButton asChild mode="modal">
-                    <p class="text-center text-secondary my-2">Already have an account?</p>
-                    <button class="btn btn-outline-light w-100">Sign in</button>
+                        <button class="btn btn-success">Sign In</button>
                    </SignInButton>
-                    <p class="text-center h6 text-light mt-2 mb-0">Free to join!</p>
-                </div>
-                <GoogleOneTap />
+                    <SignUpButton asChild mode="modal">
+                        <button class="btn btn-dark">Request Access</button>
+                    </SignUpButton>
                </Show>
                <Show when="signed-in">
-                <div class="w-100">                    
                    <SignOutButton asChild>
-                        <button class="btn btn-danger mt-2 ms-auto float-end">Sign Out</button>
+                        <button class="btn btn-danger">Sign Out</button>
                    </SignOutButton>
-                </div>
                </Show>
            </div>
        </div>
--- a/src/pages/myprices.astro
+++ b/src/pages/myprices.astro
@@ -1,26 +0,0 @@
---
-import Layout from '../layouts/Main.astro';
-import NavItems from '../components/NavItems.astro';
-import NavBar from '../components/NavBar.astro';
-import Footer from '../components/Footer.astro';
-
---
-<Layout title="Rigid's App Thing">
-    <NavBar slot="navbar">
-        <NavItems slot="navItems" />
-    </NavBar>
-    <div class="row mb-4" slot="page">
-        <div class="col-12">
-            <h1>Rigid's App Thing</h1>
-            <p class="text-secondary">(working title)</p>
-        </div>
-        <div class="col-12">
-            <!-- src/components/FileUploader.astro -->
-            <form action="/api/upload" method="post" enctype="multipart/form-data">
-                <input type="file" name="file" accept=".csv" required />
-                <button type="submit">Upload CSV</button>
-            </form>
-        </div>
-    </div>
-    <Footer slot="footer" />
-</Layout>
--- a/src/pages/partials/card-modal.astro
+++ b/src/pages/partials/card-modal.astro
@@ -46,41 +46,14 @@ const calculatedAt = (() => {
  const dates = card.prices
    .map(p => p.calculatedAt)
    .filter(d => d)
-    .map(d => new Date(d!));
+    .map(d => new Date(d));
  if (!dates.length) return null;
  return new Date(Math.max(...dates.map(d => d.getTime())));
 })();

-// ── Spread-based volatility (high - low) / low ────────────────────────────
-// Log-return volatility was unreliable because marketPrice is a smoothed daily
-// value, not transaction-driven. The 30-day high/low spread is a more honest
-// proxy for price movement over the period.
-
-const volatilityByCondition: Record<string, { label: string; spread: number }> = {};
-
-for (const price of card?.prices ?? []) {
-  const condition = price.condition;
-  const low = Number(price.lowestPrice);
-  const high = Number(price.highestPrice);
-  const market = Number(price.marketPrice);
-
-  if (!low || !high || !market || market <= 0) {
-    volatilityByCondition[condition] = { label: '—', spread: 0 };
-    continue;
-  }
-
-  const spread = (high - low) / market;
-
-  const label = spread >= 0.50 ? 'High'
-              : spread >= 0.25 ? 'Medium'
-              : 'Low';
-
-  volatilityByCondition[condition] = { label, spread: Math.round(spread * 100) / 100 };
-}
-
-// ── Price history for chart ───────────────────────────────────────────────
+// ── Fetch price history + compute volatility ──────────────────────────────
 const cardSkus = card?.prices?.length
-  ? await db.select().from(skus).where(eq(skus.productId, card.productId))
+  ? await db.select().from(skus).where(eq(skus.cardId, cardId))
  : [];

 const skuIds = cardSkus.map(s => s.skuId);
@@ -99,6 +72,41 @@ const historyRows = skuIds.length
      .orderBy(priceHistory.calculatedAt)
  : [];

+// Rolling 30-day cutoff for volatility calculation
+const thirtyDaysAgo = new Date(Date.now() - 30 * 86_400_000);
+
+const byCondition: Record<string, number[]> = {};
+for (const row of historyRows) {
+  if (row.marketPrice == null) continue;
+  if (!row.calculatedAt) continue;
+  if (new Date(row.calculatedAt) < thirtyDaysAgo) continue;
+  const price = Number(row.marketPrice);
+  if (price <= 0) continue;
+  if (!byCondition[row.condition]) byCondition[row.condition] = [];
+  byCondition[row.condition].push(price);
+}
+
+function computeVolatility(prices: number[]): { label: string; monthlyVol: number } {
+  if (prices.length < 2) return { label: '—', monthlyVol: 0 };
+  const returns: number[] = [];
+  for (let i = 1; i < prices.length; i++) {
+    returns.push(Math.log(prices[i] / prices[i - 1]));
+  }
+  const mean = returns.reduce((a, b) => a + b, 0) / returns.length;
+  const variance = returns.reduce((sum, r) => sum + (r - mean) ** 2, 0) / (returns.length - 1);
+  const monthlyVol = Math.sqrt(variance) * Math.sqrt(30);
+  const label = monthlyVol >= 0.30 ? 'High'
+              : monthlyVol >= 0.15 ? 'Medium'
+              : 'Low';
+  return { label, monthlyVol: Math.round(monthlyVol * 100) / 100 };
+}
+
+const volatilityByCondition: Record<string, { label: string; monthlyVol: number }> = {};
+for (const [condition, prices] of Object.entries(byCondition)) {
+  volatilityByCondition[condition] = computeVolatility(prices);
+}
+
+// ── Price history for chart (full history, not windowed) ──────────────────
 const priceHistoryForChart = historyRows.map(row => ({
  condition: row.condition,
  calculatedAt: row.calculatedAt
@@ -107,11 +115,29 @@ const priceHistoryForChart = historyRows.map(row => ({
  marketPrice: row.marketPrice,
 })).filter(r => r.calculatedAt !== null);

+// ── Determine which range buttons to show ────────────────────────────────
+const now = Date.now();
+const oldestDate = historyRows.length
+  ? Math.min(...historyRows
+      .filter(r => r.calculatedAt)
+      .map(r => new Date(r.calculatedAt!).getTime()))
+  : now;
+
+const dataSpanDays = (now - oldestDate) / 86_400_000;
+
+const showRanges = {
+  '1m':  dataSpanDays >= 1,
+  '3m':  dataSpanDays >= 60,
+  '6m':  dataSpanDays >= 180,
+  '1y':  dataSpanDays >= 365,
+  'all': dataSpanDays >= 400,
+};
+
 const conditionOrder = ["Near Mint", "Lightly Played", "Moderately Played", "Heavily Played", "Damaged"];

 const conditionAttributes = (price: any) => {
  const condition: string = price?.condition || "Near Mint";
-  const vol = volatilityByCondition[condition] ?? { label: '—', spread: 0 };
+  const vol = volatilityByCondition[condition] ?? { label: '—', monthlyVol: 0 };

  const volatilityClass = (() => {
    switch (vol.label) {
@@ -124,7 +150,7 @@ const conditionAttributes = (price: any) => {

  const volatilityDisplay = vol.label === '—'
    ? '—'
-    : `${vol.label} (${(vol.spread * 100).toFixed(0)}%)`;
+    : `${vol.label} (${(vol.monthlyVol * 100).toFixed(0)}%)`;

  return {
    "Near Mint":        { label: "nav-nm",  volatility: volatilityDisplay, volatilityClass, class: "show active" },
@@ -164,6 +190,9 @@ const altSearchUrl = (card: any) => {
              <!-- Card image column -->
              <div class="col-sm-12 col-md-3">
                <div class="position-relative mt-1">
+
+                  <!-- card-image-wrap gives the modal image shimmer effects
+                       without the hover lift/scale that image-grow has in main.scss -->
                  <div
                    class="card-image-wrap rounded-4"
                    data-energy={card?.energyType}
@@ -172,13 +201,15 @@ const altSearchUrl = (card: any) => {
                    data-name={card?.productName}
                  >
                    <img
-                      src={`/static/cards/${card?.productId}.jpg`}
+                      src={`/cards/${card?.productId}.jpg`}
                      class="card-image w-100 img-fluid rounded-4"
                      alt={card?.productName}
                      crossorigin="anonymous"
-                      onerror="this.onerror=null; this.src='/static/cards/default.jpg'; this.closest('.image-grow, .card-image-wrap')?.setAttribute('data-default','true')"
+                      onerror="this.onerror=null; this.src='/cards/default.jpg'; this.closest('.image-grow, .card-image-wrap')?.setAttribute('data-default','true')"
                      onclick="copyImage(this); dataLayer.push({'event': 'copiedImage'});"
                    />
+                    <div class="holo-shine"></div>
+                    <div class="holo-glare"></div>
                  </div>

                  <span class="position-absolute top-50 start-0 d-inline"><FirstEditionIcon edition={card?.variant} /></span>
@@ -241,11 +272,11 @@ const altSearchUrl = (card: any) => {
                              <p class="mb-0 mt-1">${price.marketPrice}</p>
                            </div>
                            <div class="alert alert-dark rounded p-2 flex-fill d-flex flex-column mb-0">
-                              <h6 class="mb-auto">Low Price <span class="small p text-secondary">(30 day)</span></h6>
+                              <h6 class="mb-auto">Lowest Price</h6>
                              <p class="mb-0 mt-1">${price.lowestPrice}</p>
                            </div>
                            <div class="alert alert-dark rounded p-2 flex-fill d-flex flex-column mb-0">
-                              <h6 class="mb-auto">High Price <span class="small p text-secondary">(30 day)</span></h6>
+                              <h6 class="mb-auto">Highest Price</h6>
                              <p class="mb-0 mt-1">${price.highestPrice}</p>
                            </div>
                            <div class={`alert rounded p-2 flex-fill d-flex flex-column mb-0 ${attributes?.volatilityClass}`}>
@@ -260,14 +291,14 @@ const altSearchUrl = (card: any) => {
                                  data-bs-trigger="hover focus click"
                                  data-bs-html="true"
                                  data-bs-title={`
-                                    <div class='tooltip-heading fw-bold mb-1'>30-Day Price Spread</div>
+                                    <div class='tooltip-heading fw-bold mb-1'>Monthly Volatility</div>
                                    <div class='small'>
                                      <p class="mb-1">
-                                        <strong>What this measures:</strong> how wide the gap between the 30-day low and high is,
-                                        relative to the market price.
+                                        <strong>What this measures:</strong> how much the market price tends to move day-to-day,
+                                        scaled up to a monthly expectation.
                                      </p>
                                      <p class="mb-0">
-                                        A card with <strong>50%+ spread</strong> has seen significant price swings over the past month.
+                                        A card with <strong>30% volatility</strong> typically swings ±30% over a month.
                                      </p>
                                    </div>
                                  `}
@@ -281,7 +312,7 @@ const altSearchUrl = (card: any) => {

                          <!-- Table only — chart is outside the tab panes -->
                          <div class="w-100">
-                            <div class="alert alert-dark rounded p-2 mb-0 table-responsive d-none">
+                            <div class="alert alert-dark rounded p-2 mb-0 table-responsive">
                              <h6>Latest Verified Sales</h6>
                              <table class="table table-sm mb-0">
                                <caption class="small">Filtered to remove mismatched language variants</caption>
@@ -328,11 +359,11 @@ const altSearchUrl = (card: any) => {
                        </canvas>
                      </div>
                      <div class="btn-group btn-group-sm d-flex flex-row gap-1 justify-content-end mt-2" role="group" aria-label="Time range">
-                        <button type="button" class="btn btn-dark price-range-btn active" data-range="1m">1M</button>
-                        <button type="button" class="btn btn-dark price-range-btn" data-range="3m">3M</button>
-                        <button type="button" class="btn btn-dark price-range-btn" data-range="6m">6M</button>
-                        <button type="button" class="btn btn-dark price-range-btn" data-range="1y">1Y</button>
-                        <button type="button" class="btn btn-dark price-range-btn" data-range="all">All</button>
+                        {showRanges['1m']  && <button type="button" class="btn btn-dark price-range-btn active" data-range="1m">1M</button>}
+                        {showRanges['3m']  && <button type="button" class="btn btn-dark price-range-btn" data-range="3m">3M</button>}
+                        {showRanges['6m']  && <button type="button" class="btn btn-dark price-range-btn" data-range="6m">6M</button>}
+                        {showRanges['1y']  && <button type="button" class="btn btn-dark price-range-btn" data-range="1y">1Y</button>}
+                        {showRanges['all'] && <button type="button" class="btn btn-dark price-range-btn" data-range="all">All</button>}
                      </div>
                    </div>
                  </div>
--- a/src/pages/partials/cards.astro
+++ b/src/pages/partials/cards.astro
@@ -48,53 +48,15 @@ const languageFilter = language === 'en' ? " && productLineName:=`Pokemon`"
 // synonyms alone (e.g. terms that need to match across multiple set names)
 // and rewrites them into a direct filter, clearing the query so it doesn't
 // also try to text-match against card names.
-
-const ALIAS_FILTERS = [
-    // ── Era / set groupings ───────────────────────────────────────────────
-    { re: /^(e-?reader|e reader)$/i, field: 'setName',
-      values: ['Expedition Base Set', 'Aquapolis', 'Skyridge', 'Battle-e'] },
-
-    { re: /^neo$/i, field: 'setName',
-      values: ['Neo Genesis', 'Neo Discovery', 'Neo Revelation', 'Neo Destiny'] },
-
-    { re: /^(wotc|wizards)$/i, field: 'setName',
-      values: ['Base Set', 'Jungle', 'Fossil', 'Base Set 2', 'Team Rocket',
-               'Gym Heroes', 'Gym Challenge', 'Neo Genesis', 'Neo Discovery',
-               'Neo Revelation', 'Neo Destiny', 'Expedition Base Set',
-               'Aquapolis', 'Skyridge', 'Battle-e'] },
-
-    { re: /^(sun\s*(&|and)\s*moon|s(&|and)m|sm)$/i, field: 'setName',
-      values: ['Sun & Moon', 'Guardians Rising', 'Burning Shadows', 'Crimson Invasion',
-               'Ultra Prism', 'Forbidden Light', 'Celestial Storm', 'Dragon Majesty',
-               'Lost Thunder', 'Team Up', 'Unbroken Bonds', 'Unified Minds',
-               'Hidden Fates', 'Cosmic Eclipse', 'Detective Pikachu'] },
-
-    { re: /^(sword\s*(&|and)\s*shield|s(&|and)s|swsh)$/i, field: 'setName',
-      values: ['Sword & Shield', 'Rebel Clash', 'Darkness Ablaze', 'Vivid Voltage',
-               'Battle Styles', 'Chilling Reign', 'Evolving Skies', 'Fusion Strike',
-               'Brilliant Stars', 'Astral Radiance', 'Pokemon GO', 'Lost Origin',
-               'Silver Tempest', 'Crown Zenith'] },
-
-    // ── Card type shorthands ──────────────────────────────────────────────
-    { re: /^trainers?$/i,         field: 'cardType', values: ['Trainer'] },
-    { re: /^supporters?$/i,       field: 'cardType', values: ['Supporter'] },
-    { re: /^stadiums?$/i,         field: 'cardType', values: ['Stadium'] },
-    { re: /^items?$/i,            field: 'cardType', values: ['Item'] },
-    { re: /^(energys?|energies)$/i, field: 'cardType', values: ['Energy'] },
-
-    // ── Rarity shorthands ─────────────────────────────────────────────────
-    { re: /^promos?$/i, field: 'rarityName', values: ['Promo'] },
-];
+const EREADER_SETS = ['Expedition Base Set', 'Aquapolis', 'Skyridge', 'Battle-e'];
+const EREADER_RE = /^(e-?reader|e reader)$/i;

 let resolvedQuery = query;
 let queryFilter = '';

-for (const alias of ALIAS_FILTERS) {
-    if (alias.re.test(query.trim())) {
+if (EREADER_RE.test(query.trim())) {
    resolvedQuery = '';
-        queryFilter = `${alias.field}:=[${alias.values.map(s => '`' + s + '`').join(',')}]`;
-        break;
-    }
+    queryFilter = `setName:=[${EREADER_SETS.map(s => '`' + s + '`').join(',')}]`;
 }

 const filters = Array.from(formData.entries())
@@ -156,10 +118,7 @@ if (start === 0) {
 const searchRequests = { searches: searchArray };
 const commonSearchParams = {
    q: resolvedQuery,
-    query_by: 'content,setName,setCode,productName,Artist',
-    query_by_weights: '10,6,8,9,8',
-    num_typos: '2,1,0,1,2',
-    prefix: 'true,true,false,false,false',
+    query_by: 'content,setName,productLineName,rarityName,energyType,cardType'
 };

 // use typesense to search for cards matching the query and return the productIds of the results
@@ -317,21 +276,18 @@ const facets = searchResults.results.slice(1).map((result: any) => {
 }

 {pokemon.length === 0 && (
-    <div id="notfound" class="mt-4 h6" hx-swap-oob="true">
-        No cards found! Please modify your search and try again.
+    <div id="notfound" hx-swap-oob="true">
+        Pokemon not found
    </div>
 )}

-{pokemon.map((card: any, i: number) => (
-
-    <div class="col equal-height-col">
+{pokemon.map((card:any) => (
+    <div class="col">
        <div class="inventory-button position-relative float-end shadow-filter text-center d-none">
            <div class="inventory-label pt-2">+/-</div>
        </div>
        <div class="card-trigger position-relative" data-card-id={card.cardId} hx-get={`/partials/card-modal?cardId=${card.cardId}`} hx-target="#cardModal" hx-trigger="click" data-bs-toggle="modal" data-bs-target="#cardModal" onclick="const cardTitle = this.querySelector('#cardImage').getAttribute('alt'); dataLayer.push({'event': 'virtualPageview', 'pageUrl': this.getAttribute('hx-get'), 'pageTitle': cardTitle, 'previousUrl': '/pokemon'});">
-        <div class="image-grow rounded-4 card-image h-100" data-energy={card.energyType} data-rarity={card.rarityName} data-variant={card.variant} data-name={card.productName}>
-          <img src={`/static/cards/${card.productId}.jpg`} alt={card.productName} id="cardImage" loading="lazy" decoding="async" class="img-fluid rounded-4 mb-2 w-100" onerror="this.onerror=null; this.src='/static/cards/default.jpg'; this.closest('.image-grow')?.setAttribute('data-default','true')"/>
-          <span class="position-absolute top-50 start-0 d-inline medium-icon"><FirstEditionIcon edition={card?.variant} /></span>
+            <div class="image-grow rounded-4 card-image" data-energy={card.energyType} data-rarity={card.rarityName} data-variant={card.variant} data-name={card.productName}><img src={`/cards/${card.productId}.jpg`} alt={card.productName} id="cardImage" loading="lazy" decoding="async" class="img-fluid rounded-4 mb-2 w-100" onerror="this.onerror=null; this.src='/cards/default.jpg'; this.closest('.image-grow')?.setAttribute('data-default','true')"/><span class="position-absolute top-50 start-0 d-inline medium-icon"><FirstEditionIcon edition={card?.variant} /></span>
              <div class="holo-shine"></div>
              <div class="holo-glare"></div>
            </div>
@@ -346,14 +302,13 @@ const facets = searchResults.results.slice(1).map((result: any) => {
        </div>
        <div class="h5 my-0">{card.productName}</div>
        <div class="d-flex flex-row lh-1 mt-1 justify-content-between">
-        <div class="text-secondary flex-grow-1"><span class="d-none d-lg-flex">{card.setName}</span><span class="d-flex d-lg-none">{card.setCode}</span></div>
+            <div class="text-secondary flex-grow-1 d-none d-lg-flex">{card.setName}</div>
            <div class="text-body-tertiary">{card.number}</div>
            <span class="ps-2 small-icon"><RarityIcon rarity={card.rarityName} /></span>
        </div>
-      <div class="text-body-tertiary">{card.variant}</div>
-      <span class="d-none">{card.productId}</span>
+        <div class="text-body-tertiary">{card.variant}</div><span class="d-none">{card.productId}</span>
    </div>
-  </>
+
 ))}
 {start + 20 < totalHits &&
    <div hx-post="/partials/cards" hx-trigger="revealed" hx-include="#searchform" hx-target="#cardGrid" hx-swap="beforeend" hx-on--after-request="afterUpdate(event)">
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,5 +1,5 @@
 {
  "extends": "astro/tsconfigs/strict",
-  "include": [".astro/types.d.ts", "src/**/*"],
+  "include": [".astro/types.d.ts", "**/*"],
  "exclude": ["dist"]
 }