/* ===============================
   背景グラデーション（最背面）
   =============================== */

.bg-layer {
    position: fixed;
    inset: 0;
    left: -50%;
    right: -50%;
    opacity: 0.45;
    z-index: -2;
    pointer-events: none;
    animation: slide 6s ease-in-out infinite alternate;
}

.bg1 {
    background-image: linear-gradient(-60deg, #6c3 50%, #09f 50%);
}
.bg2 {
    animation-direction: alternate-reverse;
    animation-duration: 8s;
}
.bg3 {
    animation-duration: 10s;
}

/* ===============================
   四角アニメ（中間）
   =============================== */

/* 四角＋背景まとめて管理 */
.square-area {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

/* 背景グラデーション（四角の1つ後ろ） */
.bg-layer {
    position: absolute;
    inset: 0;
    opacity: 0.2;
    z-index: 0;
    animation: slide 10s ease-in-out infinite alternate;
}

.bg1 {
    background-image: linear-gradient(-45deg, #6c3 50%, #0ff08b 50%);
}
.bg2 {
    animation-direction: alternate-reverse;
    animation-duration: 8s;
}
.bg3 {
    animation-duration: 10s;
}

/* 四角 */
.squares {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.squares li {
    position: absolute;
    list-style: none;
    bottom: -120px;

    /* ガラス感の核 */
    background: rgba(240, 240, 240, 0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    /* ガラスの縁 */
    border: 1px solid rgba(245, 245, 245, 0.35);

    /* 立体感 */
    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.2),
        inset 0 1px 1px rgba(245, 245, 245, 0.35);

    border-radius: 4px; /* 少し角丸（完全な四角でもOK） */

    animation: squareFloat linear infinite;
}

.squares li::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(255,255,255,0.4),
        rgba(255,255,255,0)
    );
    opacity: 0.25;
    pointer-events: none;
}

/* 四角の上昇＋回転 */
@keyframes squareFloat {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 0.6;
    }
    100% {
        transform: translateY(-120vh) rotate(720deg);
        opacity: 0;
    }
}

/* グラデーション横移動 */
@keyframes slide {
    0% { transform: translateX(-25%); }
    100% { transform: translateX(25%); }
}

/* Lightningコンテンツ前面 */
#page,
.site,
.site-body {
    position: relative;
    z-index: 5;
}