/* ===== GLASS + NEUMORPHISM + CLAYMORPHISM THEME — Jitesh Kaushik portfolio =====
   Keep the name glass-neu-theme.css (index.html already links it).
   WHO GETS WHAT
   • Glass  : header, menu, about/experience/timeline/slider/estimator/contact cards, modal, terminal, footer
   • Neumorphism : skills, portfolio & FAQ cards, slider arrows, filters, estimator options, header buttons, input fields
   • Claymorphism: CTA buttons, logo, timeline dots, icon tiles, card banners, footer round buttons
   Tip: to remove the soft light highlight on neumorphic items, set --neu-hl to transparent. */

/* ---------- Tokens ---------- */
html.dark {
  --glass: rgba(255,255,255,.07); --glass-strong: rgba(255,255,255,.12); --glass-b: rgba(255,255,255,.16);
  --sh: rgba(0,0,0,.38); --modal: rgba(18,24,44,.78);
  --surface: rgba(22,28,50,.88); --sh-d: rgba(2,5,15,.62); --neu-hl: rgba(85,100,170,.20); --inset: rgba(0,0,0,.24);
  --clay-base: #1b2240; --clay-in-l: rgba(255,255,255,.14); --clay-in-d: rgba(0,0,0,.38);
  --page: radial-gradient(circle at 20% 10%, #16204a 0%, #0a0f22 45%, #060912 100%);
}
html:not(.dark) {
  --glass: rgba(255,255,255,.45); --glass-strong: rgba(255,255,255,.66); --glass-b: rgba(255,255,255,.62);
  --sh: rgba(90,105,150,.28); --modal: rgba(244,247,255,.84);
  --surface: rgba(228,233,244,.90); --sh-d: rgba(150,163,196,.55); --neu-hl: rgba(255,255,255,.70); --inset: rgba(150,163,196,.20);
  --clay-base: #ffffff; --clay-in-l: rgba(255,255,255,.65); --clay-in-d: rgba(60,70,110,.16);
  --page: linear-gradient(135deg, #eef2fb 0%, #dfe6f5 50%, #e9e4f7 100%);
}
html {
  --glass-shadow: 0 8px 32px var(--sh);
  --raised: 9px 9px 20px var(--sh-d), -9px -9px 20px var(--neu-hl);
  --raised-sm: 5px 5px 11px var(--sh-d), -5px -5px 11px var(--neu-hl);
  --pressed: inset 5px 5px 11px var(--sh-d), inset -5px -5px 11px var(--neu-hl);
  --clay: 7px 9px 18px var(--sh), inset -5px -5px 10px var(--clay-in-d), inset 5px 5px 10px var(--clay-in-l);
  background: var(--page) fixed !important;
}

/* ---------- Floating orbs ---------- */
html body { background: transparent !important; }
html body::before, html body::after {
  content: ""; position: fixed; z-index: -1; border-radius: 50%;
  filter: blur(90px); pointer-events: none; opacity: .55;
  animation: orbFloat 18s ease-in-out infinite alternate;
}
html body::before { width: 46vmax; height: 46vmax; top: -12vmax; left: -10vmax; background: var(--accent-gradient-from); }
html body::after { width: 40vmax; height: 40vmax; bottom: -14vmax; right: -10vmax; background: var(--accent-gradient-to); animation-delay: -6s; }
html:not(.dark) body::before, html:not(.dark) body::after { opacity: .38; }
@keyframes orbFloat { to { transform: translate(6vmax, 5vmax) scale(1.12); } }

html body section { background: transparent !important; border-color: var(--glass-b) !important; }

/* =================== GLASS =================== */
html body header {
  background: var(--glass) !important;
  -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%);
  border-bottom: 1px solid var(--glass-b) !important; box-shadow: 0 6px 30px var(--sh);
}
html body :is([class*="bg-brand-darkCard"], [class*="bg-dev-darkCard"], .bg-white, .faq-item) {
  background: var(--glass) !important;
  -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%);
  border: 1px solid var(--glass-b) !important; box-shadow: var(--glass-shadow) !important;
}
html body #mobileMenu { -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); }
html body #projectModal > div {
  background: var(--modal) !important;
  -webkit-backdrop-filter: blur(26px) saturate(180%); backdrop-filter: blur(26px) saturate(180%);
}
html body [class*="bg-brand-darkCard"] { transition: transform .3s, box-shadow .3s, border-color .3s; }
html body [class*="bg-brand-darkCard"]:hover { box-shadow: 0 16px 44px var(--sh) !important; }

