/* ===== 全站 Apple 动效系统 ===== */

:root {
    --apple-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
    --apple-spring: cubic-bezier(0.16, 1, 0.3, 1);
    --apple-black: #1d1d1f;
    --apple-gray: #86868b;
    --apple-bg: #fbfbfd;
    --apple-white: #ffffff;
    --apple-blue: #0071e3;
    --apple-border: rgba(0, 0, 0, 0.08);
    --motion-duration: 0.7s;
    --motion-stagger: 0.06s;
}

/* 页面进入 */
body {
    opacity: 1;
    transition: opacity 0.5s var(--apple-ease);
}

body.page-enter {
    opacity: 0;
}

body.page-ready {
    opacity: 1;
}

/* 滚动显现 */
.reveal,
.reveal-fade,
.reveal-scale {
    opacity: 0;
    will-change: opacity, transform;
}

.reveal {
    transform: translateY(28px);
}

.reveal-scale {
    transform: scale(0.96) translateY(12px);
}

.reveal-fade {
    transform: none;
}

.reveal.is-visible,
.reveal-fade.is-visible,
.reveal-scale.is-visible {
    animation-duration: var(--motion-duration);
    animation-timing-function: var(--apple-spring);
    animation-fill-mode: forwards;
}

.reveal.is-visible {
    animation-name: motionRise;
}

.reveal-fade.is-visible {
    animation-name: motionFade;
}

.reveal-scale.is-visible {
    animation-name: motionScaleIn;
}

.reveal-stagger > * {
    opacity: 0;
    transform: translateY(20px) scale(0.98);
}

.reveal-stagger.is-visible > * {
    animation: motionRise var(--motion-duration) var(--apple-spring) forwards;
}

.reveal-stagger.is-visible > *:nth-child(1) { animation-delay: calc(var(--motion-stagger) * 1); }
.reveal-stagger.is-visible > *:nth-child(2) { animation-delay: calc(var(--motion-stagger) * 2); }
.reveal-stagger.is-visible > *:nth-child(3) { animation-delay: calc(var(--motion-stagger) * 3); }
.reveal-stagger.is-visible > *:nth-child(4) { animation-delay: calc(var(--motion-stagger) * 4); }
.reveal-stagger.is-visible > *:nth-child(5) { animation-delay: calc(var(--motion-stagger) * 5); }
.reveal-stagger.is-visible > *:nth-child(6) { animation-delay: calc(var(--motion-stagger) * 6); }
.reveal-stagger.is-visible > *:nth-child(7) { animation-delay: calc(var(--motion-stagger) * 7); }
.reveal-stagger.is-visible > *:nth-child(8) { animation-delay: calc(var(--motion-stagger) * 8); }
.reveal-stagger.is-visible > *:nth-child(n+9) { animation-delay: calc(var(--motion-stagger) * 9); }

