body {
  font-family: 'Inter', system-ui, sans-serif;
  background: linear-gradient(135deg, #181824 0%, #2d1a4d 100%);
  min-height: 100vh;
  transition: background 0.5s;
}
.section-title {
  font-size: 2rem;
  font-weight: 800;
  color: #a78bfa;
  margin-bottom: 1.5rem;
  letter-spacing: -0.02em;
  position: relative;
  overflow: hidden;
}
.section-title::after {
  content: '';
  display: block;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, #a78bfa 60%, #7c3aed 100%);
  border-radius: 2px;
  margin-top: 0.5rem;
  transition: width 0.5s cubic-bezier(.68,-0.55,.27,1.55), opacity 0.5s;
  opacity: 0.3;
}
.section-title:hover::after {
  width: 100px;
  opacity: 1;
}
.skill-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(124, 58, 237, 0.12);
  border: 1.5px solid #7c3aed44;
  border-radius: 0.75rem;
  padding: 0.5rem 1rem;
  font-weight: 500;
  color: #c4b5fd;
  box-shadow: 0 2px 8px #7c3aed11;
  transition: background 0.2s, box-shadow 0.2s;
}

.timeline {
  border-left: 3px solid #a78bfa;
  margin-left: 1.5rem;
  position: relative;
}
.timeline-item {
  position: relative;
  margin-bottom: 2.5rem;
  padding-left: 2.5rem;
}
.timeline-dot {
  position: absolute;
  left: -1.7rem;
  top: 0.5rem;
  width: 1.1rem;
  height: 1.1rem;
  background: linear-gradient(135deg, #a78bfa 60%, #7c3aed 100%);
  border-radius: 50%;
  box-shadow: 0 2px 8px #7c3aed55;
  border: 2px solid #fff2;
}
.project-card {
  position: relative;
  overflow: hidden;
  background: rgba(44, 22, 80, 0.45);
  border-radius: 1.5rem;
  box-shadow: 0 8px 32px 0 rgba(124, 58, 237, 0.13);
  border: 1.5px solid #a78bfa33;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.3s, transform 0.3s, background 0.3s, filter 0.3s;
  filter: blur(0) brightness(1);
  perspective: 600px;
}
.project-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, #a78bfa33 0%, #7c3aed22 100%);
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(.68,-0.55,.27,1.55);
  z-index: 1;
}
.project-card:hover {
  transform: translateY(-14px) scale(1.045) rotateY(-6deg) skewY(-1deg);
  filter: brightness(1.13) saturate(1.18) drop-shadow(0 0 32px #a78bfa88);
  box-shadow: 0 0 40px #a78bfa88, 0 8px 32px #7c3aed44;
  background: rgba(124, 58, 237, 0.16);
}
.project-card:hover::before {
  opacity: 1;
}
.project-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  background: #1a1a2e;
  transition: filter 0.4s, transform 0.4s;
  z-index: 2;
}
.project-card:hover .project-img {
  filter: brightness(1.22) saturate(1.18) drop-shadow(0 0 18px #a78bfa88);
  transform: scale(1.08) rotate(-1deg);
}
.project-card .project-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, #7c3aedcc 0%, #a78bfa99 100%);
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  transition: opacity 0.4s cubic-bezier(.68,-0.55,.27,1.55);
  pointer-events: none;
}
.project-card:hover .project-overlay {
  opacity: 0.92;
  pointer-events: auto;
}
.project-card .view-project-btn {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.3s, transform 0.3s;
  background: linear-gradient(90deg, #7c3aed 60%, #a78bfa 100%);
  color: #fff;
  border: none;
  border-radius: 0.75rem;
  padding: 0.6rem 1.5rem;
  font-weight: 700;
  font-size: 1rem;
  box-shadow: 0 2px 8px #7c3aed33;
  cursor: pointer;
}
.project-card:hover .view-project-btn {
  opacity: 1;
  transform: translateY(0);
}
.project-content {
  padding: 1.2rem 1rem 1rem 1rem;
}
.project-link {
  color: #a78bfa;
  text-decoration: underline;
  font-weight: 600;
  transition: color 0.2s;
}
.project-link:hover {
  color: #fff;
}
.btn-primary {
  background: linear-gradient(90deg, #7c3aed 60%, #a78bfa 100%);
  color: #fff;
  border: none;
  border-radius: 0.75rem;
  padding: 0.6rem 1.5rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.35s cubic-bezier(.68,-0.55,.27,1.55), color 0.35s cubic-bezier(.68,-0.55,.27,1.55), border 0.35s cubic-bezier(.68,-0.55,.27,1.55), transform 0.25s cubic-bezier(.68,-0.55,.27,1.55), box-shadow 0.35s cubic-bezier(.68,-0.55,.27,1.55);
  box-shadow: 0 2px 8px #7c3aed33;
  font-size: 1rem;
}
.btn-primary:hover {
  transform: scale(1.045) translateY(-2px);
  box-shadow: 0 6px 24px #a78bfa44;
}
.btn-secondary {
  background: rgba(124, 58, 237, 0.12);
  color: #a78bfa;
  border: 1.5px solid #a78bfa44;
  border-radius: 0.75rem;
  padding: 0.6rem 1.5rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.35s cubic-bezier(.68,-0.55,.27,1.55), color 0.35s cubic-bezier(.68,-0.55,.27,1.55), border 0.35s cubic-bezier(.68,-0.55,.27,1.55), transform 0.25s cubic-bezier(.68,-0.55,.27,1.55), box-shadow 0.35s cubic-bezier(.68,-0.55,.27,1.55);
  font-size: 1rem;
}
.btn-secondary:hover {
  transform: scale(1.045) translateY(-2px);
  box-shadow: 0 6px 24px #a78bfa44;
}
.input {
  background: rgba(44, 22, 80, 0.25);
  border: 1px solid #a78bfa;
  color: #fff;
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  margin-bottom: 0.5rem;
  outline: none;
  transition: border 0.2s, box-shadow 0.2s;
}
.input:focus {
  border: 1.5px solid #7c3aed;
  box-shadow: 0 0 0 2px #a78bfa55;
}
.glass {
  background: rgba(44, 22, 80, 0.45);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.17);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 1.5rem;
  border: 1.5px solid #a78bfa33;
  transition: box-shadow 0.3s, transform 0.3s, background 0.3s;
}
.animate-fade-in {
  animation: fadeIn 1.2s cubic-bezier(.68,-0.55,.27,1.55);
}
.animate-fade-in-up {
  animation: fadeInUp 1.2s cubic-bezier(.68,-0.55,.27,1.55);
}
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes fadeInUp {
  0% { opacity: 0; transform: translateY(40px); }
  100% { opacity: 1; transform: translateY(0); }
}
@media (max-width: 900px) {
  .project-img { height: 120px; }
  .main { padding: 1rem !important; }
  .cube-container { width: 140px; height: 140px; }
}
@media (max-width: 600px) {
  .glass, .project-card {
    border-radius: 1rem !important;
    padding: 1rem !important;
  }
  .main { padding: 0.5rem !important; }
  .timeline { margin-left: 0.5rem; }
  .timeline-item { padding-left: 1.2rem; }
  .cube-container { width: 100px; height: 100px; }
}

/* Screenshot Modal */
.screenshot-modal {
  position: fixed;
  z-index: 20000;
  left: 0; top: 0; width: 100vw; height: 100vh;
  background: rgba(20,10,40,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.screenshot-modal.show {
  opacity: 1;
  pointer-events: auto;
}
.screenshot-modal .modal-content {
  max-width: 90vw;
  max-height: 80vh;
  border-radius: 1.5rem;
  box-shadow: 0 8px 32px #7c3aed88;
  border: 2px solid #a78bfa;
  background: #1a1a2e;
}
.screenshot-modal .close-modal {
  position: absolute;
  top: 2rem;
  right: 3rem;
  font-size: 2.5rem;
  color: #a78bfa;
  cursor: pointer;
  z-index: 10;
  transition: color 0.2s;
}
.screenshot-modal .close-modal:hover {
  color: #fff;
}

/* Contact Modal */
.contact-modal {
  position: fixed;
  z-index: 20001;
  left: 0; top: 0; width: 100vw; height: 100vh;
  background: rgba(20,10,40,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.contact-modal.show {
  opacity: 1;
  pointer-events: auto;
}
.contact-modal .close-modal {
  color: #a78bfa;
  font-size: 2rem;
  cursor: pointer;
  transition: color 0.2s;
}
.contact-modal .close-modal:hover {
  color: #fff;
}

/* Welcome Overlay */
.welcome-overlay {
  position: fixed;
  z-index: 30000;
  left: 0; top: 0; width: 100vw; height: 100vh;
  background: linear-gradient(135deg, #1a1a2e 0%, #7c3aed 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  transition: opacity 1.2s;
  opacity: 1;
}
.welcome-overlay.fade-out {
  opacity: 0;
  pointer-events: none;
}
.welcome-text {
  text-align: center;
  animation: welcomeText 1.2s cubic-bezier(.68,-0.55,.27,1.55);
}
@keyframes welcomeText {
  0% { opacity: 0; transform: scale(0.8) translateY(40px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* Code Rain Canvas */
.code-rain-bg {
  position: fixed;
  z-index: 1;
  left: 0; top: 0; width: 100vw; height: 100vh;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: lighten;
}

/* Section Animations */
.section-hidden {
  opacity: 0;
  transform: translateY(40px) scale(0.98);
  transition: opacity 0.7s cubic-bezier(.68,-0.55,.27,1.55), transform 0.7s cubic-bezier(.68,-0.55,.27,1.55);
}
.section-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Glassy Navbar with shadow on scroll */
#navbar {
  background: rgba(24, 24, 36, 0.25);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: none;
}
#navbar.scrolled {
  background: rgba(24, 24, 36, 0.85);
  box-shadow: 0 4px 24px #7c3aed33;
}

/* Hero Text Reveal Animation */
.animate-hero-reveal {
  animation: heroReveal 1.2s cubic-bezier(.68,-0.55,.27,1.55);
}
@keyframes heroReveal {
  0% { opacity: 0; transform: scale(0.95) translateY(40px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* 3D Cube Container */
.cube-container {
  width: 220px;
  height: 220px;
  background: rgba(44, 22, 80, 0.18);
  border-radius: 1.5rem;
  box-shadow: 0 8px 32px 0 #7c3aed33;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: box-shadow 0.3s;
}
.cube-container:hover {
  box-shadow: 0 16px 48px 0 #a78bfa33, 0 2px 12px 0 #7c3aed33;
}

/* Live Terminal Section */
.terminal-container {
  width: 100%;
  max-width: 520px;
  background: rgba(24, 24, 36, 0.85);
  border-radius: 1.25rem;
  box-shadow: 0 8px 32px 0 #7c3aed33;
  margin: 0 auto;
  overflow: hidden;
  border: 1.5px solid #a78bfa33;
}
.terminal-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(44, 22, 80, 0.25);
  padding: 0.5rem 1rem;
  border-bottom: 1.5px solid #a78bfa22;
}
.terminal-bar .dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 4px;
}
.terminal-bar .dot.red { background: #ff5f56; }
.terminal-bar .dot.yellow { background: #ffbd2e; }
.terminal-bar .dot.green { background: #27c93f; }
.terminal-title {
  margin-left: 1rem;
  color: #a78bfa;
  font-family: 'Fira Mono', 'Menlo', 'Consolas', monospace;
  font-size: 1rem;
}
.terminal {
  font-family: 'Fira Mono', 'Menlo', 'Consolas', monospace;
  font-size: 1.1rem;
  color: #c4b5fd;
  background: transparent;
  padding: 1.2rem 1rem 1rem 1rem;
  min-height: 180px;
  white-space: pre-wrap;
  line-height: 1.6;
  letter-spacing: 0.01em;
}

/* Contact Modal Advanced Styles */
.contact-glass {
  background: linear-gradient(135deg, rgba(44,22,80,0.55) 60%, rgba(124,58,237,0.18) 100%);
  box-shadow: 0 12px 48px 0 #7c3aed55, 0 2px 12px 0 #a78bfa33;
  border: 2.5px solid #a78bfa55;
  position: relative;
  overflow: visible;
  animation: modalIn 0.7s cubic-bezier(.68,-0.55,.27,1.55);
}
@keyframes modalIn {
  0% { opacity: 0; transform: scale(0.92) translateY(40px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.contact-modal.show .contact-glass {
  animation: modalIn 0.7s cubic-bezier(.68,-0.55,.27,1.55);
}
.contact-input {
  background: rgba(44, 22, 80, 0.32);
  border: 1.5px solid #a78bfa88;
  color: #fff;
  border-radius: 0.7rem;
  padding: 0.7rem 1.2rem;
  font-size: 1.1rem;
  font-weight: 500;
  box-shadow: 0 2px 8px #7c3aed22;
  transition: border 0.2s, box-shadow 0.2s, background 0.2s, transform 0.2s;
}
.contact-input:focus {
  border: 2px solid #a78bfa;
  background: rgba(124, 58, 237, 0.13);
  box-shadow: 0 0 0 3px #a78bfa55;
  outline: none;
  transform: scale(1.03);
}
.contact-input:invalid {
  animation: shake 0.2s;
}
@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  50% { transform: translateX(6px); }
  75% { transform: translateX(-4px); }
  100% { transform: translateX(0); }
}
.contact-send {
  background: linear-gradient(90deg, #7c3aed 60%, #a78bfa 100%);
  color: #fff;
  border: none;
  border-radius: 0.9rem;
  padding: 0.7rem 1.7rem;
  font-weight: 800;
  font-size: 1.1rem;
  box-shadow: 0 2px 12px #7c3aed33;
  position: relative;
  overflow: hidden;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}
.contact-send:active {
  transform: scale(0.97);
}
.contact-send:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}
.contact-send .send-icon {
  transition: transform 0.3s cubic-bezier(.68,-0.55,.27,1.55);
}
.contact-send.sending .send-icon {
  animation: sendPulse 0.7s infinite alternate;
}
@keyframes sendPulse {
  0% { transform: translateX(0) scale(1); }
  100% { transform: translateX(6px) scale(1.2); }
}
.contact-send.success {
  background: linear-gradient(90deg, #22d3ee 60%, #a78bfa 100%);
}
.contact-send.error {
  background: linear-gradient(90deg, #ef4444 60%, #a78bfa 100%);
}
#contact-status {
  min-height: 1.5em;
  transition: color 0.3s;
}
#contact-status.success {
  color: #22d3ee;
  animation: statusPop 0.7s cubic-bezier(.68,-0.55,.27,1.55);
}
#contact-status.error {
  color: #ef4444;
  animation: statusPop 0.7s cubic-bezier(.68,-0.55,.27,1.55);
}
@keyframes statusPop {
  0% { opacity: 0; transform: scale(0.8); }
  100% { opacity: 1; transform: scale(1); }
}
/* Sparkles Animation */
#contact-sparkles {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.7;
}
/* Envelope Animation */
.animate-envelope {
  animation: envelopeWiggle 2.2s infinite cubic-bezier(.68,-0.55,.27,1.55);
}
@keyframes envelopeWiggle {
  0%, 100% { transform: rotate(-6deg) scale(1); }
  10% { transform: rotate(6deg) scale(1.08); }
  20% { transform: rotate(-4deg) scale(1.04); }
  30% { transform: rotate(4deg) scale(1.06); }
  40% { transform: rotate(-2deg) scale(1.02); }
  50% { transform: rotate(2deg) scale(1.04); }
  60% { transform: rotate(-1deg) scale(1.01); }
  70% { transform: rotate(1deg) scale(1.02); }
  80% { transform: rotate(0deg) scale(1); }
}
.animate-discord {
  animation: discordBounce 2.8s infinite cubic-bezier(.68,-0.55,.27,1.55);
}
@keyframes discordBounce {
  0%, 100% { transform: translateY(0); }
  20% { transform: translateY(-4px); }
  40% { transform: translateY(2px); }
  60% { transform: translateY(-2px); }
  80% { transform: translateY(1px); }
}
.animate-mail {
  animation: mailPulse 2.5s infinite cubic-bezier(.68,-0.55,.27,1.55);
}
@keyframes mailPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.13); }
}
/* Accessibility focus trap */
.contact-modal:focus-within .contact-glass {
  box-shadow: 0 0 0 4px #a78bfa55, 0 12px 48px 0 #7c3aed55;
}

/* Animated Glassy Blobs Background */
#animated-bg-blobs {
  position: fixed;
  z-index: 0;
  left: 0; top: 0; width: 100vw; height: 100vh;
  pointer-events: none;
  overflow: hidden;
}
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(32px) brightness(1.2) saturate(1.2);
  opacity: 0.55;
  animation: blobFloat 7s ease-in-out infinite alternate;
  mix-blend-mode: lighten;
  animation-duration: 7s !important;
}
@keyframes blobFloat {
  0% { transform: scale(1) translateY(0) translateX(0); }
  25% { transform: scale(1.1) translateY(-30px) translateX(40px); }
  50% { transform: scale(1.2) translateY(40px) translateX(-30px); }
  75% { transform: scale(1.05) translateY(-20px) translateX(20px); }
  100% { transform: scale(1) translateY(0) translateX(0); }
}
/* Site-wide Sparkles */
#site-sparkles {
  position: fixed;
  z-index: 2;
  left: 0; top: 0; width: 100vw; height: 100vh;
  pointer-events: none;
  opacity: 0.5;
}
/* WOW Blob */
#wow-blob-container {
  position: fixed;
  z-index: 10;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  width: 600px;
  height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#wow-blob {
  width: 600px;
  height: 600px;
  filter: blur(0.5px) brightness(1.2) saturate(1.2) drop-shadow(0 0 80px #a78bfa88);
  opacity: 0.7;
  pointer-events: none;
}
.wow-badge {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(1.1);
  font-size: 3.5rem;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 0 32px #a78bfa, 0 0 8px #7c3aed;
  letter-spacing: 0.1em;
  pointer-events: none;
  animation: wowPulse 2.2s infinite cubic-bezier(.68,-0.55,.27,1.55);
  filter: drop-shadow(0 0 32px #a78bfa88);
}
@keyframes wowPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1.1); }
  50% { transform: translate(-50%, -50%) scale(1.22) rotate(-2deg); }
}
/* Last.fm Widget */
.lastfm-widget {
  display: flex;
  align-items: center;
  gap: 2.2rem;
  background: linear-gradient(120deg, rgba(44,22,80,0.75) 60%, rgba(124,58,237,0.18) 100%);
  border: 2.5px solid #a78bfa55;
  box-shadow: 0 8px 48px 0 #7c3aed33, 0 2px 12px 0 #a78bfa22;
  border-radius: 2rem;
  padding: 1.5rem 2.5rem;
  min-height: 120px;
  max-width: 700px;
  margin: 0 auto 2.5rem auto;
  position: relative;
  overflow: visible;
}
.lastfm-art-container {
  position: relative;
  width: 72px;
  height: 72px;
  min-width: 72px;
  min-height: 72px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 24px #a78bfa55;
  background: #1a1a2e;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lastfm-art {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  animation: albumSpin 8s linear infinite;
  transform: scale(1.08);
  border: 2px solid #a78bfa44;
}
.lastfm-info {
  display: flex;
  flex-direction: column;
  gap: 0.2em;
}
.lastfm-track {
  font-size: 1.1em;
  font-weight: 700;
  color: #a78bfa;
}
.lastfm-artist {
  font-size: 1em;
  color: #c4b5fd;
}
.lastfm-album {
  font-size: 0.95em;
  color: #a78bfa99;
}
.lastfm-bars {
  position: absolute;
  bottom: 6px; left: 10px; right: 10px;
  height: 14px;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  z-index: 2;
}
.lastfm-bar {
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, #a78bfa 60%, #7c3aed 100%);
  animation: barBounce 1.2s infinite;
}
@keyframes barBounce {
  0%, 100% { height: 6px; }
  20% { height: 14px; }
  40% { height: 9px; }
  60% { height: 12px; }
  80% { height: 7px; }
}
.lastfm-status {
  font-size: 0.9em;
  color: #38bdf8;
  margin-top: 0.2em;
  font-family: monospace;
  letter-spacing: 0.02em;
}
/* Animated Section Dividers */
.section-title {
  position: relative;
  z-index: 2;
  background: linear-gradient(90deg, #a78bfa 60%, #7c3aed 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;

}
@keyframes titleGlow {
  0% { text-shadow: 0 0 8px #a78bfa88; }
  100% { text-shadow: 0 0 24px #a78bfa; }
}
/* Responsive for WOW Blob */
@media (max-width: 900px) {
  #wow-blob-container, #wow-blob {
    width: 320px !important;
    height: 320px !important;
  }
}
@media (max-width: 600px) {
  #wow-blob-container, #wow-blob {
    width: 180px !important;
    height: 180px !important;
  }
}
/* Micro-interactions */
.btn-primary, .btn-secondary {
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.btn-primary::after, .btn-secondary::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 0; height: 0;
  background: radial-gradient(circle, #a78bfa55 0%, transparent 80%);
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: width 0.4s, height 0.4s, opacity 0.4s;
  z-index: -1;
}
.btn-primary:active::after, .btn-secondary:active::after {
  width: 180px; height: 180px;
  opacity: 0.5;
}
.project-card {
  transition: box-shadow 0.3s, transform 0.3s, background 0.3s, filter 0.3s;
  will-change: transform, box-shadow, filter;
}
.project-card:hover {
  transform: translateY(-10px) scale(1.04) rotateY(-7deg) skewY(-1deg);
  filter: brightness(1.12) saturate(1.2) drop-shadow(0 0 32px #a78bfa88);
}
.project-img {
  transition: filter 0.3s, transform 0.3s;
}
.project-card:hover .project-img {
  filter: brightness(1.2) saturate(1.2) drop-shadow(0 0 16px #a78bfa88);
  transform: scale(1.04) rotate(-1deg);
}
/* Remove all glowing effects */
.text-glow, .exp-present, .hero-img {
  text-shadow: none !important;
  box-shadow: none !important;
  animation: none !important;
  filter: none !important;
}
.exp-present {
  color: #fff;
  background: linear-gradient(90deg, #a78bfa 60%, #7c3aed 100%);
  border-radius: 0.5rem;
  padding: 0.1em 0.7em;
  font-size: 0.95em;
  font-weight: 700;
  margin-left: 0.5em;
  box-shadow: none;
}
.hero-img {
  border-radius: 50%;
  border: 4px solid transparent;
  background: linear-gradient(120deg, #a78bfa, #7c3aed, #38bdf8) border-box;
}
/* Mascot styles */
.mascot {
  position: fixed;
  left: 32px;
  bottom: 32px;
  width: 72px;
  height: 72px;
  z-index: 100;
  cursor: pointer;
  transition: transform 0.2s;
  animation: mascotFloat 3.2s ease-in-out infinite alternate;
}
@keyframes mascotFloat {
  0% { transform: translateY(0) scale(1); }
  100% { transform: translateY(-18px) scale(1.04) rotate(-3deg); }
}
.mascot:active {
  transform: scale(1.08) rotate(6deg);
}
/* Floating skill icons */
.floating-skill {
  animation: floatSkill 2.8s ease-in-out infinite alternate;
  filter: drop-shadow(0 0 0.5em currentColor);
}
@keyframes floatSkill {
  0% { transform: translateY(0) scale(1); }
  100% { transform: translateY(-10px) scale(1.08); }
}
.glow-orange { color: #f97316; filter: drop-shadow(0 0 8px #f97316cc); }
.glow-blue { color: #38bdf8; filter: drop-shadow(0 0 8px #38bdf8cc); }
.glow-yellow { color: #facc15; filter: drop-shadow(0 0 8px #facc15cc); }
.glow-green { color: #22d3ee; filter: drop-shadow(0 0 8px #22d3eecb); }
.glow-purple { color: #a78bfa; filter: drop-shadow(0 0 8px #a78bfacc); }
.glow-pink { color: #ec4899; filter: drop-shadow(0 0 8px #ec4899cc); }
.glow-gray { color: #64748b; filter: drop-shadow(0 0 8px #64748bcc); }
.glow-white { color: #fff; filter: drop-shadow(0 0 8px #fff8); }
.glow-black { color: #181824; filter: drop-shadow(0 0 8px #181824cc); }

/* Scroll to top button */
.scroll-to-top {
  position: fixed;
  right: 32px;
  bottom: 32px;
  width: 48px;
  height: 48px;
  background: linear-gradient(120deg, #a78bfa 60%, #7c3aed 100%);
  color: #fff;
  border-radius: 50%;
  box-shadow: 0 4px 24px #7c3aed44;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2em;
  cursor: pointer;
  z-index: 100;
  opacity: 0.85;
  transition: opacity 0.2s, transform 0.2s;
}
.scroll-to-top:hover {
  opacity: 1;
  transform: scale(1.08) translateY(-6px);
}
/* Confetti effect */
.confetti {
  position: fixed;
  left: 0; top: 0; width: 100vw; height: 100vh;
  pointer-events: none;
  z-index: 9999;
}
/* Skill chip for black/monochrome icons */
.skill-chip {
  background: linear-gradient(120deg, #f3f4f6 60%, #e0e7ef 100%);
  border: 1.5px solid #a78bfa55;
  color: #181824;
  box-shadow: 0 2px 12px #a78bfa22;
  filter: none !important;
}
.skill-chip img {
  filter: drop-shadow(0 0 2px #a78bfa33) brightness(0.8) contrast(1.2);
}
/* Glassy section backgrounds */
section {
  background: rgba(44, 22, 80, 0.18);
  border-radius: 1.5rem;
  box-shadow: 0 4px 24px #7c3aed11;
  padding: 2.5rem 2rem;
  margin-bottom: 2.5rem;
  border: 1.5px solid #a78bfa22;
}
@media (max-width: 900px) {
  section { padding: 1.2rem 0.7rem; }
}
@media (max-width: 600px) {
  section { padding: 0.7rem 0.2rem; }
}
/* Section divider polish */
.section-divider {
  width: 100%;
  height: 60px;
  margin: -2rem 0 2rem 0;
  background: none;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}
.section-divider::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: url('data:image/svg+xml;utf8,<svg width="100%25" height="100%25" viewBox="0 0 1440 60" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 30 Q 360 60 720 30 T 1440 30 V60 H0Z" fill="%237c3aed" fill-opacity="0.10"/></svg>') repeat-x;
  background-size: cover;
  opacity: 0.5;
  animation: dividerWave 8s linear infinite;
}