/* =====================================================
   NEXCODD — Shared Stylesheet
   ===================================================== */

body {
    background-color: #050505;
    color: #e5e2e1;
    overflow-x: hidden;
}

/* ----- Bento Card ----- */
.bento-card {
    background-color: #111111;
    border: 1px solid #1E1E1E;
    border-radius: 28px;
    transition: all 0.3s ease;
}
.bento-card:hover {
    box-shadow: 0 0 30px rgba(0, 255, 136, 0.05);
    border-color: rgba(0, 255, 136, 0.2);
}

/* ----- Ambient Orb ----- */
.ambient-orb {
    position: fixed;
    border-radius: 50%;
    filter: blur(150px);
    opacity: 0.15;
    z-index: -1;
    pointer-events: none;
}

/* ----- Glow / Neon ----- */
.neon-glow {
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.3);
}
.glow-text {
    text-shadow: 0 0 30px rgba(0, 255, 136, 0.3);
}

/* ----- Pulse Animations ----- */
@keyframes pulse-neon {
    0%   { box-shadow: 0 0 10px rgba(0, 255, 136, 0.2); }
    50%  { box-shadow: 0 0 25px rgba(0, 255, 136, 0.4); }
    100% { box-shadow: 0 0 10px rgba(0, 255, 136, 0.2); }
}
.pulse-btn { animation: pulse-neon 3s ease-in-out infinite; }

@keyframes pulse-border {
    0%   { border-color: rgba(0, 255, 136, 0.1); }
    50%  { border-color: rgba(0, 255, 136, 0.4); }
    100% { border-color: rgba(0, 255, 136, 0.1); }
}
.pulse-border { animation: pulse-border 4s ease-in-out infinite; }

/* ----- Scroll Reveal ----- */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    filter: blur(8px);
    transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.active {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

/* ----- Magnetic / 3D Card ----- */
.magnetic-card {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow  0.4s ease,
                border-color 0.4s ease;
    transform: perspective(1000px)
               rotateX(var(--rot-x, 0deg))
               rotateY(var(--rot-y, 0deg))
               scale3d(1, 1, 1);
    transform-style: preserve-3d;
}
.magnetic-card:hover {
    transition: transform 0.1s ease,
                box-shadow  0.4s ease,
                border-color 0.4s ease;
}

/* ----- Shimmer ----- */
.shimmer { position: relative; overflow: hidden; }
.shimmer::after {
    content: '';
    position: absolute;
    top: 0; left: -150%;
    width: 50%; height: 100%;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.04), transparent);
    transform: skewX(-20deg);
    animation: shimmer-anim 8s infinite linear;
    pointer-events: none;
    z-index: 10;
}
@keyframes shimmer-anim {
    0%   { left: -150%; }
    15%  { left: 200%; }
    100% { left: 200%; }
}

/* ----- Float ----- */
@keyframes float-anim {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-12px); }
    100% { transform: translateY(0); }
}
.float-anim { animation: float-anim 6s ease-in-out infinite; }

/* ----- Portfolio Hover ----- */
.portfolio-hover-overlay {
    opacity: 0;
    transition: opacity 0.4s ease;
    background: linear-gradient(to top, rgba(17,17,17,0.95) 0%, rgba(17,17,17,0.4) 100%);
}
.group:hover .portfolio-hover-overlay { opacity: 1; }
.portfolio-content-slide {
    transform: translateY(20px);
    transition: transform 0.4s ease;
}
.group:hover .portfolio-content-slide { transform: translateY(0); }

/* ----- Form Inputs ----- */
.neon-focus:focus {
    border-color: #00ff88;
    box-shadow: 0 0 15px rgba(0,255,136,0.2), inset 0 0 10px rgba(0,255,136,0.1);
    outline: none;
}

/* ----- Scrollbar ----- */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #131313; }
::-webkit-scrollbar-thumb { background: #1E1E1E; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #353534; }

/* ----- Selection ----- */
::selection { background: #00ff88; color: #000; }

/* ----- Flash Messages ----- */
.flash-success {
    background: rgba(0,255,136,0.1);
    border: 1px solid rgba(0,255,136,0.3);
    color: #00ff88;
    border-radius: 12px;
    padding: 12px 20px;
    font-size: 14px;
}
.flash-error {
    background: rgba(255,75,75,0.1);
    border: 1px solid rgba(255,75,75,0.3);
    color: #ff6b6b;
    border-radius: 12px;
    padding: 12px 20px;
    font-size: 14px;
}

/* ----- Admin Table ----- */
.admin-table th {
    background: #0e0e0e;
    color: #b9cbb9;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 12px 16px;
    border-bottom: 1px solid #1E1E1E;
}
.admin-table td {
    padding: 14px 16px;
    border-bottom: 1px solid #1a1a1a;
    color: #e5e2e1;
    font-size: 14px;
}
.admin-table tr:hover td { background: rgba(0,255,136,0.02); }

/* ----- Reduced Motion ----- */
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; filter: none; transition: none; }
    .pulse-btn, .pulse-border, .float-anim { animation: none; }
    .shimmer::after { animation: none; }
    .magnetic-card { transform: none !important; transition: none !important; }
}