/* Global typography */
body {
    font-family: 'Poppins', sans-serif;
}

/* Sections */
.section {
    padding-top: 6rem;
    padding-bottom: 6rem;
}
.section-title {
    font-size: 3rem; /* 48px */
    font-weight: 700;
    margin-bottom: 4rem;
    text-align: center;
}

/* Hero background particles (index page) */
#particles-js {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0;
}
.hero-content {
    position: relative;
    z-index: 1;
}

/* Gradients */
.gradient-text {
    background: linear-gradient(to right, #f97316, #16a34a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.gradient-bg {
    background: linear-gradient(to right, #f97316, #16a34a);
}

/* Scroll animations */
.animate-on-scroll {
    opacity: 0;
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.animate-on-scroll.is-visible {
    opacity: 1;
    transform: none;
}
.animate-zoom-in {
    transform: scale(0.9);
}
.animate-fade-up {
    transform: translateY(40px);
}
/* Delay utilities for stagger; pair with .animate-on-scroll */
.delay-0 { transition-delay: 0ms !important; }
.delay-100 { transition-delay: 100ms !important; }
.delay-150 { transition-delay: 150ms !important; }
.delay-200 { transition-delay: 200ms !important; }
.delay-250 { transition-delay: 250ms !important; }
.delay-300 { transition-delay: 300ms !important; }
.delay-350 { transition-delay: 350ms !important; }
.delay-400 { transition-delay: 400ms !important; }
.delay-450 { transition-delay: 450ms !important; }
.delay-500 { transition-delay: 500ms !important; }
.delay-600 { transition-delay: 600ms !important; }
.delay-700 { transition-delay: 700ms !important; }
.delay-800 { transition-delay: 800ms !important; }
.delay-900 { transition-delay: 900ms !important; }
.delay-1000 { transition-delay: 1000ms !important; }

/* Additional directional fades */
.animate-fade-left { transform: translateX(-40px); }
.animate-fade-right { transform: translateX(40px); }

/* Skill tags & icons */
.skill-tag {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.skill-tag:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 20px rgba(249, 115, 22, 0.3);
}
.dark .skill-tag:hover {
    box-shadow: 0 4px 20px rgba(34, 197, 94, 0.3);
}
.social-icon {
    transition: transform 0.3s ease, color 0.3s ease;
}
.social-icon:hover {
    transform: scale(1.2);
    color: #15803d; /* green-700 */
}
.dark .social-icon:hover {
    color: #4ade80; /* green-400 */
}

/* Active nav link */
.nav-link.active {
    color: #f97316;
    background-color: rgba(249, 115, 22, 0.1);
}
.dark .nav-link.active {
    color: #fb923c;
    background-color: rgba(251, 146, 60, 0.1);
}

/* Typing cursor (index page) */
.typing-cursor {
    display: inline-block;
    width: 3px;
    height: 2.5rem; /* Match font size */
    background-color: #16a34a;
    animation: blink 0.7s infinite;
    margin-left: 4px;
    vertical-align: middle;
}
@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* Project cards (index page) */
.project-card-image {
    transition: transform 0.4s ease;
}
.group:hover .project-card-image {
    transform: scale(1.05);
}

/* Card image overlay on hover (works with existing .group structure) */
.group > .overflow-hidden:first-child { position: relative; }
.group > .overflow-hidden:first-child::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.25) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.group:hover > .overflow-hidden:first-child::after { opacity: 1; }

/* Modal overlay (shared) */
.modal-overlay {
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}

/* Input focus glow (non-intrusive) */
input[type="text"], input[type="email"], textarea {
    transition: box-shadow 0.2s ease;
}
input[type="text"]:focus, input[type="email"]:focus, textarea:focus {
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.25);
}

/* Ripple effect base styles */
.ripple-container { position: relative; overflow: hidden; }
.ripple {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    animation: ripple 600ms linear;
    background: rgba(255, 255, 255, 0.45);
    pointer-events: none;
}
@keyframes ripple {
    to { transform: scale(4); opacity: 0; }
}

/* Soft pop for elements when becoming visible */
@keyframes soft-pop { from { transform: scale(0.96); } to { transform: scale(1); } }
.skill-tag.is-visible { animation: soft-pop 240ms ease-out; }

/* Swiper theming */
.swiper-button-prev,
.swiper-button-next {
    color: #16a34a; /* green-600 */
    transition: transform 0.2s ease, color 0.2s ease;
}
.swiper-button-prev:hover,
.swiper-button-next:hover {
    transform: scale(1.1);
    color: #f97316; /* orange-500 */
}
.swiper-pagination-bullet {
    background: rgba(22, 163, 74, 0.35);
    opacity: 1;
}
.swiper-pagination-bullet-active {
    background: linear-gradient(90deg, #f97316, #16a34a);
}
.dark .swiper-button-prev,
.dark .swiper-button-next { color: #4ade80; }
.dark .swiper-button-prev:hover,
.dark .swiper-button-next:hover { color: #fb923c; }
.dark .swiper-pagination-bullet { background: rgba(74, 222, 128, 0.35); }
.dark .swiper-pagination-bullet-active { background: linear-gradient(90deg, #fb923c, #4ade80); }

/* Flip card (achievements certifications) */
.flip-card {
    perspective: 1000px;
    position: relative;
    min-height: 22rem; /* ensures enough space for back content */
}
.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.6s ease;
}
.flip-card.is-flipped .flip-card-inner {
    transform: rotateY(180deg);
}
.flip-card-front,
.flip-card-back {
    position: absolute;
    inset: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 1rem; /* match rounded-2xl */
}
.flip-card-front {
    z-index: 2;
}
.flip-card-back {
    transform: rotateY(180deg);
    overflow: auto; /* long description scrolls inside */
}

/* Better touch targets for flip */
.flip-card [data-flip-toggle="true"] {
    cursor: pointer;
}