/* style.css */



body {

    background-color: #050505;

    color: white;

    overflow-x: hidden;

}



/* Custom Scrollbar */

::-webkit-scrollbar { width: 6px; }

::-webkit-scrollbar-track { background: #000; }

::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }



/* 3D Grid Background */

.perspective-grid {

    position: absolute;

    top: 0; left: 0; width: 100%; height: 100%;

    background-image: 

        linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),

        linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);

    background-size: 50px 50px;

    mask-image: linear-gradient(to bottom, black 20%, transparent 100%);

    -webkit-mask-image: linear-gradient(to bottom, black 20%, transparent 100%);

    z-index: -1;

    transform: perspective(500px) rotateX(60deg) scale(2);

    transform-origin: top center;

    opacity: 0.3;

    animation: gridFlow 20s linear infinite;

}



/* Navigation */

.glass-nav {

    background: rgba(5, 5, 5, 0.8);

    backdrop-filter: blur(16px);

    -webkit-backdrop-filter: blur(16px);

    border-bottom: 1px solid rgba(255, 255, 255, 0.05);

}



/* Mobile Menu Transition */

#mobile-menu {

    transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;

    max-height: 0;

    opacity: 0;

    overflow: hidden;

}

#mobile-menu.open {

    max-height: 400px;

    opacity: 1;

}



/* Spotlight Card */

.spotlight-card {

    position: relative;

    background: rgba(20, 20, 20, 0.6);

    border: 1px solid rgba(255, 255, 255, 0.1);

    overflow: hidden;

}

.spotlight-card::before {

    content: '';

    position: absolute;

    height: 100%; width: 100%; top: 0; left: 0;

    background: radial-gradient(800px circle at var(--mouse-x) var(--mouse-y), rgba(16, 185, 129, 0.1), transparent 40%);

    opacity: 0; transition: opacity 0.5s; pointer-events: none; z-index: 1;

}

.spotlight-card:hover::before { opacity: 1; }



/* Magazine Card */

.mag-card-img-container {

    overflow: hidden;

}

.mag-card:hover .mag-card-img {

    transform: scale(1.05);

}

.mag-card:hover {

    border-color: rgba(16, 185, 129, 0.3);

    box-shadow: 0 0 30px rgba(16, 185, 129, 0.1);

}



/* Text & Animations */

.text-gradient-animate {

    background: linear-gradient(to right, #10b981, #06b6d4, #8b5cf6, #10b981);

    background-size: 200% auto;

    color: transparent;

    -webkit-background-clip: text;

    background-clip: text;

    animation: shimmer 5s linear infinite;

}

.cursor-blink { border-right: 3px solid #10b981; animation: blink 1s step-end infinite; }

.hologram-container { box-shadow: 0 0 50px rgba(16, 185, 129, 0.1), inset 0 0 20px rgba(16, 185, 129, 0.05); }



@keyframes gridFlow { from { transform: translateY(0); } to { transform: translateY(50px); } }

@keyframes shimmer { 0% { backgroundPosition: '0% 50%' } 100% { backgroundPosition: '200% 50%' } }

@keyframes blink { 50% { border-color: transparent; } }