/* =============================================================
   effects.css — Custom Cursor + Water Ripple + Page Backgrounds
   Tharun R Portfolio — LIGHT MODE
   ============================================================= */

/* Hide default cursor */
* {
  cursor: none !important;
}

/* ─── Ripple Canvas ────────────────────────────────────────── */
#ripple-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: -2;
  pointer-events: none;
  display: block;
}

/* ─── Page Background Overlay ──────────────────────────────── */
/* Very light overlay so the bright bg image stays visible
   and content cards remain fully legible */
.page-bg-overlay {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    135deg,
    rgba(243, 246, 253, 0.25) 0%,
    rgba(255, 255, 255, 0.10) 50%,
    rgba(243, 246, 253, 0.25) 100%
  );
}

/* ─── Custom Cursor Ring ───────────────────────────────────── */
#custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 36px;
  height: 36px;
  border: 2px solid rgba(68, 82, 254, 0.7);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  opacity: 0;
  will-change: transform;
  transition:
    width 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    height 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.25s ease,
    background 0.25s ease,
    opacity 0.3s ease;
}

/* Inner dot */
#cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 7px;
  height: 7px;
  background: #4452FE;
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  opacity: 0;
  will-change: transform;
  transition: opacity 0.3s ease;
}

/* Hover state — ring expands */
#custom-cursor.cursor-hover {
  width: 56px;
  height: 56px;
  background: rgba(68, 82, 254, 0.08);
  border-color: rgba(68, 82, 254, 0.9);
  backdrop-filter: blur(1px);
}

/* Click state — ring shrinks + pulses */
#custom-cursor.cursor-click {
  width: 24px;
  height: 24px;
  background: rgba(68, 82, 254, 0.2);
  border-color: #4452FE;
  transition:
    width 0.08s ease,
    height 0.08s ease,
    background 0.08s ease;
}

/* ─── CSS Ripple Fallback ──────────────────────────────────── */
.css-ripple {
  position: fixed;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: transparent;
  border: 2px solid rgba(68, 82, 254, 0.35);
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%) scale(0);
  animation: cssRippleExpand 1.2s ease-out forwards;
}

@keyframes cssRippleExpand {
  0%   { transform: translate(-50%, -50%) scale(0); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(20); opacity: 0; }
}

/* ─── Dark Mode — swap back to white cursor ─────────────────── */
.dark-mode #custom-cursor {
  border-color: rgba(6, 182, 212, 0.8);
}
.dark-mode #cursor-dot {
  background: #06B6D4;
}
.dark-mode #custom-cursor.cursor-hover {
  background: rgba(6, 182, 212, 0.1);
  border-color: rgba(6, 182, 212, 1);
}
.dark-mode .page-bg-overlay {
  background: linear-gradient(
    135deg,
    rgba(10, 10, 26, 0.55) 0%,
    rgba(15, 20, 50, 0.40) 50%,
    rgba(10, 10, 26, 0.55) 100%
  );
}

/* ─── Sidebar — light glassmorphic ─────────────────────────── */
.sidebar {
  background: rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: blur(22px) !important;
  -webkit-backdrop-filter: blur(22px) !important;
  border-color: rgba(226, 232, 240, 0.70) !important;
  box-shadow: 0 8px 32px rgba(148, 163, 184, 0.12) !important;
}

.dark-mode .sidebar {
  background: rgba(15, 15, 35, 0.60) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Nav items — keep original dark text in light mode */
.nav-item {
  color: var(--text-muted) !important;
}
.nav-item:hover {
  background: var(--primary-glow) !important;
  color: var(--primary) !important;
}
.nav-item.active {
  background: var(--primary) !important;
  color: #fff !important;
}

/* Nav label tooltip — dark pill */
.nav-item .nav-label {
  background: rgba(30, 41, 59, 0.92) !important;
  color: #fff !important;
  border: none !important;
}
.nav-item .nav-label::before {
  border-color: transparent rgba(30, 41, 59, 0.92) transparent transparent !important;
}

/* Sidebar logo */
.sidebar-logo {
  background: var(--primary) !important;
  color: #fff !important;
}

/* Social icons */
.social-icon {
  background: rgba(255, 255, 255, 0.85) !important;
  border-color: rgba(226, 232, 240, 0.9) !important;
  color: var(--text-muted) !important;
}
.social-icon:hover {
  background: var(--primary) !important;
  color: #fff !important;
  border-color: var(--primary) !important;
}

/* Theme toggle */
.theme-toggle-btn {
  color: var(--text-muted) !important;
}
.theme-toggle-btn:hover {
  color: var(--primary) !important;
}

/* ─── Page hero + content cards — frosted glass transparent ─── */
.page-hero,
.project-card,
.skill-cat,
.highlight-card,
.feat-project-card,
.timeline-card,
.cert-card,
.achieve-card,
.about-avatar-card,
.activity-float-card,
.tech-float-card,
.profile-card,
.cgpa-badge,
.hackathon-banner,
.contact-form-card,
.availability-card,
.contact-link-card,
.edu-full-card,
.deployed-item {
  background: rgba(255, 255, 255, 0.38) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-color: rgba(226, 232, 240, 0.50) !important;
  box-shadow: 0 4px 24px rgba(148, 163, 184, 0.08) !important;
}

/* Slight hover lift — increase opacity a touch on hover */
.project-card:hover,
.skill-cat:hover,
.highlight-card:hover,
.feat-project-card:hover,
.contact-link-card:hover {
  background: rgba(255, 255, 255, 0.58) !important;
  box-shadow: 0 8px 32px rgba(148, 163, 184, 0.15) !important;
}

/* Filter bar */
.filter-bar {
  background: rgba(255, 255, 255, 0.42) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-color: rgba(226, 232, 240, 0.45) !important;
}

/* Mobile header */
.mobile-header {
  background: rgba(255, 255, 255, 0.70) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

/* Mobile nav overlay */
.mobile-nav-overlay {
  background: rgba(243, 246, 253, 0.96) !important;
}

/* ─── Hero floating cards — fully solid (no transparency) ───── */
/* Profile card, Tech Stack card, Recent Activity card          */
.profile-card,
.tech-float-card,
.activity-float-card {
  background: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-color: rgba(226, 232, 240, 1) !important;
  box-shadow: 0 8px 30px rgba(148, 163, 184, 0.20) !important;
}