/* ================================================================
   CORE IT — Custom CSS (Separated)
   Community of Research & Engineering in Information Technology
   Global Institute | 2026
   ================================================================ */

:root {
  --primary-500: #0066ff;
  --accent-cyan: #00d4ff;
  --accent-purple: #7c3aed;
  --section-padding-y: 6rem;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: #f1f5f9;
}
.dark ::-webkit-scrollbar-track {
  background: #0a0a0f;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 9999px;
  border: 2px solid #f1f5f9;
}
.dark ::-webkit-scrollbar-thumb {
  background: #1e293b;
  border: 2px solid #0a0a0f;
}
::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}
.dark ::-webkit-scrollbar-thumb:hover {
  background: #334155;
}

body {
  font-family: 'Inter', sans-serif;
  background: #f8fafc;
  color: #1e293b;
  transition: background 0.5s cubic-bezier(0.16, 1, 0.3, 1), color 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.dark body { 
  background: #08080c; 
  color: #e2e8f0; 
}

/* ─── Particles Canvas ─── */
#particles-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* ─── Glassmorphism Nav ─── */
#navbar {
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  border-bottom: 1px solid transparent;
  transition: backdrop-filter 0.4s, background 0.4s, box-shadow 0.4s, border-color 0.4s;
}
#navbar.scrolled {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: rgba(255, 255, 255, 0.75) !important;
  border-bottom: 1px solid rgba(0, 102, 255, 0.08);
  box-shadow: 0 10px 30px -10px rgba(0, 102, 255, 0.06);
}
.dark #navbar.scrolled { 
  background: rgba(5, 5, 8, 0.75) !important; 
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.4);
}

/* ─── Nav underline effect ─── */
.nav-link {
  position: relative;
  font-weight: 500;
  color: #475569;
  transition: color 0.2s;
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 2px;
  background: var(--primary-500);
  border-radius: 9999px;
  transition: width 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-link:hover { color: #0066ff; }
.nav-link:hover::after { width: 100%; }
.dark .nav-link { color: #cbd5e1; }
.dark .nav-link:hover { color: #3385ff; }

/* ─── Hero background ─── */
.hero-bg {
  background: radial-gradient(circle at 50% 30%, #111827 0%, #0f172a 60%, #030712 100%);
  position: relative;
  overflow: hidden;
}

/* ─── Floating animation ─── */
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }
.float-anim { animation: float 5s ease-in-out infinite; }

/* ─── Gradient text ─── */
.gradient-text {
  color: #0066ff;
}
.dark .gradient-text {
  color: #3385ff;
}

/* ─── Feature card styling ─── */
.feature-card {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s;
  background: #ffffff;
  border: 1px solid rgba(0, 102, 255, 0.05);
}
.feature-card:hover {
  transform: translateY(-8px);
  border-color: rgba(0, 102, 255, 0.2);
  box-shadow: 0 20px 40px -15px rgba(0, 102, 255, 0.12);
}
.dark .feature-card {
  background: rgba(26, 26, 46, 0.45);
  border-color: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(8px);
}
.dark .feature-card:hover {
  border-color: rgba(0, 102, 255, 0.3);
  box-shadow: 0 20px 40px -15px rgba(0, 102, 255, 0.25);
}

/* ─── Service card ─── */
.service-card {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s;
  background: #ffffff;
  border: 1px solid rgba(0, 102, 255, 0.05);
}
.service-card:hover {
  transform: translateY(-8px);
  border-color: rgba(0, 102, 255, 0.15);
  box-shadow: 0 20px 40px -15px rgba(0, 102, 255, 0.1);
}
.dark .service-card {
  background: rgba(26, 26, 46, 0.45);
  border-color: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(8px);
}
.dark .service-card:hover {
  border-color: rgba(0, 102, 255, 0.25);
  box-shadow: 0 20px 40px -15px rgba(0, 102, 255, 0.2);
}

/* ─── Gallery filter ─── */
.gallery-item { 
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); 
}
.gallery-item.hidden-item { 
  display: none !important; 
}

/* ─── Lightbox ─── */
#lightbox {
  display: none;
  position: fixed; inset: 0; z-index: 999;
  background: rgba(5, 5, 8, 0.95);
  align-items: center; justify-content: center;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
#lightbox.open { display: flex; }
#lightbox img { max-width: 90vw; max-height: 80vh; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.08); }

/* ─── Program Modal ─── */
#program-modal {
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
#program-modal.open {
  display: flex;
  opacity: 1;
}
#program-modal .modal-content {
  transform: translateY(24px) scale(0.95);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
#program-modal.open .modal-content {
  transform: translateY(0) scale(1);
}

/* ─── Toast ─── */
#toast {
  position: fixed; bottom: 2rem; right: 2rem; z-index: 9999;
  transform: translateY(150%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#toast.show { transform: translateY(0); }

/* ─── Back to top ─── */
#back-top {
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s, transform 0.3s, background 0.3s;
  transform: translateY(10px);
}
#back-top.show { opacity: 1; pointer-events: auto; transform: translateY(0); }

/* ─── Fade-up animation (AOS-like) ─── */
[data-aos] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-aos].aos-animate {
  opacity: 1;
  transform: translateY(0);
}
[data-aos][data-aos-delay="100"] { transition-delay: 0.08s; }
[data-aos][data-aos-delay="200"] { transition-delay: 0.16s; }
[data-aos][data-aos-delay="300"] { transition-delay: 0.24s; }
[data-aos][data-aos-delay="400"] { transition-delay: 0.32s; }
[data-aos][data-aos-delay="500"] { transition-delay: 0.40s; }

