<!--------------------------------------------------------------------------------------------------
....................................................................................................
....................................................................................................
....................................................................................................
....................................................................................................
....................................................................................................
....................................................................................................
....................................................................................................
....................................................................................................
....................................................................................................
...........................................:=*#%%%%%%#*=:...........................................
.....................................-+%@@@@@@@@@@@@@@@@@@@@%+-.....................................
..................................*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@#:.................................
..............................:*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*:..............................
............................:@@@@@@@@@@@@@@@@@@@%%%%@@@@@@@@@@@@@@@@@@@-............................
..........................:%@@@@@@@@@@@@#=:..............:=#@@@@@@@@@@@@%-..........................
.........................#@@@@@@@@@@@+........................=%@@@@@@@@@@#.........................
.......................=@@@@@@@@@@*:.............................+@@@@@@@@@@+.......................
......................+@@@@@@@@@+..................................+@@@@@@@@@*......................
.....................#@@@@@@@@#......................................*@@@@@@@@%.....................
....................*@@@@@@@@+........................................=@@@@@@@@*....................
...................=@@@@@@@@-..........................................-@@@@@@@@+...................
..................-@@@@@@@@=............................................-@@@@@@@@=..................
..................#@@@@@@@+..............................................=@@@@@@@#..................
.................:@@@@@@@#.........-***-....................=***-.........#@@@@@@@-.................
.................+@@@@@@@+......-@@@@@@@@@+..............+@@@@@@@@@-......=@@@@@@@*.................
.................%@@@@@@@:.....%@@@@@@@@@@@%............@@@@@@@@@@@@#.....:@@@@@@@@.................
.................@@@@@@@@.....+@@@@@@@@@@@@@%..........#@@@@@@@@@@@@@+.....%@@@@@@@:................
.................@@@@@@@@.....*@@@@@@@@@@@@@%.........:%@@@@@@@@@@@@@*.....%@@@@@@@:................
.................@@@@@@@@.....+@@@@@@@@@@@@@%..........#@@@@@@@@@@@@@+.....%@@@@@@@:................
.................%@@@@@@@:.....%@@@@@@@@@@@@............@@@@@@@@@@@@%.....:@@@@@@@@.................
.................+@@@@@@@+......=@@@@@@@@@+..............+@@@@@@@@@-......=@@@@@@@*.................
.................:@@@@@@@#.........-*#*-....................-*#*-.........#@@@@@@@-.................
..................#@@@@@@@+..............................................=@@@@@@@#..................
..................-@@@@@@@@=............................................-@@@@@@@@=..................
...................=@@@@@@@@-..........................................-@@@@@@@@*...................
....................*@@@@@@@@=........................................=@@@@@@@@#....................
.....................#@@@@@@@@#......................................*@@@@@@@@%.....................
......................+@@@@@@@@@+..................................+@@@@@@@@@*......................
.......................=@@@@@@@@@@*..............................+@@@@@@@@@@+.......................
.........................#@@@@@@@@@@%+........................=%@@@@@@@@@@#.........................
..........................:%@@@@@@@@@@@@#-:..............:-#@@@@@@@@@@@@%-..........................
............................:@@@@@@@@@@@@@@@@@@%%%%%%@@@@@@@@@@@@@@@@@@-............................
..............................:*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*:..............................
..................................*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@#..................................
.....................................-+%@@@@@@@@@@@@@@@@@@@@%*-.....................................
...........................................:=*#%%%%%%#*=:...........................................
....................................................................................................
....................................................................................................
....................................................................................................
....................................................................................................
....................................................................................................
....................................................................................................
....................................................................................................
....................................................................................................
....................................................................................................
--------------------------------------------------------------------------------------------------->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="white">
    <title>starboy – CREATURE</title>
    <link rel="icon" type="image/png" href="/img/favicon-96x96.png" sizes="96x96" />
    <link rel="icon" type="image/svg+xml" href="/img/favicon.svg" />
    <link rel="shortcut icon" href="/img/favicon.ico" />
    <link rel="apple-touch-icon" sizes="180x180" href="/img/apple-touch-icon.png" />
    <link rel="manifest" href="site.webmanifest" />

    <link rel="preload" href="/font/205TF-Milling-Triplex1,5mm.otf" as="font" type="font/otf" crossorigin>
    <link rel="preload" href="/font/205TF-Milling-Triplex1mm.otf" as="font" type="font/otf" crossorigin>
    <link rel="preload" href="/img/starboy/render_clear.webp" as="image" type="image/webp" fetchpriority="high">
    <link rel="preload" href="/img/starboy/render_stainless.webp" as="image" type="image/webp" fetchpriority="high">
    <link rel="preload" href="/img/starboy/render_alu.webp" as="image" type="image/webp">
    <link rel="preload" href="/img/starboy/render_brass.webp" as="image" type="image/webp">
    <link rel="preload" href="/animation_renderer.js" as="script">
    <link rel="preload" href="/animation_renderer_web.js" as="script">
    <link rel="preload" href="/animation_renderer.wasm" as="fetch" crossorigin>
    <link rel="preload" href="/anim_data.json" as="fetch" crossorigin>
    <link rel="preload" href="/behavior_data.json" as="fetch" crossorigin>

    <meta name="apple-mobile-web-app-title" content="when you wish upon a starboy.">

    <meta property="og:title" content="when you wish upon a starboy." />
    <meta property="og:description" content="⭐" />
    <meta property="og:image" content="https://hesjustalittleguy.com/img/starboy/preview.webp" />
    <meta property="og:image:secure_url" content="https://hesjustalittleguy.com/img/starboy/preview.webp" />
    <meta property="og:image:type" content="image/webp" />

    <meta property="og:video" content="https://hesjustalittleguy.com/img/starboy/preview.mp4" />
    <meta property="og:video:secure_url" content="https://hesjustalittleguy.com/img/starboy/preview.mp4" />
    <meta property="og:video:type" content="video/mp4" />
    <meta property="og:video:width" content="1206" />
    <meta property="og:video:height" content="880" />
    <meta property="og:url" content="https://hesjustalittleguy.com/" />
    <meta property="og:type" content="website" />

    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="when you wish upon a starboy." />
    <meta name="twitter:description" content="⭐" />
    <meta name="twitter:image" content="https://hesjustalittleguy.com/img/starboy/preview-x.webp" />
    <meta name="twitter:site" content="@dankuntz" />
    <meta name="twitter:creator" content="@dankuntz" />

    <script>
        // Preload spin images early so they're ready when user scrolls down
        (function() {
            window.preloadedSpinImages = {};
            window.spinImagesDecoded = {};
            const spinConfigs = [
                { type: 'stainless', id: '1941' },
                { type: 'brass', id: '1942' },
                { type: 'alu', id: '1943' },
                { type: 'clear', id: '1994' }
            ];
            const frameCount = 24;

            spinConfigs.forEach(config => {
                window.preloadedSpinImages[config.type] = [];
                window.spinImagesDecoded[config.type] = new Set();
                for (let i = 1; i <= frameCount; i++) {
                    const img = new Image();
                    img.onload = () => {
                        // Pre-decode image for instant rendering
                        if (img.decode) {
                            img.decode().then(() => {
                                window.spinImagesDecoded[config.type].add(i);
                            }).catch(() => {});
                        } else {
                            window.spinImagesDecoded[config.type].add(i);
                        }
                    };
                    img.src = `/img/starboy/spin-${config.type}/LG-SB-SPIN.${config.id}.${i}.webp`;
                    window.preloadedSpinImages[config.type].push(img);
                }
            });

            // Preload brass halo spin variants (lower priority, after regular spins)
            const brassSpinConfigs = [
                { type: 'stainless-brass', id: '1996' },
                { type: 'brass-brass', id: '1997' },
                { type: 'alu-brass', id: '1998' },
                { type: 'crystal-brass', id: '1995' }
            ];
            var regularDone = 0;
            var regularTotal = spinConfigs.length * frameCount;
            var origOnload = null;
            function startBrassPreload() {
                brassSpinConfigs.forEach(config => {
                    window.preloadedSpinImages[config.type] = [];
                    window.spinImagesDecoded[config.type] = new Set();
                    for (let i = 1; i <= frameCount; i++) {
                        const img = new Image();
                        img.onload = () => {
                            if (img.decode) {
                                img.decode().then(() => {
                                    window.spinImagesDecoded[config.type].add(i);
                                }).catch(() => {});
                            } else {
                                window.spinImagesDecoded[config.type].add(i);
                            }
                        };
                        img.src = `/img/starboy/spin-${config.type}/LG-SB-SPIN.${config.id}.${i}.webp`;
                        window.preloadedSpinImages[config.type].push(img);
                    }
                });
            }
            // Start brass preload after all regular images have loaded, or after 3s fallback
            var brassStarted = false;
            function tryStartBrass() {
                if (brassStarted) return;
                brassStarted = true;
                startBrassPreload();
            }
            spinConfigs.forEach(config => {
                window.preloadedSpinImages[config.type].forEach(img => {
                    if (img.complete) { regularDone++; }
                    else { var prev = img.onload; img.onload = function() { if (prev) prev(); regularDone++; if (regularDone >= regularTotal) tryStartBrass(); }; }
                });
            });
            if (regularDone >= regularTotal) tryStartBrass();
            setTimeout(tryStartBrass, 3000);
        })();
    </script>
    <svg width="0" height="0" style="position: absolute;">
        <filter id="bloom">
            <feColorMatrix in="SourceGraphic" result="src"/>

            <feComponentTransfer in="src" result="bright">
                <feFuncR type="linear" slope="4" intercept="-2"/>
                <feFuncG type="linear" slope="4" intercept="-2"/>
                <feFuncB type="linear" slope="4" intercept="-2"/>
            </feComponentTransfer>

            <feGaussianBlur in="bright" stdDeviation="4" result="blur"/>

            <!-- Bloom opacity control -->
            <feComponentTransfer in="blur" result="bloomDimmed">
                <feFuncA type="linear" slope="0.5"/>  <!-- 0.0–1.0 = bloom opacity -->
            </feComponentTransfer>

            <feBlend in="src" in2="bloomDimmed" mode="lighter"/>
        </filter>
    </svg>
    <style>
        @font-face {
            font-family: 'MillingTriplex1_5mm';
            src: url('/font/205TF-Milling-Triplex1,5mm.otf') format('opentype');
            font-weight: normal;
            font-style: normal;
            font-display: swap;
        }

        @font-face {
            font-family: 'MillingTriplex1mm';
            src: url('/font/205TF-Milling-Triplex1mm.otf') format('opentype');
            font-weight: normal;
            font-style: normal;
            font-display: swap;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html {
            overflow-x: hidden;
            width: 100%;
            max-width: 100vw;
        }

        body {
            margin: 0;
            padding: 0;
            background-color: #f9f9f9;
            -webkit-text-size-adjust: 100%;
            text-size-adjust: 100%;
            overflow-x: hidden;
            overflow: visible;
            position: relative;
            font-family: 'MillingTriplex1_5mm', Arial, sans-serif;
            letter-spacing: -0.04em;
            color: #2a2b2c;
            width: 100%;
            max-width: 100vw;
            text-transform: lowercase;
        }

        .main-content {
            max-width: 1600px;
            margin: 0 auto;
        }

        /* Shared Hero Heading Style */
        .hero-heading {
            font-family: 'MillingTriplex1mm', sans-serif;
            font-size: 13cqw;
            line-height: 0.83;
            letter-spacing: -0.08em;
            text-transform: lowercase;
            color: #2a2b2c;
        }

        /* Chrome-only text stroke for consistent font weight */
        .is-chrome .hero-heading {
            letter-spacing: -0.055em;
            -webkit-text-stroke: 0.02em currentColor;
        }

        /* Hero text character animation */
        .hero-text .line {
            display: block;
        }

        .hero-text .line:nth-child(1) { margin-bottom: -0.07em; } /* when */
        .hero-text .line:nth-child(2) { margin-bottom: 0.07em; } /* you */
        .hero-text .line:nth-child(3) { margin-bottom: -0.07em; } /* wish */
        .hero-text .line:nth-child(4) { margin-bottom: 0.09em; } /* upon a */
        .hero-text .line:nth-child(5) { margin-bottom: 0em; } /* starboy. */

        .hero-text .char {
            display: inline-block;
            opacity: 0;
            transform: translateY(12.5%);
            animation: charReveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
            transition: scale 0.5s ease-out;
        }

        .hero-text .char.bump {
            scale: 0.93;
            transition: scale 0.1s ease-in;
        }

        @keyframes charReveal {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Little guy text character animation (scroll-triggered) */
        .little-guy-text .line {
            display: block;
        }

        .little-guy-text .line:nth-child(1) { margin-bottom: 0.05em; } /* he's */
        .little-guy-text .line:nth-child(2) { margin-bottom: 0.1em; } /* just */
        .little-guy-text .line:nth-child(3) { margin-bottom: -0.1em; } /* a little */
        .little-guy-text .line:nth-child(4) { margin-bottom: 0em; } /* guy. */

        .little-guy-text .char {
            display: inline-block;
            opacity: 0;
            transform: translateY(12.5%);
            transition: scale 0.5s ease-out;
        }

        .little-guy-text .char.bump {
            scale: 0.93;
            transition: scale 0.1s ease-in;
        }

        .little-guy-text.animate .char {
            animation: charReveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }

        /* Render fade in animation */
        .hero-render-clear,
        .hero-render-stainless,
        .hero-render-alu,
        .hero-render-brass {
            opacity: 0;
            animation: renderFadeIn 0.5s ease-in-out 0.3s forwards;
            pointer-events: none;
        }

        @keyframes renderFadeIn {
            to {
                opacity: 1;
            }
        }

        /* Hero Section */
        .hero {
            position: relative;
            width: 100%;
            aspect-ratio: 1.25 / 1;
            overflow: visible;
            container-type: inline-size;
        }

        .hero-text {
            position: absolute;
            right: 3%;
            top: 5%;
            text-align: right;
            z-index: 1;
        }

        .hero-render-clear {
            position: absolute;
            left: -23%;
            top: -32%;
            width: 105%;
            transform: rotate(63deg);
            z-index: 20;
            container-type: inline-size;
        }

        .hero-render-stainless {
            position: absolute;
            right: -15%;
            top: 55cqw;
            width: 80%;
            transform: rotate(-10deg);
            z-index: 20;
            container-type: inline-size;
        }

        .hero-render-clear img,
        .hero-render-stainless img {
            width: 100%;
            height: auto;
        }

        .render-lark-canvas {
            position: absolute;
            width: 30%;
            height: 30%;
            pointer-events: none;
            /* background: rgba(255, 0, 0, 0.5); */
        }

        .render-lark-canvas canvas {
            display: block;
            width: 100% !important;
            height: 100% !important;
            object-fit: contain;
        }

        .hero-render-clear .render-lark-canvas {
            top: 50%;
            left: 50%;
            transform: translate(-38%, -76%) scale(1.52) rotate(-35deg) perspective(100cqw) rotateX(10deg) rotateY(45deg) rotateZ(0deg);
            mix-blend-mode: screen;
            filter: hue-rotate(-50deg) saturate(1.7) contrast(1.8);
        }

        .hero-render-stainless .render-lark-canvas {
            top: 50%;
            left: 50%;
            mix-blend-mode: plus-lighter;
            transform: translate(-62%, -71%) scale(1.3) rotate(45deg) perspective(100cqw) rotateX(10deg) rotateY(-35deg) rotateZ(-2deg);
            filter: saturate(1.1) contrast(1.1);
        }

        /* A Star is Born Section */
        .star-born {
            position: relative;
            width: 100%;
            aspect-ratio: 4.5 / 1;
            overflow: visible;
            container-type: inline-size;
        }

        .star-born-text {
            text-align: center;
            z-index: 1;
            margin-top: 45cqw;
        }

        .hero-render-alu {
            position: absolute;
            left: -35%;
            top: 10cqw;
            width: 120%;
            transform: rotate(20deg);
            z-index: 20;
            container-type: inline-size;
        }

        .hero-render-alu img {
            width: 100%;
            height: auto;
        }

        .hero-render-alu .render-lark-canvas {
            top: 50%;
            left: 50%;
            transform: translate(-38%, -70%) scale(1.3) rotate(-38deg) perspective(100cqw) rotateX(5deg) rotateY(39deg) rotateZ(0deg);
            mix-blend-mode: screen;
            filter: saturate(1.2) contrast(1.3) brightness(1.5);
        }

        /* He's Just a Little Guy Section */
        .little-guy {
            position: relative;
            width: 100%;
            min-height: 60vw;
            display: flex;
            align-items: flex-end;
            padding: 5% 3%;
            overflow: visible;
            container-type: inline-size;
        }

        .little-guy-text {
            text-align: left;
            z-index: 1;
            margin-top: 90cqw;
            margin-bottom: 15cqw;
        }

        .hero-render-brass {
            position: absolute;
            left: 20cqw;
            top: 90cqw;
            width: 110%;
            transform: rotate(-15deg);
            z-index: 20;
            container-type: inline-size;
        }

        .hero-render-brass img {
            width: 100%;
            height: auto;
        }

        .hero-render-brass .render-lark-canvas {
            top: 50%;
            left: 50%;
            transform: translate(-78%, -50%) scale(1.36) rotate(15deg) perspective(100cqw) rotateX(0deg) rotateY(-41deg) rotateZ(-3deg);
            mix-blend-mode: plus-lighter;
            filter: saturate(1.1) contrast(1.1);
        }

        /* Product Section */
        .product-section {
            position: relative;
            padding: 80px 0 0 0;
            background-color: #f9f9f9;
            z-index: 10;
        }

        .product-wrapper {
            display: flex;
            flex-direction: column;
            gap: 40px;
            max-width: 100%;
        }

        .product-specs {
            max-width: 400px;
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .product-header {
            border-bottom: 1px solid #2a2b2c;
            padding-bottom: 8px;
            display: flex;
            justify-content: space-between;
            align-items: baseline;
        }

        .product-title {
            font-family: 'MillingTriplex1mm', sans-serif;
            font-size: 22px;

            line-height: 1;
        }

        .product-brand {
            font-family: 'MillingTriplex1_5mm', sans-serif;
            font-size: 22px;

            line-height: 1;
        }

        .product-brand sup {
            font-size: 0.4em;
            vertical-align: super;
        }

        .product-details {
            font-family: 'MillingTriplex1mm', sans-serif;
            font-size: 18px;

            line-height: 1.3;
        }

        .product-details p {
            margin-bottom: 4px;
        }

        /* Product Cards */
        .product-cards {
            position: relative;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 0;
            width: 100%;
        }

        @media screen and (max-width: 1200px) {
            .product-cards {
                grid-template-columns: repeat(2, 1fr);
            }

            .product-card {
                margin-top: -1px;
            }
        }

        @media screen and (max-width: 600px) {
            .product-cards {
                grid-template-columns: 1fr;
            }
        }

        .product-card {
            position: relative;
            background-color: #f9f9f9;
            display: flex;
            flex-direction: column;
            gap: 20px;
            width: 100%;
            border: 1px solid #eaeaea;
            border-right: none;
            transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out, transform 0.3s ease-in-out, z-index 0s 0.3s;
            cursor: none;
            z-index: 1;
            text-decoration: none;
            color: inherit;
        }

        .product-card:hover {
            background-color: #f9f9f9;
            color: #2a2b2c;
            transform: scaleY(1.025);
            z-index: 10;
            transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out, transform 0.3s ease-in-out, z-index 0s 0s;
        }

        .hover-border {
            position: absolute;
            border: 1px solid #2a2b2c;
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.3s ease-in-out, top 0.2s ease-in-out, left 0.2s ease-in-out, width 0.2s ease-in-out, height 0.2s ease-in-out, transform 0.3s ease-in-out;
            z-index: 20;
            transform-origin: center center;
        }

        .hover-border.visible {
            opacity: 1;
            transform: scaleY(1.025);
        }

        @media screen and (max-width: 1200px) {
            .product-card:hover {
                transform: none;
            }

            .hover-border.visible {
                transform: none;
            }
        }

        .card-header {
            display: flex;
            align-items: center;
            padding: 16px;
            font-family: 'MillingTriplex1mm', sans-serif;
            font-size: 18px;

            line-height: 1;
        }

        .card-image {
            position: relative;
            width: 100%;
            aspect-ratio: 350 / 400;
            /* background-color: #f9f9f9; */
            /* border-top: 1px solid #eaeaea; */
            /* border-bottom: 1px solid #eaeaea; */
            overflow: hidden;
            transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out;
        }

        .product-card:hover .card-image {
            transform: scaleY(calc(1 / 1.025));
        }

        .card-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: opacity 0.3s ease-in-out;
        }

        .card-img-back {
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
        }

        .card-img-spin {
            transform: translateY(-5%);
        }

        .product-card:hover .card-img-front {
            opacity: 0;
        }

        .product-card:hover .card-img-back {
            opacity: 1;
        }

        .card-specs {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            display: flex;
            align-items: center;
            padding: 16px;
            color: #2a2b2c;
            font-family: 'MillingTriplex1mm', sans-serif;
            font-size: 18px;

            line-height: 1.4;
            text-align: left;
            white-space: pre-line;
            opacity: 0;
            filter: blur(10px);
            transition: opacity 0.3s ease-in-out, filter 0.3s ease-in-out;
            pointer-events: none;
        }

        .product-card:hover .card-specs {
            opacity: 1;
        }

        .card-footer {
            display: flex;
            align-items: center;
            font-family: 'MillingTriplex1mm', sans-serif;
            font-size: 18px;

            line-height: 1;
            padding: 16px;
        }

        .card-action-wrapper {
            position: absolute;
            left: -1px;
            right: -1px;
            bottom: 0;
        }

        .card-action-wrapper::before {
            content: '';
            position: absolute;
            left: 0;
            width: 100%;
            bottom: 0;
            height: 100%;
            background-color: #2a2b2c;
            transform: scaleY(0);
            transform-origin: bottom;
            transition: transform 0.3s ease-in-out;
            z-index: -1;
            will-change: transform;
        }

        .card-price {
            transition: opacity 0.3s ease-in-out;
        }

        .card-action {
            display: flex;
            align-items: center;
            justify-content: space-between;
            color: #f9f9f9;
            font-family: 'MillingTriplex1mm', sans-serif;
            font-size: 18px;

            text-transform: lowercase;
            padding: 16px;
            opacity: 0;
            transition: opacity 0.3s ease-in-out;
        }

        .card-action .action-price {
            color: #f9f9f9;
        }

        .product-card:hover .card-price {
            opacity: 0;
        }

        .product-card:hover .card-action-wrapper::before {
            transform: scaleY(1);
        }

        .product-card:hover .card-action {
            opacity: 1;
        }

        /* Footer */
        .footer {
            background-color: #f9f9f9;
            padding: 35px 15px 35px 15px;
            margin-top: 0;
            width: 100%;
        }

        .footer-content {
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 80px;
        }

        .footer-brand {
            display: flex;
            align-items: center;
        }

        .footer-logo {
            height: 60px;
            width: auto;
        }

        .footer-links {
            display: flex;
            gap: 100px;
            flex-wrap: wrap;
            margin-top: 0px;
            text-align: right;
        }

        .footer-column {
            display: flex;
            flex-direction: row;
            gap: 24px;
            align-items: center;
        }

        .footer-column-title {
            font-family: 'MillingTriplex1_5mm', sans-serif;

            line-height: 1;
            margin-bottom: 4px;
        }

        .footer-column a {
            font-family: 'MillingTriplex1mm', sans-serif;

            line-height: 1.4;
            color: #2a2b2c;
            text-decoration: none;
        }

        .footer-column a:hover {
            text-decoration: none;
        }

        /* Mobile */
        @media screen and (max-width: 768px) {
            .product-specs {
                max-width: 100%;
            }
        }

        /* Hide native scrollbar */
        html {
            scrollbar-width: none;
        }

        ::-webkit-scrollbar {
            display: none;
        }

        /* Custom scrollbar */
        .custom-scrollbar {
            position: fixed;
            right: 0;
            top: -2px;
            width: 1.5%;
            max-width: 20px;
            height: 100vh;
            z-index: 15;
            pointer-events: none;
        }

        .custom-scrollbar-thumb {
            position: absolute;
            right: -2px;
            width: 100%;
            background: #2a2b2c;
            pointer-events: auto;
            cursor: grab;
            border-radius: 4px;
            opacity: 0;
            transition: opacity 0.5s ease;
        }

        .custom-scrollbar-thumb.visible {
            opacity: var(--max-opacity, 1);
        }

        .custom-scrollbar-thumb:active {
            cursor: grabbing;
        }

        /* Custom Cursor */
        *, *::before, *::after, html, body, a, a:hover {
            cursor: none !important;
        }

        .glitch-mouse-container {
            z-index: 9998 !important;
        }

        .custom-cursor {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            position: fixed;
            pointer-events: none;
            z-index: 9999;
            background-color: rgba(42, 43, 44, 0.15);
            -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
            transform: translate(-20px, -20px);
            transition: opacity 0.1s, filter 0.6s ease, backdrop-filter 0.6s, -webkit-backdrop-filter 0.6s, background-color 0.3s, border 0.3s;
        }

        .custom-cursor.cursor-small {
            background-color: rgba(42, 43, 44, 0.0);
            border: 1px solid rgba(42, 43, 44, 0.25);
            -webkit-backdrop-filter: blur(0px) brightness(0.95);
            backdrop-filter: blur(0px) brightness(0.95);
        }

        .custom-cursor.cursor-hide {
            opacity: 0.0;
            transition: width 0.3s, height 0.3s, transform 0.3s, opacity 0.1s;
        }

        .custom-cursor.cursor-fade {
            opacity: 0.0;
            filter: blur(12px);
            transition: opacity 0.6s ease, filter 0.6s ease;
        }

        .cursor-hover {
            display: inline-block;
        }

        @media (pointer: coarse) and (hover: none) {
            html, body, a, a:hover {
                cursor: auto;
            }

            .custom-cursor {
                display: none;
            }
        }

    @media (max-width: 600px) {
        html, body {
            overflow-x: hidden;
        }

        .hero-heading {
            font-size: 15vw;
        }

        .hero {
            aspect-ratio: 1.05 / 1;
        }

        .hero-render-clear {
            left: -36.5%;
            top: -28%;
            width: 115%;
            transform: rotate(65deg);
        }

        .hero-render-stainless {
            top: 64cqw;
        }

        .little-guy {
            padding-bottom: 0;
        }

        .little-guy-text {
            margin-top: 90cqw;
            margin-bottom: 30cqw;
        }

        .product-section {
            padding-top: 0;
        }

        .card-price {
            opacity: 0;
        }

        .card-action-wrapper::before {
            transform: scaleY(1);
        }

        .card-action {
            opacity: 1;
        }

        .product-card:hover {
            transform: none;
        }

        .hover-border {
            display: none;
        }

        .product-cards {
            padding: 20px;
            gap: 20px;
        }

        .product-card {
            border-right: 1px solid #eaeaea;
        }

        .card-header,
        .card-footer,
        .card-specs,
        .card-action {
            font-size: 14px;
        }


        .footer-content {
            flex-direction: column;
            align-items: center;
            gap: 20px;
        }

        .footer-logo {
            height: 45px;
        }

        .footer-links {
            margin-top: 20px;
            text-align: center;
        }

        .footer-column {
            flex-direction: column;
            gap: 6px;
            align-items: center;
        }

        .footer-column a {
            font-size: 14px;
        }

        .custom-scrollbar {
            display: none;
        }
    }

    /* Product Detail View */
    .product-detail-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 50;
        pointer-events: none;
        overflow: hidden;
    }

    .product-detail-overlay.active {
        pointer-events: auto;
    }

    .detail-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #f9f9f9;
        opacity: 0;
        transition: opacity 0.35s ease 0.08s;
    }

    .product-detail-overlay.active .detail-bg {
        opacity: 1;
        transition: opacity 0.35s ease;
    }

    .detail-back {
        position: absolute;
        top: 32px;
        left: 32px;
        width: 32px;
        height: 32px;
        min-width: 32px;
        min-height: 32px;
        aspect-ratio: 1;
        background: transparent;
        border: none;
        cursor: none;
        z-index: 100;
        opacity: 0;
        padding: 6px;
        box-sizing: border-box;
        transition: opacity 0.2s ease;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .detail-back img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .product-detail-overlay.active .detail-back {
        opacity: 0.3;
        transition: opacity 0.4s ease 0.35s;
    }

    .detail-flying-image {
        position: absolute;
        z-index: 2;
        opacity: 0;
        overflow: hidden;
    }

    .detail-flying-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transform: translateY(-5%);
    }

    .detail-info {
        position: absolute;
        left: 0;
        top: 0;
        width: 50%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-end;
        padding: 80px 120px 80px 60px;
        z-index: 2;
        opacity: 0;
        filter: blur(4px);
        transform-origin: center bottom;
        transition: opacity 0.15s ease, filter 0.3s ease, transform 0.25s cubic-bezier(0.33, 0.03, 0.12, 1);
    }

    .product-detail-overlay.active .detail-info {
        opacity: 1;
        filter: blur(0px);
        transform: translate(0, 0) scale(1);
        transition: opacity 0.45s ease 0.15s, filter 0.65s ease 0.1s, transform 0.35s cubic-bezier(0.38, 0.05, 0, 1);
    }

    .detail-info-inner {
        text-align: left;
        width: 340px;
        max-width: 100%;
    }

    .detail-title {
        font-family: 'MillingTriplex1mm', sans-serif;
        font-size: 18px;

        line-height: 1;
        margin-bottom: 10px;
        color: #2a2b2c;
    }

    .detail-description {
        font-family: 'MillingTriplex1mm', sans-serif;
        font-size: 18px;

        line-height: 1.55;
        color: #2a2b2c;
        opacity: 0.55;
        margin-bottom: 36px;
        max-width: 340px;
        white-space: pre-line;
    }

    .detail-preorder {
        display: inline-flex;
        align-items: center;
        justify-content: space-between;
        background-color: #2a2b2c;
        color: #f9f9f9;
        font-family: 'MillingTriplex1mm', sans-serif;
        font-size: 18px;

        text-decoration: none;
        padding: 16px;
        border-radius: 0;
        transition: transform 0.3s ease, opacity 0.3s ease;
        cursor: none;
        text-transform: lowercase;
        width: 100%;
    }

    .detail-preorder:hover {
        transform: scale(0.95);
        opacity: 0.85;
    }

    .detail-preorder.sold-out {
        background-color: #999;
        pointer-events: none;
    }

    .detail-email {
        font-family: 'MillingTriplex1mm', sans-serif;
        font-size: 18px;

        line-height: 1;
        color: #2a2b2c;
        background: white;
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: 0;
        padding: 16px;
        width: 100%;
        margin-top: 10px;
        text-transform: lowercase;
        cursor: none;
        outline: none;
        box-sizing: border-box;
        transition: border-color 0.3s ease, background-color 0.3s ease;
    }

    .detail-email:focus {
        border-color: #2a2b2c;
    }

    .detail-email::placeholder {
        color: rgba(42, 43, 44, 0.35);
    }

    .detail-halo {
        display: flex;
        align-items: center;
        font-family: 'MillingTriplex1mm', sans-serif;
        font-size: 18px;
        line-height: 1;
        color: #2a2b2c;
        background: white;
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: 0;
        padding: 16px;
        width: 100%;
        min-height: 0;
        margin-bottom: 10px;
        cursor: none;
        box-sizing: border-box;
        transition: border-color 0.3s ease;
        text-transform: lowercase;
    }

    .detail-halo.checked {
        border-color: #2a2b2c;
    }

    .detail-halo-checkbox {
        display: none;
    }

    .detail-halo-check {
        width: 18px;
        height: 18px;
        min-width: 18px;
        border: 1px solid rgba(0, 0, 0, 0.2);
        border-radius: 0;
        margin-left: 12px;
        position: relative;
        transition: background-color 0.3s ease, border-color 0.3s ease;
    }

    .detail-halo.checked .detail-halo-check {
        background-color: #2a2b2c;
        border-color: #2a2b2c;
    }

    .detail-halo-check::after {
        content: '';
        position: absolute;
        left: 5px;
        top: 1px;
        width: 5px;
        height: 10px;
        border: solid white;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .detail-halo.checked .detail-halo-check::after {
        opacity: 1;
    }

    .detail-halo-label {
        flex: 1;
        opacity: 0.55;
        transition: opacity 0.3s ease;
    }

    .detail-halo.checked .detail-halo-label {
        opacity: 1;
    }

    .detail-mobile-cta {
        display: none;
    }

    .detail-flying-cta {
        display: none;
    }

    @media screen and (max-width: 768px) {
        .product-detail-overlay.active {
            display: flex;
            flex-direction: column;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }

        .detail-bg {
            position: fixed;
        }

        .detail-flying-image.mobile-flow {
            position: relative;
            left: auto;
            top: auto;
            width: 100%;
            height: auto;
            aspect-ratio: 1;
            flex-shrink: 0;
            margin-top: 60px;
        }

        .detail-info {
            position: relative;
            left: auto;
            top: auto;
            bottom: auto;
            width: 100%;
            height: auto;
            padding: 12px 24px 40px;
            margin-top: calc(100vw + 60px);
            flex-shrink: 0;
        }

        .detail-flying-image.mobile-flow ~ .detail-info {
            margin-top: 0;
        }

        .detail-info-inner {
            width: 100%;
        }

        .detail-title,
        .detail-subtitle,
        .detail-description {
            font-size: 14px;
        }

        .detail-description {
            margin-bottom: 24px;
            max-width: 100%;
        }

        .detail-preorder,
        .detail-email,
        .detail-halo {
            font-size: 14px;
        }

        .detail-info-inner {
            padding-bottom: 120px;
        }

        .product-detail-overlay.active .detail-info {
            transform: none;
        }

        .detail-mobile-cta {
            display: none;
        }

        .product-detail-overlay.active .detail-mobile-cta {
            display: flex;
            flex-direction: column;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 16px 24px;
            padding-bottom: max(16px, env(safe-area-inset-bottom));
            z-index: 10;
            background: linear-gradient(to top, #f9f9f9 70%, transparent);
        }

        .detail-mobile-cta .detail-preorder,
        .detail-mobile-cta .detail-email,
        .detail-mobile-cta .detail-halo {
            width: 100%;
        }

        .detail-mobile-cta .detail-halo {
            margin-bottom: 10px;
        }

        .detail-mobile-cta .detail-email {
            margin-top: 10px;
        }

        .detail-flying-cta {
            display: block;
            position: fixed;
            z-index: 11;
            background-color: #2a2b2c;
            color: #f9f9f9;
            font-family: 'MillingTriplex1mm', sans-serif;
            font-size: 14px;
            text-transform: lowercase;
            padding: 0;
            box-sizing: border-box;
            pointer-events: none;
            overflow: hidden;
        }

        .flying-cta-layer {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 16px;
        }

        .detail-back {
            top: 20px;
            left: 16px;
            font-size: 14px;
        }
    }
    </style>
</head>
<body class="glitch-mouse-trail">
    <script>if(/Chrome/.test(navigator.userAgent)&&!/Edg/.test(navigator.userAgent))document.body.classList.add('is-chrome');</script>
    <!-- Custom Cursor -->
    <div class="custom-cursor"></div>

    <!-- Custom Scrollbar -->
    <div class="custom-scrollbar">
        <div class="custom-scrollbar-thumb"></div>
    </div>

    <main class="main-content">
    <!-- Hero Section -->
    <section class="hero">
        <div class="hero-render-clear">
            <img src="/img/starboy/render_clear.webp" alt="Clear Starboy" fetchpriority="high">
            <div class="render-lark-canvas animation-renderer" data-state="1b" data-anim-data="anim_data.json"></div>
        </div>
        <h1 class="hero-heading hero-text">when<br>you<br>wish<br>upon a<br>starboy.</h1>
        <div class="hero-render-stainless">
            <img src="/img/starboy/render_stainless.webp" alt="Stainless Steel Starboy" fetchpriority="high">
            <div class="render-lark-canvas animation-renderer" data-state="1b" data-anim-data="anim_data.json"></div>
        </div>
    </section>

    <!-- A Star is Born Section -->
    <section class="star-born">
        <!-- <h2 class="hero-heading star-born-text">a star is<br>born.</h2> -->
        <div class="hero-render-alu">
            <img src="/img/starboy/render_alu.webp" alt="Aluminum Starboy" fetchpriority="high">
            <div class="render-lark-canvas animation-renderer" data-state="6a" data-anim-data="anim_data.json"></div>
        </div>
    </section>

    <!-- He's Just a Little Guy Section -->
    <section class="little-guy">
        <h2 class="hero-heading little-guy-text">he's<br>just<br>a little<br>guy.</h2>
        <div class="hero-render-brass">
            <img src="/img/starboy/render_brass.webp" alt="Brass Starboy" fetchpriority="high">
            <div class="render-lark-canvas animation-renderer" data-state="2b" data-anim-data="anim_data.json"></div>
        </div>
    </section>
    </main>

    <!-- Product Section -->
    <section class="product-section">
        <div class="product-wrapper">
            <div class="product-cards">
                <div class="hover-border"></div>
                <div class="product-card" data-spin="stainless" data-spin-id="1941">
                    <div class="card-header">
                        <span class="card-title"></span>
                    </div>
                    <div class="card-image">
                        <img src="/img/starboy/spin-stainless/LG-SB-SPIN.1941.19.webp" alt="Stainless Steel Starboy" class="card-img-spin">
                    </div>
                    <div class="card-footer">
                        <span class="card-price"></span>
                    </div>
                    <div class="card-action-wrapper">
                        <span class="card-action"><span class="action-price"></span><span>Pre-order</span></span>
                    </div>
                </div>

                <div class="product-card" data-spin="brass" data-spin-id="1942">
                    <div class="card-header">
                        <span class="card-title"></span>
                    </div>
                    <div class="card-image">
                        <img src="/img/starboy/spin-brass/LG-SB-SPIN.1942.19.webp" alt="Brass Starboy" class="card-img-spin">
                    </div>
                    <div class="card-footer">
                        <span class="card-price"></span>
                    </div>
                    <div class="card-action-wrapper">
                        <span class="card-action"><span class="action-price"></span><span>Pre-order</span></span>
                    </div>
                </div>

                <div class="product-card" data-spin="alu" data-spin-id="1943">
                    <div class="card-header">
                        <span class="card-title"></span>
                    </div>
                    <div class="card-image">
                        <img src="/img/starboy/spin-alu/LG-SB-SPIN.1943.19.webp" alt="Aluminum Starboy" class="card-img-spin">
                    </div>
                    <div class="card-footer">
                        <span class="card-price"></span>
                    </div>
                    <div class="card-action-wrapper">
                        <span class="card-action"><span class="action-price"></span><span>Pre-order</span></span>
                    </div>
                </div>

                <div class="product-card" data-spin="clear" data-spin-id="1944">
                    <div class="card-header">
                        <span class="card-title"></span>
                    </div>
                    <div class="card-image">
                        <img src="/img/starboy/spin-clear/LG-SB-SPIN.1944.19.webp" alt="Crystal Starboy" class="card-img-spin">
                    </div>
                    <div class="card-footer">
                        <span class="card-price"></span>
                    </div>
                    <div class="card-action-wrapper">
                        <span class="card-action"><span class="action-price"></span><span>Pre-order</span></span>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Product Detail View -->
    <div class="product-detail-overlay">
        <div class="detail-bg"></div>
        <button class="detail-back cursor-hover"><img src="/img/chevron_left.svg" alt="Back"></button>
        <div class="detail-flying-image">
            <img src="" alt="">
        </div>
        <div class="detail-info">
            <div class="detail-info-inner">
                <h2 class="detail-title"></h2>
                <p class="detail-description"></p>
                <label class="detail-halo cursor-hover">
                    <input type="checkbox" class="detail-halo-checkbox">
                    <span class="detail-halo-label">add brass halo</span>
                    <span class="detail-halo-check"></span>
                </label>
                <a class="detail-preorder cursor-hover" href="">pre-order</a>
                <input type="email" class="detail-email" placeholder="enter email for updates">
            </div>
        </div>
        <div class="detail-mobile-cta"></div>
        <div class="detail-flying-cta"></div>
    </div>

    <!-- Footer -->
    <footer class="footer">
        <div class="footer-content">
            <div class="footer-brand">
                <img src="/img/starboy/logo-lilguy.webp" alt="lilguy" class="footer-logo">
            </div>
            <div class="footer-links">
                <div class="footer-column">
                    <a class="cursor-hover" href="https://www.instagram.com/lilguynet/" target="_blank">Instagram</a>
                    <a class="cursor-hover" href="https://x.com/lilguynet" target="_blank">Twitter</a>
                    <a class="cursor-hover" href="mailto:hello@hesjustalittleguy.com">contact</a>
                    <a class="cursor-hover" href="https://www.dropbox.com/scl/fo/mg34tmxw5xuohvp1sb7ww/APBCP-kyPGNDDEwLY34WFoI?rlkey=44hfaxu242u4055w6o55464ee&st=ma0tkhq5&dl=0">press kit</a>
                </div>
            </div>
        </div>
    </footer>

    <script src="glitch.js" defer></script>
    <script src="animation_renderer.js"></script>
    <script src="animation_renderer_web.js"></script>
    <script>
        // Hero text character animation
        (function() {
            const heroText = document.querySelector('.hero-text');
            if (!heroText) return;

            const html = heroText.innerHTML;
            const lines = html.split(/<br\s*\/?>/i);
            let charIndex = 0;
            let newHtml = '';

            lines.forEach((line, lineIndex) => {
                let lineHtml = '';
                const lineStartChar = charIndex;
                for (let i = 0; i < line.length; i++) {
                    const char = line[i];
                    if (char === ' ') {
                        lineHtml += ' ';
                    } else {
                        const delay = 200 + charIndex * 20;
                        lineHtml += `<span class="char" style="animation-delay: ${delay}ms">${char}</span>`;
                        charIndex++;
                    }
                }
                newHtml += `<span class="line">${lineHtml}</span>`;
            });

            heroText.innerHTML = newHtml;
        })();

        // Little guy text character animation (scroll-triggered)
        (function() {
            const littleGuyText = document.querySelector('.little-guy-text');
            if (!littleGuyText) return;

            const html = littleGuyText.innerHTML;
            const lines = html.split(/<br\s*\/?>/i);
            let charIndex = 0;
            let newHtml = '';

            lines.forEach((line, lineIndex) => {
                let lineHtml = '';
                for (let i = 0; i < line.length; i++) {
                    const char = line[i];
                    if (char === ' ') {
                        lineHtml += ' ';
                    } else {
                        const delay = 200 + charIndex * 20;
                        lineHtml += `<span class="char" style="animation-delay: ${delay}ms">${char}</span>`;
                        charIndex++;
                    }
                }
                newHtml += `<span class="line">${lineHtml}</span>`;
            });

            littleGuyText.innerHTML = newHtml;

            // Use IntersectionObserver to trigger animation when visible
            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        littleGuyText.classList.add('animate');
                        observer.unobserve(littleGuyText);
                    }
                });
            }, {
                threshold: 1.0
            });

            observer.observe(littleGuyText);
        })();
    </script>
    <script>
        // Parallax effect for renders (0.95x scroll speed)
        const parallaxSpeed = -0.2;
        const renders = document.querySelectorAll('.hero-render-clear, .hero-render-stainless, .hero-render-alu, .hero-render-brass');

        let ticking = false;

        window.addEventListener('scroll', () => {
            if (!ticking) {
                requestAnimationFrame(() => {
                    const offsetY = window.scrollY * parallaxSpeed;
                    renders.forEach(render => {
                        render.style.translate = `0 ${offsetY}px`;
                    });
                    ticking = false;
                });
                ticking = true;
            }
        }, { passive: true });
    </script>
    <script>
        // Character bump effect on hover
        document.querySelectorAll('.hero-heading .char').forEach(char => {
            char.addEventListener('mouseenter', () => {
                char.classList.add('bump');
                setTimeout(() => char.classList.remove('bump'), 100);
            });
        });
    </script>
    <script>
        // Custom scrollbar
        const scrollbarThumb = document.querySelector('.custom-scrollbar-thumb');
        let isDragging = false;
        let startY, startScroll;
        let fadeTimeout = null;

        function showScrollbar() {
            scrollbarThumb.classList.add('visible');
            clearTimeout(fadeTimeout);
            fadeTimeout = setTimeout(() => {
                if (!isDragging) {
                    scrollbarThumb.classList.remove('visible');
                }
            }, 500);
        }

        function updateScrollbar() {
            const scrollHeight = document.documentElement.scrollHeight;
            const clientHeight = window.innerHeight + 10;
            const scrollTop = window.scrollY;

            const thumbHeight = Math.min(Math.max((clientHeight / scrollHeight) * clientHeight, 40), 200);
            const thumbTop = (scrollTop / (scrollHeight - clientHeight)) * (clientHeight - thumbHeight);

            // Fade out near bottom
            const distanceFromBottom = scrollHeight - clientHeight - scrollTop;
            let maxOpacity = 1;
            if (distanceFromBottom < 650) {
                maxOpacity = Math.max(0, (distanceFromBottom - 600) / 50);
            }
            scrollbarThumb.style.setProperty('--max-opacity', maxOpacity);

            scrollbarThumb.style.height = thumbHeight + 'px';
            scrollbarThumb.style.top = thumbTop + 'px';

            showScrollbar();
        }

        // Initial position without showing
        (function initScrollbar() {
            const scrollHeight = document.documentElement.scrollHeight;
            const clientHeight = window.innerHeight + 10;
            const scrollTop = window.scrollY;
            const thumbHeight = Math.min(Math.max((clientHeight / scrollHeight) * clientHeight, 40), 200);
            const thumbTop = (scrollTop / (scrollHeight - clientHeight)) * (clientHeight - thumbHeight);
            scrollbarThumb.style.height = thumbHeight + 'px';
            scrollbarThumb.style.top = thumbTop + 'px';
        })();

        window.addEventListener('scroll', updateScrollbar, { passive: true });
        window.addEventListener('resize', updateScrollbar);

        // Drag to scroll
        scrollbarThumb.addEventListener('mousedown', (e) => {
            isDragging = true;
            startY = e.clientY;
            startScroll = window.scrollY;
            document.body.style.userSelect = 'none';
        });

        document.addEventListener('mousemove', (e) => {
            if (!isDragging) return;

            const deltaY = e.clientY - startY;
            const scrollHeight = document.documentElement.scrollHeight;
            const clientHeight = window.innerHeight;
            const thumbHeight = Math.min(Math.max((clientHeight / scrollHeight) * clientHeight, 40), 120);
            const scrollRatio = (scrollHeight - clientHeight) / (clientHeight - thumbHeight);

            window.scrollTo(0, startScroll + deltaY * scrollRatio);
        });

        document.addEventListener('mouseup', () => {
            isDragging = false;
            document.body.style.userSelect = '';
        });
    </script>

    <script>
        // Hover border for product cards
        const hoverBorder = document.querySelector('.hover-border');
        const productCards = document.querySelectorAll('.product-card');
        const cardsContainer = document.querySelector('.product-cards');

        function updateHoverBorder(card) {
            const containerRect = cardsContainer.getBoundingClientRect();
            const cardRect = card.getBoundingClientRect();

            hoverBorder.style.top = (cardRect.top - containerRect.top) + 'px';
            hoverBorder.style.left = (cardRect.left - containerRect.left) + 'px';
            hoverBorder.style.width = (cardRect.width + 1) + 'px';
            if (window.innerWidth < 1200) {
                hoverBorder.style.height = (cardRect.height - 1) + 'px';
            } else {
                hoverBorder.style.height = (cardRect.height - 10) + 'px';
            }
            hoverBorder.classList.add('visible');
        }

        function hideHoverBorder() {
            hoverBorder.classList.remove('visible');
        }

        productCards.forEach(card => {
            card.addEventListener('mouseenter', () => updateHoverBorder(card));
            card.addEventListener('mouseleave', hideHoverBorder);
        });

        // Update position on resize
        window.addEventListener('resize', () => {
            const hoveredCard = document.querySelector('.product-card:hover');
            if (hoveredCard) {
                updateHoverBorder(hoveredCard);
            }
        });
    </script>

    <script>
        // 360 spin on hover for product cards
        const spinCards = document.querySelectorAll('.product-card[data-spin]');
        const spinFrameCount = 24;
        const defaultFrame = 19;
        const msPerFrame = 10; // constant speed: 10ms per frame
        const isTouchDevice = window.matchMedia('(pointer: coarse)').matches;

        // Use preloaded spin images from earlier script
        const spinImages = window.preloadedSpinImages || {};

        // Store card data for scroll-based updates on mobile
        const cardSpinData = [];

        spinCards.forEach(card => {
            const originalSpinImg = card.querySelector('.card-img-spin');
            const cardImage = card.querySelector('.card-image');
            const spinType = card.dataset.spin;
            const spinId = card.dataset.spinId;

            let currentFrame = defaultFrame;
            let targetFrame = defaultFrame;
            let isHovered = false;
            let animationId = null;
            let lastFrameTime = 0;

            // Create frame container with all preloaded images
            const frameContainer = document.createElement('div');
            frameContainer.style.cssText = 'position: absolute; top: 0; left: 0; width: 100%; height: 100%;';
            const frameImgs = [];

            const preloaded = spinImages[spinType];
            if (preloaded) {
                for (let i = 0; i < spinFrameCount; i++) {
                    const img = preloaded[i];
                    if (img) {
                        img.className = originalSpinImg.className;
                        img.style.cssText = 'position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: none; transform: translateY(-5%);';
                        img.style.visibility = (i + 1 === defaultFrame) ? 'visible' : 'hidden';
                        img.draggable = false;
                        frameContainer.appendChild(img);
                        frameImgs.push(img);
                    }
                }
            }

            // Replace original image with frame container
            if (frameImgs.length > 0) {
                originalSpinImg.style.display = 'none';
                cardImage.appendChild(frameContainer);
            }

            function setFrame(frame) {
                if (frame === currentFrame) return;
                // Hide current frame, show new frame
                if (frameImgs.length > 0) {
                    if (frameImgs[currentFrame - 1]) frameImgs[currentFrame - 1].style.visibility = 'hidden';
                    if (frameImgs[frame - 1]) frameImgs[frame - 1].style.visibility = 'visible';
                } else {
                    // Fallback if preloaded images not available
                    originalSpinImg.src = `/img/starboy/spin-${spinType}/LG-SB-SPIN.${spinId}.${frame}.webp`;
                }
                currentFrame = frame;
            }

            // Store data for scroll-based animation on mobile
            if (isTouchDevice) {
                cardSpinData.push({ card, cardImage, setFrame, currentFrame: () => currentFrame });
            } else {
                // Desktop: mouse-based interaction
                function getFrameFromMouse(e) {
                    const rect = cardImage.getBoundingClientRect();
                    const x = e.clientX - rect.left;
                    const progress = Math.max(0, Math.min(1, x / rect.width));
                    return Math.floor(progress * (spinFrameCount - 1)) + 1;
                }

                function getShortestDirection(from, to) {
                    let diff = to - from;
                    if (Math.abs(diff) > spinFrameCount / 2) {
                        diff = diff > 0 ? diff - spinFrameCount : diff + spinFrameCount;
                    }
                    return Math.sign(diff);
                }

                function stepTowardsTarget(now) {
                    if (currentFrame === targetFrame) {
                        animationId = null;
                        return;
                    }

                    if (now - lastFrameTime >= msPerFrame) {
                        lastFrameTime = now;
                        const direction = getShortestDirection(currentFrame, targetFrame);
                        let newFrame = currentFrame + direction;

                        // Wrap around
                        if (newFrame < 1) newFrame = spinFrameCount;
                        if (newFrame > spinFrameCount) newFrame = 1;

                        setFrame(newFrame);
                    }

                    if (currentFrame !== targetFrame) {
                        animationId = requestAnimationFrame(stepTowardsTarget);
                    } else {
                        animationId = null;
                    }
                }

                function startAnimation() {
                    if (!animationId) {
                        lastFrameTime = performance.now();
                        animationId = requestAnimationFrame(stepTowardsTarget);
                    }
                }

                card.addEventListener('mouseenter', (e) => {
                    isHovered = true;
                    targetFrame = getFrameFromMouse(e);
                    startAnimation();
                });

                card.addEventListener('mousemove', (e) => {
                    if (!isHovered) return;
                    targetFrame = getFrameFromMouse(e);
                    startAnimation();
                });

                card.addEventListener('mouseleave', () => {
                    isHovered = false;
                    targetFrame = defaultFrame;
                    startAnimation();
                });

                // Check initial mouse position on first mouse move
                function checkInitialPosition(e) {
                    const rect = card.getBoundingClientRect();
                    if (e.clientX >= rect.left && e.clientX <= rect.right &&
                        e.clientY >= rect.top && e.clientY <= rect.bottom) {
                        isHovered = true;
                        targetFrame = getFrameFromMouse(e);
                        setFrame(targetFrame);
                    }
                    document.removeEventListener('mousemove', checkInitialPosition);
                }
                document.addEventListener('mousemove', checkInitialPosition, { once: true });
            }

            // Expose setFrame for external use
            card._setSpinFrame = setFrame;
        });

    </script>

    <script>
        // Product detail view
        (function() {
            const overlay = document.querySelector('.product-detail-overlay');
            const flyingImg = overlay.querySelector('.detail-flying-image');
            const detailTitle = overlay.querySelector('.detail-title');
            const detailDescription = overlay.querySelector('.detail-description');
            const detailPreorder = overlay.querySelector('.detail-preorder');
            const detailEmailField = overlay.querySelector('.detail-email');
            const detailInfoInner = overlay.querySelector('.detail-info-inner');
            const detailMobileCta = overlay.querySelector('.detail-mobile-cta');
            const detailFlyingCta = overlay.querySelector('.detail-flying-cta');
            const detailBack = overlay.querySelector('.detail-back');
            const detailHalo = overlay.querySelector('.detail-halo');
            const detailHaloCheckbox = overlay.querySelector('.detail-halo-checkbox');
            const mainContent = document.querySelector('.main-content');
            const productSection = document.querySelector('.product-section');
            const pageFooter = document.querySelector('.footer');

            let activeCard = null;
            let isAnimating = false;
            var currentBasePrice = 0;
            var currentProductData = null;
            let scrollLocked = false;
            var lastMouseX = 0;
            var lastMouseY = 0;
            document.addEventListener('mousemove', function(e) { lastMouseX = e.clientX; lastMouseY = e.clientY; });

            // Spin state for detail view
            const spinFrameCount = 24;
            const msPerFrame = 10;
            let detailFrameImgs = [];
            let detailCurrentFrame = 19;
            let detailTargetFrame = 19;
            let detailAnimationId = null;
            let detailLastFrameTime = 0;
            let detailMsPerFrame = msPerFrame;

            // How far sections push out of the way (px)
            var sectionPushDistance = 300;
            var lastInfoFlyX = 0, lastInfoFlyY = 0;

            // Shared curve control points for fly and spin
            // cubic-bezier(x1, y1, x2, y2)
            var flyInCurvePoints = [0.38, 0.05, 0, 1];
            var flyOutCurvePoints = [0.33, .03, .12, 1];
            var sectionPushOutCurvePoints = [0.1, 0.34, 0.38, 1];

            function evalCubicBezier(x1, y1, x2, y2, t) {
                if (t <= 0) return 0;
                if (t >= 1) return 1;
                var lo = 0, hi = 1, mid;
                for (var i = 0; i < 20; i++) {
                    mid = (lo + hi) / 2;
                    var x = 3 * x1 * mid * (1 - mid) * (1 - mid) + 3 * x2 * mid * mid * (1 - mid) + mid * mid * mid;
                    if (x < t) lo = mid; else hi = mid;
                }
                mid = (lo + hi) / 2;
                return 3 * y1 * mid * (1 - mid) * (1 - mid) + 3 * y2 * mid * mid * (1 - mid) + mid * mid * mid;
            }

            function startCurvedSpin(targetFrame, duration, curvePoints) {
                var startFrame = detailCurrentFrame;
                var diff = targetFrame - startFrame;
                if (Math.abs(diff) > spinFrameCount / 2) {
                    diff = diff > 0 ? diff - spinFrameCount : diff + spinFrameCount;
                }
                if (diff === 0) return;
                var totalFrames = diff;
                var startTime = performance.now();

                if (detailAnimationId) cancelAnimationFrame(detailAnimationId);

                function tick() {
                    var elapsed = performance.now() - startTime;
                    var progress = Math.min(1, elapsed / duration);
                    var eased = evalCubicBezier(curvePoints[0], curvePoints[1], curvePoints[2], curvePoints[3], progress);
                    var frameOffset = Math.round(eased * totalFrames);
                    var frame = startFrame + frameOffset;
                    frame = ((frame - 1) % spinFrameCount + spinFrameCount) % spinFrameCount + 1;
                    setDetailFrame(frame);
                    if (progress < 1) {
                        detailAnimationId = requestAnimationFrame(tick);
                    } else {
                        detailAnimationId = null;
                    }
                }
                detailAnimationId = requestAnimationFrame(tick);
            }

            const productData = {
                stainless: {
                    cardTitle: 'Stainless Steel',
                    title: 'starboy – stainless steel',
                    price: '$349',
                    description: '\n316l stainless steel body\n 316l stainless steel halo\n400x400 oled display\ncamera\nmicrophone\naccelerometer\nhaptic feedback\nmulti-day rechargeable battery (usb-c)\nunique mystery eye color\n\nships by september 2026',
                    href: 'https://ipagrb-6a.myshopify.com/cart/40599391993985:1?channel=buy_button',
                    brassHref: 'https://checkout.lilguy.net/cart/40599391993985:1,40599399170177:1?channel=buy_button',
                    soldOut: false,
                    brassSpin: 'stainless-brass',
                    brassSpinId: '1996'
                },
                brass: {
                    cardTitle: 'Brass',
                    title: 'starboy – brass',
                    price: '$399',
                    description: '\nbrass body\n 316l stainless steel halo\n400x400 oled display\ncamera\nmicrophone\naccelerometer\nhaptic feedback\nmulti-day rechargeable battery (usb-c)\nunique mystery eye color\n\nships by september 2026',
                    href: 'https://ipagrb-6a.myshopify.com/cart/40599392026753:1?channel=buy_button',
                    brassHref: 'https://checkout.lilguy.net/cart/40599392026753:1,40599399170177:1?channel=buy_button',
                    soldOut: false,
                    brassSpin: 'brass-brass',
                    brassSpinId: '1997'
                },
                alu: {
                    cardTitle: 'Aluminum',
                    title: 'starboy – aluminum',
                    price: '$249',
                    description: '\nanodized aluminum body\n 316l stainless steel halo\n400x400 oled display\ncamera\nmicrophone\naccelerometer\nhaptic feedback\nmulti-day rechargeable battery (usb-c)\nunique mystery eye color\n\nships by september 2026',
                    href: 'https://ipagrb-6a.myshopify.com/cart/40599391961217:1?channel=buy_button',
                    brassHref: 'https://checkout.lilguy.net/cart/40599391961217:1,40599399170177:1?channel=buy_button',
                    soldOut: false,
                    brassSpin: 'alu-brass',
                    brassSpinId: '1998'
                },
                clear: {
                    cardTitle: 'Crystal',
                    title: 'starboy – crystal',
                    price: '$299',
                    description: '\nhardened optical grade acrylic body\n 316l stainless steel halo\n400x400 oled display\ncamera\nmicrophone\naccelerometer\nhaptic feedback\nmulti-day rechargeable battery (usb-c)\nunique mystery eye color\n\nships by september 2026',
                    href: 'https://ipagrb-6a.myshopify.com/cart/40599392059521:1?channel=buy_button',
                    brassHref: 'https://checkout.lilguy.net/cart/40599392059521:1,40599399170177:1?channel=buy_button',
                    soldOut: false,
                    brassSpin: 'crystal-brass',
                    brassSpinId: '1995'
                }
            };

            // Populate product cards from productData
            document.querySelectorAll('.product-card').forEach(function(card) {
                var data = productData[card.dataset.spin];
                if (!data) return;
                var titleEl = card.querySelector('.card-title');
                var priceEl = card.querySelector('.card-price');
                var actionPrice = card.querySelector('.action-price');
                if (titleEl) titleEl.textContent = data.cardTitle;
                if (priceEl) priceEl.textContent = data.price;
                if (actionPrice) actionPrice.textContent = data.price;
            });

            function getCurrentFrame(card) {
                var frameContainer = card.querySelector('.card-image > div');
                if (frameContainer) {
                    var imgs = frameContainer.querySelectorAll('img');
                    for (var i = 0; i < imgs.length; i++) {
                        if (imgs[i].style.visibility === 'visible') return i + 1;
                    }
                }
                return 19;
            }

            var detailBrassFrameImgs = [];
            var detailBrassContainer = null;

            function setupDetailSpin(spinType, startFrame) {
                flyingImg.innerHTML = '';
                detailFrameImgs = [];
                detailBrassFrameImgs = [];
                detailBrassContainer = null;
                detailCurrentFrame = startFrame;
                detailTargetFrame = startFrame;

                var preloaded = window.preloadedSpinImages && window.preloadedSpinImages[spinType];
                if (!preloaded) return;

                for (var i = 0; i < spinFrameCount; i++) {
                    var img = document.createElement('img');
                    img.src = preloaded[i].src;
                    img.style.cssText = 'position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transform: translateY(-5%);';
                    img.style.visibility = (i + 1 === startFrame) ? 'visible' : 'hidden';
                    img.draggable = false;
                    flyingImg.appendChild(img);
                    detailFrameImgs.push(img);
                }

                // Set up brass halo layer on top
                var data = productData[spinType];
                var brassPreloaded = data && data.brassSpin && window.preloadedSpinImages && window.preloadedSpinImages[data.brassSpin];
                if (brassPreloaded) {
                    detailBrassContainer = document.createElement('div');
                    detailBrassContainer.style.cssText = 'position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.3s ease;';
                    for (var i = 0; i < spinFrameCount; i++) {
                        var img = document.createElement('img');
                        img.src = brassPreloaded[i].src;
                        img.style.cssText = 'position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transform: translateY(-5%);';
                        img.style.visibility = (i + 1 === startFrame) ? 'visible' : 'hidden';
                        img.draggable = false;
                        detailBrassContainer.appendChild(img);
                        detailBrassFrameImgs.push(img);
                    }
                    flyingImg.appendChild(detailBrassContainer);
                }
            }

            function setDetailFrame(frame) {
                if (frame === detailCurrentFrame) return;
                if (detailFrameImgs[detailCurrentFrame - 1]) detailFrameImgs[detailCurrentFrame - 1].style.visibility = 'hidden';
                if (detailFrameImgs[frame - 1]) detailFrameImgs[frame - 1].style.visibility = 'visible';
                if (detailBrassFrameImgs[detailCurrentFrame - 1]) detailBrassFrameImgs[detailCurrentFrame - 1].style.visibility = 'hidden';
                if (detailBrassFrameImgs[frame - 1]) detailBrassFrameImgs[frame - 1].style.visibility = 'visible';
                detailCurrentFrame = frame;
            }

            function getDetailFrameFromMouse(e) {
                var rect = flyingImg.getBoundingClientRect();
                var x = e.clientX - rect.left;
                var progress = Math.max(0, Math.min(1, x / rect.width));
                return Math.floor(progress * (spinFrameCount - 1)) + 1;
            }

            function getShortestDirection(from, to) {
                var diff = to - from;
                if (Math.abs(diff) > spinFrameCount / 2) {
                    diff = diff > 0 ? diff - spinFrameCount : diff + spinFrameCount;
                }
                return Math.sign(diff);
            }

            function stepDetailTowardsTarget(now) {
                if (detailCurrentFrame === detailTargetFrame) {
                    detailAnimationId = null;
                    return;
                }
                if (now - detailLastFrameTime >= detailMsPerFrame) {
                    detailLastFrameTime = now;
                    var direction = getShortestDirection(detailCurrentFrame, detailTargetFrame);
                    var newFrame = detailCurrentFrame + direction;
                    if (newFrame < 1) newFrame = spinFrameCount;
                    if (newFrame > spinFrameCount) newFrame = 1;
                    setDetailFrame(newFrame);
                }
                if (detailCurrentFrame !== detailTargetFrame) {
                    detailAnimationId = requestAnimationFrame(stepDetailTowardsTarget);
                } else {
                    detailAnimationId = null;
                }
            }

            function startDetailSpinAnimation() {
                if (!detailAnimationId) {
                    detailLastFrameTime = performance.now();
                    detailAnimationId = requestAnimationFrame(stepDetailTowardsTarget);
                }
            }

            // Mouse spin on detail flying image
            overlay.addEventListener('mousemove', function(e) {
                if (!overlay.classList.contains('active') || detailFrameImgs.length === 0 || isAnimating) return;
                var rect = flyingImg.getBoundingClientRect();
                if (e.clientX >= rect.left && e.clientX <= rect.right && e.clientY >= rect.top && e.clientY <= rect.bottom) {
                    detailTargetFrame = getDetailFrameFromMouse(e);
                    startDetailSpinAnimation();
                }
            });

            // Touch swipe spin on detail flying image (mobile)
            (function() {
                var touchStartX = 0;
                var touchStartFrame = 19;

                flyingImg.addEventListener('touchstart', function(e) {
                    if (!overlay.classList.contains('active') || detailFrameImgs.length === 0 || isAnimating) return;
                    touchStartX = e.touches[0].clientX;
                    touchStartFrame = detailCurrentFrame;
                }, { passive: true });

                flyingImg.addEventListener('touchmove', function(e) {
                    if (!overlay.classList.contains('active') || detailFrameImgs.length === 0 || isAnimating) return;
                    var dx = e.touches[0].clientX - touchStartX;
                    var rect = flyingImg.getBoundingClientRect();
                    var frameDelta = Math.round(dx / rect.width * spinFrameCount);
                    var frame = touchStartFrame + frameDelta;
                    // Wrap around
                    frame = ((frame - 1) % spinFrameCount + spinFrameCount) % spinFrameCount + 1;
                    detailTargetFrame = frame;
                    startDetailSpinAnimation();
                }, { passive: true });
            })();

            function openDetail(card) {
                if (isAnimating) return;
                isAnimating = true;

                var spinType = card.dataset.spin;
                var data = productData[spinType];
                if (!data) { isAnimating = false; return; }

                var cardImage = card.querySelector('.card-image');
                var cardRect = cardImage.getBoundingClientRect();
                var startFrame = getCurrentFrame(card);

                // Reset halo checkbox
                detailHaloCheckbox.checked = false;
                detailHalo.classList.remove('checked');

                // Populate detail info
                detailTitle.textContent = data.title;
                detailDescription.textContent = data.description;
                currentBasePrice = parseInt(data.price.replace('$', ''));
                currentProductData = data;
                if (data.soldOut) {
                    detailPreorder.removeAttribute('href');
                    detailPreorder.innerHTML = '<span>sold out</span><span>' + data.price + '</span>';
                    detailPreorder.classList.add('sold-out');
                    detailEmailField.style.display = '';
                    detailHalo.style.display = 'none';
                } else {
                    detailPreorder.href = data.href;
                    detailPreorder.innerHTML = '<span>pre-order</span><span>' + data.price + '</span>';
                    detailPreorder.classList.remove('sold-out');
                    detailEmailField.style.display = 'none';
                    detailHalo.style.display = '';
                }

                // On mobile, move CTA to fixed container and fly card action bar to it
                if (window.innerWidth <= 768) {
                    detailMobileCta.appendChild(detailHalo);
                    detailMobileCta.appendChild(detailPreorder);
                    detailMobileCta.appendChild(detailEmailField);
                    // Hide gradient background until flying clone lands
                    detailMobileCta.style.transition = 'none';
                    detailMobileCta.style.opacity = '0';
                    // Hide the real preorder button until the flying clone lands
                    detailPreorder.style.opacity = '0';
                    // Hide halo and email field for fade-in after landing
                    if (detailHalo.style.display !== 'none') {
                        detailHalo.style.transition = 'none';
                        detailHalo.style.opacity = '0';
                    }
                    if (detailEmailField.style.display !== 'none') {
                        detailEmailField.style.transition = 'none';
                        detailEmailField.style.opacity = '0';
                    }
                    // Snapshot the card action bar position
                    var cardActionWrapper = card.querySelector('.card-action-wrapper');
                    var actionRect = cardActionWrapper.getBoundingClientRect();
                    // Populate flying CTA with both layouts for crossfade
                    var detailLabel = data.soldOut ? 'sold out' : 'pre-order';
                    detailFlyingCta.style.backgroundColor = '#2a2b2c';
                    detailFlyingCta.innerHTML =
                        '<span class="flying-cta-layer" style="opacity:1;filter:blur(0px)"><span>' + data.price + '</span><span>pre-order</span></span>' +
                        '<span class="flying-cta-layer" style="opacity:0;filter:blur(4px)"><span>' + detailLabel + '</span><span>' + data.price + '</span></span>';
                    // Position at card action bar
                    detailFlyingCta.style.display = '';
                    detailFlyingCta.style.transition = 'none';
                    detailFlyingCta.style.left = actionRect.left + 'px';
                    detailFlyingCta.style.top = actionRect.top + 'px';
                    detailFlyingCta.style.width = actionRect.width + 'px';
                    detailFlyingCta.style.height = actionRect.height + 'px';
                    detailFlyingCta.offsetHeight;
                    // Hide the card action bar
                    cardActionWrapper.style.opacity = '0';
                }

                // Hide card image instantly
                cardImage.style.opacity = '0';

                // Set up spin frames in flying image
                setupDetailSpin(spinType, startFrame);

                // Spin to frame 19 during fly-in, using fly-in curve
                startCurvedSpin(19, 325, flyInCurvePoints);

                // Position flying image at card location
                flyingImg.style.transition = 'none';
                flyingImg.style.left = cardRect.left + 'px';
                flyingImg.style.top = cardRect.top + 'px';
                flyingImg.style.width = cardRect.width + 'px';
                flyingImg.style.height = cardRect.height + 'px';
                flyingImg.style.opacity = '1';

                // Lock scroll
                document.documentElement.style.overflow = 'hidden';

                // Scroll overlay to top on mobile
                if (isMobile) overlay.scrollTop = 0;

                // Reset any leftover scroll-dismiss transforms
                var info = overlay.querySelector('.detail-info');
                info.style.transform = '';

                // Calculate target position
                var isMobile = window.innerWidth <= 768;
                var targetLeft, targetTop, targetWidth, targetHeight;

                if (isMobile) {
                    targetLeft = 0;
                    targetTop = 60;
                    targetWidth = window.innerWidth;
                    targetHeight = window.innerWidth;
                } else {
                    targetWidth = 600;
                    targetHeight = 600 * (cardRect.height / cardRect.width);
                    targetLeft = (window.innerWidth / 2) + 40 - 80;
                    targetTop = (window.innerHeight - targetHeight) / 2 + 20;
                }

                // Set info fly-in direction based on card position (desktop only)
                if (!isMobile) {
                    var dX = ((cardRect.left + cardRect.width / 2) - (targetLeft + targetWidth / 2)) * 0.4;
                    var dY = (cardRect.top + cardRect.height / 2) - (targetTop + targetHeight / 2);
                    var d = Math.sqrt(dX * dX + dY * dY) || 1;
                    var infoFlyScale = 400;
                    lastInfoFlyX = dX / d * infoFlyScale;
                    lastInfoFlyY = dY / d * infoFlyScale;
                    info.style.transition = 'none';
                    info.style.transform = 'translate(' + lastInfoFlyX + 'px, ' + lastInfoFlyY + 'px) scale(0.8)';
                    info.offsetHeight;
                    info.style.transition = '';
                }

                // Activate overlay
                overlay.classList.add('active');
                // Clear inline transform so CSS .active rule's translate(0,0) takes over and transition fires
                if (!isMobile) info.style.transform = '';

                // Force reflow
                flyingImg.offsetHeight;

                // Animate flying image to target
                var flyInCurve = 'cubic-bezier(' + flyInCurvePoints.join(', ') + ')';
                flyingImg.style.transition = 'left 0.325s ' + flyInCurve + ', top 0.325s ' + flyInCurve + ', width 0.325s ' + flyInCurve + ', height 0.325s ' + flyInCurve;
                flyingImg.style.left = targetLeft + 'px';
                flyingImg.style.top = targetTop + 'px';
                flyingImg.style.width = targetWidth + 'px';
                flyingImg.style.height = targetHeight + 'px';

                // Animate flying CTA to bottom pre-order position (mobile)
                if (isMobile) {
                    // Real button is now laid out (opacity:0) — read its target rect
                    var ctaTargetRect = detailPreorder.getBoundingClientRect();
                    var ctaTrans = 'left 0.325s ' + flyInCurve + ', top 0.325s ' + flyInCurve + ', width 0.325s ' + flyInCurve + ', height 0.325s ' + flyInCurve + ', background-color 0.325s ' + flyInCurve;
                    detailFlyingCta.style.transition = ctaTrans;
                    detailFlyingCta.style.left = ctaTargetRect.left + 'px';
                    detailFlyingCta.style.top = ctaTargetRect.top + 'px';
                    detailFlyingCta.style.width = ctaTargetRect.width + 'px';
                    detailFlyingCta.style.height = ctaTargetRect.height + 'px';
                    detailFlyingCta.style.backgroundColor = data.soldOut ? '#999' : '#2a2b2c';
                    // Crossfade: card layout out, detail layout in
                    var layers = detailFlyingCta.querySelectorAll('.flying-cta-layer');
                    if (layers.length === 2) {
                        var layerTrans = 'opacity 0.325s ' + flyInCurve + ', filter 0.325s ' + flyInCurve;
                        layers[0].style.transition = layerTrans;
                        layers[1].style.transition = layerTrans;
                        layers[0].style.opacity = '0';
                        layers[0].style.filter = 'blur(4px)';
                        layers[1].style.opacity = '1';
                        layers[1].style.filter = 'blur(0px)';
                    }
                    // Fade in gradient background during flight
                    detailMobileCta.style.transition = 'opacity 0.325s ' + flyInCurve;
                    detailMobileCta.style.opacity = '1';
                }

                // Push sections out of the way with blur + fade
                if (isMobile) {
                    var pushTransition = 'opacity 0.4s ' + flyInCurve + ', filter 0.4s ' + flyInCurve;
                    mainContent.style.transition = pushTransition;
                    mainContent.style.opacity = '0';
                    mainContent.style.filter = 'blur(6px)';
                    productSection.style.transition = pushTransition;
                    productSection.style.opacity = '0';
                    productSection.style.filter = 'blur(6px)';
                    pageFooter.style.transition = pushTransition;
                    pageFooter.style.opacity = '0';
                    pageFooter.style.filter = 'blur(6px)';
                } else {
                    var pushTransition = 'transform 0.325s ' + flyInCurve + ', opacity 0.325s ' + flyInCurve + ', filter 0.325s ' + flyInCurve;
                    mainContent.style.transition = pushTransition;
                    mainContent.style.transform = 'translateY(' + (-sectionPushDistance) + 'px)';
                    mainContent.style.opacity = '0';
                    mainContent.style.filter = 'blur(12px)';
                    productSection.style.transition = pushTransition;
                    productSection.style.transform = 'translateY(' + sectionPushDistance + 'px)';
                    productSection.style.opacity = '0';
                    productSection.style.filter = 'blur(12px)';
                    pageFooter.style.transition = pushTransition;
                    pageFooter.style.transform = 'translateY(' + sectionPushDistance + 'px)';
                    pageFooter.style.opacity = '0';
                    pageFooter.style.filter = 'blur(12px)';
                }

                detailAspectRatio = cardRect.height / cardRect.width;
                activeCard = card;
                setTimeout(function() {
                    isAnimating = false;
                    // On mobile, switch to flow layout after animation and fade info in
                    if (isMobile) {
                        flyingImg.style.transition = 'none';
                        flyingImg.style.left = '';
                        flyingImg.style.top = '';
                        flyingImg.style.width = '';
                        flyingImg.style.height = '';
                        flyingImg.classList.add('mobile-flow');
                        // Landing: snap real button visible (bypass its CSS opacity transition)
                        detailPreorder.style.transition = 'none';
                        detailPreorder.style.opacity = '';
                        detailPreorder.offsetHeight;
                        detailPreorder.style.transition = '';
                        // Fade in halo if visible
                        if (detailHalo.style.display !== 'none') {
                            detailHalo.offsetHeight;
                            detailHalo.style.transition = 'opacity 0.3s ease';
                            detailHalo.style.opacity = '';
                        }
                        // Fade in email field if visible
                        if (detailEmailField.style.display !== 'none') {
                            detailEmailField.offsetHeight;
                            detailEmailField.style.transition = 'opacity 0.3s ease';
                            detailEmailField.style.opacity = '';
                        }
                        requestAnimationFrame(function() {
                            detailFlyingCta.style.display = 'none';
                        });
                    }
                }, 325);
            }

            var detailAspectRatio = 1;

            window.addEventListener('resize', function() {
                if (!overlay.classList.contains('active') || isAnimating) return;
                var isMobile = window.innerWidth <= 768;
                // Remove mobile-flow if resized to desktop
                if (!isMobile && flyingImg.classList.contains('mobile-flow')) {
                    flyingImg.classList.remove('mobile-flow');
                }
                // On mobile with flow layout, CSS handles positioning
                if (isMobile && flyingImg.classList.contains('mobile-flow')) return;
                var newLeft, newTop, newWidth, newHeight;
                if (isMobile) {
                    newLeft = 0;
                    newTop = 60;
                    newWidth = window.innerWidth;
                    newHeight = window.innerWidth;
                } else {
                    newWidth = 600;
                    newHeight = 600 * detailAspectRatio;
                    newLeft = (window.innerWidth / 2) + 40 - 80;
                    newTop = (window.innerHeight - newHeight) / 2 + 20;
                }
                flyingImg.style.transition = 'none';
                flyingImg.style.left = newLeft + 'px';
                flyingImg.style.top = newTop + 'px';
                flyingImg.style.width = newWidth + 'px';
                flyingImg.style.height = newHeight + 'px';
            });

            function closeDetail(overrideFrame) {
                if (isAnimating || !activeCard) return;
                isAnimating = true;

                // Snap to steel halo (no brass) for flyout
                if (detailBrassContainer) {
                    detailBrassContainer.style.transition = 'none';
                    detailBrassContainer.style.opacity = '0';
                }

                var isMobile = window.innerWidth <= 768;

                // On mobile, remove flow class and snapshot position for fly-out animation
                if (isMobile) {
                    var flyRect = flyingImg.getBoundingClientRect();
                    flyingImg.classList.remove('mobile-flow');
                    flyingImg.style.transition = 'none';
                    flyingImg.style.left = flyRect.left + 'px';
                    flyingImg.style.top = flyRect.top + 'px';
                    flyingImg.style.width = flyRect.width + 'px';
                    flyingImg.style.height = flyRect.height + 'px';
                    flyingImg.offsetHeight; // force reflow
                }

                var cardImage = activeCard.querySelector('.card-image');
                var cardRect = cardImage.getBoundingClientRect();
                var landFrame = typeof overrideFrame === 'number' ? overrideFrame : 19;
                startCurvedSpin(landFrame, 513, flyOutCurvePoints);

                // Reset cursor to default state
                var cursorEl = document.querySelector('.custom-cursor');
                if (cursorEl && cursorEl._resetToDefault) cursorEl._resetToDefault();

                // On mobile, fly CTA back to card action bar position
                if (isMobile) {
                    var cardActionWrapper = activeCard.querySelector('.card-action-wrapper');
                    var actionRect = cardActionWrapper.getBoundingClientRect();
                    // Fade out gradient background
                    detailMobileCta.style.transition = 'opacity 0.3s ease';
                    detailMobileCta.style.opacity = '0';
                    // Snapshot current preorder position as start
                    var preorderRect = detailPreorder.getBoundingClientRect();
                    detailPreorder.style.opacity = '0';
                    // Read label/price from current preorder spans
                    var preorderSpans = detailPreorder.querySelectorAll('span');
                    var labelText = preorderSpans[0] ? preorderSpans[0].textContent : '';
                    var priceText = preorderSpans[1] ? preorderSpans[1].textContent : '';
                    var isSoldOut = detailPreorder.classList.contains('sold-out');
                    detailFlyingCta.style.backgroundColor = isSoldOut ? '#999' : '#2a2b2c';
                    // Card layout (price left, "pre-order" right) hidden; detail layout (label left, price right) visible
                    detailFlyingCta.innerHTML =
                        '<span class="flying-cta-layer" style="opacity:0;filter:blur(4px)"><span>' + priceText + '</span><span>pre-order</span></span>' +
                        '<span class="flying-cta-layer" style="opacity:1;filter:blur(0px)"><span>' + labelText + '</span><span>' + priceText + '</span></span>';
                    detailFlyingCta.style.display = '';
                    detailFlyingCta.style.transition = 'none';
                    detailFlyingCta.style.left = preorderRect.left + 'px';
                    detailFlyingCta.style.top = preorderRect.top + 'px';
                    detailFlyingCta.style.width = preorderRect.width + 'px';
                    detailFlyingCta.style.height = preorderRect.height + 'px';
                    detailFlyingCta.offsetHeight;
                }

                // Remove active (CSS transitions handle bg, info, back fadeout)
                overlay.classList.remove('active');

                // On mobile, animate flying CTA to card action bar
                if (isMobile) {
                    var flyOutCurveStr = 'cubic-bezier(' + flyOutCurvePoints.join(', ') + ')';
                    var cardActionWrapper = activeCard.querySelector('.card-action-wrapper');
                    var actionRect = cardActionWrapper.getBoundingClientRect();
                    var ctaOutTrans = 'left 0.513s ' + flyOutCurveStr + ', top 0.513s ' + flyOutCurveStr + ', width 0.513s ' + flyOutCurveStr + ', height 0.513s ' + flyOutCurveStr + ', background-color 0.513s ' + flyOutCurveStr;
                    detailFlyingCta.style.transition = ctaOutTrans;
                    detailFlyingCta.style.left = actionRect.left + 'px';
                    detailFlyingCta.style.top = actionRect.top + 'px';
                    detailFlyingCta.style.width = actionRect.width + 'px';
                    detailFlyingCta.style.height = actionRect.height + 'px';
                    detailFlyingCta.style.backgroundColor = '#2a2b2c';
                    // Crossfade: detail layout out, card layout in
                    var layers = detailFlyingCta.querySelectorAll('.flying-cta-layer');
                    if (layers.length === 2) {
                        var layerTrans = 'opacity 0.513s ' + flyOutCurveStr + ', filter 0.513s ' + flyOutCurveStr;
                        layers[0].style.transition = layerTrans;
                        layers[1].style.transition = layerTrans;
                        layers[0].style.opacity = '1';
                        layers[0].style.filter = 'blur(0px)';
                        layers[1].style.opacity = '0';
                        layers[1].style.filter = 'blur(4px)';
                    }
                }

                // Fly info text back toward card direction (desktop only)
                if (!isMobile) {
                    var info = overlay.querySelector('.detail-info');
                    info.style.transform = 'translate(' + (lastInfoFlyX * 0.15) + 'px, ' + (lastInfoFlyY * 0.15) + 'px)';
                    info.style.filter = 'blur(12px)';
                }

                // Ensure flying image stays visible during flyback
                flyingImg.style.opacity = '1';

                // Animate flying image back to card
                var flyOutCurve = 'cubic-bezier(' + flyOutCurvePoints.join(', ') + ')';
                flyingImg.style.transition = 'left 0.513s ' + flyOutCurve + ', top 0.513s ' + flyOutCurve + ', width 0.513s ' + flyOutCurve + ', height 0.513s ' + flyOutCurve;
                flyingImg.style.left = cardRect.left + 'px';
                flyingImg.style.top = (cardRect.top - (isMobile ? 0 : sectionPushDistance)) + 'px';
                flyingImg.style.width = cardRect.width + 'px';
                flyingImg.style.height = cardRect.height + 'px';

                // Bring sections back with blur + fade
                if (isMobile) {
                    var sectionPushOutCurve = 'cubic-bezier(' + sectionPushOutCurvePoints.join(', ') + ')';
                    var pushTransition = 'opacity 0.375s ' + sectionPushOutCurve + ' 0.1s, filter 0.375s ' + sectionPushOutCurve + ' 0.1s';
                    mainContent.style.transition = pushTransition;
                    mainContent.style.opacity = '';
                    mainContent.style.filter = '';
                    productSection.style.transition = pushTransition;
                    productSection.style.opacity = '';
                    productSection.style.filter = '';
                    var footerPushTransition = 'opacity 0.5s ' + sectionPushOutCurve + ', filter 0.5s ' + sectionPushOutCurve;
                    pageFooter.style.transition = footerPushTransition;
                    pageFooter.style.opacity = '';
                    pageFooter.style.filter = '';
                } else {
                    var sectionPushOutCurve = 'cubic-bezier(' + sectionPushOutCurvePoints.join(', ') + ')';
                    var pushTransition = 'transform 0.3s ' + sectionPushOutCurve + ' 0.1s, opacity 0.3s ' + sectionPushOutCurve + ' 0.1s, filter 0.3s ' + sectionPushOutCurve + ' 0.1s';
                    mainContent.style.transition = pushTransition;
                    mainContent.style.transform = '';
                    mainContent.style.opacity = '';
                    mainContent.style.filter = '';
                    productSection.style.transition = pushTransition;
                    productSection.style.transform = '';
                    productSection.style.opacity = '';
                    productSection.style.filter = '';
                    var footerPushTransition = 'transform 0.4s ' + sectionPushOutCurve + ', opacity 0.4s ' + sectionPushOutCurve + ', filter 0.4s ' + sectionPushOutCurve;
                    pageFooter.style.transition = footerPushTransition;
                    pageFooter.style.transform = '';
                    pageFooter.style.opacity = '';
                    pageFooter.style.filter = '';
                }

                // When fly-back lands, reveal card image and hide flying image
                setTimeout(function() {
                    if (detailAnimationId) {
                        cancelAnimationFrame(detailAnimationId);
                        detailAnimationId = null;
                    }
                    // Sync card to landing frame before revealing
                    if (activeCard && activeCard._setSpinFrame) activeCard._setSpinFrame(landFrame);
                    var imgs = cardImage.querySelectorAll('img');
                    imgs.forEach(function(img) { img.style.transition = 'none'; });
                    cardImage.style.opacity = '';
                    flyingImg.style.opacity = '0';
                    requestAnimationFrame(function() {
                        imgs.forEach(function(img) { img.style.transition = ''; });
                    });
                    mainContent.style.transition = '';
                    mainContent.style.filter = '';
                    mainContent.style.opacity = '';
                    productSection.style.transition = '';
                    productSection.style.filter = '';
                    productSection.style.opacity = '';
                    pageFooter.style.transition = '';
                    pageFooter.style.filter = '';
                    pageFooter.style.opacity = '';
                    document.documentElement.style.overflow = '';
                    flyingImg.style.position = '';
                    flyingImg.classList.remove('mobile-flow');
                    var info = overlay.querySelector('.detail-info');
                    info.style.transform = '';
                    info.style.filter = '';
                    // Clean up flying CTA: restore card action bar first, then hide clone next frame
                    detailPreorder.style.opacity = '';
                    detailMobileCta.style.transition = '';
                    detailMobileCta.style.opacity = '';
                    if (activeCard) {
                        var cardActionW = activeCard.querySelector('.card-action-wrapper');
                        if (cardActionW) cardActionW.style.opacity = '';
                    }
                    requestAnimationFrame(function() {
                        detailFlyingCta.style.display = 'none';
                    });
                    // Reset halo and email field inline styles
                    detailHalo.style.transition = '';
                    detailHalo.style.opacity = '';
                    detailEmailField.style.transition = '';
                    detailEmailField.style.opacity = '';
                    // Move CTA back to detail-info-inner
                    detailInfoInner.appendChild(detailHalo);
                    detailInfoInner.appendChild(detailPreorder);
                    detailInfoInner.appendChild(detailEmailField);
                    detailFrameImgs = [];
                    activeCard = null;
                    isAnimating = false;
                    scrollLocked = true;
                    setTimeout(function() { scrollLocked = false; }, 500);
                }, 513);
            }

            // Click handlers for product cards
            document.querySelectorAll('.product-card').forEach(function(card) {
                card.addEventListener('click', function() {
                    openDetail(card);
                });
            });

            // Back button
            detailBack.addEventListener('click', closeDetail);

            // Halo checkbox toggle
            detailHaloCheckbox.addEventListener('change', function() {
                detailHalo.classList.toggle('checked', this.checked);
                var price = this.checked ? currentBasePrice + 40 : currentBasePrice;
                var priceSpan = detailPreorder.querySelector('span:last-child');
                if (priceSpan) priceSpan.textContent = '$' + price;
                // Swap pre-order link and update description
                if (currentProductData) {
                    detailPreorder.href = this.checked ? (currentProductData.brassHref || currentProductData.href) : currentProductData.href;
                    var desc = currentProductData.description;
                    if (this.checked) {
                        desc = desc.replace('316l stainless steel halo', '316l stainless steel + brass halo');
                    }
                    detailDescription.textContent = desc;
                }
                // Crossfade to/from brass halo spin
                if (detailBrassContainer) {
                    detailBrassContainer.style.opacity = this.checked ? '1' : '0';
                }
            });

            // Click blank space to close (desktop only)
            var emailWasFocused = false;
            overlay.addEventListener('mousedown', function(e) {
                emailWasFocused = document.activeElement === detailEmailField;
            });
            overlay.addEventListener('click', function(e) {
                if (window.innerWidth <= 768) return;
                if (!overlay.classList.contains('active')) return;
                if (e.target.closest('.detail-preorder, .detail-email, .detail-back, .detail-halo')) return;
                if (emailWasFocused) { emailWasFocused = false; return; }
                closeDetail();
            });

            // ESC key
            document.addEventListener('keydown', function(e) {
                if (e.key === 'Escape' && overlay.classList.contains('active')) {
                    closeDetail();
                }
            });

            // Scroll-to-close
            document.addEventListener('wheel', function(e) {
                if (window.innerWidth <= 768) return;
                if (overlay.classList.contains('active') || isAnimating || scrollLocked) {
                    e.preventDefault();
                }
            }, { passive: false });

            var scrollDismissY = 0;
            var scrollDismissThreshold = 150;
            var isScrollDismissing = false;

            overlay.addEventListener('wheel', function(e) {
                if (window.innerWidth <= 768) return;
                if (!overlay.classList.contains('active') || isAnimating) return;
                if (e.deltaY <= 0 && scrollDismissY <= 0) return; // only scroll down dismisses

                e.preventDefault();
                scrollDismissY = Math.max(0, scrollDismissY + e.deltaY);

                var progress = Math.min(1, scrollDismissY / scrollDismissThreshold);
                var translateY = scrollDismissY * 0.5;
                var opacity = 1 - progress * 0.6;
                var blur = progress * 4;


                var infoTranslateY = progress * 30;
                var infoOpacity = 1 - progress;
                var info = overlay.querySelector('.detail-info');
                info.style.transition = 'none';
                info.style.opacity = infoOpacity;
                info.style.filter = 'blur(' + blur + 'px)';
                info.style.transform = 'translateY(' + infoTranslateY + 'px)';

                var back = overlay.querySelector('.detail-back');
                back.style.transition = 'none';
                back.style.opacity = 0.5 * (1 - progress);

                var bg = overlay.querySelector('.detail-bg');
                bg.style.transition = 'none';
                bg.style.opacity = opacity;

                if (progress >= 1) {
                    // Reset inline styles before close, keep flying image visible
                    flyingImg.style.transform = '';
                    flyingImg.style.opacity = '1';
                    info.style.transition = '';
                    info.style.opacity = '';
                    info.style.filter = '';
                    back.style.transition = '';
                    back.style.opacity = '';
                    bg.style.transition = '';
                    bg.style.opacity = '';
                    scrollDismissY = 0;
                    // Only compute mouse-position frame if mouse is over the card
                    var cImg = activeCard.querySelector('.card-image');
                    var cRect = cImg.getBoundingClientRect();
                    if (lastMouseX >= cRect.left && lastMouseX <= cRect.right &&
                        lastMouseY >= cRect.top && lastMouseY <= cRect.bottom) {
                        var mProgress = Math.max(0, Math.min(1, (lastMouseX - cRect.left) / cRect.width));
                        var scrollLandFrame = Math.floor(mProgress * (spinFrameCount - 1)) + 1;
                        closeDetail(scrollLandFrame);
                    } else {
                        closeDetail();
                    }
                }
            }, { passive: false });

            // Snap back on scroll stop
            var scrollSnapTimer = null;
            overlay.addEventListener('wheel', function(e) {
                if (window.innerWidth <= 768) return;
                if (!overlay.classList.contains('active') || isAnimating) return;
                clearTimeout(scrollSnapTimer);
                scrollSnapTimer = setTimeout(function() {
                    if (scrollDismissY > 0 && scrollDismissY < scrollDismissThreshold) {
                        // Snap back — keep flying image visible
                        flyingImg.style.transition = 'transform 0.3s ease';
                        flyingImg.style.transform = '';

                        var info = overlay.querySelector('.detail-info');
                        info.style.transition = 'opacity 0.3s ease, filter 0.3s ease, transform 0.3s ease';
                        info.style.opacity = '';
                        info.style.filter = '';
                        info.style.transform = '';

                        var back = overlay.querySelector('.detail-back');
                        back.style.transition = 'opacity 0.3s ease';
                        back.style.opacity = '';

                        var bg = overlay.querySelector('.detail-bg');
                        bg.style.transition = 'opacity 0.3s ease';
                        bg.style.opacity = '';

                        scrollDismissY = 0;

                        setTimeout(function() {
                            flyingImg.style.transition = '';
                            info.style.transition = '';
                            back.style.transition = '';
                            bg.style.transition = '';
                        }, 300);
                    }
                }, 150);
            });
        })();
    </script>

    <script>
        // Custom cursor
        (function() {
            var hp = 0.0;
            var hovering = false;

            var startTransformX = -20.0;
            var startTransformY = -20.0;
            var startWidth = 40.0;
            var startHeight = 40.0;
            var startBorderRadius = 20.0;

            var currentTransformX = -20.0;
            var currentTransformY = -20.0;
            var currentWidth = 40.0;
            var currentHeight = 40.0;
            var currentBorderRadius = 20.0;

            var targetTransformX = -20.0;
            var targetTransformY = -20.0;
            var targetWidth = 40.0;
            var targetHeight = 40.0;
            var targetBorderRadius = 20.0;

            var elementStartTransformX = 0.0;
            var elementStartTransformY = 0.0;
            var elementCurrentTransformX = 0.0;
            var elementCurrentTransformY = 0.0;
            var elementTargetTransformX = 0.0;
            var elementTargetTransformY = 0.0;

            var prevHoveredElement = null;
            const hTickCount = 18;

            function cursorEase(t) {
                // cubic-bezier(0.38, 0.05, 0, 1) — matches fly-in curve
                if (t <= 0) return 0;
                if (t >= 1) return 1;
                var lo = 0, hi = 1, mid;
                for (var i = 0; i < 20; i++) {
                    mid = (lo + hi) / 2;
                    var x = 3 * 0.38 * mid * (1 - mid) * (1 - mid) + 3 * 0 * mid * mid * (1 - mid) + mid * mid * mid;
                    if (x < t) lo = mid; else hi = mid;
                }
                mid = (lo + hi) / 2;
                return 3 * 0.05 * mid * (1 - mid) * (1 - mid) + 3 * 1 * mid * mid * (1 - mid) + mid * mid * mid;
            }

            const cursor = document.querySelector('.custom-cursor');
            if (!cursor) return;

            cursor.classList.add('cursor-hide');

            function updateCursor() {
                const now = performance.now();
                const deltaTime = (now - (window.lastCursorFrameTime || now)) / 1000;
                window.lastCursorFrameTime = now;
                const tickAmount = deltaTime * 60;
                hp = Math.min(1.0, hp + (tickAmount / hTickCount));
                const hpEase = cursorEase(hp);

                currentTransformX = startTransformX + (targetTransformX - startTransformX) * hpEase;
                currentTransformY = startTransformY + (targetTransformY - startTransformY) * hpEase;
                currentWidth = startWidth + (targetWidth - startWidth) * hpEase;
                currentHeight = startHeight + (targetHeight - startHeight) * hpEase;
                currentBorderRadius = startBorderRadius + (targetBorderRadius - startBorderRadius) * hpEase;

                cursor.style.transform = `translate(${currentTransformX}px, ${currentTransformY}px)`;
                cursor.style.width = `${currentWidth}px`;
                cursor.style.height = `${currentHeight}px`;
                cursor.style.borderRadius = `${currentBorderRadius}px`;

                elementCurrentTransformX = elementStartTransformX + (elementTargetTransformX - elementStartTransformX) * hpEase;
                elementCurrentTransformY = elementStartTransformY + (elementTargetTransformY - elementStartTransformY) * hpEase;

                if (prevHoveredElement !== null && prevHoveredElement instanceof Element && window.innerWidth > 768) {
                    if (!hovering && hp >= 1) {
                        prevHoveredElement.style.transform = '';
                        prevHoveredElement = null;
                        elementCurrentTransformX = 0;
                        elementCurrentTransformY = 0;
                    } else {
                        prevHoveredElement.style.transform = `translate(${elementCurrentTransformX}px, ${elementCurrentTransformY}px)`;
                    }
                }

                requestAnimationFrame(updateCursor);
            }

            requestAnimationFrame(updateCursor);

            var trailContainer = null;
            document.addEventListener('mousemove', (e) => {
                if (window.innerWidth <= 768) return;
                if (!trailContainer) trailContainer = document.querySelector('.glitch-mouse-container');
                cursor.style.left = `${e.clientX}px`;
                cursor.style.top = `${e.clientY}px`;

                let hoveredElement = document.elementFromPoint(e.clientX, e.clientY);
                while (hoveredElement && !hoveredElement.classList.contains('cursor-hover')) {
                    hoveredElement = hoveredElement.parentElement;
                }

                if (hoveredElement && hoveredElement.classList.contains('cursor-hover')) {
                    if (!hovering) {
                        hovering = true;
                        if (trailContainer) trailContainer.style.display = 'none';
                        hp = 0.0;
                        startTransformX = currentTransformX;
                        startTransformY = currentTransformY;
                        startWidth = currentWidth;
                        startHeight = currentHeight;
                        startBorderRadius = currentBorderRadius;
                        elementStartTransformX = elementCurrentTransformX;
                        elementStartTransformY = elementCurrentTransformY;
                    }

                    // Clear transform on previous element when switching to a different one
                    if (prevHoveredElement && prevHoveredElement !== hoveredElement) {
                        prevHoveredElement.style.transform = '';
                        elementCurrentTransformX = 0;
                        elementCurrentTransformY = 0;
                        elementStartTransformX = 0;
                        elementStartTransformY = 0;
                    }

                    const rect = hoveredElement.getBoundingClientRect();
                    var isPreorder = hoveredElement.classList.contains('detail-preorder');
                    var isHalo = hoveredElement.classList.contains('detail-halo');
                    var isSquare = isPreorder || isHalo;
                    var isBack = hoveredElement.classList.contains('detail-back');
                    var outsetX = isBack ? 7 : 7;
                    var outsetY = isBack ? 7 : 5;
                    const outsetRect = {
                        left: rect.left - outsetX,
                        top: rect.top - outsetY,
                        width: rect.width + outsetX * 2,
                        height: rect.height + outsetY * 2
                    };
                    var cursorFactor = isSquare ? 0.95 : 0.9;
                    var centerFactor = isSquare ? 0.05 : 0.1;
                    var elemFactor = isSquare ? 0.05 : 0.1;
                    targetTransformX = ((outsetRect.left - e.clientX) * cursorFactor) + (-0.5 * outsetRect.width * centerFactor);
                    targetTransformY = ((outsetRect.top - e.clientY) * cursorFactor) + (-0.5 * outsetRect.height * centerFactor);
                    targetWidth = outsetRect.width;
                    targetHeight = outsetRect.height;
                    targetBorderRadius = isSquare ? 0 : isBack ? Math.max(outsetRect.width, outsetRect.height) / 2 : 8;

                    const hoveredElementCenterX = outsetRect.left + outsetRect.width / 2;
                    const hoveredElementCenterY = outsetRect.top + outsetRect.height / 2;
                    elementTargetTransformX = (e.clientX - hoveredElementCenterX) * elemFactor;
                    elementTargetTransformY = (e.clientY - hoveredElementCenterY) * elemFactor;

                    prevHoveredElement = hoveredElement;
                    cursor.classList.add('cursor-small');
                } else {
                    if (hovering) {
                        hovering = false;
                        if (trailContainer) trailContainer.style.display = '';
                        hp = 0.0;
                        startTransformX = currentTransformX;
                        startTransformY = currentTransformY;
                        startWidth = currentWidth;
                        startHeight = currentHeight;
                        startBorderRadius = currentBorderRadius;
                        elementStartTransformX = elementCurrentTransformX;
                        elementStartTransformY = elementCurrentTransformY;
                    }

                    targetTransformX = -20;
                    targetTransformY = -20;
                    targetWidth = 40;
                    targetHeight = 40;
                    targetBorderRadius = 20;
                    elementTargetTransformX = 0.0;
                    elementTargetTransformY = 0.0;

                    cursor.classList.remove('cursor-small');
                }
            });

            document.documentElement.addEventListener('mouseout', (e) => {
                if (e.relatedTarget == null) {
                    cursor.classList.add('cursor-hide');
                }
            });

            document.documentElement.addEventListener('mouseover', (e) => {
                if (e.relatedTarget == null) {
                    cursor.classList.remove('cursor-hide');
                }
            });

            cursor._resetToDefault = function() {
                if (hovering) {
                    hovering = false;
                    hp = 0.0;
                    startTransformX = currentTransformX;
                    startTransformY = currentTransformY;
                    startWidth = currentWidth;
                    startHeight = currentHeight;
                    startBorderRadius = currentBorderRadius;
                    elementStartTransformX = elementCurrentTransformX;
                    elementStartTransformY = elementCurrentTransformY;
                }
                targetTransformX = -20;
                targetTransformY = -20;
                targetWidth = 40;
                targetHeight = 40;
                targetBorderRadius = 20;
                elementTargetTransformX = 0.0;
                elementTargetTransformY = 0.0;
                if (prevHoveredElement) {
                    prevHoveredElement.style.transform = '';
                    prevHoveredElement = null;
                }
                cursor.classList.remove('cursor-small');
                cursor.classList.remove('cursor-fade');
            };

            const detailEmail = document.querySelector('.detail-email');
            if (detailEmail) {
                detailEmail.addEventListener('focus', () => {
                    cursor.classList.add('cursor-fade');
                });
                detailEmail.addEventListener('blur', () => {
                    cursor.classList.remove('cursor-fade');
                });
                detailEmail.addEventListener('mouseleave', () => {
                    cursor.classList.remove('cursor-fade');
                });
                detailEmail.addEventListener('mouseenter', () => {
                    if (document.activeElement === detailEmail) {
                        cursor.classList.add('cursor-fade');
                    }
                });

                // Email subscribe on Enter
                async function submitEmail(email) {
                    if (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1') {
                        return { ok: true };
                    }
                    var apiUrl = window.location.origin + '/api/subscribe';
                    var response = await fetch(apiUrl, {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify({ email: email })
                    });
                    var data = null;
                    try { data = await response.json(); } catch (_) {}
                    if (!response.ok) {
                        var msg = (data && (data.error || data.message)) || 'Subscription failed';
                        throw new Error(msg);
                    }
                    return data;
                }

                function isValidEmail(email) {
                    return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
                }

                detailEmail.addEventListener('keypress', function(e) {
                    if (e.key === 'Enter') {
                        var email = this.value;
                        if (!isValidEmail(email)) {
                            detailEmail.style.borderColor = 'red';
                            detailEmail.style.backgroundColor = '#fff0f0';
                            setTimeout(function() { detailEmail.style.borderColor = ''; detailEmail.style.backgroundColor = ''; }, 1000);
                            return;
                        }

                        detailEmail.style.borderColor = '#2a2b2c';
                        this.blur();
                        detailEmail.disabled = true;

                        submitEmail(email)
                            .then(function() {
                                detailEmail.style.transition = 'opacity 0.5s ease, border-color 0.3s ease';
                                detailEmail.style.opacity = '0';
                                setTimeout(function() {
                                    detailEmail.value = '';
                                    detailEmail.placeholder = 'check your email to confirm!';
                                    detailEmail.style.transition = 'none';
                                    detailEmail.style.borderColor = '';
                                    detailEmail.offsetHeight;
                                    detailEmail.style.transition = 'opacity 0.5s ease, border-color 0.3s ease';
                                    detailEmail.style.opacity = '1';
                                    setTimeout(function() {
                                        detailEmail.style.opacity = '0';
                                        setTimeout(function() {
                                            detailEmail.placeholder = 'enter email for updates';
                                            detailEmail.style.opacity = '1';
                                            setTimeout(function() {
                                                detailEmail.disabled = false;
                                                detailEmail.style.borderColor = '';
                                                detailEmail.style.opacity = '';
                                                detailEmail.style.transition = '';
                                            }, 500);
                                        }, 500);
                                    }, 5000);
                                }, 500);
                            })
                            .catch(function(err) {
                                console.warn('Email submit failed:', err);
                                detailEmail.disabled = false;
                                detailEmail.style.borderColor = 'red';
                                detailEmail.style.backgroundColor = '#fff0f0';
                                setTimeout(function() { detailEmail.style.borderColor = ''; detailEmail.style.backgroundColor = ''; }, 1000);
                            });
                    }
                });
            }
        })();
    </script>
    <script>var DEBUG_CANVAS = false;</script>
    <script>if (DEBUG_CANVAS) document.write('<script src="canvas_transform_debug.js"><\/script>');</script>
</body>
</html>