@charset "UTF-8";

/* ===============================================
  Animation
=============================================== */

/* ==============================
    Animation: Global Navigation (Circle Expand)
============================== */

/* 丸背景の初期状態 */
.c-circle-bg {
    position: fixed;
    z-index: 100; /* sidebarより前面、navより背面 */
    top: calc(50% - 50px);
    right: -50px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: var(--color-primary); /* サイトのメインカラー */
    transform: scale(0);
    transition: transform 0.6s ease;
    pointer-events: none;
}

/* ナビ活性化時の背景拡大 */
.c-circle-bg.is-active {
    transform: scale(50);
}

/* ナビゲーション本体の表示制御 */
.c-gnav-wrapper {
    position: fixed;
    z-index: 101;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    display: none; /* 初期は非表示 */
    overflow-y: auto;
}

.c-gnav-wrapper.is-active {
    display: block;
}

/* リストのアニメーション（ふわっと表示） */
.c-gnav-wrapper.is-active .c-gnav__item {
    animation: gnavItemFadeIn 0.8s ease forwards;
    opacity: 0;
}

@keyframes gnavItemFadeIn {
    0%   { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}