/* ✨ L36 Abyss Debris VFX v3 — 3x size / amplitude / speed ✨ */
.l36-debris-container {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

/* Base rock — slate-purple stone with multi-face shading */
.l36-debris-container .debris {
    position: absolute;
    background: linear-gradient(135deg, #4a4268 0%, #28203e 45%, #0e0a1a 100%);
    box-shadow:
        inset 0 3px 10px rgba(255, 255, 255, 0.18),
        inset 2px 0 6px rgba(255, 255, 255, 0.08),
        inset 0 -4px 10px rgba(0, 0, 0, 0.85),
        0 0 32px rgba(139, 92, 246, 0.50),
        0 6px 28px rgba(0, 0, 0, 0.75);
    pointer-events: none;
    will-change: transform, opacity;
}

/* Far rocks — distance haze */
.l36-debris-container .far {
    filter: blur(0.5px) brightness(0.7);
    z-index: 1;
}

/* Mid rocks — crisp, dominant purple edge */
.l36-debris-container .mid {
    filter: brightness(1.0);
    z-index: 2;
    box-shadow:
        inset 0 4px 14px rgba(255, 255, 255, 0.22),
        inset 3px 0 8px rgba(255, 255, 255, 0.10),
        inset 0 -6px 14px rgba(0, 0, 0, 0.90),
        0 0 48px rgba(167, 139, 250, 0.60),
        0 8px 36px rgba(0, 0, 0, 0.85);
}

/* =====================
   Float Animations — 3x amplitude, 3x rotation vs v2
   ===================== */

/* Far A — left-bias drift */
@keyframes abyssFloatFar {
    0% {
        transform: translateY(0px) translateX(0px) rotate(0deg);
        opacity: 0.68;
    }

    30% {
        transform: translateY(-36px) translateX(-18px) rotate(-15deg);
        opacity: 0.80;
    }

    70% {
        transform: translateY(-60px) translateX(15px) rotate(12deg);
        opacity: 0.73;
    }

    100% {
        transform: translateY(0px) translateX(0px) rotate(0deg);
        opacity: 0.68;
    }
}

/* Far B — right-bias, asymmetric phase */
@keyframes abyssFloatFar2 {
    0% {
        transform: translateY(0px) translateX(0px) rotate(0deg);
        opacity: 0.62;
    }

    40% {
        transform: translateY(-54px) translateX(24px) rotate(18deg);
        opacity: 0.76;
    }

    75% {
        transform: translateY(-30px) translateX(-15px) rotate(-9deg);
        opacity: 0.68;
    }

    100% {
        transform: translateY(0px) translateX(0px) rotate(0deg);
        opacity: 0.62;
    }
}

/* Mid A — deep, slow oscillation */
@keyframes abyssFloatMid {
    0% {
        transform: translateY(0px) translateX(0px) rotate(0deg);
        opacity: 0.84;
    }

    35% {
        transform: translateY(-66px) translateX(-27px) rotate(-21deg);
        opacity: 0.94;
    }

    70% {
        transform: translateY(-84px) translateX(21px) rotate(24deg);
        opacity: 0.89;
    }

    100% {
        transform: translateY(0px) translateX(0px) rotate(0deg);
        opacity: 0.84;
    }
}

/* Mid B — cross-axis pendulum */
@keyframes abyssFloatMid2 {
    0% {
        transform: translateY(0px) translateX(0px) rotate(0deg);
        opacity: 0.80;
    }

    45% {
        transform: translateY(-78px) translateX(30px) rotate(27deg);
        opacity: 0.92;
    }

    80% {
        transform: translateY(-42px) translateX(-24px) rotate(-15deg);
        opacity: 0.86;
    }

    100% {
        transform: translateY(0px) translateX(0px) rotate(0deg);
        opacity: 0.80;
    }
}

/* =====================
   Rock Definitions v3.1 — clip-path jagged shapes, all different
   Mobile: edge-hugging. Desktop: pulled in via @media override.
   Protected zone: center-x 28%–72%, vertical 16%–68%
   ===================== */

/* --- Far layer (54–84px range) --- */

/* rock-1 : 尖裂型A — 7-point shard, top-left jagged */
.rock-1 {
    width: 54px;
    height: 78px;
    clip-path: polygon(18% 0%, 72% 6%, 100% 28%, 88% 62%, 100% 84%, 52% 100%, 12% 88%, 0% 52%, 8% 22%);
    left: 3%;
    top: 6%;
    animation: abyssFloatFar 3.7s ease-in-out infinite 0s;
}

/* rock-2 : 斜面型B — wide flat shard, beveled top-right */
.rock-2 {
    width: 84px;
    height: 60px;
    clip-path: polygon(0% 24%, 28% 0%, 82% 4%, 100% 18%, 96% 72%, 74% 100%, 18% 96%, 0% 68%);
    right: 4%;
    top: 4%;
    animation: abyssFloatFar2 4.7s ease-in-out infinite 0.8s;
}

/* rock-3 : 殘片型C — small asymmetric fragment */
.rock-3 {
    width: 48px;
    height: 60px;
    clip-path: polygon(22% 0%, 100% 8%, 92% 44%, 100% 78%, 68% 100%, 8% 92%, 0% 56%, 14% 20%);
    left: 1%;
    top: 36%;
    animation: abyssFloatFar 3.0s ease-in-out infinite 0.4s;
}

/* rock-4 : 尖裂型B — tall narrow shard, right edge */
.rock-4 {
    width: 66px;
    height: 90px;
    clip-path: polygon(30% 0%, 88% 12%, 100% 48%, 84% 80%, 100% 100%, 40% 92%, 0% 74%, 12% 34%);
    right: 1%;
    top: 50%;
    animation: abyssFloatFar2 4.3s ease-in-out infinite 1.3s;
}

/* rock-5 : 斜面型C — wide lower fragment */
.rock-5 {
    width: 60px;
    height: 54px;
    clip-path: polygon(14% 0%, 76% 4%, 100% 22%, 88% 58%, 100% 80%, 58% 100%, 6% 88%, 0% 46%);
    left: 5%;
    bottom: 14%;
    animation: abyssFloatFar 3.3s ease-in-out infinite 1.1s;
}

/* rock-11 : 殘片型A — small chip, sharp corners */
.rock-11 {
    width: 42px;
    height: 54px;
    clip-path: polygon(0% 32%, 32% 0%, 100% 12%, 92% 52%, 100% 88%, 58% 100%, 12% 80%, 0% 54%);
    right: 20%;
    bottom: 8%;
    animation: abyssFloatFar2 4.0s ease-in-out infinite 0.6s;
}

/* rock-12 : 尖裂型C — flat wide top shard */
.rock-12 {
    width: 72px;
    height: 48px;
    clip-path: polygon(8% 0%, 64% 4%, 100% 0%, 96% 44%, 84% 100%, 22% 88%, 0% 68%, 4% 20%);
    left: 12%;
    top: 2%;
    animation: abyssFloatFar 5.0s ease-in-out infinite 0.2s;
}

/* --- Mid layer (96–156px range) --- */

/* rock-6 : 大塊斜面岩A — dominant left anchor */
.rock-6 {
    width: 132px;
    height: 156px;
    clip-path: polygon(16% 0%, 78% 6%, 100% 22%, 92% 58%, 100% 82%, 72% 100%, 20% 94%, 0% 72%, 8% 38%);
    left: -16px;
    top: 42%;
    animation: abyssFloatMid 4.3s ease-in-out infinite 0.5s;
    background: linear-gradient(128deg, #554e70 0%, #28203e 55%, #0e0a18 100%);
}

/* rock-7 : 大塊尖裂岩B — right overhang, wide */
.rock-7 {
    width: 156px;
    height: 126px;
    clip-path: polygon(0% 18%, 24% 0%, 72% 8%, 100% 0%, 96% 36%, 100% 62%, 78% 100%, 28% 88%, 0% 62%);
    right: -20px;
    top: 22%;
    animation: abyssFloatMid2 5.0s ease-in-out infinite 1.5s;
    background: linear-gradient(148deg, #4e4868 0%, #251e3a 55%, #0c0916 100%);
}

/* rock-8 : 大塊殘片岩C — bottom-right, jagged all sides */
.rock-8 {
    width: 114px;
    height: 138px;
    clip-path: polygon(28% 0%, 86% 8%, 100% 34%, 88% 64%, 100% 92%, 62% 100%, 14% 96%, 0% 68%, 12% 28%);
    right: 8%;
    bottom: 0%;
    animation: abyssFloatMid 3.7s ease-in-out infinite 1.2s;
    background: linear-gradient(118deg, #524a6c 0%, #261e3c 55%, #0d0a17 100%);
}

/* rock-9 : 大塊斜面岩B — upper-left column */
.rock-9 {
    width: 96px;
    height: 120px;
    clip-path: polygon(20% 0%, 100% 4%, 88% 38%, 100% 68%, 84% 100%, 24% 92%, 0% 72%, 8% 28%);
    left: 4%;
    top: 4%;
    animation: abyssFloatMid2 4.7s ease-in-out infinite 2.2s;
    background: linear-gradient(138deg, #584e72 0%, #291f3e 55%, #0f0b19 100%);
}

/* rock-10 : 大塊尖裂岩A — wide upper-left slab */
.rock-10 {
    width: 144px;
    height: 108px;
    clip-path: polygon(6% 0%, 58% 8%, 100% 0%, 96% 42%, 100% 74%, 64% 100%, 12% 88%, 0% 58%, 10% 22%);
    left: -18px;
    top: 12%;
    animation: abyssFloatMid 5.3s ease-in-out infinite 3.5s;
    background: linear-gradient(158deg, #4c4568 0%, #221c36 55%, #0c0a16 100%);
}

/* =====================
   Desktop override — pull rocks inward from screen edges
   Mobile keeps original edge-hugging positions above.
   ===================== */
@media (min-width: 768px) {

    /* Far layer — pull in from extreme edges */
    .rock-1 {
        left: 6%;
        top: 7%;
    }

    .rock-2 {
        right: 7%;
        top: 5%;
    }

    .rock-3 {
        left: 5%;
        top: 34%;
    }

    .rock-4 {
        right: 4%;
        top: 48%;
    }

    .rock-5 {
        left: 8%;
        bottom: 16%;
    }

    .rock-11 {
        right: 22%;
        bottom: 10%;
    }

    .rock-12 {
        left: 14%;
        top: 3%;
    }

    /* Mid layer — pull large rocks away from the very frame */
    .rock-6 {
        left: 10px;
        top: 44%;
    }

    .rock-7 {
        right: 10px;
        top: 24%;
    }

    .rock-8 {
        right: 10%;
        bottom: 2%;
    }

    .rock-9 {
        left: 6%;
        top: 5%;
    }

    .rock-10 {
        left: 8px;
        top: 13%;
    }
}


/* === Rift Glow — more visible purple energy === */
.l36-debris-container .rift-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    mix-blend-mode: screen;
    z-index: 0;
}

.rift-1 {
    width: 420px;
    height: 260px;
    background: radial-gradient(ellipse at center, rgba(147, 51, 234, 0.28) 0%, rgba(109, 40, 217, 0.12) 40%, transparent 72%);
    left: -80px;
    top: 5%;
    animation: abyssGlowPulse 8s infinite alternate ease-in-out;
}

.rift-2 {
    width: 480px;
    height: 320px;
    background: radial-gradient(ellipse at center, rgba(88, 28, 135, 0.32) 0%, rgba(76, 29, 149, 0.14) 45%, transparent 72%);
    right: -100px;
    top: 45%;
    animation: abyssGlowPulse 10s infinite alternate ease-in-out 3s;
}

.rift-3 {
    width: 560px;
    height: 280px;
    background: radial-gradient(ellipse at center, rgba(124, 58, 237, 0.18) 0%, rgba(91, 33, 182, 0.08) 50%, transparent 75%);
    left: 25%;
    top: 30%;
    animation: abyssGlowPulse 13s infinite alternate ease-in-out 1.5s;
}

@keyframes abyssGlowPulse {
    0% {
        opacity: 0.55;
        transform: scale(0.92);
    }

    50% {
        opacity: 0.90;
        transform: scale(1.06);
    }

    100% {
        opacity: 0.65;
        transform: scale(1.02);
    }
}