/* NFT Section Styles */
#nfts {
    position: relative;
    min-height: 100vh;
    background: #000000;
    overflow: hidden;
    padding: 80px 20px;
}

#nfts .section-content {
    position: relative;
    z-index: 1;
}

#nfts .title {
    color: #6a00ff;
    text-align: center;
    margin-bottom: 40px;
    position: relative;
    z-index: 2;
}

#nfts .title span {
    background: linear-gradient(180deg, rgb(255 254 0) 0%, rgb(255 0 179) 100%);
    -webkit-background-clip: text;
}

.nft-container {
    position: relative;
    width: 100%;
    height: 80vh;
}

/* Main rotating showcase */
.nft-showcase {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 2000px;
    z-index: 2;
}

.nft-circle {
    position: relative;
    width: 800px;
    height: 400px;
    transform-style: preserve-3d;
    transform: rotateX(10deg);
}

.nft {
    position: absolute;
    width: 180px;
    height: 180px;
    left: 50%;
    top: 50%;
    margin: -90px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    cursor: pointer;
    transform-style: preserve-3d;
    transition: all 0.4s ease;
    backface-visibility: hidden;
    filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.5));
}

.nft img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 12px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(5px);
    pointer-events: none;
}

.nft.active {
    transform: scale(1.2) translateZ(100px);
    z-index: 10;
}

.nft.active img {
    border-color: rgba(255, 215, 0, 0.5);
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.3);
}

/* Floating background NFTs */
.floating-nfts {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.float-nft {
    position: absolute;
    width: 120px;
    height: 120px;
    object-fit: contain;
    filter: blur(1px) brightness(0.7);
    border-radius: 10px;
    opacity: 0.6;
    transform-style: preserve-3d;
    z-index: 1;
}

.float-nft:nth-child(1) {
    top: 10%;
    left: 5%;
    animation: float1 15s ease-in-out infinite;
}

.float-nft:nth-child(2) {
    top: 70%;
    left: 15%;
    animation: float2 18s ease-in-out infinite;
}

.float-nft:nth-child(3) {
    top: 25%;
    left: 80%;
    animation: float3 20s ease-in-out infinite;
}

.float-nft:nth-child(4) {
    top: 60%;
    left: 85%;
    animation: float4 17s ease-in-out infinite;
}

.float-nft:nth-child(5) {
    top: 35%;
    left: 20%;
    animation: float5 19s ease-in-out infinite;
}

.float-nft:nth-child(6) {
    top: 15%;
    left: 65%;
    animation: float6 16s ease-in-out infinite;
}

.float-nft:nth-child(7) {
    top: 80%;
    left: 40%;
    animation: float7 21s ease-in-out infinite;
}

.float-nft:nth-child(8) {
    top: 50%;
    left: 10%;
    animation: float8 14s ease-in-out infinite;
}

.float-nft:nth-child(9) {
    top: 30%;
    left: 40%;
    animation: float9 22s ease-in-out infinite;
}

.float-nft:nth-child(10) {
    top: 65%;
    left: 60%;
    animation: float10 15s ease-in-out infinite;
}

/* Floating animations */
@keyframes float1 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(20px, 15px) rotate(5deg); }
    50% { transform: translate(10px, 30px) rotate(0deg); }
    75% { transform: translate(-10px, 10px) rotate(-5deg); }
}

@keyframes float2 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(-15px, 10px) rotate(-3deg); }
    50% { transform: translate(-25px, -15px) rotate(-6deg); }
    75% { transform: translate(-5px, -25px) rotate(-2deg); }
}

@keyframes float3 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(-20px, 20px) rotate(7deg); }
    50% { transform: translate(-30px, 10px) rotate(0deg); }
    75% { transform: translate(-15px, -10px) rotate(-7deg); }
}

@keyframes float4 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    33% { transform: translate(15px, -15px) rotate(-5deg); }
    66% { transform: translate(25px, 5px) rotate(5deg); }
}

@keyframes float5 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    30% { transform: translate(25px, 10px) rotate(8deg); }
    60% { transform: translate(15px, 30px) rotate(0deg); }
    80% { transform: translate(-10px, 15px) rotate(-8deg); }
}

@keyframes float6 {
    0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
    25% { transform: translate(-10px, 20px) rotate(-4deg) scale(1.05); }
    50% { transform: translate(-20px, 10px) rotate(-8deg) scale(1.1); }
    75% { transform: translate(-5px, -10px) rotate(-4deg) scale(1.05); }
}

@keyframes float7 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(10px, -20px) rotate(6deg); }
    50% { transform: translate(20px, -10px) rotate(0deg); }
    75% { transform: translate(5px, 10px) rotate(6deg); }
}

@keyframes float8 {
    0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
    33% { transform: translate(-25px, -15px) rotate(-10deg) scale(0.95); }
    66% { transform: translate(-10px, -30px) rotate(10deg) scale(0.9); }
}

@keyframes float9 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(30px, 30px) rotate(15deg); }
}

@keyframes float10 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(-20px, -15px) rotate(-8deg); }
    50% { transform: translate(-10px, -30px) rotate(0deg); }
    75% { transform: translate(10px, -10px) rotate(8deg); }
}

/* Additional floating NFT positions */
.float-nft:nth-child(11) {
    top: 45%;
    left: 75%;
    animation: float3 23s ease-in-out infinite;
}

.float-nft:nth-child(12) {
    top: 25%;
    left: 30%;
    animation: float5 18s ease-in-out infinite;
}

.float-nft:nth-child(13) {
    top: 85%;
    left: 25%;
    animation: float7 19s ease-in-out infinite;
}

.float-nft:nth-child(14) {
    top: 75%;
    left: 70%;
    animation: float4 24s ease-in-out infinite;
}

.float-nft:nth-child(15) {
    top: 40%;
    left: 55%;
    animation: float8 17s ease-in-out infinite;
}

/* Continue positions for all additional NFTs */
.float-nft:nth-child(n+16) {
    opacity: 0.5;
    filter: blur(2px) brightness(0.6);
}

.float-nft:nth-child(16) {
    top: 15%;
    left: 45%;
    animation: float2 25s ease-in-out infinite;
}

.float-nft:nth-child(17) {
    top: 65%;
    left: 5%;
    animation: float5 26s ease-in-out infinite;
}

.float-nft:nth-child(18) {
    top: 20%;
    left: 88%;
    animation: float6 22s ease-in-out infinite;
}

.float-nft:nth-child(19) {
    top: 90%;
    left: 50%;
    animation: float1 20s ease-in-out infinite;
}

.float-nft:nth-child(20) {
    top: 5%;
    left: 35%;
    animation: float9 27s ease-in-out infinite;
}

/* Add positions for remaining NFTs (21-33) with varied positions and animations */
.float-nft:nth-child(n+21) {
    opacity: 0.4;
    transform: scale(0.7);
}

/* Responsive Design */
@media (max-width: 768px) {
    .nft-circle {
        width: 400px;
        height: 300px;
        transform: rotateX(5deg);
    }
    
    .nft {
        width: 140px;
        height: 140px;
        margin: -70px;
    }
    
    .float-nft {
        width: 80px;
        height: 80px;
    }
}