/* 关于我们页动画 */

:root {
    --about-anim-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --about-anim-duration: 0.75s;
}

.about-anim-section [class$="-title"],
.about-anim-section .about-team-desc,
.about-anim-section .about-intro-text {
    opacity: 0;
    transform: translateY(calc(32px * var(--layout-scale)));
    transition:
        opacity var(--about-anim-duration) var(--about-anim-ease),
        transform var(--about-anim-duration) var(--about-anim-ease);
}

.about-anim-section.about-anim-in [class$="-title"],
.about-anim-section.about-anim-in .about-team-desc,
.about-anim-section.about-anim-in .about-intro-text {
    opacity: 1;
    transform: translateY(0);
}

.about-anim-section.about-anim-in .about-team-desc,
.about-anim-section.about-anim-in .about-intro-text {
    transition-delay: 0.12s;
}

/* Hero 首屏 */
.about-hero-title,
.about-hero-subtitle,
.about-hero-desc {
    opacity: 0;
    transform: translateY(calc(-20px * var(--layout-scale)));
    transition:
        opacity 0.85s var(--about-anim-ease),
        transform 0.85s var(--about-anim-ease);
}

.about-hero.is-loaded .about-hero-title {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.1s;
}

.about-hero.is-loaded .about-hero-subtitle {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.22s;
}

.about-hero.is-loaded .about-hero-desc {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.34s;
}

.about-hero-subtitle em {
    background-size: 200% auto;
}

.about-hero.is-loaded .about-hero-subtitle em {
    animation: about-gradient-flow 3s linear 0.6s infinite;
}

@keyframes about-gradient-flow {
    0% { background-position: 0% center; }
    100% { background-position: 200% center; }
}

.about-hero-label {
    opacity: 0;
    transform: translateY(calc(24px * var(--layout-scale)));
    transition:
        opacity 0.8s var(--about-anim-ease),
        transform 0.8s var(--about-anim-ease);
}

.about-hero.is-loaded .about-hero-label {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.5s;
}

/* 发展历程 */
.about-history-left,
.about-history-center-card,
.about-history-right {
    opacity: 0;
    transition:
        opacity 0.7s var(--about-anim-ease),
        transform 0.7s var(--about-anim-ease),
        box-shadow 0.35s ease;
}

.about-history-left {
    transform: translateX(calc(-36px * var(--layout-scale)));
}

.about-history-center-card {
    transform: translateY(calc(28px * var(--layout-scale)));
}

.about-history-right {
    transform: translateX(calc(36px * var(--layout-scale)));
}

.about-history.about-anim-in .about-history-left {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.15s;
}

.about-history.about-anim-in .about-history-center-card:nth-child(1) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.28s;
}

.about-history.about-anim-in .about-history-center-card:nth-child(2) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.4s;
}

.about-history.about-anim-in .about-history-right {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.52s;
}

.about-history-card:hover {
    box-shadow: 0 calc(12px * var(--layout-scale)) calc(32px * var(--layout-scale)) rgba(22, 84, 255, 0.1);
}

.about-history-card-pic img {
    transition: transform 0.5s var(--about-anim-ease);
}

.about-history-card:hover .about-history-card-pic img {
    transform: scale(1.04);
}

.about-history-center-card .about-history-card-icon {
    transition: transform 0.35s var(--about-anim-ease);
}

.about-history-center-card:hover .about-history-card-icon {
    transform: scale(1.1) rotate(-6deg);
}

/* 专业团队 */
.about-team-slider {
    opacity: 0;
    transform: translateY(calc(28px * var(--layout-scale)));
    transition:
        opacity 0.8s var(--about-anim-ease),
        transform 0.8s var(--about-anim-ease);
}

.about-team.about-anim-in .about-team-slider {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.25s;
}

/* 企业愿景 */
.about-vision-text {
    opacity: 0;
    transform: translateX(calc(-40px * var(--layout-scale)));
    transition:
        opacity 0.9s var(--about-anim-ease),
        transform 0.9s var(--about-anim-ease);
}

.about-vision.about-anim-in .about-vision-text {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.15s;
}

.about-vision-title {
    background-size: 200% auto;
}

.about-vision.about-anim-in .about-vision-title {
    animation: about-gradient-flow 4s linear 0.5s infinite;
}

.about-vision-desc {
    opacity: 0;
    transition: opacity 0.7s var(--about-anim-ease) 0.35s;
}

.about-vision.about-anim-in .about-vision-desc {
    opacity: 1;
}

/* 公司地址 */
.about-address-map {
    opacity: 0;
    transform: translateY(calc(24px * var(--layout-scale))) scale(0.98);
    clip-path: inset(0 0 100% 0);
    transition:
        opacity 0.85s var(--about-anim-ease),
        transform 0.85s var(--about-anim-ease),
        clip-path 1s var(--about-anim-ease);
}

.about-address.about-anim-in .about-address-map {
    opacity: 1;
    transform: translateY(0) scale(1);
    clip-path: inset(0 0 0 0);
    transition-delay: 0.15s;
}

.about-address-map img {
    transition: transform 0.5s var(--about-anim-ease);
}

.about-address-map:hover img {
    transform: scale(1.02);
}

/* 侧边栏 */
.about-page ~ .side-float {
    opacity: 0;
    transform: translateX(calc(20px * var(--layout-scale)));
    transition:
        opacity 0.6s var(--about-anim-ease) 0.8s,
        transform 0.6s var(--about-anim-ease) 0.8s;
}

body.about-anim-ready .side-float {
    opacity: 1;
    transform: translateX(0);
}

body.about-anim-ready .side-float-item {
    transition: transform 0.25s ease;
}

body.about-anim-ready .side-float-item:hover {
    transform: translateX(calc(-3px * var(--layout-scale)));
}

@media (prefers-reduced-motion: reduce) {
    .about-hero-title,
    .about-hero-subtitle,
    .about-hero-desc,
    .about-hero-label,
    .about-anim-section [class$="-title"],
    .about-anim-section .about-team-desc,
    .about-anim-section .about-intro-text,
    .about-history-left,
    .about-history-center-card,
    .about-history-right,
    .about-team-slider,
    .about-vision-text,
    .about-vision-desc,
    .about-address-map,
    .side-float {
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
        animation: none !important;
        transition: none !important;
    }
}