/* ==================================================
   ABOUT US PAGE ANIMATIONS FOR LAW FIRM
   ================================================== */

/* Hero section animations */
.about-hero-content {
    opacity: 0;
    transform: translateY(40px);
    animation: aboutHeroFadeIn 1.2s ease-out forwards;
}

.about-hero-title {
    animation-delay: 0.3s;
}

.about-hero-intro {
    animation-delay: 0.6s;
}

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

/* Hero background parallax */
.about-hero-bg {
    will-change: transform;
    transition: transform 0.1s ease-out;
}

/* Mission & Vision alternating animations */
.mission-vision-section {
    opacity: 0;
    transition: opacity 0.8s ease-out;
}

.mission-vision-section.in-view {
    opacity: 1;
}

.mission-container {
    opacity: 0;
    transform: translateX(-60px);
    transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.mission-container.in-view {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.2s;
}

.vision-container {
    opacity: 0;
    transform: translateX(60px);
    transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.vision-container.in-view {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.4s;
}

/* Mission & Vision icon animations */
.mission-vision-icon {
    opacity: 0;
    transform: scale(0) rotate(-180deg);
    transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.mission-vision-icon.in-view {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

.mission-container .mission-vision-icon.in-view {
    transition-delay: 0.6s;
}

.vision-container .mission-vision-icon.in-view {
    transition-delay: 0.8s;
}

/* Icon hover effects */
.mission-vision-icon:hover {
    transform: scale(1.1) rotate(10deg);
    box-shadow: 0 15px 30px rgba(59, 130, 246, 0.3);
}

/* Team bio card animations */
.team-bio-card {
    opacity: 0;
    transform: translateY(50px) scale(0.95);
    transition: all 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.team-bio-card.in-view {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.team-bio-card:nth-child(1) { transition-delay: 0.1s; }
.team-bio-card:nth-child(2) { transition-delay: 0.3s; }
.team-bio-card:nth-child(3) { transition-delay: 0.5s; }

/* Team photo animations */
.team-photo {
    opacity: 0;
    transform: scale(1.1);
    transition: all 0.8s ease-out;
}

.team-bio-card.in-view .team-photo {
    opacity: 1;
    transform: scale(1);
    transition-delay: 0.3s;
}

.team-photo:hover {
    transform: scale(1.05);
    transition: all 0.4s ease;
}

.team-photo img {
    transition: all 0.4s ease;
}

.team-photo:hover img {
    filter: brightness(1.1) contrast(1.1);
}

/* Team bio content animations */
.team-bio-header {
    opacity: 0;
    transform: translateX(-30px);
    transition: all 0.6s ease-out;
}

.team-bio-card.in-view .team-bio-header {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.4s;
}

.team-bio-content {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease-out;
}

.team-bio-card.in-view .team-bio-content {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.6s;
}

/* Bio content reveal animation */
.bio-paragraph {
    opacity: 0;
    transform: translateY(15px);
    transition: all 0.5s ease-out;
}

.team-bio-card.in-view .bio-paragraph {
    opacity: 1;
    transform: translateY(0);
}

.team-bio-card.in-view .bio-paragraph:nth-child(1) { transition-delay: 0.7s; }
.team-bio-card.in-view .bio-paragraph:nth-child(2) { transition-delay: 0.8s; }
.team-bio-card.in-view .bio-paragraph:nth-child(3) { transition-delay: 0.9s; }
.team-bio-card.in-view .bio-paragraph:nth-child(4) { transition-delay: 1.0s; }

/* History section animations */
.history-section {
    opacity: 0;
    background-color: transparent;
    transition: all 0.8s ease-out;
}

.history-section.in-view {
    opacity: 1;
    background-color: rgb(249 250 251); /* gray-50 */
}

.history-header {
    opacity: 0;
    transform: translateY(-30px);
    transition: all 0.6s ease-out;
}

.history-section.in-view .history-header {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.2s;
}

.history-content {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s ease-out;
}

.history-section.in-view .history-content {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.4s;
}

/* History content block animations */
.history-block {
    opacity: 0;
    transform: translateX(-40px);
    transition: all 0.6s ease-out;
}

.history-section.in-view .history-block {
    opacity: 1;
    transform: translateX(0);
}

.history-section.in-view .history-block:nth-child(1) { transition-delay: 0.6s; }
.history-section.in-view .history-block:nth-child(2) { transition-delay: 0.7s; }
.history-section.in-view .history-block:nth-child(3) { transition-delay: 0.8s; }
.history-section.in-view .history-block:nth-child(4) { transition-delay: 0.9s; }
.history-section.in-view .history-block:nth-child(5) { transition-delay: 1.0s; }
.history-section.in-view .history-block:nth-child(6) { transition-delay: 1.1s; }

/* Timeline effect for history */
.history-timeline {
    position: relative;
}

.history-timeline::before {
    content: '';
    position: absolute;
    left: -20px;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(to bottom, transparent, #3B82F6, transparent);
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top;
    transition: all 1.2s ease-out;
}

.history-section.in-view .history-timeline::before {
    opacity: 1;
    transform: scaleY(1);
    transition-delay: 0.8s;
}

/* Why choose us grid animations */
.why-choose-section {
    opacity: 0;
    transition: opacity 0.6s ease-out;
}

.why-choose-section.in-view {
    opacity: 1;
}

.why-choose-header {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease-out;
}

.why-choose-section.in-view .why-choose-header {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.1s;
}

.why-choose-card {
    opacity: 0;
    transform: translateY(40px) scale(0.9);
    transition: all 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.why-choose-card.in-view {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Grid wave animation - cards animate in rows */
.why-choose-card:nth-child(1),
.why-choose-card:nth-child(2),
.why-choose-card:nth-child(3) {
    transition-delay: 0.2s;
}

.why-choose-card:nth-child(4),
.why-choose-card:nth-child(5),
.why-choose-card:nth-child(6) {
    transition-delay: 0.4s;
}

/* Enhanced card hover effects */
.why-choose-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    border-color: #3B82F6;
    transition: all 0.3s ease;
}

.why-choose-card:hover h3 {
    color: #3B82F6;
    transition: color 0.3s ease;
}

/* Section headers universal animation */
.about-section-header {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.about-section-header.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* Parallax scroll effect for hero background */
@media (min-width: 768px) {
    .about-hero-parallax {
        transform: translateY(0);
        transition: transform 0.1s ease-out;
    }
}

/* Text reveal animation for content blocks */
.content-reveal {
    overflow: hidden;
}

.content-reveal-inner {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease-out;
}

.content-reveal.in-view .content-reveal-inner {
    opacity: 1;
    transform: translateY(0);
}

/* Accessibility: Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .about-hero-content,
    .mission-container,
    .vision-container,
    .mission-vision-icon,
    .team-bio-card,
    .team-photo,
    .team-bio-header,
    .team-bio-content,
    .bio-paragraph,
    .history-section,
    .history-header,
    .history-content,
    .history-block,
    .why-choose-card,
    .about-section-header {
        opacity: 1;
        transform: none;
    }

    .history-timeline::before {
        opacity: 1;
        transform: none;
    }
}

/* Performance optimization for mobile */
@media (max-width: 768px) {
    .team-photo,
    .mission-vision-icon,
    .why-choose-card {
        will-change: auto;
    }

    /* Simplify animations on mobile */
    .team-photo:hover,
    .mission-vision-icon:hover,
    .why-choose-card:hover {
        transform: none;
    }

    /* Disable parallax on mobile */
    .about-hero-parallax {
        transform: none !important;
    }
}