/* =====================================================
   橙子宇宙 动画效果集合 V3.0
   ===================================================== */

/* ===== 基础动画变量 ===== */
:root {
    /* 缓动函数 */
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-elastic: cubic-bezier(0.16, 1, 0.3, 1);   /* 缓出弹性——入场首选 */
}

/* ===== 页面入场编排 ===== */
/* 
   按叙事顺序依次入场：
   t=0ms   背景
   t=100ms 导航栏
   t=300ms Hero 标题
   t=450ms 副标题
   t=600ms 标签/CTA
   t=800ms 滚动指示器
*/

@keyframes entrance-fade-up {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes entrance-fade-up-sm {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes entrance-slide-down {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 入场编排类——统一时间函数 */
.entrance {
    opacity: 0;
    animation-fill-mode: forwards;
    animation-timing-function: var(--ease-elastic);
}

.entrance--navbar {
    animation: entrance-slide-down 0.6s var(--ease-elastic) 0.1s forwards;
    opacity: 0;
}

.entrance--title {
    animation: entrance-fade-up 0.8s var(--ease-elastic) 0.3s forwards;
    opacity: 0;
}

.entrance--subtitle {
    animation: entrance-fade-up-sm 0.7s var(--ease-elastic) 0.45s forwards;
    opacity: 0;
}

.entrance--tags {
    animation: entrance-fade-up-sm 0.7s var(--ease-elastic) 0.6s forwards;
    opacity: 0;
}

.entrance--indicator {
    animation: entrance-fade-up-sm 0.5s var(--ease-elastic) 0.8s forwards;
    opacity: 0;
}

/* ===== ANIM-02: 橙子呼吸动画 ===== */
.orange-breathing {
    animation: orange-breath 3s ease-in-out infinite;
}

@keyframes orange-breath {
    0%, 100% {
        transform: scale(1) rotate(0deg);
    }
    50% {
        transform: scale(1.05) rotate(2deg);
    }
}

/* 简化版呼吸动画（移动端用） */
.orange-breathing-simple {
    animation: orange-breath-simple 3s ease-in-out infinite;
}

@keyframes orange-breath-simple {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.03);
        opacity: 0.95;
    }
}

/* ===== ANIM-03: 果肉弹跳动画 ===== */
.bounce-hover {
    transition: transform 200ms var(--ease-bounce), box-shadow 200ms var(--ease-smooth);
}

.bounce-hover:hover {
    transform: translateY(-4px);
}

/* ===== ANIM-01: 果汁飞溅效果 ===== */
.juice-splash-container {
    position: relative;
    overflow: visible;
}

.juice-splash {
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--orange-juice);
    border-radius: 50%;
    pointer-events: none;
    animation: splash 400ms ease-out forwards;
}

@keyframes splash {
    0% {
        transform: scale(0) translate(0, 0);
        opacity: 1;
    }
    100% {
        transform: scale(1) translate(var(--splash-x, 30px), var(--splash-y, -30px));
        opacity: 0;
    }
}

/* 果汁飞溅变体 */
.juice-splash.drop-1 { --splash-x: 40px; --splash-y: -35px; }
.juice-splash.drop-2 { --splash-x: -35px; --splash-y: -40px; }
.juice-splash.drop-3 { --splash-x: 25px; --splash-y: -50px; }
.juice-splash.drop-4 { --splash-x: -45px; --splash-y: -25px; }
.juice-splash.drop-5 { --splash-x: 50px; --splash-y: -20px; }
.juice-splash.drop-6 { --splash-x: -25px; --splash-y: -55px; }

/* ===== ANIM-04: 橙叶飘落动画 ===== */
.leaf-falling {
    position: fixed;
    pointer-events: none;
    z-index: var(--z-particles);
    animation: leaf-fall 6s linear forwards;
}

@keyframes leaf-fall {
    0% {
        transform: translateY(-50px) rotate(0deg) translateX(0);
        opacity: 0;
    }
    10% {
        opacity: 0.8;
    }
    100% {
        transform: translateY(calc(100vh + 50px)) rotate(720deg) translateX(var(--drift, 100px));
        opacity: 0;
    }
}

/* 叶子飘落变体 */
.leaf-falling.slow { animation-duration: 8s; }
.leaf-falling.fast { animation-duration: 4s; }
.leaf-falling.drift-left { --drift: -80px; }
.leaf-falling.drift-right { --drift: 120px; }

/* ===== ANIM-05: 阳光光晕效果 ===== */
.sunshine-glow {
    position: relative;
}

.sunshine-glow::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, var(--glow-effect) 0%, transparent 70%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: all 250ms ease-in-out;
    pointer-events: none;
    z-index: -1;
}

