/* Custom overrides and utility styles for the redesigned portfolio */
:root { color-scheme: light; }
html,body { height:100%; }
body { font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; background: #f8fafc; }

/* Richer background and accents */
body {
  background: linear-gradient(180deg, #f7f7fb 0%, #f3f0ff 100%);
}

/* Violet opacity tokens */
:root{
  --violet-60: rgba(107,33,168,0.60);
  --violet-40: rgba(159,122,234,0.40);
}

.bg-violet-60 { background-color: var(--violet-60) !important; }
.bg-violet-40 { background-color: var(--violet-40) !important; }
.text-violet-60 { color: var(--violet-60) !important; }
.text-violet-40 { color: var(--violet-40) !important; }

/* Image object-position utilities */
.obj-right { object-position: right center !important; }
.obj-left { object-position: left center !important; }

/* Hero image: show full face and avoid cropping */
.hero-img {
  object-fit: contain !important;
  object-position: center !important;
  background: linear-gradient(180deg, rgba(159,122,234,0.06), rgba(255,255,255,0.6));
  display: block;
}

/* Slight upward nudge to visually align image with heading on larger screens */
@media (min-width: 768px) {
  .hero-img-nudge { transform: translateY(-6%); }
}

/* Logo animation */
.logo-bounce { display:inline-block; transform-origin:center; animation:logoBounce 3s ease-in-out infinite; }
@keyframes logoBounce { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-4px) rotate(-2deg);} }
.anim-fadeUp { animation: fadeUp .7s both; }
.anim-zoomIn { animation: zoomIn .6s both; }
.anim-slideLeft { animation: slideLeft .7s both; }
.anim-pop { animation: popIn .5s both; }
.anim-pulse { animation: pulseGlow 2.6s ease-in-out infinite; }

@keyframes pulseGlow { 0% { box-shadow: 0 0 0 0 rgba(107,33,168,0.08);} 70% { box-shadow: 0 20px 40px -10px rgba(107,33,168,0.06);} 100% { box-shadow: 0 0 0 0 rgba(107,33,168,0.0);} }

