/* ========================================
   サイト初回オープニング
======================================== */

/*
 * 状態クラスを外しても全画面固定が崩れないよう、
 * オーバーレイの基本スタイルは単独で定義する。
 */
#site-opening {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: none;
    place-items: center;
    overflow: hidden;
    isolation: isolate;
    background: #fff;
    opacity: .95;
    visibility: visible;
}

html.opening-pending #site-opening,
html.opening-active #site-opening {
    display: grid;
}

/* JSの実行前に本文が一瞬見えるのを防ぐ */
html.opening-pending body > :not(#site-opening) {
    visibility: hidden;
}

html.opening-active,
html.opening-active body {
    height: 100%;
    overflow: hidden;
}

.site-opening__background {
    position: absolute;
    inset: -4%;
    z-index: -2;
    background-color: #fff;
    background-image: url("../SVG/bg-yahagi.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    filter: contrast(1.04);
    transform: scale(1.12);
    will-change: transform, filter;
}

/* 放送オープニング風の短い光のスイープ */
#site-opening::after {
    position: absolute;
    inset: -35% -55%;
    z-index: -1;
    content: "";
    pointer-events: none;
    background: linear-gradient(
        105deg,
        transparent 38%,
        rgba(255, 255, 255, 0.04) 46%,
        rgba(255, 255, 255, 0.72) 50%,
        rgba(255, 255, 255, 0.05) 54%,
        transparent 62%
    );
    opacity: 0;
    transform: translate3d(-38%, 0, 0) skewX(-8deg);
    will-change: transform, opacity;
}

.site-opening__logo {
    position: relative;
    z-index: 2;
    display: block;
    width: clamp(190px, 42vw, 430px);
    max-width: 76vw;
    height: auto;
    opacity: 0;
    filter: blur(12px);
    transform: translate3d(0, 34px, 0) scale(0.78);
    transform-origin: center;
    will-change: transform, opacity, filter;
}

#site-opening.is-playing .site-opening__background {
    animation: taishi-opening-background 2.15s cubic-bezier(0.16, 0.8, 0.28, 1) both;
}

#site-opening.is-playing::after {
    animation: taishi-opening-sweep 0.72s ease-out 0.52s both;
}

#site-opening.is-playing .site-opening__logo {
    animation: taishi-opening-logo 1.45s cubic-bezier(0.16, 0.9, 0.24, 1) 0.2s both;
}

#site-opening.is-closing {
    pointer-events: none;
    animation: taishi-opening-close 0.62s ease-in-out both;
}

#site-opening.is-hidden {
    display: none !important;
}

@keyframes taishi-opening-background {
    0% {
        filter: contrast(1.18) brightness(0.92);
        transform: scale(1.12);
    }

    60% {
        filter: contrast(1.05) brightness(1);
    }

    100% {
        filter: contrast(1) brightness(1);
        transform: scale(1.015);
    }
}

@keyframes taishi-opening-logo {
    0% {
        opacity: 0;
        filter: blur(12px);
        transform: translate3d(0, 34px, 0) scale(0.78);
    }

    52% {
        opacity: 1;
        filter: blur(0);
        transform: translate3d(0, -4px, 0) scale(1.035);
    }

    100% {
        opacity: 1;
        filter: blur(0);
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@keyframes taishi-opening-sweep {
    0% {
        opacity: 0;
        transform: translate3d(-38%, 0, 0) skewX(-8deg);
    }

    22% {
        opacity: 0.8;
    }

    100% {
        opacity: 0;
        transform: translate3d(38%, 0, 0) skewX(-8deg);
    }
}

@keyframes taishi-opening-close {
    0% {
        opacity: 1;
        visibility: visible;
    }

    100% {
        opacity: 0;
        visibility: hidden;
    }
}

@media (max-width: 767.98px) {
    .site-opening__background {
        inset: -2%;
    }

    .site-opening__logo {
        width: clamp(180px, 68vw, 320px);
    }
}

@media (prefers-reduced-motion: reduce) {
    #site-opening.is-playing .site-opening__background,
    #site-opening.is-playing::after,
    #site-opening.is-playing .site-opening__logo,
    #site-opening.is-closing {
        animation-duration: 0.01ms !important;
        animation-delay: 0ms !important;
    }

    .site-opening__logo {
        opacity: 1;
        filter: none;
        transform: none;
    }
}