.sunshine-glow:hover::after {
    width: 200%;
    height: 200%;
}

/* ===== ANIM-06: 橙子迎宾动画 ===== */
.orange-welcome {
    animation: orange-wave 1.5s ease-out;
}

@keyframes orange-wave {
    0% {
        transform: translateY(30px) scale(0.8) rotate(-10deg);
        opacity: 0;
    }
    50% {
        transform: translateY(-10px) scale(1.1) rotate(5deg);
    }
    70% {
        transform: translateY(5px) scale(0.95) rotate(-3deg);
    }
    100% {
        transform: translateY(0) scale(1) rotate(0deg);
        opacity: 1;
    }
}

/* 挥手动画 */
.waving {
    animation: wave 1s ease-in-out infinite;
    transform-origin: bottom center;
}

@keyframes wave {
    0%, 100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(20deg);
    }
    75% {
        transform: rotate(-15deg);
    }
}

/* ===== ANIM-07: 打字机效果 ===== */
.typewriter {
    overflow: hidden;
    border-right: 3px solid var(--orange-peel);
    white-space: nowrap;
    animation: 
        typing 3s steps(40, end),
        blink-caret 0.75s step-end infinite;
}

@keyframes typing {
    from { width: 0; }
    to { width: 100%; }
}

@keyframes blink-caret {
    from, to { border-color: transparent; }
    50% { border-color: var(--orange-peel); }
}

/* ===== ANIM-08: 果树生长动画 ===== */
.tree-grow {
    animation: grow-up 800ms ease-out forwards;
    transform-origin: bottom center;
}

@keyframes grow-up {
    0% {
        transform: scaleY(0);
        opacity: 0;
    }
    60% {
        transform: scaleY(1.1);
    }
    100% {
        transform: scaleY(1);
        opacity: 1;
    }
}

/* 果实出现动画 */
.fruit-appear {
    animation: pop-in 500ms var(--ease-bounce) forwards;
}

@keyframes pop-in {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* ===== ANIM-09: 品牌化加载动画 ===== */
.loading-spinner {
    width: 48px;
    height: 48px;
    position: relative;
}

.loading-spinner::before {
    content: '🍊';
    font-size: 32px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: orange-spin 1s linear infinite;
}

/* 橙子切片旋转 */
.loading-slice {
    width: 48px;
    height: 48px;
    border: 4px solid var(--orange-membrane);
    border-top-color: var(--orange-peel);
    border-radius: 50%;
    animation: orange-spin 1s linear infinite;
}

@keyframes orange-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ===== 页面转场动画 ===== */
.page-transition-enter {
    animation: page-enter 500ms var(--ease-out) forwards;
}

@keyframes page-enter {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.page-transition-leave {
    animation: page-leave 300ms var(--ease-in) forwards;
}

@keyframes page-leave {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-20px);
    }
}

/* 橙子滚动转场 */
.orange-roll-transition {
    position: fixed;
    top: 50%;
    left: -100px;
    font-size: 64px;
    z-index: var(--z-transition);
    animation: orange-roll 600ms ease-in-out forwards;
}

@keyframes orange-roll {
    0% {
        left: -100px;
        transform: translateY(-50%) rotate(0deg);
    }
    50% {
        left: 50%;
        transform: translateY(-50%) rotate(360deg);
    }
    100% {
        left: calc(100% + 100px);
        transform: translateY(-50%) rotate(720deg);
    }
}

/* ===== 滚动触发动画 ===== */
.scroll-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 700ms var(--ease-elastic), transform 700ms var(--ease-elastic);
}

.scroll-reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* 从左侧滑入 */
.scroll-reveal.from-left {
    transform: translateX(-30px);
}

.scroll-reveal.from-left.visible {
    transform: translateX(0);
}

/* 从右侧滑入 */
.scroll-reveal.from-right {
    transform: translateX(30px);
}

.scroll-reveal.from-right.visible {
    transform: translateX(0);
}

/* 缩放入场 */
.scroll-reveal.scale {
    transform: scale(0.9);
}

.scroll-reveal.scale.visible {
    transform: scale(1);
}

/* 依次入场延迟 */
.scroll-reveal.delay-1 { transition-delay: 100ms; }
.scroll-reveal.delay-2 { transition-delay: 200ms; }
.scroll-reveal.delay-3 { transition-delay: 300ms; }
.scroll-reveal.delay-4 { transition-delay: 400ms; }

/* ===== 悬停动画 ===== */

/* 果汁涟漪 */
.ripple-hover {
    position: relative;
    overflow: hidden;
}

