/* Animations */
@keyframes float {
  0%,
  100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-20px);
  }
}

@keyframes hero-float {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-16px);
  }
}

@keyframes glow {
  0% {
    opacity: 0.3;
  }

  100% {
    opacity: 0.7;
  }
}

@keyframes slideIn {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }

  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }

}
@keyframes pulse-glow {
  0% {
    box-shadow: 0 0 8px var(--green-success);
  }
  100% {
    box-shadow: 0 0 15px var(--green-success), 0 0 20px rgba(52, 211, 153, 0.5);
  }
}

@keyframes social-bounce {
  0% {
    transform: scale(1) rotate(0deg);
  }

  40% {
    transform: scale(1.18) rotate(-8deg);
  }

  60% {
    transform: scale(0.95) rotate(4deg);
  }

  100% {
    transform: scale(1.15) rotate(-6deg);
  }
}

/* Theme Toggle */
.theme-toggle {
  @apply p-2 rounded-lg bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors duration-300;
}

/* Hero -tech Effects */

.hero-tech-float {
  animation: hero-float 3s ease-in-out infinite;
}

/* Smooth Scrolling */
html {
  scroll-behavior: smooth;
}

/* Custom CSS for Dark and Light Themes */

/* --- Root Variables (Default to Dark Theme) --- */
:root {
  --bg-main: #0a0a0f;
  --text-main: #e0e0e0;
  --text-secondary: #a0a0a0;
  --card-bg: rgba(255, 255, 255, 0.05);
  --card-border: rgba(255, 255, 255, 0.08);
  --card-shadow: rgba(0, 0, 0, 0.37);
  --input-bg: rgba(255, 255, 255, 0.05);
  --input-border: rgba(255, 255, 255, 0.1);
  --icon-circle-bg: rgba(0, 240, 255, 0.2); /* neon-blue/20 */
  --neon-blue: #00f0ff;
  --neon-purple: #d400ff;
  --green-success: #34d399; /* For availability dot */

  /* Glassmorphism specific */
  --glass-backdrop-filter: blur(10px);
  --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

/* --- Light Theme Variables --- */
html.light {
  --bg-main: #f8f8f8;
  --text-main: #333333;
  --text-secondary: #666666;
  --card-bg: rgba(255, 255, 255, 0.8);
  --card-border: rgba(0, 0, 0, 0.1);
  --card-shadow: rgba(0, 0, 0, 0.1); /* Lighter shadow for light theme */
  --input-bg: rgba(0, 0, 0, 0.05);
  --input-border: rgba(0, 0, 0, 0.1);
  --icon-circle-bg: rgba(212, 0, 255, 0.1); /* neon-purple/10 */
  /* --neon-blue: #00a0b0; */
  /* --neon-purple: #a400c0; */

  /* Glassmorphism specific for light theme */
  --glass-backdrop-filter: blur(8px); /* Slightly less blur */
  --glass-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1); /* Lighter shadow */
}

/* --- General --- */
#contact,
footer {
  color: var(--text-main);
  background-color: var(--bg-main); /* Controlled by Tailwind classes now */
}

/* --- Glassmorphism Effect (Refined) --- */
.glassmorphism-dark {
  background: var(--card-bg);
  backdrop-filter: var(--glass-backdrop-filter);
  border: 1px solid var(--card-border);
  box-shadow: var(--glass-shadow);
  transition: all 0.3s ease-in-out;
}

.glassmorphism-dark:hover {
  border-color: var(--neon-blue); /* Neon blue hover for dark mode */
}
html.light .glassmorphism-dark:hover {
  border-color: var(--neon-purple); /* Neon purple hover for light mode */
}

/* --- Form Inputs (Focus/Ring) --- */
.form-input:focus {
  /* This rule is now less needed, as Tailwind handles ring colors */
  border-color: transparent;
  box-shadow: 0 0 0 2px var(--neon-blue); /* Consistent neon ring */
  text-shadow: 0 0 3px rgba(109, 40, 217, 0.4); /* Subtle text glow */
}

html.light .form-input:focus {
  box-shadow: 0 0 0 2px var(--neon-purple); /* Neon purple ring in light mode */
  text-shadow: none; /* No text glow in light mode */
}

/* --- Button Glow (Send Message) --- */
.button-glow::before {
  background: radial-gradient(
    circle,
    var(--neon-blue) 0%,
    var(--neon-purple) 50%,
    transparent 70%
  );
}