/* ─── Counter ─── */
.counter-num { font-variant-numeric: tabular-nums; }

/* ─── Stars ─── */
.star-fill {
  animation: starFill 0.3s ease forwards;
}
@keyframes starFill { from{opacity:0;transform:scale(0.5)} to{opacity:1;transform:scale(1)} }

/* ─── Input focus glow ─── */
.form-input {
  transition: border-color 0.3s, box-shadow 0.3s, background 0.3s;
}
.form-input:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.15);
  border-color: #0066ff;
}

/* ─── Mobile drawer ─── */
#mobile-menu {
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
#mobile-menu.open { transform: translateX(0); }

/* ─── Testimonial carousel ─── */
.testimonial-track {
  display: flex;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ─── FAQ ─── */
.faq-item {
  border-left: 3px solid transparent;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.faq-item:hover {
  border-left-color: rgba(0, 102, 255, 0.3);
}
.faq-item.active {
  border-left-color: #0066ff;
  box-shadow: 0 4px 20px -4px rgba(0, 102, 255, 0.08);
}
.dark .faq-item.active {
  border-left-color: #3385ff;
  box-shadow: 0 4px 20px -4px rgba(0, 0, 0, 0.25);
}
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.faq-answer.open { max-height: 200px; }
.faq-toggle-icon {
  transition: transform 0.25s ease;
}
.faq-item.active .faq-toggle-icon {
  transform: rotate(45deg);
}

/* ─── Section tag ─── */
.section-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #0066ff;
  background: rgba(0, 102, 255, 0.08);
  padding: 0.35rem 0.9rem;
  border-radius: 9999px;
  margin-bottom: 1rem;
  border: 1px solid rgba(0, 102, 255, 0.04);
}
.dark .section-tag {
  color: #3385ff;
  background: rgba(0, 102, 255, 0.15);
  border-color: rgba(0, 102, 255, 0.1);
}

/* Glass card overlay panels */
.glass-panel {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 102, 255, 0.05);
}
.dark .glass-panel {
  background: rgba(26, 26, 46, 0.5);
  border-color: rgba(255, 255, 255, 0.03);
}

/* Logo atom animation */
@keyframes orbit { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
.orbit-ring { animation: orbit 8s linear infinite; transform-origin: center; }
.orbit-ring-r { animation: orbit 12s linear infinite reverse; transform-origin: center; }

/* ─── VS Code Mockup Animations ─── */
.typing-cursor {
  display: inline-block;
  width: 2px;
  height: 14px;
  background-color: #38bdf8; /* light blue caret */
  margin-left: 2px;
  animation: cursor-blink 0.8s steps(2, start) infinite;
  vertical-align: middle;
}
@keyframes cursor-blink {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

.editor-tab::after {
  content: '';
  position: absolute;
  left: 0; top: 0; right: 0;
  height: 2px;
  background-color: transparent;
  transition: background-color 0.2s;
}
.editor-tab.active::after {
  background-color: #6366f1; /* Indigo-500 tab indicator */
}
.editor-tab.active {
  background-color: #0d1117;
  color: #f8fafc;
}

/* Neon theme shift for UI/UX Design click */
.neon-glow-active {
  animation: neon-glow-loop 4s linear infinite !important;
}
@keyframes neon-glow-loop {
  0%, 100% {
    box-shadow: 0 0 25px rgba(0, 102, 255, 0.4), 0 20px 40px -15px rgba(0, 102, 255, 0.2);
    border-color: rgba(0, 102, 255, 0.4);
  }
  33% {
    box-shadow: 0 0 25px rgba(124, 58, 237, 0.4), 0 20px 40px -15px rgba(124, 58, 237, 0.2);
    border-color: rgba(124, 58, 237, 0.4);
  }
  66% {
    box-shadow: 0 0 25px rgba(236, 72, 153, 0.4), 0 20px 40px -15px rgba(236, 72, 153, 0.2);
    border-color: rgba(236, 72, 153, 0.4);
  }
}