.ripple-hover::before {
    content: '';
    position: absolute;
    top: var(--ripple-y, 50%);
    left: var(--ripple-x, 50%);
    width: 0;
    height: 0;
    background: radial-gradient(circle, var(--glow-effect) 0%, transparent 70%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 400ms ease-out, height 400ms ease-out;
    pointer-events: none;
}

.ripple-hover:hover::before {
    width: 300px;
    height: 300px;
}

/* 链接箭头动画 */
.arrow-hover {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.arrow-hover .arrow {
    transition: transform 200ms var(--ease-out);
}

.arrow-hover:hover .arrow {
    transform: translateX(4px);
}

/* ===== 3D 橙子效果 ===== */
.orange-3d {
    perspective: 1000px;
    transform-style: preserve-3d;
}

.orange-3d-inner {
    transition: transform 500ms var(--ease-out);
    transform-style: preserve-3d;
}

.orange-3d:hover .orange-3d-inner {
    transform: rotateY(15deg) rotateX(-5deg);
}

/* 3D 橙子阴影 */
.orange-3d-shadow {
    position: absolute;
    bottom: -20px;
    left: 50%;
    width: 80%;
    height: 20px;
    background: radial-gradient(ellipse, rgba(0, 0, 0, 0.2) 0%, transparent 70%);
    transform: translateX(-50%);
    transition: all 500ms var(--ease-out);
}

.orange-3d:hover .orange-3d-shadow {
    width: 90%;
    opacity: 0.8;
}

/* ===== 阳光粒子效果 ===== */
.sunshine-particle {
    position: fixed;
    width: 4px;
    height: 4px;
    background: var(--firefly);
    border-radius: 50%;
    pointer-events: none;
    z-index: var(--z-particles);
    animation: float-particle 8s linear infinite;
    box-shadow: 0 0 10px var(--firefly);
}

@keyframes float-particle {
    0% {
        transform: translateY(100vh) translateX(0) scale(0);
        opacity: 0;
    }
    10% {
        opacity: 0.8;
        transform: translateY(90vh) translateX(10px) scale(1);
    }
    90% {
        opacity: 0.6;
        transform: translateY(10vh) translateX(-10px) scale(0.8);
    }
    100% {
        transform: translateY(-10vh) translateX(0) scale(0);
        opacity: 0;
    }
}

/* ===== 脉冲动画 ===== */
.pulse {
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.9;
    }
}

/* 心跳脉冲 */
.heartbeat {
    animation: heartbeat 1.5s ease-in-out infinite;
}

@keyframes heartbeat {
    0%, 100% {
        transform: scale(1);
    }
    14% {
        transform: scale(1.1);
    }
    28% {
        transform: scale(1);
    }
    42% {
        transform: scale(1.1);
    }
    70% {
        transform: scale(1);
    }
}

/* ===== 闪烁动画 ===== */
.shimmer {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.4) 50%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* ===== 抖动动画（错误提示） ===== */
.shake {
    animation: shake 400ms ease-in-out;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-10px); }
    40% { transform: translateX(10px); }
    60% { transform: translateX(-10px); }
    80% { transform: translateX(10px); }
}

/* ===== 动画工具类 ===== */

/* 动画暂停 */
.animation-paused {
    animation-play-state: paused !important;
}

/* 动画延迟 */
.anim-delay-100 { animation-delay: 100ms; }
.anim-delay-200 { animation-delay: 200ms; }
.anim-delay-300 { animation-delay: 300ms; }
.anim-delay-500 { animation-delay: 500ms; }
.anim-delay-1000 { animation-delay: 1000ms; }

/* 无限循环 */
.anim-infinite { animation-iteration-count: infinite; }

/* ===== 媒体查询：动画降级 ===== */

/* 移动端简化动画 */
@media (max-width: 767px) {
    .leaf-falling,
    .sunshine-particle {
        display: none !important;
    }
    
    .orange-3d:hover .orange-3d-inner {
        transform: none;
    }
    
    .orange-breathing {
        animation-name: orange-breath-simple;
    }
    
    .page-transition-enter,
    .page-transition-leave {
        animation-duration: 300ms;
    }
}

/* 尊重用户动画偏好 */
@media (prefers-reduced-motion: reduce) {
    .orange-breathing,
    .orange-breathing-simple,
    .juice-splash,
    .leaf-falling,
    .sunshine-glow::after,
    .orange-welcome,
    .waving,
    .typewriter,
    .tree-grow,
    .fruit-appear,
    .loading-spinner::before,
    .loading-slice,
    .page-transition-enter,
    .page-transition-leave,
    .orange-roll-transition,
    .scroll-reveal,
    .sunshine-particle,
    .pulse,
    .heartbeat,
    .shimmer,
    .shake {
        animation: none !important;
        transition: none !important;
    }
    
    .scroll-reveal {
        opacity: 1;
        transform: none;
    }
}