html.light .button-glow::before {
  background: radial-gradient(
    circle,
    var(--neon-purple) 0%,
    var(--neon-blue) 50%,
    transparent 70%
  );
}

/* --- Icon Backgrounds and Text (Contact Info) --- */
.icon-glow {
  background-color: var(
    --icon-circle-bg
  );
  box-shadow: 0 0 8px rgba(109, 40, 217, 0.4); /* Neon purple glow for dark */
  transition: box-shadow 0.3s ease-in-out;
}

.icon-glow i {
  color: var(--neon-blue); /* Default icon color */
  text-shadow: 0 0 5px rgba(109, 40, 217, 0.6); /* Text glow for icons */
  transition: text-shadow 0.3s ease-in-out, color 0.3s ease-in-out;
}

html.light .icon-glow {
  box-shadow: 0 0 8px rgba(212, 0, 255, 0.4); /* Neon purple glow for light */
}

html.light .icon-glow i {
  color: var(--neon-purple); /* Icon color in light mode */
  text-shadow: 0 0 5px rgba(0, 240, 255, 0.6); /* Text glow from other neon color */
}

.icon-glow:hover {
  box-shadow: 0 0 15px var(--neon-blue);
}
html.light .icon-glow:hover {
  box-shadow: 0 0 15px var(--neon-purple);
}

/* --- Social Icons (Contact and Footer) --- */
/* The dark/light handling for social icon backgrounds is largely handled by Tailwind in HTML */
.social-icon-hover:hover {
  box-shadow: 0 0 15px var(--neon-blue), 0 0 25px var(--neon-purple);
  transform: translateY(-2px);
}

html.light .social-icon-hover:hover {
  box-shadow: 0 0 15px var(--neon-purple), 0 0 25px var(--neon-blue); /* Swap glow colors for light mode */
}

.social-icon-hover i {
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

html.light .social-icon-hover i {
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.3); /* Lighter shadow for light theme */
}

/* --- Availability Dot Glow --- */
.glow-dot {
  box-shadow: 0 0 8px var(--green-success);
  animation: pulse-glow 2s infinite alternate ease-in-out;
}

/* Custom styles for reveal animation */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* Basic Project Overlay Transition */
.project-overlay {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

.project-card:hover .project-overlay {
  opacity: 1;
  visibility: visible;
}

.neon-glow-text:hover {
  text-shadow: 0 0 8px var(--neon-blue), 0 0 15px var(--neon-purple),
    0 0 25px var(--neon-blue), 0 0 35px var(--neon-purple);
}
html.light .neon-glow-text:hover {
  text-shadow: 0 0 8px var(--neon-purple), 0 0 15px var(--neon-blue),
    0 0 25px var(--neon-purple), 0 0 35px var(--neon-blue);
}


/* --- Social Icons in Footer --- */
.social-icon-footer-glow {
  /* Inherits general social icon styles, but add specific footer glow */
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); /* Subtle initial shadow */
  transition: all 0.3s ease-in-out;
}

.social-icon-footer-glow:hover {
  box-shadow: 0 0 10px var(--neon-blue), 0 0 20px var(--neon-purple); /* Stronger, dual-color neon glow */
  transform: translateY(-2px); /* Slight lift effect */
}

.social-icon-footer-glow i {
  transition: all 0.3s ease-in-out;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.4); /* Subtle initial text shadow */
}

.social-icon-footer-glow:hover i {
  color: white; /* Ensure icon color becomes white on hover */
  text-shadow: 0 0 8px var(--neon-blue), 0 0 15px var(--neon-purple); /* Glow effect on the icon itself */
}

/* --- Newsletter Input and Button --- */
.footer-col input[type="email"] {
  /* Tailwind handles most, but ensures no default border focus */
  background-color: rgba(
    255,
    255,
    255,
    0.05
  ); /* Same as glassmorphism-dark for consistency */
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: white;
  transition: all 0.2s ease-in-out;
}

.footer-col input[type="email"]:focus {
  border-color: transparent;
  box-shadow: 0 0 0 2px var(--neon-purple); /* Neon ring on focus */
}

.subscribe-button-glow {
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: all 0.3s ease-in-out;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.subscribe-button-glow::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(
    circle,
    var(--neon-blue) 0%,
    var(--neon-purple) 50%,
    transparent 70%
  );
  opacity: 0;
  transform: scale(0);
  z-index: -1;
  transition: all 0.5s ease-out;
}

.subscribe-button-glow:hover::before {
  opacity: 0.3;
  transform: scale(1.5);
}