@keyframes motionRise {
    from {
        opacity: 0;
        transform: translateY(28px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes motionFade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes motionScaleIn {
    from {
        opacity: 0;
        transform: scale(0.94) translateY(16px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes motionFloat {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(6px); }
}

@keyframes motionModalIn {
    from {
        opacity: 0;
        transform: scale(0.92);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes motionBackdropIn {
    from {
        opacity: 0;
        backdrop-filter: blur(0);
        -webkit-backdrop-filter: blur(0);
    }
    to {
        opacity: 1;
        backdrop-filter: saturate(180%) blur(30px);
        -webkit-backdrop-filter: saturate(180%) blur(30px);
    }
}

.nav-buttons .btn {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

/* 全站导航增强 */
.navbar {
    transition: background 0.45s var(--apple-ease),
                border-color 0.45s var(--apple-ease),
                box-shadow 0.45s var(--apple-ease);
}

.navbar.scrolled {
    background: rgba(251, 251, 253, 0.88) !important;
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom-color: var(--apple-border) !important;
    box-shadow: none !important;
}

.nav-links a {
    transition: opacity 0.25s var(--apple-ease), color 0.25s var(--apple-ease);
}

.btn {
    transition: transform 0.35s var(--apple-spring),
                background 0.25s var(--apple-ease),
                box-shadow 0.35s var(--apple-spring);
}

.btn:active {
    transform: scale(0.96);
}

/* 通用模态框动效 */
.modal,
.photo-fullscreen,
.work-modal,
.mascot-fullscreen {
    transition: opacity 0.35s var(--apple-ease);
}

.modal.open,
.modal[style*="flex"] {
    animation: motionFade 0.35s var(--apple-ease);
}

.modal-content,
.photo-fullscreen-image,
.work-modal__dialog {
    transition: opacity 0.25s var(--apple-ease),
                transform 0.4s var(--apple-spring);
}

.modal.open .modal-content,
.modal[style*="flex"] .modal-content {
    animation: motionModalIn 0.45s var(--apple-spring);
}

.work-modal.open .work-modal__dialog {
    animation: motionModalIn 0.5s var(--apple-spring);
}

.work-modal.open .work-modal__backdrop {
    animation: motionFade 0.35s var(--apple-ease);
}

/* 吉祥物面板 */
.mascot-toggle-btn,
.mascot-content,
.mascot-image,
.mascot-nav-btn {
    transition: transform 0.45s var(--apple-spring),
                opacity 0.35s var(--apple-ease),
                width 0.55s var(--apple-spring);
}

.mascot-panel.expanded .mascot-toggle-btn {
    transform: translateX(-2px);
}

/* ===== 子页面卡片动效（布局见 site.css）===== */
.photo-item {
    opacity: 0;
    transform: scale(0.96) translateY(16px);
    transition: transform 0.5s var(--apple-spring), box-shadow 0.5s var(--apple-spring);
}

.photo-item.is-visible {
    animation: motionScaleIn 0.65s var(--apple-spring) forwards;
}

.photo-item:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.12);
}

.photo-item img {
    transition: transform 0.8s var(--apple-spring);
}

.photo-item:hover img {
    transform: scale(1.04);
}

.portfolio-card {
    opacity: 0;
    transform: translateY(24px) scale(0.98);
    transition: transform 0.55s var(--apple-spring), opacity 0.55s var(--apple-spring), box-shadow 0.45s var(--apple-spring);
}

.portfolio-card.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.portfolio-card:hover {
    transform: translateY(-6px) scale(1.01);
}

.achievement-card {
    opacity: 0;
    transform: translateY(24px);
    transition: transform 0.55s var(--apple-spring), box-shadow 0.45s var(--apple-spring);
}

.achievement-card.is-visible {
    animation: motionRise 0.75s var(--apple-spring) forwards;
}

.achievement-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.08) !important;
}

.gallery-image-item {
    transition: transform 0.45s var(--apple-spring), box-shadow 0.45s var(--apple-spring);
}

.gallery-image-item:hover {
    transform: scale(1.03);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.1) !important;
}

/* 全屏预览 */
.photo-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.45s var(--apple-ease),
                background 0.45s var(--apple-ease),
                backdrop-filter 0.45s var(--apple-ease);
}

.photo-fullscreen.active {
    opacity: 1;
    pointer-events: all;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: saturate(180%) blur(30px);
    -webkit-backdrop-filter: saturate(180%) blur(30px);
}

.photo-fullscreen-image {
    max-width: 90vw;
    max-height: 88vh;
    object-fit: contain;
    border-radius: 14px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.4);
    will-change: left, top, width, height, transform, opacity;
}

.photo-fullscreen-close,
.photo-nav {
    position: absolute;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(12px);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.88);
    transition: opacity 0.35s var(--apple-spring),
                transform 0.35s var(--apple-spring),
                background 0.25s var(--apple-ease);
}

.photo-fullscreen.active .photo-fullscreen-close,
.photo-fullscreen.active .photo-nav,
.photo-fullscreen.active .photo-counter {
    opacity: 1;
    transform: scale(1);
}

.photo-fullscreen-close {
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    font-size: 24px;
    font-weight: 300;
}

.photo-fullscreen-close:hover,
.photo-nav:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.28);
    transform: scale(1.06);
}

.photo-nav {
    top: 50%;
    transform: translateY(-50%) scale(0.88);
    width: 44px;
    height: 44px;
    font-size: 24px;
}

.photo-fullscreen.active .photo-nav {
    transform: translateY(-50%) scale(1);
}

.photo-nav:hover:not(:disabled) {
    transform: translateY(-50%) scale(1.06);
}

.photo-nav.prev { left: 20px; }
.photo-nav.next { right: 20px; }
.photo-nav:disabled { opacity: 0.25; cursor: not-allowed; }

.photo-counter {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    padding: 8px 18px;
    border-radius: 980px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.92);
    background: rgba(29, 29, 31, 0.55);
    backdrop-filter: blur(12px);
    opacity: 0;
    transition: opacity 0.4s var(--apple-ease) 0.15s;
}

.work-modal.open {
    animation: motionFade 0.35s var(--apple-ease);
}

/* 减少动效偏好 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .reveal,
    .reveal-fade,
    .reveal-scale,
    .reveal-stagger > *,
    .photo-item,
    .portfolio-card,
    .achievement-card,
    .gallery-item {
        opacity: 1 !important;
        transform: none !important;
    }
}

@media (max-width: 768px) {
    .photo-item:hover {
        transform: none;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    }

    .photo-item:hover img {
        transform: none;
    }

    .portfolio-card:hover {
        transform: none;
    }

    .achievement-card:hover {
        transform: none;
    }
}