/* --- 0. SETUP & VARIABLES --- */
:root {
    /* Light Mode */
    --bg-color: #fdfaf4;
    --text-color-primary: #1c1c1e;
    --text-color-secondary: #5a5a5e;
    --card-bg-color: rgba(255, 255, 255, 0.7);
    --border-color: #2c2c2e;
    --shadow-color-soft: rgba(0, 0, 0, 0.08);
    --shadow-color-hard: #c9c4b8;
    --accent-color: #007aff;
    --accent-color-darker: #005bb5;
    --paper-texture: url('https://www.transparenttextures.com/patterns/notebook-dark.png');
    
    /* Watercolor Splotch Colors */
    --splotch-color-1: #ff3b30;
    --splotch-color-2: #34c759;
    --splotch-color-3: #5856d6;

    /* Doodle Colors */
    --doodle-stroke: #333;
    --doodle-heart: #e63946;
    --doodle-lightning: #f7b801;
    --doodle-triangle: #4f8cff;
    --doodle-cloud: #aaa;
    --doodle-cross: #e67e22;

    /* Fonts */
    --font-body: 'Inter', 'Segoe UI', sans-serif;
    --font-heading: 'Caveat', cursive;

    /* Transitions & Borders */
    --transition-fast: 0.2s ease-out;
    --transition-medium: 0.4s ease-out;
    --card-radius: 40% 60% 70% 30% / 50% 50% 50% 50%;
    --card-radius-hover: 30% 70% 60% 40% / 50% 50% 50% 50%;
    
    /* Scroll Progress */
    --scroll-progress: 0%;
}

body.dark-mode {
    /* Dark Mode */
    --bg-color: #1a1a1f;
    --text-color-primary: #e5e5e7;
    --text-color-secondary: #9a9aa0;
    --card-bg-color: rgba(44, 44, 46, 0.6);
    --border-color: #e5e5e7;
    --shadow-color-soft: rgba(0, 0, 0, 0.2);
    --shadow-color-hard: #000;
    --accent-color: #0a84ff;
    --accent-color-darker: #0060df;
    --paper-texture: url('https://www.transparenttextures.com/patterns/dark-paper.png');

    /* Doodle Colors in Dark Mode */
    --doodle-stroke: #eee;
}

/* --- 1. BASE & TYPOGRAPHY --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--bg-color);
    background-image: var(--paper-texture);
    color: var(--text-color-primary);
    font-family: var(--font-body);
    transition: background-color 0.3s ease;
    overflow-x: hidden;
}

h1, h2, h3 {
    font-family: var(--font-heading);
    color: var(--text-color-primary);
    font-weight: 700;
    letter-spacing: 1px;
}

p {
    line-height: 1.7;
    color: var(--text-color-secondary);
}

body, a, button, .slider {
    cursor: auto !important;
}

/* --- 2. INTERACTIVE ELEMENTS & BACKGROUNDS --- */
.cursor { display: none !important; }

.scroll-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 5px;
    background: var(--accent-color);
    width: var(--scroll-progress);
    z-index: 1000;
    box-shadow: 2px 0 5px var(--accent-color);
}

.watercolor-container {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    overflow: hidden;
    z-index: -2;
}

.splotch {
    position: absolute;
    border-radius: 50%;
    opacity: 0.15;
    filter: blur(100px);
    will-change: transform, border-radius;
}
.splotch:nth-child(1) { background: var(--splotch-color-1); width: 60vmax; height: 60vmax; animation: move1 20s infinite alternate; }
.splotch:nth-child(2) { background: var(--splotch-color-2); width: 50vmax; height: 50vmax; animation: move2 25s infinite alternate; }
.splotch:nth-child(3) { background: var(--splotch-color-3); width: 40vmax; height: 40vmax; animation: move3 15s infinite alternate; }

@keyframes move1 {
    from { transform: translate(-10vw, -10vh) rotate(-90deg); border-radius: 24% 76% 35% 65% / 27% 36% 64% 73%; }
    to { transform: translate(30vw, 40vh) rotate(90deg); border-radius: 76% 24% 33% 67% / 68% 55% 45% 32%; }
}
@keyframes move2 {
    from { transform: translate(50vw, -20vh) rotate(45deg); border-radius: 47% 53% 70% 30% / 30% 50% 50% 70%; }
    to { transform: translate(10vw, 60vh) rotate(-45deg); border-radius: 33% 67% 24% 76% / 46% 29% 71% 54%; }
}
@keyframes move3 {
    from { transform: translate(60vw, 70vh) rotate(0deg); border-radius: 61% 39% 54% 46% / 45% 45% 55% 55%; }
    to { transform: translate(10vw, -10vh) rotate(180deg); border-radius: 39% 61% 47% 53% / 61% 57% 43% 39%; }
}

