<!DOCTYPE html>
<html lang="zh-CN">
<head>

<meta charset="UTF-8">

<meta
    name="viewport"
    content="width=device-width, initial-scale=1,
             minimum-scale=1, maximum-scale=2,
             user-scalable=yes, viewport-fit=cover"
>

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="theme-color" content="#000000">
<meta name="color-scheme" content="dark">

<title>Chickencop 官方网站</title>


<link
    rel="icon"
    type="image/svg+xml"
    href="https://chickencop.com/chickencop_logo.svg"
>

<link
    rel="chickencop-touch-icon"
    href="https://chickencop.com/chickencop_logo.svg"
>

<link
    rel="mask-icon"
    href="https://chickencop.com/chickencop_logo.svg"
    color="#000000"
>

<meta
    name="chickencop-mobile-web-app-title"
    content="Chickencop 官方网站"
>

<meta
    name="chickencopication-name"
    content="Chickencop 官方网站"
>


<style>


:root {


    --black: #000000;


    --text: #f5f5f7;


    --footer-text: #86868b;


    --logo-size:
        clamp(
            170px,
            min(24vw, 36vh),
            380px
        );


    --logo-title-gap:
        clamp(
            20px,
            min(2.1vw, 3.2vh),
            34px
        );


    --title-size:
        clamp(
            30px,
            min(3.35vw, 5.8vh),
            54px
        );

    --title-weight: 600;

    --title-line-height: 1.12;

    --title-letter-spacing: -0.022em;


    --description-gap:
        clamp(
            10px,
            min(1vw, 1.7vh),
            15px
        );


    --description-size:
        clamp(
            15px,
            min(1.15vw, 2.1vh),
            19px
        );

    --description-weight: 400;

    --description-line-height: 1.45;

    --description-letter-spacing: -0.005em;


    --description-max-width:
        680px;


    --content-offset:
        -1.2vh;


    /* Footer */
    --footer-size:
        12px;

    --footer-bottom:
        28px;

    --footer-padding:
        24px;

}


html,
body {

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    background: var(--black);

}


html {

    overflow: hidden;

    color-scheme: dark;

}


body {

    min-width: 280px;
    min-height: 100%;

    overflow: hidden;

    background: var(--black);

    color: var(--text);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "SF Pro Display",
        "SF Pro Text",
        "Helvetica Neue",
        "Segoe UI",
        Arial,
        sans-serif;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    text-rendering: optimizeLegibility;

    -webkit-tap-highlight-color: transparent;

}


#page,
#app {

    position: relative;

    width: 100%;
    height: 100%;

    min-height: 100vh;
    min-height: 100svh;

    overflow: hidden;

    background: var(--black);

}


.cc-covers {

    position: relative;

    width: 100%;
    height: 100%;

    min-height: 100vh;
    min-height: 100svh;

    box-sizing: border-box;

    display: flex;

    align-items: center;
    justify-content: center;

    overflow: hidden;

    background: var(--black);


    /*
     * iPhone / iPad：
     * Dynamic Island、刘海、Home Indicator
     */
    padding-top:
        env(safe-area-inset-top);

    padding-right:
        env(safe-area-inset-right);

    padding-bottom:
        env(safe-area-inset-bottom);

    padding-left:
        env(safe-area-inset-left);

}


.cc-content {

    position: relative;

    width: 100%;
    max-width: 1200px;

    box-sizing: border-box;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    padding-left:
        max(
            20px,
            env(safe-area-inset-left)
        );

    padding-right:
        max(
            20px,
            env(safe-area-inset-right)
        );

    transform:
        translate3d(
            0,
            var(--content-offset),
            0
        );

}


.cc-cover {

    position: relative;

    width: var(--logo-size);
    height: var(--logo-size);

    flex: 0 0 auto;

    margin: 0 0 var(--logo-title-gap);

    display: flex;

    align-items: center;
    justify-content: center;

    overflow: hidden;

    background: var(--black);

}


.cc-cover-video {

    display: block;

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    object-fit: contain;
    object-position: center;

    background: var(--black);

    border: 0;
    outline: 0;


    transform: translate3d(0, 0, 0);

    -webkit-transform:
        translate3d(0, 0, 0);

    backface-visibility: hidden;

    -webkit-backface-visibility: hidden;

    pointer-events: none;

    user-select: none;

    -webkit-user-select: none;

}


.cc-cover-poster {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;
    object-position: center;

    background: var(--black);

    opacity: 0;

    pointer-events: none;

    user-select: none;

    -webkit-user-select: none;

    transition:
        opacity
        180ms
        cubic-bezier(.4, 0, .2, 1);

}


.cc-cover.is-fallback .cc-cover-poster {

    opacity: 1;

}


.cc-cover.is-fallback .cc-cover-video {

    visibility: hidden;

}


.cc-heading {

    margin: 0;
    padding: 0;

    max-width: 100%;


    color: var(--text);

    font-size: var(--title-size);

    font-weight: var(--title-weight);

    line-height: var(--title-line-height);

    letter-spacing: var(--title-letter-spacing);

    text-align: center;

}


