/* ═══════════════════════════════════════════════════
   PORTFOLIO — Premium Light Theme CSS
   Primary #6366F1 · Accent #06B6D4 · Light backgrounds
   ═══════════════════════════════════════════════════ */

/* ─── Glass Card (Light) ─── */
.glass-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(226, 232, 240, 0.8);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06);
}
.glass-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.06), 0 20px 48px rgba(99,102,241,0.10);
}

/* ─── Hero Gradient Mesh (Light) ─── */
.hero-mesh {
    background:
        radial-gradient(ellipse 80% 60% at 20% 40%, rgba(99, 102, 241, 0.08) 0%, transparent 70%),
        radial-gradient(ellipse 60% 80% at 80% 60%, rgba(6, 182, 212, 0.07) 0%, transparent 70%),
        radial-gradient(ellipse 90% 50% at 50% 30%, rgba(139, 92, 246, 0.05) 0%, transparent 80%);
    animation: meshMove 14s ease-in-out infinite alternate;
}
@keyframes meshMove {
    0%   { background-position: 0% 0%, 100% 100%, 50% 50%; }
    50%  { background-position: 60% 40%, 40% 60%, 30% 70%; }
    100% { background-position: 100% 100%, 0% 0%, 50% 50%; }
}

/* ─── Floating Shapes ─── */
.floating-shape { position:absolute; border-radius:50%; animation: float 20s ease-in-out infinite; }
.shape-1 { width:500px; height:500px; background:linear-gradient(135deg,rgba(99,102,241,0.07),rgba(6,182,212,0.05)); top:5%; left:-8%; animation-delay:0s; }
.shape-2 { width:350px; height:350px; background:linear-gradient(135deg,rgba(6,182,212,0.06),rgba(99,102,241,0.04)); top:55%; right:-5%; animation-delay:-5s; }
.shape-3 { width:250px; height:250px; background:rgba(139,92,246,0.05); bottom:10%; left:25%; animation-delay:-10s; }
.shape-4 { width:180px; height:180px; background:rgba(6,182,212,0.06); top:15%; right:18%; animation-delay:-15s; border-radius:30% 70% 70% 30%/30% 30% 70% 70%; }
@keyframes float {
    0%,100% { transform:translate(0,0) rotate(0deg) scale(1); }
    25%     { transform:translate(30px,-40px) rotate(5deg) scale(1.05); }
    50%     { transform:translate(-20px,20px) rotate(-3deg) scale(0.95); }
    75%     { transform:translate(15px,30px) rotate(3deg) scale(1.02); }
}

/* ─── Skill Bars ─── */
.skill-bar { transition: width 1.5s cubic-bezier(0.22,1,0.36,1); }

/* ─── Reveal Animations ─── */
.section-heading { opacity:0; transform:translateY(30px); }
.section-heading.revealed { opacity:1; transform:translateY(0); transition:all 0.8s cubic-bezier(0.22,1,0.36,1); }
.project-card { opacity:0; transform:translateY(40px); }
.project-card.revealed { opacity:1; transform:translateY(0); transition:all 0.6s cubic-bezier(0.22,1,0.36,1); }
.timeline-item { opacity:0; transform:translateX(-30px); }
.timeline-item:nth-child(even) { transform:translateX(30px); }
.timeline-item.revealed { opacity:1; transform:translateX(0); transition:all 0.7s cubic-bezier(0.22,1,0.36,1); }

/* ─── Magnetic Buttons ─── */
.magnetic-btn { transition: transform 0.3s cubic-bezier(0.22,1,0.36,1); }

/* ─── Gradient text helper ─── */
.gradient-text { background:linear-gradient(135deg,#6366F1 0%,#06B6D4 50%,#8B5CF6 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

/* ─── Premium divider ─── */
.section-divider { height:1px; background:linear-gradient(90deg,transparent,#E2E8F0 30%,#E2E8F0 70%,transparent); }

/* ─── Scroll indicator ─── */
.scroll-indicator { animation: scrollPulse 2s ease-in-out infinite; }
@keyframes scrollPulse { 0%,100%{opacity:0.4} 50%{opacity:1} }

/* ─── Line Clamp ─── */
.line-clamp-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* ─── Reduced Motion ─── */
@media (prefers-reduced-motion:reduce) {
    *,*::before,*::after { animation-duration:0.01ms!important; animation-iteration-count:1!important; transition-duration:0.01ms!important; }
    .hero-mesh,.floating-shape { animation:none; }
}

/* ─── Scrollbar ─── */
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:#F8FAFF; }
::-webkit-scrollbar-thumb { background:#CBD5E1; border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:#94A3B8; }

/* ─── Selection ─── */
::selection { background:rgba(99,102,241,0.15); color:#0F172A; }