/* ==========================================
   CUSTOM STYLES & ANIMATIONS
   Tailwind handles the utility classes; this file 
   manages custom scrollbars, transitions, and specific UI elements.
   ========================================== */

/* Smooth scrolling for anchor links and overall page flow */
html {
    scroll-behavior: smooth;
}

/* Butter-smooth transition for theme switching */
body {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* ==========================================
   CUSTOM SCROLLBAR (GitHub Inspired)
   ========================================== */
::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

/* Light Theme Scrollbar */
::-webkit-scrollbar-thumb {
    background-color: #d1d5db; /* gray-300 */
    border-radius: 6px;
    border: 3px solid #f9fafb; /* Matches the bg-gray-50 */
}

::-webkit-scrollbar-thumb:hover {
    background-color: #9ca3af; /* gray-400 */
}

/* Dark Theme Scrollbar overrides */
.dark ::-webkit-scrollbar-thumb {
    background-color: #484f58;
    border: 3px solid #0d1117; /* Matches the repodark background */
}

.dark ::-webkit-scrollbar-thumb:hover {
    background-color: #6e7681;
}

/* ==========================================
   FLOATING CONTACT BUTTONS (Advanced)
   ========================================== */
.contact-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.25rem;
    /* Faster exit transition, smoother entry transition */
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease, opacity 0.2s ease;
    text-decoration: none;
    z-index: 10;
}

.contact-btn:hover {
    transform: scale(1.1) translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
}

/* Ensure expanded links are clickable above main FAB aura */
#floating-links {
    z-index: 20; 
}

/* Base button should sit above the aura but below notification */
#main-fab {
    z-index: 10; 
}

/* Brand Colors */
.btn-whatsapp { background-color: #25D366; }
.btn-linkedin { background-color: #0A66C2; }
.btn-call { background-color: #34d399; }
.btn-email { background-color: #EA4335; }
.btn-facebook { background-color: #1877F2; }
.btn-instagram { background-color: #E4405F; }


/* ==========================================
   CUSTOM ANIMATIONS FOR BUTTON
   ========================================== */

/* Slower Ping for notification dot (Attention without annoyance) */
@keyframes ping-slow {
  75%, 100% {
    transform: scale(1.8);
    opacity: 0;
  }
}
.animate-ping-slow {
  animation: ping-slow 2.5s cubic-bezier(0, 0, 0.2, 1) infinite;
}


/* Pulse Aura effect (Developer wants contact) */
@keyframes pulse-aura {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5); /* Primary Contact Color (Whatsapp green) */
    }
    70% {
        box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}
.animate-pulse-aura {
    animation: pulse-aura 3s infinite;
}

/* Standard scrollbar and other styles remain the same... */

/* ==========================================
   THOUGHT BUBBLE ANIMATION
   ========================================== */

@keyframes float-subtle {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-6px);
    }
}

.animate-float-subtle {
    animation: float-subtle 3s ease-in-out infinite;
}

/* ==========================================
   TIMELINE STYLES FOR EDUCATION SECTION
   ========================================== */
.timeline-dot {
    position: absolute;
    left: -21px;
    top: 0.25rem;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #d1d5db; /* gray-300 */
    background-color: #f9fafb; /* gray-50 */
}

.dark .timeline-dot {
    border-color: #30363d;
    background-color: #0d1117;
}

/* Project Card Hover Animation */
.project-card {
    transition: border-color 0.2s ease;
}

.project-card:hover {
    border-color: #d1d5db;
}

.dark .project-card:hover {
    border-color: #8b949e;
}

/* ==========================================
   GITHUB ACTIVITY GRID STYLING
   ========================================== */

/* Font stack matching GitHub's UI */
#github-activity-section {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

/* Crisp, pixel-perfect SVG rendering for the contribution chart image */
#github-contrib-chart {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    /* Smooth fade-in once the lazy image finishes loading */
    opacity: 0;
    transition: opacity 0.4s ease;
}

#github-contrib-chart.chart-loaded {
    opacity: 1;
}

/* Shimmer placeholder while the chart image loads */
#github-contrib-chart:not(.chart-loaded) {
    background: linear-gradient(
        90deg,
        #161b22 25%,
        #1f2937 50%,
        #161b22 75%
    );
    background-size: 200% 100%;
    animation: chart-shimmer 1.6s ease-in-out infinite;
    border-radius: 8px;
    min-height: 130px;
}

@keyframes chart-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Subtle lift on the outer card when hovered */
#github-activity-section > div {
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

#github-activity-section > div:hover {
    box-shadow: 0 0 0 1px #388bfd33, 0 8px 32px rgba(56, 139, 253, 0.08);
    transform: translateY(-2px);
}

/* ==========================================
   RETRO SOUND FX TOGGLE BUTTON
   ========================================== */

/* Press & scale micro-interactions */
#sound-toggle {
    transition: transform 0.15s ease, background-color 0.2s ease;
}

#sound-toggle:hover {
    transform: scale(1.1);
}

#sound-toggle:active {
    transform: scale(0.9);
}

/* Green glow when sound is active (icon becomes text-green-500 via JS) */
#sound-toggle:has(.fa-volume-high) {
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.25);
    border-radius: 0.375rem; /* matches rounded-md */
}


/* ==========================================
   FIXED: Frosted Glass Effect with Blur Layer
   ========================================== */

.frosty-glass-player {
  /* 1. Semi-transparent dark background tint (Required for blur context) */
  background: rgba(18, 20, 29, 0.78) !important;

  /* 2. Hardware-accelerated backdrop blur */
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);

  /* 3. Force browser composite layer rendering */
  isolation: isolate;
  will-change: transform, backdrop-filter;

  /* 4. Glass outline & subtle shadow for contrast against text */
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 
              inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Hover state enhancement */
.frosty-glass-player:hover {
  background: rgba(18, 20, 29, 0.85) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
}

/* Custom Range Slider Styling (Progress & Volume) */
.player-slider {
  -webkit-appearance: none;
  appearance: none;
  background: rgba(255, 255, 255, 0.2);
  outline: none;
  border-radius: 9999px;
}

.player-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fef3c7; /* Light amber/white */
  cursor: pointer;
  box-shadow: 0 0 6px rgba(0,0,0,0.5);
  transition: transform 0.1s ease;
}

.player-slider::-webkit-slider-thumb:hover {
  transform: scale(1.3);
}

.player-slider::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fef3c7;
  cursor: pointer;
  border: none;
}

/* Vinyl Spin */
@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.animate-spin-slow {
  animation: spinSlow 12s linear infinite;
}

.animate-spin-slow.paused {
  animation-play-state: paused;
}