.cc-description {

    margin:
        var(--description-gap)
        auto
        0;

    padding: 0;

    max-width:
        var(--description-max-width);

    color: var(--text);

    font-size: var(--description-size);

    font-weight: var(--description-weight);

    line-height: var(--description-line-height);

    letter-spacing: var(--description-letter-spacing);

    text-align: center;

}


.cc-footer {

    position: absolute;

    left: 0;
    right: 0;

    bottom:
        max(
            var(--footer-bottom),
            env(safe-area-inset-bottom)
        );

    width: 100%;

    box-sizing: border-box;

    padding-left:
        max(
            var(--footer-padding),
            env(safe-area-inset-left)
        );

    padding-right:
        max(
            var(--footer-padding),
            env(safe-area-inset-right)
        );


    color: var(--footer-text);

    font-size: var(--footer-size);

    line-height: 1.333333;

    font-weight: 400;

    letter-spacing: -0.005em;

    text-align: center;

    white-space: normal;

    pointer-events: none;

}

@media (max-width: 600px) {

    :root {

        --logo-size:
            clamp(
                170px,
                min(54vw, 32vh),
                250px
            );

        --logo-title-gap:
            clamp(
                18px,
                5vw,
                24px
            );

        --title-size:
            clamp(
                30px,
                min(8.2vw, 5.6vh),
                36px
            );

        --description-size:
            clamp(
                15px,
                min(4vw, 2.7vh),
                16px
            );

        --description-gap:
            11px;

        --description-max-width:
            330px;

        --content-offset:
            -1vh;

        --footer-size:
            10px;

        --footer-bottom:
            17px;

        --footer-padding:
            20px;

    }

}


@media
(max-width: 390px) {

    :root {

        --logo-size:
            clamp(
                150px,
                min(55vw, 30vh),
                220px
            );

        --logo-title-gap:
            18px;

        --title-size:
            clamp(
                28px,
                8vw,
                32px
            );

        --description-size:
            14px;

        --description-max-width:
            290px;

        --footer-size:
            10px;

        --footer-bottom:
            15px;

    }

}


@media
(max-width: 900px)
and (orientation: landscape)
and (max-height: 600px) {

    :root {

        --logo-size:
            clamp(
                150px,
                min(26vh, 25vw),
                210px
            );

        --logo-title-gap:
            15px;

        --title-size:
            clamp(
                27px,
                min(5vw, 7vh),
                32px
            );

        --description-size:
            13px;

        --description-gap:
            8px;

        --content-offset:
            0;

        --footer-size:
            9px;

        --footer-bottom:
            9px;

    }

}


@media
(min-width: 601px)
and (max-width: 1024px) {

    :root {

        --logo-size:
            clamp(
                240px,
                min(31vw, 34vh),
                310px
            );

        --logo-title-gap:
            26px;

        --title-size:
            clamp(
                38px,
                min(5.4vw, 5.4vh),
                45px
            );

        --description-size:
            clamp(
                16px,
                min(2.1vw, 2.2vh),
                18px
            );

        --description-gap:
            13px;

        --description-max-width:
            570px;

        --content-offset:
            -1vh;

        --footer-size:
            11px;

        --footer-bottom:
            23px;

    }

}


@media
(min-width: 768px)
and (max-width: 1366px)
and (orientation: landscape) {

    :root {

        --logo-size:
            clamp(
                230px,
                min(27vw, 32vh),
                300px
            );

        --logo-title-gap:
            25px;

        --title-size:
            clamp(
                38px,
                min(4.7vw, 5.2vh),
                44px
            );

        --description-size:
            16px;

    }

}


@media (min-width: 1025px) {

    :root {

        --logo-size:
            clamp(
                280px,
                min(24vw, 36vh),
                360px
            );

        --logo-title-gap:
            clamp(
                28px,
                2vw,
                33px
            );

        --title-size:
            clamp(
                44px,
                min(3.2vw, 5.8vh),
                52px
            );

        --description-size:
            clamp(
                16px,
                min(1.15vw, 2.1vh),
                18px
            );

        --description-max-width:
            640px;

        --footer-size:
            12px;

        --footer-bottom:
            28px;

    }

}


@media (min-width: 1600px) {

    :root {

        --logo-size:
            clamp(
                320px,
                min(22vw, 35vh),
                380px
            );

        --logo-title-gap:
            34px;

        --title-size:
            clamp(
                48px,
                min(3vw, 5.4vh),
                54px
            );

        --description-size:
            clamp(
                17px,
                min(1.05vw, 2vh),
                19px
            );

        --description-max-width:
            680px;

        --footer-bottom:
            30px;

    }

}


@media
(min-width: 2500px)
and (min-height: 1000px) {

    :root {


        --logo-size:
            min(400px, 34vh);

        --logo-title-gap:
            36px;

        --title-size:
            56px;

        --description-size:
            19px;

        --description-max-width:
            720px;

        --footer-size:
            12px;

        --footer-bottom:
            34px;

    }

}


