<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>bash.org.ru - Цитатник Рунета</title>
        <link rel="apple-touch-icon" sizes="180x180" href="/favicon-180x180.png">
        <link rel="apple-touch-icon" sizes="167x167" href="/favicon-167x167.png">
        <link rel="apple-touch-icon" sizes="152x152" href="/favicon-152x152.png">
        <link rel="apple-touch-icon" href="/favicon.png">
        <style>
            body {
                background: white;
                margin: 0;
                padding: 0;
                overflow: hidden;
            }

            img {
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
                -webkit-user-drag: none;
                -webkit-touch-callout: none;
                pointer-events: none;
            }

            #page-image {
                position: fixed;
                top: 0;
                left: 50%;
                transform: translateX(-50%);
                width: 760px;
                height: auto;
                z-index: 1;
            }

            @media (max-width: 768px) {
                #page-image {
                    width: 100vw;
                    left: 0;
                    transform: none;
                }
            }

            #animation-stage {
                position: fixed;
                top: 0;
                left: 0;
                width: 100vw;
                height: 100vh;
                display: flex;
                align-items: center;
                justify-content: center;
                z-index: 1000;
            }

            .asset {
                position: absolute;
            }

            #bg-main {
                z-index: 100;
                height: 80vh;
                height: 80dvh;
                width: auto;
                opacity: 0;
            }

            #bg-beams {
                z-index: 200;
                height: 80vh;
                height: 80dvh;
                width: auto;
                transform: translateX(1%);
                opacity: 0;
            }

            #lena-cat-container {
                position: relative;
                z-index: 300;
                transform: translateX(-10%);
                opacity: 0;
            }

            #lena-cat {
                z-index: 300;
                height: 25vh;
                height: 25dvh; 
                width: auto;
            }
            #spark-tl {
                height: 2vh;
                height: 2dvh;
                transform: translate(-500%, -400%);
            }

            #spark-bl {
                height: 4vh;
                height: 4dvh;
                transform: translate(-250%, -125%);
            }            

            #spark-tr {
                height: 2.25vh;
                height: 2.25dvh;
                transform: translate(650%, -550%);
            }

            #spark-br {
                height: 3.5vh;
                height: 3.5dvh;
                transform: translate(350%, -300%);
            }

            #lena-label {
                z-index: 310;
                height: 8vh;
                height: 8dvh;
                width: auto;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-5%, -250%);
            }

            #darkrider {
                z-index: 400;
                height: 60vh;
                height: 60dvh;
                width: auto;
                position: fixed;
                bottom: 0;
                right: 0;
                transform: translateX(12%) translateY(12%);
                opacity: 0;
            }

            #zoi {
                z-index: 400;
                height: 50vh;
                height: 50dvh;
                width: auto;
                position: fixed;
                bottom: 0;
                left: 0;
                transform: translateX(-25%) translateY(12%);
                opacity: 0;
            }

            #hemomo {
                z-index: 350;
                height: 70vh;
                height: 70dvh;
                width: auto;
                position: fixed;
                top: 0;
                left: 0;
                transform: translateX(-40%) translateY(15%);
                opacity: 0;
            }

            .spark {
                z-index: 310;
                width: auto;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }

            #flipper-container {
                position: relative;
                z-index: 400;
                position: fixed;
                bottom: 0;
                left: 75%;
                transform: translateX(-50%) translateY(12%);
                opacity: 0;
            }

            #flipper {
                height: 20vh;
                height: 20dvh;
                width: auto;
                pointer-events: auto;
            }

            #flipper-glasses {
                position: absolute;
                height: 7vh;
                height: 7dvh;
                width: auto;
                top: 50%;
                left: 50%;
                transform: translate(-55%, -100%);
                opacity: 0;
            }

            /* Mobile portrait adjustments */
            @media (max-width: 768px) and (orientation: portrait) {
                #bg-main {
                    transform: translateY(-10%);
                }

                #bg-beams {
                    transform: translateX(1%) translateY(-10%);
                }

                #lena-cat-container {
                    transform: translateX(-10%) translateY(-8vh);
                }

                #darkrider {
                    height: 50vh;
                    height: 50dvh;
                    transform: translateX(30%) translateY(12%);
                }

                #zoi {
                    height: 35vh;
                    height: 35dvh;
                    transform: translateX(-30%) translateY(6%);
                }

                #hemomo {
                    height: 50vh;
                    height: 50dvh;
                    transform: translateX(-30%) translateY(25%);
                }

                #flipper-container {
                    left: 60%;
                    transform: translateX(-50%) translateY(8%);
                }

                #flipper {
                    height: 15vh;
                    height: 15dvh;
                }

                #flipper-glasses {
                    height: 5vh;
                    height: 5dvh;
                }
            }
        </style>
        <script src="gsap.min.js"></script>
    </head>
    <body>
        <img id="page-image" src="ass/ets/page.png" alt="well done anya.cat, well done :3">

        <div id="animation-stage">
            <img id="bg-main" class="asset" src="ass/ets/bg-main.png" alt="">
            <img id="bg-beams" class="asset" src="ass/ets/bg-beams.png" alt="">
            <div id="lena-cat-container" class="asset">
                <img id="lena-cat" src="ass/ets/lena-cat.png" alt="Lena the Cat">
                <img id="lena-label" src="ass/ets/lena-label.png" alt="Lena the Cat (but in cursive)">
                <img id="spark-tl" class="spark" src="ass/ets/spark-tl.png" alt="">
                <img id="spark-tr" class="spark" src="ass/ets/spark-tr.png" alt="">
                <img id="spark-bl" class="spark" src="ass/ets/spark-bl.png" alt="">
                <img id="spark-br" class="spark" src="ass/ets/spark-br.png" alt="">
            </div>
            <img id="hemomo" class="asset" src="ass/ets/hemomo.png" alt="hemomo">
            <img id="darkrider" class="asset" src="ass/ets/darkrider.png" alt="DarkRider">
            <img id="zoi" class="asset" src="ass/ets/zoi.png" alt="zoi">
            <div id="flipper-container">
                <img id="flipper" src="ass/ets/flipper.png" alt="Flipper" title="So long, and thanks for all the (chatty) fish">
                <img id="flipper-glasses" src="ass/ets/flipper-glasses.png" alt="">
            </div>
        </div>

        <script>
            // MATHEMATICAL!
            const MAGIC_NUMBER_3 = Math.PI * 2;
            const MAGIC_NUMBER_1 = 0.265;

            const MAGIC_NUMBER_4 = 0.573;
            const MAGIC_NUMBER_2 = 1.618033988749895;

            const TAKE_OFF_EVERY_ZIG = MAGIC_NUMBER_1 * 10;

            // Preload all assets
            const ASSETS_PREFIX = "/ass/ets";
            const assetFiles = [
                "page.png",
                "bg-main.png",
                "bg-beams.png",
                "darkrider.png",
                "flipper-glasses.png",
                "flipper.png",
                "hemomo.png",
                "lena-cat.png",
                "lena-label.png",
                "spark-bl.png",
                "spark-br.png",
                "spark-tl.png",
                "spark-tr.png",
                "zoi.png"
            ];

            let loadedCount = 0;
            const totalAssets = assetFiles.length;

            function onAssetLoaded() {
                loadedCount++;
                if (loadedCount === totalAssets) {
                    setTimeout(() => {
                        console.log("You know what you doing.");
                        startAnimations();
                    }, TAKE_OFF_EVERY_ZIG * 1000);
                }
            }

            // Preload images
            assetFiles.forEach(file => {
                const img = new Image();
                img.onload = onAssetLoaded;
                img.onerror = () => {
                    console.error(`Failed to load: ${file}`);
                    onAssetLoaded(); // Continue even if one fails
                };
                img.src = `${ASSETS_PREFIX}/${file}`;
            });

            function startAnimations() {
                const randomOffset = () => MAGIC_NUMBER_1 + Math.random() * (MAGIC_NUMBER_4 - MAGIC_NUMBER_1);
                const loopDuration = Math.E;
                const loopDurationFast = loopDuration / Math.PI;

                const isMobile = window.matchMedia("(max-width: 768px) and (orientation: portrait)").matches;

                const positions = {
                    lenaCat: { x: "-10%", y: isMobile ? "-8vh" : "0" },
                    darkrider: { x: isMobile ? "30%" : "12%", y: "12%" },
                    zoi: { x: isMobile ? "-30%" : "-25%", y: isMobile ? "6%" : "12%" },
                    hemomo: { x: isMobile ? "-30%" : "-40%", y: isMobile ? "25%" : "15%" },
                    flipper: { x: isMobile ? "0%" : "-50%", y: isMobile ? "8%" : "12%" }
                };

                const zoiOffset = randomOffset();
                const flipperOffset = randomOffset();

                const timeline = gsap.timeline();

                // 1. Fade out the page image
                timeline.to("#page-image", {
                    opacity: 0,
                    duration: 1,
                    ease: "power2.in"
                });

                // 2. Drop in background, Lena the Cat, and beams all at the same time
                timeline.fromTo("#bg-main",
                    { scale: 1.3, opacity: 0 },
                    { 
                        scale: 1,
                        opacity: 1,
                        duration: 1.2,
                        ease: "back.out(5.73)"
                    }
                );

                timeline.fromTo("#lena-cat-container",
                    { scale: 1.3, opacity: 0 },
                    {
                        scale: 1,
                        opacity: 1,
                        duration: 1.2,
                        ease: "back.out(2.65)",
                        onComplete: startLenaAnimations
                    },
                    "<"
                );

                timeline.fromTo("#bg-beams",
                    { opacity: 0 },
                    {
                        opacity: 1,
                        duration: 1.8,
                        ease: "power2.out"
                    },
                    "<"
                );

                // Stage 2: DarkRider slides in from the right, zoi from the left
                timeline.fromTo("#darkrider",
                    { 
                        x: "150%",
                        y: positions.darkrider.y,
                        opacity: 0
                    },
                    {
                        x: positions.darkrider.x,
                        y: positions.darkrider.y,
                        opacity: 1,
                        duration: 1,
                        ease: "back.out(1.2)"
                    }
                );

                timeline.fromTo("#zoi",
                    {
                        x: "-150%",
                        y: positions.zoi.y,
                        opacity: 0
                    },
                    {
                        x: positions.zoi.x,
                        y: positions.zoi.y,
                        opacity: 1,
                        duration: 1,
                        ease: "back.out(1.2)"
                    },
                    `-=${1 - zoiOffset}`
                );

                // Stage 3: Hemomo slides in from the left, Flipper slides up from the bottom
                timeline.fromTo("#hemomo",
                    {
                        x: "-150%",
                        y: positions.hemomo.y,
                        opacity: 0
                    },
                    {
                        x: positions.hemomo.x,
                        y: positions.hemomo.y,
                        opacity: 1,
                        duration: 1,
                        ease: "back.out(1.2)",
                        onComplete: () => {
                            gsap.to("#hemomo", {
                                yPercent: MAGIC_NUMBER_3,
                                duration: loopDuration * 1.2,
                                ease: "sine.inOut",
                                yoyo: true,
                                repeat: -1
                            });
                        }
                    }
                );

                timeline.fromTo("#flipper-container",
                    {
                        x: positions.flipper.x,
                        y: "150%",
                        opacity: 0
                    },
                    {
                        x: positions.flipper.x,
                        y: positions.flipper.y,
                        opacity: 1,
                        duration: 1,
                        ease: "back.out(1.2)"
                    },
                    `-=${1 - flipperOffset}`
                );

                // Final stage: Flipper's glasses slide down
                timeline.fromTo("#flipper-glasses",
                    {
                        y: "-200%",
                        opacity: 0
                    },
                    {
                        y: "-100%",
                        opacity: 1,
                        duration: 2,
                        ease: "power1.out"
                    }
                );

                // This is the drill that will pierce the heavens!
                gsap.fromTo("#bg-beams", 
                    { rotation: -MAGIC_NUMBER_3 * 2 },
                    {
                        rotation: MAGIC_NUMBER_3 * 2,
                        duration: loopDuration / 2,
                        ease: "sine.inOut",
                        yoyo: true,
                        repeat: -1
                    }
                );

                // ...the rest of the fucking owl
                function startLenaAnimations() {
                    gsap.fromTo("#lena-label",
                        { scale: 1 },
                        {
                            scale: 1.08,
                            duration: loopDurationFast,
                            ease: "sine.inOut",
                            yoyo: true,
                            repeat: -1
                        }
                    );

                    gsap.fromTo("#spark-tl", 
                        { rotation: -MAGIC_NUMBER_3 },
                        {
                            scale: 0.7,
                            rotation: MAGIC_NUMBER_3,
                            duration: loopDurationFast / MAGIC_NUMBER_2,
                            ease: "sine.inOut",
                            yoyo: true,
                            repeat: -1,
                            repeatDelay: 0.1
                        }
                    );

                    gsap.fromTo("#spark-tr",
                        { rotation: -MAGIC_NUMBER_3 },
                        {
                            scale: 0.7,
                            rotation: MAGIC_NUMBER_3,
                            duration: loopDurationFast * MAGIC_NUMBER_2,
                            ease: "sine.inOut",
                            yoyo: true,
                            repeat: -1,
                            repeatDelay: 0.2
                        }
                    );

                    gsap.fromTo("#spark-bl",
                        { rotation: -MAGIC_NUMBER_3 },
                        {
                            scale: 0.7,
                            rotation: MAGIC_NUMBER_3,
                            duration: loopDurationFast / (MAGIC_NUMBER_2 / 2),
                            ease: "sine.inOut",
                            yoyo: true,
                            repeat: -1,
                            repeatDelay: 0.15
                        }
                    );

                    gsap.fromTo("#spark-br",
                        { rotation: -MAGIC_NUMBER_3 },
                        {
                            scale: 0.7,
                            rotation: MAGIC_NUMBER_3,
                            duration: loopDurationFast * (MAGIC_NUMBER_2 / 2),
                            ease: "sine.inOut",
                            yoyo: true,
                            repeat: -1,
                            repeatDelay: 0.25
                        }
                    );
                }
            }
        </script>
    </body>
</html>
