/* Main Styles for Pradeep Pant Portfolio */

html {
  scroll-behavior: smooth;
}

/* ===== THEME VARIABLES ===== */
:root {
  --bg-primary: #0a0a0a;
  --bg-secondary: #0d0d0d;
  --bg-card: #111111;
  --bg-card-hover: #1a1a1a;
  --text-primary: #ffffff;
  --text-secondary: #9ca3af;
  --text-muted: #6b7280;
  --border-color: rgba(255, 255, 255, 0.1);
  --accent: #f87171;
  --accent-hover: #ef4444;
  --shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  --transition: all 0.3s ease;
}

/* Light mode - Premium clean palette */
html.light {
  --bg-primary: #fcfcfc;
  --bg-secondary: #f3f4f6;
  --bg-card: #ffffff;
  --bg-card-hover: #f9fafb;
  --text-primary: #111827;
  --text-secondary: #374151;
  --text-muted: #6b7280;
  --border-color: rgba(0, 0, 0, 0.08);
  --accent: #ef4444;
  --accent-hover: #dc2626;
  --shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.08);
}

/* Apply theme variables */
html.light body {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary);
}

/* Different shades for section separation (like dark mode) */
/* Hero, Skills, Contact = primary (cleanest) */
html.light .bg-dark-950 {
  background-color: var(--bg-primary) !important;
}

/* About, Projects = secondary (slightly off-white) */
html.light .bg-dark-900 {
  background-color: var(--bg-secondary) !important;
}

html.light .bg-dark-800 {
  background-color: #e5e7eb !important;
}

html.light .bg-dark-700 {
  background-color: #d1d5db !important;
}

html.light .text-white {
  color: var(--text-primary) !important;
}

html.light .text-gray-400,
html.light .text-gray-500 {
  color: #3d3d3d !important;
}

html.light .border-dark-700,
html.light .border-dark-600 {
  border-color: var(--border-color) !important;
}

/* ===== LIGHT MODE SKILLS CARDS ===== */
html.light #skills .group {
  background-color: var(--bg-card) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  transition: all 0.3s ease;
}

html.light #skills .group:hover {
  border-color: var(--accent) !important;
  box-shadow: 0 8px 24px rgba(196, 32, 32, 0.12);
  transform: translateY(-4px);
}

html.light #skills .group h3 {
  color: var(--text-primary) !important;
}

html.light #skills .group:hover h3 {
  color: var(--accent) !important;
}

html.light #skills .group .bg-accent-500\/10 {
  background-color: rgba(196, 32, 32, 0.1) !important;
}

html.light #skills .group:hover .bg-accent-500\/10 {
  background-color: rgba(196, 32, 32, 0.2) !important;
}

/* ===== LIGHT MODE PROJECT CARDS ===== */
html.light #projects .group {
  background-color: var(--bg-card) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
}

html.light #projects .group:hover {
  border-color: var(--accent) !important;
  box-shadow: 0 8px 24px rgba(176, 28, 28, 0.15);
  transform: translateY(-4px);
}

html.light #projects .group img {
  opacity: 0.9;
}

html.light #projects .group:hover img {
  opacity: 1;
}

html.light #projects .group h3 {
  color: var(--text-primary) !important;
}

html.light #projects .group:hover h3 {
  color: var(--accent) !important;
}

html.light #projects .bg-dark-700 {
  background-color: #f3f4f6 !important;
  color: var(--text-secondary) !important;
}

html.light #projects .group:hover .bg-dark-700 {
  background-color: rgba(239, 68, 68, 0.12) !important;
  color: var(--accent) !important;
}

html.light header {
  background-color: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(12px);
}

html.light .nav-link {
  color: var(--text-secondary) !important;
}

html.light .nav-link:hover {
  color: var(--text-primary) !important;
}

html.light #mobileMenu {
  background-color: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
}

/* Light mode: Swap name colors (PRADEEP = red, PANT = dark) */
html.light .name-word--first {
  color: var(--accent) !important;
}

html.light .name-word--last {
  color: var(--text-primary) !important;
}

/* Light mode: Swap hover state (reverse when hovering on PRADEEP) */
html.light .name-hover.is-swap .name-word--first {
  color: var(--text-primary) !important;
}

html.light .name-hover.is-swap .name-word--last {
  color: var(--accent) !important;
}

/* ===== PEACOCK FEATHER NAV ICON ===== */
@keyframes float-feather {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-4px) rotate(8deg); }
}

@keyframes glow-feather {
  0%, 100% { filter: brightness(1.25) saturate(1.3) contrast(1.05) drop-shadow(0 0 6px rgba(0, 180, 155, 0.45)); }
  50% { filter: brightness(1.4) saturate(1.6) contrast(1.1) drop-shadow(0 0 12px rgba(0, 220, 180, 0.7)); }
}

.peacock-feather {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  animation: float-feather 4s ease-in-out infinite;
}

.peacock-feather:hover {
  transform: scale(1.2) rotate(-15deg);
  z-index: 10;
}

.peacock-feather-img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  mix-blend-mode: screen;
  animation: glow-feather 3s ease-in-out infinite;
}

.peacock-feather:hover .peacock-feather-img {
  filter: brightness(1.5) saturate(1.8) drop-shadow(0 0 15px rgba(0, 255, 200, 0.8));
}