/* small tag chips = glass */
html body :is(span)[class*="bg-slate-100"], html body :is(span)[class*="dark:bg-slate-800"], html body #hero .inline-flex {
  background: var(--glass-strong) !important; border: 1px solid var(--glass-b) !important; box-shadow: none !important;
  border-radius: .8rem; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
html body #hero .inline-flex { border-radius: 999px; }
html body #hero span[class*="/30"] { background: var(--glass) !important; border-color: var(--glass-b) !important;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

/* dark feature panels */
html body :is(.bg-slate-900, .bg-gradient-to-br, footer) {
  background: rgba(10,14,30,.48) !important;
  -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%);
  border-color: rgba(255,255,255,.12) !important; box-shadow: var(--glass-shadow);
}
html body .bg-slate-950 { background: rgba(0,0,0,.28) !important; }

/* =================== NEUMORPHISM =================== */
/* cards: skills, portfolio, FAQ */
html body :is([class*="bg-dev-darkCard"], .faq-item) {
  background: var(--surface) !important; border: 1px solid transparent !important;
  box-shadow: var(--raised) !important; -webkit-backdrop-filter: none; backdrop-filter: none;
  transition: transform .3s, box-shadow .3s;
}
html body [class*="bg-dev-darkCard"]:not(button):hover { transform: translateY(-4px); box-shadow: 14px 14px 28px var(--sh-d), -14px -14px 28px var(--neu-hl) !important; }
html body .faq-item { border-radius: 1.1rem; }
html body .faq-content { border-top: 0 !important; background: var(--inset); box-shadow: var(--pressed);
  margin: 0 1rem 1rem; border-radius: .9rem; padding-top: 1rem !important; }

