/* 
  ===================================================================
  Component: About Page Styles
  Description: Styles for the About Me page, complementing the main theme.
  ===================================================================
*/

/* --- General Card & Interactive Element Styling --- */

/* Base style for all interactive cards */
.achievement-card,
.education-card,
.skill-category,
.contact-link,
.testimonial-card {
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Hover effect for cards */
.achievement-card:hover,
.education-card:hover,
.skill-category:hover,
.contact-link:hover {
    transform: translateY(-8px);
    border-color: var(--display-start);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2), 0 8px 10px -6px rgba(0, 0, 0, 0.2);
}

/* Hover effect for icons within cards */
.achievement-icon,
.education-icon,
.skill-icon {
    transition: transform 0.3s ease-in-out;
}

.achievement-card:hover .achievement-icon,
.education-card:hover .education-icon,
.skill-category:hover .skill-icon {
    transform: scale(1.1) rotate(5deg);
}

/* --- Section-Specific Styling --- */

/* Portrait Image Placeholders */
.image-placeholder {
    transition: transform 0.4s ease-in-out, border-color 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
}

.image-placeholder:hover {
    transform: scale(1.03);
    border-color: var(--display-start);
    box-shadow: 0 0 30px rgba(139, 92, 246, 0.2), 0 0 15px rgba(139, 92, 246, 0.1);
}

/* Testimonial Section */
.testimonial-card:hover {
    transform: translateY(-5px);
    border-color: var(--display-end);
}

/* Contact Section: CTA Button */
.cta-glow {
    box-shadow: 0 0 20px rgba(var(--cta-end-rgb), 0.4), 0 0 30px rgba(var(--cta-start-rgb), 0.3);
    transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.cta-glow:hover {
    box-shadow: 0 0 35px rgba(var(--cta-end-rgb), 0.6), 0 0 50px rgba(var(--cta-start-rgb), 0.4);
}

/* --- Text & Gradients --- */

/* Gradient for specific text elements */
.text-gradient-display {
    background-image: linear-gradient(to right, var(--display-start), var(--display-end));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* --- Responsive Design --- */

/* Adjustments for tablet screens */
@media (max-width: 1024px) {
    .hero-title {
        font-size: 3.5rem; /* Adjust font size for tablets */
    }
}

/* Adjustments for mobile screens */
@media (max-width: 768px) {
    /* Center text on mobile for most sections */
    .text-center-mobile {
        text-align: center;
    }

    .mx-auto-mobile {
        margin-left: auto;
        margin-right: auto;
    }

    /* Stack hero content vertically */
    #hero-section .grid {
        gap: 2rem;
    }

    .hero-title {
        font-size: 2.5rem; /* Further reduce font size for mobile */
    }

    /* Hide the first portrait image on mobile */
    .portrait-main {
        display: none;
    }

    /* Stack journey section content and reverse order */
    #experience-journey .grid {
        display: flex;
        flex-direction: column-reverse;
        gap: 3rem;
    }

    #experience-journey .portrait-secondary {
        margin-bottom: 1rem;
    }
}

/* About page specific styles that work with the main theme */

/* Portrait image placeholders */
.image-placeholder {
    transition: all 0.3s ease;
}

.image-placeholder:hover {
    transform: translateY(-5px);
    border-color: var(--display-start);
}

.portrait-main {
    animation: float 6s ease-in-out infinite;
}

.portrait-secondary {
    animation: float 6s ease-in-out infinite reverse;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* Achievement cards animations */
.achievement-card {
    transform: translateX(-50px);
    opacity: 0;
    animation: slideInLeft 0.6s ease forwards;
}

.achievement-card:nth-child(2) {
    animation-delay: 0.2s;
}

.achievement-card:nth-child(3) {
    animation-delay: 0.4s;
}

.achievement-card:nth-child(4) {
    animation-delay: 0.6s;
}

@keyframes slideInLeft {
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Education cards */
.education-card {
    transform: translateY(30px);
    opacity: 0;
    animation: slideInUp 0.6s ease forwards;
}

.education-card:nth-child(2) {
    animation-delay: 0.2s;
}

.education-card:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes slideInUp {
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Skills cards */
.skill-category {
    transform: scale(0.9);
    opacity: 0;
    animation: scaleIn 0.5s ease forwards;
}

.skill-category:nth-child(2) {
    animation-delay: 0.1s;
}

.skill-category:nth-child(3) {
    animation-delay: 0.2s;
}

.skill-category:nth-child(4) {
    animation-delay: 0.3s;
}

@keyframes scaleIn {
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Stats cards in hero */
.stat-card {
    transform: translateY(20px);
    opacity: 0;
    animation: fadeInUp 0.6s ease forwards;
}

.stat-card:nth-child(2) {
    animation-delay: 0.2s;
}

@keyframes fadeInUp {
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Contact links */
.contact-link {
    transform: translateY(20px);
    opacity: 0;
    animation: fadeInUp 0.4s ease forwards;
}

.contact-link:nth-child(2) {
    animation-delay: 0.1s;
}

.contact-link:nth-child(3) {
    animation-delay: 0.2s;
}

.contact-link:nth-child(4) {
    animation-delay: 0.3s;
}

/* Testimonial card */
.testimonial-card {
    transform: scale(0.95);
    opacity: 0;
    animation: testimonialIn 0.8s ease forwards;
}

@keyframes testimonialIn {
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .image-placeholder {
        width: 100%;
        max-width: 300px;
        height: 350px;
        margin: 0 auto;
    }
    
    .portrait-main,
    .portrait-secondary {
        animation: none;
    }
    
    .achievement-card {
        transform: none;
        opacity: 1;
        animation: none;
    }
    
    .education-card,
    .skill-category,
    .stat-card,
    .contact-link {
        transform: none;
        opacity: 1;
        animation: none;
    }
}

/* Responsive portrait sizing */
@media (max-width: 1024px) {
    .image-placeholder {
        width: 300px;
        height: 375px;
    }
}

@media (max-width: 480px) {
    .image-placeholder {
        width: 250px;
        height: 300px;
    }
}