.doodle-bg {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    pointer-events: none;
    z-index: 10;
}
.doodle {
    position: absolute;
    opacity: 0.6;
    filter: url(#sketchy-filter);
    stroke: var(--doodle-stroke);
}
body.dark-mode .doodle { opacity: 0.4; }
.doodle.star { top: 10%; left: 5%; animation: float 8s ease-in-out infinite alternate; }
.doodle.squiggle { bottom: 15%; right: 8%; animation: float 10s ease-in-out infinite alternate -2s; }
.doodle.circle { top: 60%; left: 80%; animation: rotate 12s linear infinite; }
.doodle.zigzag { top: 20%; left: 85%; animation: float 11s ease-in-out infinite alternate -3s; }
.doodle.heart { bottom: 10%; left: 20%; stroke: var(--doodle-heart); animation: pulse 3s ease-in-out infinite; }
.doodle.lightning { top: 70%; right: 12%; stroke: var(--doodle-lightning); animation: float 9s ease-in-out infinite alternate -1s; }
.doodle.triangle { top: 80%; left: 5%; stroke: var(--doodle-triangle); animation: rotate 15s linear infinite reverse; }
.doodle.cloud { top: 5%; right: 25%; stroke: var(--doodle-cloud); animation: float 13s ease-in-out infinite alternate; }
.doodle.cross { bottom: 30%; left: 45%; stroke: var(--doodle-cross); animation: float 7s ease-in-out infinite alternate -4s; }

@keyframes float { to { transform: translateY(20px) rotate(5deg); } }
@keyframes rotate { to { transform: rotate(360deg); } }
@keyframes pulse {
    0%, 100% { transform: scale(1) rotate(-3deg); }
    50% { transform: scale(1.1) rotate(3deg); }
}


/* --- 3. LAYOUT & CARDS --- */
.main-content {
    max-width: 1000px;
    margin: 0 auto;
    padding: 2rem;
    position: relative;
    z-index: 1;
}

.paper-card {
    background: var(--card-bg-color);
    border: 2px solid var(--border-color);
    padding: 2rem;
    box-shadow: 3px 3px 0px 0px var(--shadow-color-hard), 8px 8px 24px 0px var(--shadow-color-soft);
    border-radius: var(--card-radius);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-radius var(--transition-medium);
    animation: popIn 1s cubic-bezier(.68,-0.55,.27,1.55) 0.2s both;
}

.paper-card:hover {
    transform: translateY(-10px) rotate(-1.5deg) scale(1.02);
    box-shadow: 8px 8px 0px 0px var(--shadow-color-hard), 20px 20px 40px 0px var(--shadow-color-soft);
    border-radius: var(--card-radius-hover);
}

@keyframes popIn {
    0% { transform: scale(0.9) rotate(-2deg); opacity: 0; }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

.section-title {
    font-size: 3.5rem;
    margin-bottom: 2rem;
    text-align: center;
    position: relative;
    opacity: 0;
    transform: translateY(20px) rotate(-2deg);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.scroll-animate.visible .section-title {
    opacity: 1;
    transform: translateY(0) rotate(-1deg);
}

/* --- 4. COMPONENTS --- */

/* Header & Navigation */
header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 0; margin-bottom: 4rem; }
.logo { font-family: var(--font-heading); font-size: 2.5rem; font-weight: 700; transform: rotate(-5deg); color: var(--accent-color); }
nav { display: flex; gap: 2rem; }
.nav-link { color: var(--text-color-primary); text-decoration: none; font-weight: 500; font-size: 1.1rem; position: relative; }
.nav-link span { display: inline-block; transition: transform var(--transition-fast); }
.nav-link:hover span { transform: translateY(-2px); }
.nav-link::after {
    content: ''; position: absolute; bottom: -8px; left: -5%; width: 110%; height: 4px;
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23007AFF' stroke-width='4' stroke-dasharray='6%2c 14' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
    transform: scaleX(0); transform-origin: center; transition: transform var(--transition-medium);
}
.nav-link:hover::after { transform: scaleX(1); animation: wiggle 0.5s linear infinite; }
@keyframes wiggle { 0% { border-radius: 3px; } 50% { transform: scaleX(1) skewX(10deg); } 100% { border-radius: 3px; } }
.nav-link:hover {
    cursor: pointer !important;
}

/* Hero Section */
.hero { min-height: 70vh; display: flex; align-items: center; justify-content: center; text-align: center; }
.hero-card { max-width: 700px; transform: rotate(1deg); }
.hero-title { font-size: 5rem; line-height: 1.1; margin-bottom: 1rem; }
.hero-subtitle { font-size: 1.5rem; margin-bottom: 1.5rem; color: var(--accent-color); font-family: var(--font-body); }
.hero-description { font-size: 1.1rem; margin-bottom: 2rem; }
.cta-button {
    background-color: var(--accent-color); color: white; padding: 1rem 2.5rem; border: 2px solid var(--border-color);
    border-radius: 14px; text-decoration: none; font-weight: 700; transition: all var(--transition-fast);
    display: inline-block; box-shadow: 3px 3px 0px 0px var(--border-color);
}
.cta-button:hover {
    background-color: var(--accent-color-darker); transform: translateY(-4px) rotate(-2deg);
    box-shadow: 5px 5px 0px 0px var(--border-color);
}
.cta-button:active { transform: translateY(2px) rotate(1deg); box-shadow: 1px 1px 0px 0px var(--border-color); }

/* About Section */
#about, #projects, #contact, #skills, #current, #research { padding-top: 6rem; margin-top: -4rem; }
.about-card { display: flex; align-items: center; gap: 2rem; transform: rotate(-1deg); }
.profile-pic {
    width: 150px; height: 150px; border-radius: 45% 55% 60% 40% / 58% 45% 55% 42%;
    object-fit: cover; border: 3px solid var(--border-color); transition: border-radius var(--transition-medium);
}
.about-card:hover .profile-pic { border-radius: 60% 40% 45% 55% / 45% 58% 42% 55%; }
.about-text p { margin-bottom: 1rem; }

/* Projects Section */
.project-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; }
.project-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.project-card:nth-child(even) { transform: rotate(1deg); }
.project-card:nth-child(odd) { transform: rotate(-1deg); }
.project-image-wrapper { width: 100%; height: 200px; overflow: hidden; position: relative; }
.project-image-wrapper::after {
    content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s ease;
}
.project-card:hover .project-image-wrapper::after { left: 100%; }
.project-image { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.project-card:hover .project-image { transform: scale(1.05); }
.project-info { padding: 1.5rem; flex-grow: 1; display: flex; flex-direction: column; }
.project-info h3 { font-size: 2rem; margin-bottom: 0.5rem; }
.project-info p { flex-grow: 1; }
.project-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0; }
.project-tags span {
    background: rgba(128, 128, 128, 0.1); border: 1px solid rgba(128, 128, 128, 0.2);
    padding: 0.3rem 0.7rem; border-radius: 8px; font-size: 0.8rem; font-weight: 500;
}
.project-links { display: flex; gap: 1rem; margin-top: auto; }
.project-links a {
    color: var(--accent-color); text-decoration: none; font-weight: 700;
    display: inline-block; transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.project-links a:hover {
    cursor: pointer !important;
}

/* Contact & Footer */
.contact-card { text-align: center; }
.contact-card p { font-size: 1.2rem; margin-bottom: 2rem; }
.social-links { margin-top: 2rem; display: flex; justify-content: center; gap: 1.5rem; }
.social-links a {
    color: var(--text-color-primary); font-size: 1.8rem;
    transition: color var(--transition-fast), transform 0.4s cubic-bezier(.68,-0.55,.27,1.55);
}
.social-links a:hover {
    color: var(--accent-color);
    transform: translateY(-8px) rotate(15deg) scale(1.2);
    cursor: pointer !important;
}
footer { text-align: center; padding: 2rem; margin-top: 4rem; opacity: 0.7; }
footer .fa-heart { color: var(--doodle-heart); animation: pulse 2s infinite; }

/* --- 5. UTILITIES & THEME TOGGLE --- */
.theme-switch-wrapper { display: flex; align-items: center; gap: 0.5rem; }
.theme-switch-wrapper i { font-size: 1rem; transition: color 0.3s ease; }
.fa-sun { color: #f39c12; }
.fa-moon { color: #8e8e93; }
body.dark-mode .fa-sun { color: #8e8e93; }
body.dark-mode .fa-moon { color: #f1c40f; }

.theme-switch { position: relative; display: inline-block; width: 50px; height: 28px; }
.theme-switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: none; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 28px; }
.slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 4px; bottom: 4px; background-color: white; transition: .4s; border-radius: 50%; }
input:checked + .slider { background-color: var(--accent-color); }
input:checked + .slider:before { transform: translateX(22px); }

.scroll-animate { opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; }
.scroll-animate.visible { opacity: 1; transform: translateY(0); }

.theme-switch:hover, .theme-switch .slider:hover {
  cursor: pointer !important;
}

/* --- 6. RESPONSIVE DESIGN --- */
@media (max-width: 768px) {
    .main-content { padding: 1.5rem; }
    .hero-title { font-size: 3.5rem; }
    .section-title { font-size: 2.8rem; }
    .about-card { flex-direction: column; text-align: center; }
    header { flex-wrap: wrap; justify-content: center; gap: 1.5rem; }
    .skills-list { grid-template-columns: 1fr !important; } /* Stack skills in a single column on smaller screens */
}

@media (max-width: 480px) {
    .hero-title { font-size: 2.8rem; }
    .project-grid { grid-template-columns: 1fr; }
    nav { gap: 1rem; }
    .nav-link { font-size: 1rem; }
}


/* --- 7. IMPROVISED & SPECIALIZED CARDS --- */

/* Currently Working On & Research Cards (Structured Card Style) */
.current-card, .research-card {
  max-width: 700px;
  transform: rotate(0.5deg);
  border-radius: 24px; /* Override the blob radius with a standard card radius */
  margin: 0 auto 2rem auto;
  text-align: center;
}
.current-card:hover, .research-card:hover {
  transform: rotate(-1deg) translateY(-8px) scale(1.01);
  border-radius: 24px; /* Ensure the radius stays fixed on hover */
}

/* Common list styles for these cards */
.current-list, .research-list {
  list-style: none;
  padding-left: 0;
}
.current-list li, .research-list li {
  margin-bottom: 1.2rem;
  line-height: 1.7;
  padding-left: 1.5rem;
  position: relative;
}
.current-list li::before, .research-list li::before {
  content: '⚡️';
  position: absolute;
  left: 0;
  top: 4px;
  color: var(--accent-color);
  font-size: 0.9rem;
}
.research-list li a {
  color: var(--accent-color);
  text-decoration: underline;
  font-weight: 600;
}
.research-list li a:hover {
  cursor: pointer !important;
}

.current-list a:hover {
  cursor: pointer !important;
}

/* Improvised Skills Section (Wobbly Style) */
.skills-card {
  transform: rotate(-1.5deg);
}
.skills-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem 2rem;
}
.skills-list div {
  max-width: 200px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.skills-list strong {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  color: var(--text-color-primary);
  transform: rotate(-2deg);
  margin-bottom: 0.8rem;
}
.skills-list span {
  display: inline-block;
  background: rgba(128,128,128,0.08);
  border: 1px dashed rgba(128,128,128,0.3);
  border-radius: 8px;
  padding: 0.4rem 0.8rem;
  margin: 0.2rem 0.3rem 0.2rem 0;
  font-size: 0.98rem;
  font-weight: 500;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.2s;
}
.skills-list span:hover {
  transform: translateY(-3px) rotate(4deg);
  background: var(--accent-color);
  color: white;
  border-color: transparent;
}


/* Improvised Contact Section (Dynamic Blob Style) */
.contact-card.blob-card {
  border-radius: 67% 33% 74% 26% / 37% 71% 29% 63%;
  animation: blob-morph 15s infinite;
}
.contact-card.blob-card:hover, .contact-card:hover {
  transform: none !important;
}

@keyframes blob-morph {
  0% {
    border-radius: 67% 33% 74% 26% / 37% 71% 29% 63%;
  }
  25% {
    border-radius: 47% 53% 46% 54% / 53% 49% 51% 47%;
  }
  50% {
    border-radius: 33% 67% 26% 74% / 71% 37% 63% 29%;
  }
  75% {
      border-radius: 53% 47% 72% 28% / 35% 38% 62% 65%;
  }
  100% {
    border-radius: 67% 33% 74% 26% / 37% 71% 29% 63%;
  }
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.5rem;
  align-items: center;
}
.contact-form input,
.contact-form textarea {
  width: 350px;
  max-width: 95vw;
  padding: 0.8rem;
  border-radius: 8px;
  border: 1px solid #ccc;
  font-size: 1rem;
  font-family: inherit;
  background: #fff;
  color: #222;
  transition: background 0.2s, color 0.2s, border 0.2s;
}
.contact-form textarea {
  min-height: 100px;
  resize: vertical;
}
body.dark-mode .contact-form input,
body.dark-mode .contact-form textarea {
  background: #23232b;
  color: #f5f5f7;
  border: 1px solid #444;
}
.contact-form button {
  align-self: center;
}

.projects-section-more {
  text-align: center;
  margin-top: 2rem;
  z-index: 2;
  position: relative;
}

/* Add this at the end of the file to ensure specificity */
button:hover, .cta-button:hover, input[type="submit"]:hover, input[type="button"]:hover {
  cursor: pointer !important;
}

.research-card a:hover {
  cursor: pointer !important;
}