* {
    box-sizing: border-box;
}


/* =================================
   ページ外側
================================= */

html {
    background: #D14AA8;
}

body {
    margin: 0;

    min-height: 100vh;

    background: #D14AA8;

    display: flex;
    flex-direction: column;

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

    overflow-x: hidden;
}


/* =================================
   サイト全体のカード
================================= */
.site-shell {
    width: min(100%, 500px);

    /* 上だけ少し空ける。下には余白を作らない */
    margin: 32px auto 0;

    /* 画面の一番下まで黒を伸ばす */
    min-height: calc(100vh - 32px);

    background: black;

    /* 上だけ角丸 */
    border-radius: 28px 28px 0 0;

    overflow: hidden;

    box-shadow:
        0 22px 55px rgba(0, 0, 0, 0.38),
        0 8px 20px rgba(0, 0, 0, 0.22);
}

/* =================================
   サイト本体
================================= */

.design-wrapper {
    position: relative;

    width: 100%;

    /*
       現在調整している固定比率
    */
    aspect-ratio: 9 / 18;

    overflow: hidden;

    background: black;
}


/* =================================
   背景デザイン
================================= */

.design-image {
    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: auto;

    display: block;

    z-index: 0;

    pointer-events: none;

    animation:
        pageVisualIn
        0.9s
        ease-out
        both;
}


/* =================================
   メインロゴ
================================= */

.main-logo {
    position: absolute;

    left: 14%;
    top: 2.8%;

    width: 72%;
    height: auto;

    z-index: 2;

    display: block;

    pointer-events: none;

    animation:
        logoIn
        0.9s
        0.15s
        ease-out
        both;
}


/* =================================
   動くリンク共通
================================= */

.floating-link {
    position: absolute;

    z-index: 3;

    display: block;

    cursor: pointer;

    text-decoration: none;

    transform-origin: center;

    transition:
        transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
        filter 0.22s ease;
}

.floating-link img {
    display: block;

    width: 100%;
    height: auto;

    pointer-events: none;
}


/* =================================
   ホバー
================================= */

.floating-link:hover {
    transform:
        translateY(-5px)
        scale(1.035);

    /*
       SVG自体に影が入っているので
       drop-shadowは追加しない
    */
    filter: brightness(1.05);
}


/* =================================
   クリックした瞬間
================================= */

.floating-link:active {
    transform:
        translateY(-1px)
        scale(0.98);
}


/* =================================
   Instagram
================================= */

.instagram-link {
    left: 42%;
    top: 55%;

    width: 6%;

    animation:
        itemIn
        0.55s
        0.45s
        ease-out
        backwards;
}


/* =================================
   X
================================= */

.x-link {
    left: 53%;
    top: 55%;

    width: 6%;

    animation:
        itemIn
        0.55s
        0.52s
        ease-out
        backwards;
}


/* =================================
   Patreon
================================= */

.patreon-link {
    left: 16%;
    top: 60%;

    width: 68%;

    animation:
        itemIn
        0.65s
        0.62s
        ease-out
        backwards;
}


/* =================================
   Faphouse
================================= */

.faphouse-link {
    left: 16%;
    top: 68%;

    width: 68%;

    animation:
        itemIn
        0.65s
        0.74s
        ease-out
        backwards;
}


/* =================================
   右上リンク
================================= */

.top-link {
    left: 90%;
    top: 1.9%;

    width: 6.5%;
}


/* =================================
   フッター
================================= */

.site-footer {
    width: 100%;

    background: black;

    color: #e8a0a0;

    text-align: center;

    font-size: 12px;
    font-weight: 600;

    padding:
        22px
        10px
        28px;

    flex-shrink: 0;

    /*
       上下には動かさず、
       フェードだけ
    */
    animation:
        footerIn
        0.7s
        0.9s
        ease-out
        both;
}

.site-footer a {
    color: #e8a0a0;

    text-decoration: none;
}

.site-footer a:hover {
    text-decoration: underline;
}


/* =================================
   起動アニメーション
================================= */

/* 背景 */

@keyframes pageVisualIn {

    from {
        opacity: 0;
        transform: scale(1.015);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}


/* ロゴ */

@keyframes logoIn {

    from {
        opacity: 0;

        transform:
            translateY(-18px)
            scale(0.96);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }
}


/* Instagram / X / ボタン */

@keyframes itemIn {

    from {
        opacity: 0;

        transform:
            translateY(24px)
            scale(0.93);
    }

    70% {
        opacity: 1;

        transform:
            translateY(-5px)
            scale(1.025);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }
}


/* フッターは移動させない */

@keyframes footerIn {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


/* =================================
   スマホ・タブレット
================================= */

@media (max-width: 1024px) {

    html,
    body {
        background: black;
    }

    .site-shell {
        width: 100vw;

        margin: 0;

        /*
           スマホ・タブレットでは
           画面端まで使う
        */
        border-radius: 0;

        /*
           スマホでは外側の影不要
        */
        box-shadow: none;
    }
}


/* =================================
   タッチ端末
================================= */

@media (hover: none) {

    .floating-link:hover {
        transform: none;

        filter: none;
    }

    .floating-link:active {
        transform:
            translateY(-4px)
            scale(1.035);
    }
}


/* =================================
   動きを減らす設定
================================= */

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

    .design-image,
    .main-logo,
    .instagram-link,
    .x-link,
    .patreon-link,
    .faphouse-link,
    .site-footer {
        animation: none;
    }
}