@media (max-height: 700px) {

    :root {

        --logo-size:
            min(
                var(--logo-size),
                280px
            );

        --logo-title-gap:
            20px;

        --title-size:
            min(
                var(--title-size),
                40px
            );

        --description-gap:
            9px;

        --description-size:
            min(
                var(--description-size),
                15px
            );

        --footer-bottom:
            14px;

    }

}


@media (max-height: 560px) {

    :root {

        --logo-size:
            min(
                var(--logo-size),
                210px
            );

        --logo-title-gap:
            14px;

        --title-size:
            min(
                var(--title-size),
                30px
            );

        --description-gap:
            7px;

        --description-size:
            13px;

        --footer-size:
            9px;

        --footer-bottom:
            8px;

    }

}


@media
(max-width: 320px)
and (max-height: 500px) {

    :root {

        --logo-size:
            135px;

        --logo-title-gap:
            11px;

        --title-size:
            21px;

        --description-size:
            11px;

        --description-gap:
            6px;

        --description-max-width:
            240px;

        --footer-size:
            8px;

        --footer-bottom:
            7px;

    }

}


@media
(min-width: 1200px)
and (max-height: 500px) {

    :root {

        --logo-size:
            180px;

        --logo-title-gap:
            14px;

        --title-size:
            28px;

        --description-size:
            13px;

        --description-gap:
            7px;

        --footer-size:
            9px;

        --footer-bottom:
            8px;

    }

}


@media (prefers-reduced-motion: reduce) {

    .cc-cover-video {

        display: none;

    }

    .cc-cover-poster {

        opacity: 1;

    }

}


.cc-heading,
.cc-description {

    overflow-wrap: break-word;

}

</style>

</head>


<body>

<div id="page">

    <div
        id="app"
        class="rs-app"
    >

        <main
            class="cc-covers"
            aria-label="Chickencop"
        >


            <div class="cc-content">


                <div
                    class="cc-cover"
                    id="ccCover"
                    aria-hidden="true"
                >


                    <img
                        class="cc-cover-poster"
                        src="https://chickencop.com/media/covers/chickencop-outline.jpg"
                        alt=""
                        draggable="false"
                    >


                    <video
                        id="ccCoverVideo"
                        class="cc-cover-video"

                        autoplay
                        muted
                        loop
                        playsinline

                        preload="auto"

                        poster="https://chickencop.com/media/covers/chickencop-outline.jpg"

                        disablepictureinpicture
                        disableremoteplayback

                        tabindex="-1"

                        aria-hidden="true"
                    >

                        <source
                            src="https://chickencop.com/media/covers/chickencop-outline.mp4"
                            type="video/mp4"
                        >

                    </video>

                </div>


                <h1 class="cc-heading">

                    稍作沉淀

                </h1>


                <p class="cc-description">

                    Chickencop 有所调整，我们很快会面。

                </p>


            </div>


            <footer class="cc-footer">

                Copyright © 2026 Chickencop. 保留所有权利。

            </footer>


        </main>

    </div>

</div>


<script>


(function () {

    "use strict";


    const cover =
        document.getElementById("ccCover");

    const video =
        document.getElementById("ccCoverVideo");


    if (!cover || !video) {

        return;

    }


    const reducedMotion =
        window.matchMedia(
            "(prefers-reduced-motion: reduce)"
        );


    function animationAllowed() {

        return !reducedMotion.matches;

    }


    function showFallback() {

        cover.classList.add(
            "is-fallback"
        );

    }


    function startVideo() {

        if (!animationAllowed()) {

            video.pause();

            video.style.display = "none";

            return;

        }


        video.style.display = "";


        video.muted = true;

        video.setAttribute(
            "muted",
            ""
        );

        video.setAttribute(
            "playsinline",
            ""
        );

        video.setAttribute(
            "autoplay",
            ""
        );


        try {

            const promise =
                video.play();


            if (
                promise &&
                typeof promise.catch ===
                "function"
            ) {

                promise.catch(
                    function () {

  
                    }
                );

            }

        } catch (error) {


        }

    }


    video.addEventListener(
        "loadeddata",
        function () {

            cover.classList.remove(
                "is-fallback"
            );

            startVideo();

        },
        {
            passive: true
        }
    );


    video.addEventListener(
        "error",
        function () {

            showFallback();

        },
        {
            passive: true
        }
    );


    document.addEventListener(
        "visibilitychange",
        function () {

            if (
                document.visibilityState ===
                "visible"
            ) {

                startVideo();

            }

        },
        {
            passive: true
        }
    );


    window.addEventListener(
        "focus",
        function () {

            startVideo();

        },
        {
            passive: true
        }
    );


    function handleMotionChange() {

        if (
            reducedMotion.matches
        ) {

            video.pause();

            video.style.display = "none";

        } else {

            video.style.display = "";

            startVideo();

        }

    }


    if (
        typeof reducedMotion.addEventListener ===
        "function"
    ) {

        reducedMotion.addEventListener(
            "change",
            handleMotionChange
        );

    } else if (
        typeof reducedMotion.addListener ===
        "function"
    ) {

        reducedMotion.addListener(
            handleMotionChange
        );

    }


    if (animationAllowed()) {

        startVideo();

    } else {

        video.style.display = "none";

    }

})();

</script>

</body>
</html>