html.light .peacock-feather-img {
  mix-blend-mode: normal;
  animation: none;
  filter: drop-shadow(0 4px 10px rgba(0, 180, 155, 0.5)) saturate(1.6) brightness(1.05);
}

html.light .peacock-feather:hover .peacock-feather-img {
  filter: drop-shadow(0 6px 15px rgba(0, 220, 180, 0.7)) saturate(1.8) brightness(1.1);
}

/* ===== THEME TOGGLE BUTTON ===== */
.theme-toggle {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  color: var(--text-secondary);
}

.theme-toggle:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: rotate(15deg);
}

.theme-toggle .sun-icon,
.theme-toggle .moon-icon {
  position: absolute;
  transition: all 0.3s ease;
}

/* Dark mode: show moon, hide sun */
.theme-toggle .sun-icon {
  opacity: 0;
  transform: rotate(-90deg) scale(0);
}

.theme-toggle .moon-icon {
  opacity: 1;
  transform: rotate(0) scale(1);
}

/* Light mode: show sun, hide moon */
html.light .theme-toggle .sun-icon {
  opacity: 1;
  transform: rotate(0) scale(1);
}

html.light .theme-toggle .moon-icon {
  opacity: 0;
  transform: rotate(90deg) scale(0);
}

/* Smooth transition for theme change */
body,
header,
.bg-dark-950,
.bg-dark-900,
.bg-dark-800,
.text-white,
.text-gray-400,
.text-gray-500,
.border-dark-700,
.border-dark-600 {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

body {
  font-family: 'Nunito', sans-serif;
}

.font-display {
  font-family: 'Poppins', sans-serif;
}

/* About photo styling */
.photo-card {
  border-radius: 1rem;
}

.photo-card::before {
  content: '';
  position: absolute;
  inset: -12px;
  border-radius: 1.25rem;
  background: radial-gradient(circle at top left, rgba(248, 113, 113, 0.2), transparent 60%);
  z-index: -20;
}

/* Shared texture layer for portrait photos */
.portrait-texture-frame {
  position: relative;
  isolation: isolate;
}

.portrait-texture-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  mix-blend-mode: soft-light;
  transition: opacity 0.45s ease;
  background-image:
    radial-gradient(circle at 18% 14%, rgba(255, 241, 214, 0.22), transparent 42%),
    radial-gradient(circle at 84% 88%, rgba(66, 42, 18, 0.12), transparent 46%),
    repeating-linear-gradient(25deg, rgba(72, 48, 26, 0.03) 0px, rgba(72, 48, 26, 0.03) 1px, transparent 1px, transparent 4px),
    repeating-linear-gradient(-18deg, rgba(255, 255, 255, 0.03) 0px, rgba(255, 255, 255, 0.03) 1px, transparent 1px, transparent 5px);
}

/* Dark mode color state is on hover */
.portrait-texture-frame:hover::after {
  opacity: 0.14;
}

/* Light mode color state is default, hover shifts back to b/w */
html.light .portrait-texture-frame::after {
  opacity: 0.12;
}

html.light #about .photo-card > .portrait-texture-frame:hover::after {
  opacity: 0;
}

/* Name hover effect */
.name-hover {
  display: inline-block;
  cursor: pointer;
  transition: transform 0.3s ease, letter-spacing 0.3s ease;
}

.name-hover:hover {
  transform: translateY(-3px);
  letter-spacing: 0.02em;
}

.name-hover .name-word {
  transition: color 0.25s ease;
}

.name-hover.is-swap .name-word--first {
  color: #f87171;
}

.name-hover.is-swap .name-word--last {
  color: #ffffff;
}

/* Smooth fade-in animation */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fadeInUp 0.8s ease-out forwards;
}

.animate-delay-1 {
  animation-delay: 0.1s;
}

.animate-delay-2 {
  animation-delay: 0.2s;
}

.animate-delay-3 {
  animation-delay: 0.3s;
}

.animate-delay-4 {
  animation-delay: 0.4s;
}

/* Hover underline effect for navigation */
.nav-link {
  position: relative;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 1px;
  background: #f87171;
  transition: width 0.3s ease;
}

.nav-link:hover::after {
  width: 100%;
}

/* Image grayscale hover effect */
.img-hover {
  filter: grayscale(100%);
  transition: filter 0.5s ease;
}

.img-hover:hover {
  filter: grayscale(0%);
}

/* Light mode: Show colorful photo */
html.light .img-hover {
  filter: grayscale(0%);
}

html.light .img-hover:hover {
  filter: brightness(1.05) saturate(1.1);
}

/* Light mode: About and Profile image goes b/w on hover */
html.light #about .photo-card .img-hover:hover,
html.light #home .img-hover:hover {
  filter: grayscale(100%);
}

/* Back to top (mobile) */
.back-to-top {
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgba(248, 113, 113, 0.9);
  color: #0d0d0d;
  border: 1px solid rgba(248, 113, 113, 0.5);
  font-size: 18px;
  font-weight: 700;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  z-index: 60;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.back-to-top:hover {
  transform: translateY(-2px);
}

@media (min-width: 768px) {
  .back-to-top {
    display: none !important;
  }
}

/* Mobile outline boxes for sections */
@media (max-width: 640px) {
  .section-outline {
    outline: 1px solid rgba(255, 255, 255, 0.08);
    outline-offset: -1px;
  }
}