/* Tailwind 4: dark variant = .dark class on html */
@custom-variant dark (&:where(.dark, .dark *));

@theme {
    --font-body: 'Inter', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
}

/* ---- Keyframes ---- */
@keyframes fade-in-up { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:translateY(0); } }
@keyframes blink { 50% { opacity:0; } }
@keyframes bounce-slow { 0%,100% { transform:translateX(-50%) translateY(0); } 50% { transform:translateX(-50%) translateY(-8px); } }
@keyframes scroll-dot { 0% { transform:translateY(0); opacity:1; } 100% { transform:translateY(16px); opacity:0; } }
@keyframes scale-in { from { opacity:0; transform:scale(0.95); } to { opacity:1; transform:scale(1); } }
@keyframes spin-slow { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }

/* ---- Base ---- */
::selection { background-color:rgba(6,182,212,0.25); }
html { -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
body { font-family:'Inter',sans-serif; background:#ffffff; color:#1e293b; transition:background-color 0.4s ease, color 0.4s ease; }
html.dark body { background:#0b0f1a; color:#cbd5e1; }

.animate-fade-in-up { animation:fade-in-up 0.7s ease both; }
.animate-blink { animation:blink 1s step-end infinite; }
.animate-bounce-slow { animation:bounce-slow 3s ease-in-out infinite; }
.animate-scroll-dot { animation:scroll-dot 2s ease-in-out infinite; }
.animate-spin-slow { animation:spin-slow 25s linear infinite; }
.animate-spin-slower { animation:spin-slow 35s linear infinite reverse; }

/* ============================================
   NAVIGATION
   ============================================ */
#navbar { backdrop-filter:blur(0); background:transparent; transition:all 0.4s ease; }
#navbar.scrolled { backdrop-filter:blur(16px); background:rgba(255,255,255,0.92); border-bottom:1px solid #e2e8f0; }
.dark #navbar.scrolled { background:rgba(11,15,26,0.92); border-bottom-color:rgba(255,255,255,0.06); }

.nav-link { position:relative; padding:0.5rem 1rem; font-size:0.875rem; font-weight:500; color:#475569; transition:color 0.25s; text-decoration:none; }
.nav-link::after { content:''; position:absolute; bottom:0; left:50%; width:0; height:2px; background:#06b6d4; transition:width 0.25s; transform:translateX(-50%); border-radius:1px; }
.nav-link:hover, .nav-link.active { color:#0891b2; }
.nav-link:hover::after, .nav-link.active::after { width:50%; }
.dark .nav-link { color:#94a3b8; }
.dark .nav-link:hover, .dark .nav-link.active { color:#22d3ee; }

.mobile-nav-link { display:block; padding:0.75rem 1rem; border-radius:0.5rem; font-weight:500; color:#334155; transition:all 0.2s; text-decoration:none; }
.mobile-nav-link:hover, .mobile-nav-link.active { background:rgba(6,182,212,0.08); color:#0891b2; }
.dark .mobile-nav-link { color:#94a3b8; }
.dark .mobile-nav-link:hover, .dark .mobile-nav-link.active { background:rgba(6,182,212,0.1); color:#22d3ee; }

/* ============================================
   SOCIAL ICONS
   ============================================ */
.social-icon { display:flex; align-items:center; justify-content:center; width:2.5rem; height:2.5rem; border-radius:0.5rem; border:1px solid #cbd5e1; color:#475569; transition:all 0.25s; text-decoration:none; }
.social-icon:hover { border-color:#0891b2; color:#0891b2; transform:translateY(-2px); }
.dark .social-icon { border-color:#1e293b; color:#94a3b8; }
.dark .social-icon:hover { border-color:#06b6d4; color:#22d3ee; }

/* ============================================
   SCROLL ANIMATIONS
   ============================================ */
[data-animate] { opacity:0; transform:translateY(30px); transition:opacity 0.6s ease, transform 0.6s ease; }
[data-animate].visible { opacity:1; transform:translateY(0); }
[data-animate="left"] { transform:translateX(-40px); }
[data-animate="left"].visible { transform:translateX(0); }
[data-animate="right"] { transform:translateX(40px); }
[data-animate="right"].visible { transform:translateX(0); }

[data-stagger] > * { opacity:0; transform:translateY(15px); transition:opacity 0.4s ease, transform 0.4s ease; }
[data-stagger].visible > *:nth-child(1) { transition-delay:0.05s; }
[data-stagger].visible > *:nth-child(2) { transition-delay:0.1s; }
[data-stagger].visible > *:nth-child(3) { transition-delay:0.15s; }
[data-stagger].visible > *:nth-child(4) { transition-delay:0.2s; }
[data-stagger].visible > *:nth-child(5) { transition-delay:0.25s; }
[data-stagger].visible > *:nth-child(6) { transition-delay:0.3s; }
[data-stagger].visible > *:nth-child(7) { transition-delay:0.35s; }
[data-stagger].visible > *:nth-child(8) { transition-delay:0.4s; }
[data-stagger].visible > *:nth-child(9) { transition-delay:0.45s; }
[data-stagger].visible > *:nth-child(10) { transition-delay:0.5s; }
[data-stagger].visible > *:nth-child(n+11) { transition-delay:0.55s; }
[data-stagger].visible > * { opacity:1; transform:translateY(0); }

/* ============================================
   CARDS — strong light mode contrast
   ============================================ */
.glass-card { background:#ffffff; border:1px solid #e2e8f0; border-radius:1rem; transition:transform 0.3s ease, border-color 0.3s ease; }
.dark .glass-card { background:#111827; border-color:#1e293b; }
.glass-card:hover { transform:translateY(-3px); border-color:#0891b2; }
.dark .glass-card:hover { border-color:rgba(6,182,212,0.4); }

.stat-card { padding:2rem; border-radius:1rem; background:#f8fafc; border:1px solid #e2e8f0; transition:transform 0.3s ease; }
.dark .stat-card { background:#111827; border-color:#1e293b; }
.stat-card:hover { transform:translateY(-2px); }

/* ============================================
   SKILL TAGS
   ============================================ */
.skill-tag { display:inline-flex; align-items:center; padding:0.375rem 0.875rem; border-radius:0.5rem; font-size:0.8125rem; font-weight:500; font-family:'JetBrains Mono',monospace; background:#ecfeff; color:#0e7490; border:1px solid #a5f3fc; transition:all 0.25s; }
.dark .skill-tag { background:rgba(6,182,212,0.08); color:#67e8f9; border-color:rgba(6,182,212,0.2); }
.skill-tag:hover { background:#cffafe; transform:translateY(-1px); }
.dark .skill-tag:hover { background:rgba(6,182,212,0.14); }

/* ============================================
   SECTION HEADERS
   ============================================ */
.section-header { margin-bottom:3rem; }
.section-label { display:inline-flex; align-items:center; gap:0.5rem; padding:0.375rem 1rem; border-radius:0.75rem; font-size:0.75rem; font-family:'JetBrains Mono',monospace; font-weight:600; color:#0891b2; background:#ecfeff; border:1px solid #a5f3fc; margin-bottom:1.25rem; letter-spacing:0.02em; }
.dark .section-label { color:#22d3ee; background:rgba(6,182,212,0.08); border-color:rgba(6,182,212,0.2); }
.section-title { font-weight:700; font-size:2.25rem; line-height:1.2; letter-spacing:-0.02em; color:#0f172a; }
.dark .section-title { color:#f1f5f9; }
@media (min-width:768px) { .section-title { font-size:2.75rem; } }

.page-hero { padding-top:7rem; padding-bottom:3rem; }

/* ============================================
   PORTFOLIO
   ============================================ */
.portfolio-item { position:relative; border-radius:0.75rem; overflow:hidden; cursor:pointer; aspect-ratio:4/3; background:#f1f5f9; border:1px solid #e2e8f0; }
.dark .portfolio-item { background:#111827; border-color:#1e293b; }
.portfolio-item img { width:100%; height:100%; object-fit:cover; transition:transform 0.5s ease; }
.portfolio-item:hover img { transform:scale(1.05); }
.portfolio-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,0.75) 0%,transparent 60%); opacity:0; transition:opacity 0.35s ease; display:flex; align-items:flex-end; padding:1.25rem; }
.portfolio-item:hover .portfolio-overlay { opacity:1; }

/* ============================================
   BLOG CARDS
   ============================================ */
.blog-card { border-radius:1rem; overflow:hidden; background:#fff; border:1px solid #e2e8f0; transition:transform 0.3s ease, border-color 0.3s ease; }
.dark .blog-card { background:#111827; border-color:#1e293b; }
.blog-card:hover { transform:translateY(-3px); border-color:#0891b2; }
.dark .blog-card:hover { border-color:rgba(6,182,212,0.4); }
.blog-card .card-image { aspect-ratio:16/9; overflow:hidden; }
.blog-card .card-image img { width:100%; height:100%; object-fit:cover; transition:transform 0.5s ease; }
.blog-card:hover .card-image img { transform:scale(1.03); }

/* ============================================
   FILTER BUTTONS
   ============================================ */
.filter-btn { padding:0.5rem 1.25rem; border-radius:0.75rem; font-size:0.8125rem; font-weight:600; font-family:'JetBrains Mono',monospace; border:1px solid #cbd5e1; color:#475569; background:transparent; cursor:pointer; transition:all 0.25s; }
.dark .filter-btn { border-color:#1e293b; color:#94a3b8; }
.filter-btn:hover, .filter-btn.active { background:#06b6d4; border-color:#06b6d4; color:#fff; }

/* ============================================
   SERVICE CARDS
   ============================================ */
.service-card { padding:2rem; border-radius:1rem; background:#fff; border:1px solid #e2e8f0; transition:transform 0.3s ease, border-color 0.3s ease; position:relative; overflow:hidden; }
.dark .service-card { background:#111827; border-color:#1e293b; }
.service-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,#06b6d4,#3b82f6); transform:scaleX(0); transition:transform 0.35s ease; transform-origin:left; }
.service-card:hover::before { transform:scaleX(1); }
.service-card:hover { transform:translateY(-3px); border-color:#0891b2; }
.dark .service-card:hover { border-color:rgba(6,182,212,0.3); }

/* ============================================
   PROJECT LOGO CONTAINER
   ============================================ */
.project-logo { width:100%; aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; overflow:hidden; border-radius:0.75rem; margin-bottom:1.5rem; border:1px solid #e2e8f0; }
.dark .project-logo { border-color:#1e293b; }
.project-logo img { max-width:85%; max-height:85%; object-fit:contain; transition:transform 0.3s ease; }
.project-logo:hover img { transform:scale(1.05); }
.project-logo.dark-bg { background:#1a1a2e; }
.project-logo.light-bg { background:#f8fafc; }

/* ============================================
   SCROLLBAR
   ============================================ */
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:#f1f5f9; }
.dark ::-webkit-scrollbar-track { background:#0b0f1a; }
::-webkit-scrollbar-thumb { background:#cbd5e1; border-radius:3px; }
.dark ::-webkit-scrollbar-thumb { background:#1e293b; }
::-webkit-scrollbar-thumb:hover { background:#06b6d4; }

@media (max-width:768px) { .section-title { font-size:1.875rem; } }

/* Logo S - forced color for light/dark */
.logo-s { color: #0f172a !important; font-weight: inherit; }
html.dark .logo-s { color: #ffffff !important; }

.t-dark { color: #0f172a !important; }
html.dark .t-dark { color: #ffffff !important; }