/* Navigation */
.nav-link { color: #374151; text-decoration: none; }
.nav-link:hover { color: #5b21a8; }
.btn-cta { transition: all .15s ease; }

/* Sections & cards */
section { padding-top: 3rem; padding-bottom: 3rem; }
.rounded-xl { border-radius: 12px; }
.project-card { transition: transform .22s ease, box-shadow .22s ease; background: linear-gradient(180deg, #ffffff 0%, #fbf7ff 100%); border: 1px solid rgba(107,33,168,0.06); }
.project-card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(99,102,241,0.08); }

.section-accent { background: linear-gradient(180deg, rgba(159,122,234,0.03), rgba(255,255,255,0.0)); }

/* Modal */
/* Modal overlay and dialog */
#projectModal { display: none; }
#projectModal.show { display:flex; }
.modal-dialog { max-height: 80vh; overflow: auto; scroll-behavior: smooth; }
.modal-dialog::-webkit-scrollbar{ height:8px; width:8px; }
.modal-dialog::-webkit-scrollbar-thumb{ background: rgba(107,33,168,0.15); border-radius:6px; }

/* Close button visible */
#closeModal { background: transparent; }


/* Small tweaks */
.min-h-[360px]{ min-height:360px; }

/* Make sections gently animate into view */
.fade-in-section { opacity: 0; transform: translateY(12px) scale(.995); transition: opacity .6s cubic-bezier(.2,.8,.2,1), transform .6s cubic-bezier(.2,.8,.2,1); }
.fade-in-section.visible { opacity: 1; transform: translateY(0) scale(1); }

/* Animations */
.anim-fadeUp { animation: fadeUp .7s both; }
.anim-zoomIn { animation: zoomIn .6s both; }
.anim-slideLeft { animation: slideLeft .7s both; }
.anim-pop { animation: popIn .5s both; }

@keyframes fadeUp { from { opacity:0; transform: translateY(12px);} to { opacity:1; transform: translateY(0);} }
@keyframes zoomIn { from { opacity:0; transform: scale(.96);} to { opacity:1; transform: scale(1);} }
@keyframes slideLeft { from { opacity:0; transform: translateX(18px);} to { opacity:1; transform: translateX(0);} }
@keyframes popIn { from { opacity:0; transform: translateY(6px) scale(.98);} to { opacity:1; transform: translateY(0) scale(1);} }

/* Additional scroll animations */
@keyframes slideRight { from { opacity:0; transform: translateX(-18px);} to { opacity:1; transform: translateX(0);} }
@keyframes slideDown { from { opacity:0; transform: translateY(-12px);} to { opacity:1; transform: translateY(0);} }
@keyframes fadeInScale { from { opacity:0; transform: scale(0.92);} to { opacity:1; transform: scale(1);} }
@keyframes float { 0%, 100% { transform: translateY(0px);} 50% { transform: translateY(-8px);} }
@keyframes glow { 0%, 100% { filter: drop-shadow(0 0 8px rgba(107,33,168,0.2));} 50% { filter: drop-shadow(0 0 16px rgba(107,33,168,0.4));} }
@keyframes shimmer { 0% { background-position: -1000px 0;} 100% { background-position: 1000px 0;} }
@keyframes rotate3d { 0% { transform: perspective(1000px) rotateY(0deg);} 100% { transform: perspective(1000px) rotateY(360deg);} }

.anim-slideRight { animation: slideRight .7s both; }
.anim-slideDown { animation: slideDown .7s both; }
.anim-fadeInScale { animation: fadeInScale .6s both; }
.anim-float { animation: float 3s ease-in-out infinite; }
.anim-glow { animation: glow 2s ease-in-out infinite; }

/* Card animations on scroll */
.project-card, .p-6 { transition: transform .22s ease, box-shadow .22s ease, filter .22s ease; }
.project-card.anim-visible, .p-6.anim-visible { animation: fadeInScale .6s both; }

/* Project details expansion */
.project-details { transition: all .4s ease; opacity: 0; max-height: 0; overflow: hidden; }
.project-details.show { opacity: 1; max-height: 600px; }
.project-details h5 { color: #5b21a8; font-size: 0.9rem; }
.project-details ul { margin-left: 0.5rem; }
.project-details li { color: #4b5563; }

/* subtle button hover and focus */
.btn-cta, .open-project { transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; }
.open-project:hover, .btn-cta:hover { filter: brightness(1.05); }
.open-project:active, .btn-cta:active { transform: translateY(1px) scale(.995); }

/* Enhanced hover glow for project cards */
.project-card:hover { box-shadow: 0 20px 50px rgba(107,33,168,0.15); filter: brightness(1.02); }

/* Image fallback container */
.rounded-2xl.overflow-hidden.fallback { display:flex; align-items:center; justify-content:center; min-height:200px; background: linear-gradient(135deg,#6B21A8,#9f7aea); color:white; font-weight:700; }

/* Staggered animation for list items */
.stagger-item { opacity: 0; animation: fadeUp .6s both; }
.stagger-item:nth-child(1) { animation-delay: 0.1s; }
.stagger-item:nth-child(2) { animation-delay: 0.2s; }
.stagger-item:nth-child(3) { animation-delay: 0.3s; }
.stagger-item:nth-child(4) { animation-delay: 0.4s; }
.stagger-item:nth-child(5) { animation-delay: 0.5s; }
.stagger-item:nth-child(6) { animation-delay: 0.6s; }

/* Smooth transitions on link hovers */
a { transition: color .2s ease, transform .2s ease; }
a:hover { transform: translateY(-2px); }

/* Accessibility: focus styles */
a:focus, button:focus, input:focus, textarea:focus { outline: 3px solid rgba(107,33,168,0.12); outline-offset: 2px; }

@media (max-width:640px){
  .min-h-[360px]{ min-height:240px; }
}