/* buttons */
html body header button[class*="bg-slate-100"], html body :is(#slideLeftBtn, #slideRightBtn),
html body .portfolio-filter, html body .est-btn, html body #estimator label.cursor-pointer {
  background: var(--surface) !important; border: 0 !important; color: inherit;
  box-shadow: var(--raised-sm) !important; border-radius: 1rem;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
html body .portfolio-filter { border-radius: 999px; }
html body :is(header button[class*="bg-slate-100"], #slideLeftBtn, #slideRightBtn):active { box-shadow: var(--pressed) !important; }
/* selected = pressed in */
html body .portfolio-filter.active, html body .est-btn.border-dynamic-accent,
html body #estimatorServiceOptions:not(:has(.border-dynamic-accent)) .est-btn:first-child,
html body #estimator label.cursor-pointer:has(input:checked) {
  box-shadow: var(--pressed) !important; outline: 1px solid var(--accent-primary); outline-offset: -1px;
}
html body .portfolio-filter.active { color: var(--accent-primary) !important; font-weight: 700; }

/* input fields: inset */
html body :is(input:not([type="checkbox"]), textarea, select) {
  background: var(--inset) !important; border: 0 !important; border-radius: 1rem !important;
  box-shadow: var(--pressed) !important;
}
html body :is(input, textarea, select):focus { outline: none; box-shadow: var(--pressed), 0 0 0 2px var(--accent-primary) !important; }

/* =================== CLAYMORPHISM =================== */
/* puffy CTA buttons */
html body :is(a, button).gradient-bg-accent {
  border: 0 !important; border-radius: 1.25rem !important; text-shadow: 0 1px 2px rgba(0,0,0,.22);
  box-shadow: 8px 10px 22px var(--accent-glow), inset -5px -6px 12px rgba(0,0,0,.22), inset 5px 6px 12px rgba(255,255,255,.42) !important;
  transition: transform .25s, box-shadow .25s;
}
html body :is(a, button).gradient-bg-accent:hover { transform: translateY(-2px); }
html body :is(a, button).gradient-bg-accent:active {
  transform: scale(.98);
  box-shadow: inset 5px 5px 12px rgba(0,0,0,.32), inset -4px -4px 10px rgba(255,255,255,.25) !important;
}
html body a[href="#estimator"].border {
  background: var(--surface); border: 0 !important; border-radius: 1.25rem; box-shadow: var(--raised-sm);
}
/* logo + timeline dots */
html body :is(header a div.gradient-bg-accent, .rounded-full.gradient-bg-accent) {
  box-shadow: 4px 6px 12px var(--accent-glow), inset -3px -3px 7px rgba(0,0,0,.22), inset 3px 3px 7px rgba(255,255,255,.45);
}
/* icon tiles */
html body div[class*="bg-slate-100"]:not(section),
html body :is(div[class*="bg-emerald-500/10"], div[class*="bg-blue-500/10"], div[class*="bg-purple-500/10"], div[class*="bg-teal-500/10"]) {
  border: 0 !important; border-radius: 1.1rem !important;
  background: color-mix(in srgb, currentColor 16%, var(--clay-base)) !important;
  box-shadow: var(--clay) !important;
}
/* card banners (slider + portfolio) */
html body .bg-gradient-to-tr {
  box-shadow: inset -8px -8px 18px var(--clay-in-d), inset 8px 8px 18px var(--clay-in-l);
  border-radius: 1.25rem 1.25rem 2rem 2rem;
}
/* footer round buttons */
html body footer a.bg-slate-800 {
  background: linear-gradient(135deg, var(--accent-gradient-from), var(--accent-gradient-to)) !important;
  color: #fff !important; border: 0 !important; border-radius: .9rem;
  box-shadow: 4px 6px 12px var(--accent-glow), inset -3px -3px 7px rgba(0,0,0,.22), inset 3px 3px 7px rgba(255,255,255,.42) !important;
}

/* timeline line + progress bar */
html body :is(.bg-slate-200, [class*="bg-slate-200"]):not(.hidden) { background: linear-gradient(var(--glass-b), transparent) !important; }
html body #scrollProgressBar { box-shadow: 0 0 14px var(--accent-glow); }

/* =================== LIGHT MODE: no dark surfaces =================== */
html:not(.dark) body :is(.bg-slate-900, .bg-gradient-to-br, footer) { background: var(--glass) !important; border-color: var(--glass-b) !important; }
html:not(.dark) body .bg-slate-950 { background: rgba(255,255,255,.35) !important; }
html:not(.dark) #hero .bg-slate-900 .bg-slate-800 { background: var(--glass-strong) !important; }
html:not(.dark) body .bg-gradient-to-tr {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-gradient-from) 28%, #fff), color-mix(in srgb, var(--accent-gradient-to) 22%, #fff)) !important;
}
html:not(.dark) body :is(.bg-slate-900, .bg-gradient-to-br, footer) .text-white:not([class*="bg-"]) { color: #0f172a !important; }
html:not(.dark) body :is(.bg-slate-900, .bg-gradient-to-br, footer, .bg-gradient-to-tr) :is(.text-slate-200, .text-slate-300, .text-slate-400, .text-slate-500) { color: #475569 !important; }
html:not(.dark) body footer li:hover { color: #0f172a; }
html:not(.dark) body footer strong { color: #0f172a !important; }
html:not(.dark) #hero .bg-slate-900 :is(.text-yellow-300, .text-amber-400) { color: #b45309 !important; }
html:not(.dark) #hero .bg-slate-900 :is(.text-emerald-400, .text-emerald-300) { color: #047857 !important; }
html:not(.dark) #hero .bg-slate-900 .text-cyan-400 { color: #0e7490 !important; }
html:not(.dark) #hero .bg-slate-900 .text-rose-300 { color: #be123c !important; }
html:not(.dark) #hero .bg-slate-900 :is(.text-purple-400, .text-purple-300) { color: #7c3aed !important; }
html:not(.dark) section.bg-slate-900 .text-yellow-400 { color: #ca8a04 !important; }
html:not(.dark) section.bg-slate-900 .text-blue-400 { color: #2563eb !important; }
html:not(.dark) section.bg-slate-900 .text-emerald-400 { color: #059669 !important; }
html:not(.dark) section.bg-slate-900 .text-indigo-400 { color: #4f46e5 !important; }
html:not(.dark) section.bg-slate-900 .text-purple-400 { color: #7c3aed !important; }
html:not(.dark) .bg-gradient-to-tr .text-amber-400 { color: #d97706 !important; }
html:not(.dark) .bg-gradient-to-tr .text-teal-400 { color: #0d9488 !important; }
html:not(.dark) .bg-gradient-to-tr .text-purple-400 { color: #7c3aed !important; }
html:not(.dark) .bg-gradient-to-tr .text-blue-400 { color: #2563eb !important; }
html:not(.dark) .bg-gradient-to-tr :is(.text-emerald-400, .text-emerald-500) { color: #059669 !important; }
html:not(.dark) .bg-gradient-to-tr .text-rose-400 { color: #e11d48 !important; }

/* =================== Performance / accessibility =================== */
@media (max-width: 640px) {
  html body :is([class*="bg-brand-darkCard"], .faq-item) { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  html body::before, html body::after { filter: blur(60px); }
}
@media (prefers-reduced-motion: reduce) { html body::before, html body::after { animation: none; } html body * { transition: none !important; } }