<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=1080, height=1920">
    <title>视频模板 - 明亮现代风格</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        html, body {
            width: 1080px;
            height: 1920px;
            overflow: hidden;
        }
        
        body {
            background: #0a0e27;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif;
            display: flex;
            position: relative;
            color: #ffffff;
            animation: subtle-glow 8s ease-in-out infinite;
        }
        
        @keyframes subtle-glow {
            0%, 100% { background: #0a0e27; }
            50% { background: #0d1230; }
        }
        
        /* 几何装饰背景 - 增强版 */
        .bg-decoration {
            position: absolute;
            width: 100%;
            height: 100%;
            overflow: hidden;
            z-index: 1;
        }
        
        .geometric-shape {
            position: absolute;
            opacity: 0.2;
            filter: blur(0px);
            transition: all 0.3s ease;
        }
        
        .shape-1 {
            width: 400px;
            height: 400px;
            background: #00d4ff;
            top: -100px;
            right: -100px;
            clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
            animation: rotate-glow 30s linear infinite;
            box-shadow: 
                0 0 60px rgba(0, 212, 255, 0.4),
                0 0 120px rgba(0, 212, 255, 0.2),
                inset 0 0 40px rgba(0, 212, 255, 0.3);
        }
        
        .shape-2 {
            width: 300px;
            height: 300px;
            background: #7c3aed;
            bottom: 200px;
            left: -80px;
            clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
            animation: rotate-pulse 25s ease-in-out infinite;
            box-shadow: 
                0 0 50px rgba(124, 58, 237, 0.5),
                0 0 100px rgba(124, 58, 237, 0.3),
                inset 0 0 30px rgba(124, 58, 237, 0.4);
        }
        
        .shape-3 {
            width: 200px;
            height: 200px;
            background: #f97316;
            top: 50%;
            right: 50px;
            clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
            animation: float-glow 20s ease-in-out infinite;
            box-shadow: 
                0 0 40px rgba(249, 115, 22, 0.6),
                0 0 80px rgba(249, 115, 22, 0.3),
                inset 0 0 25px rgba(249, 115, 22, 0.4);
        }
        
        /* 新增几何装饰元素 */
        .shape-4 {
            width: 150px;
            height: 150px;
            background: #10b981;
            top: 25%;
            left: 100px;
            clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
            animation: spin-glow 35s linear infinite;
            box-shadow: 
                0 0 45px rgba(16, 185, 129, 0.5),
                0 0 90px rgba(16, 185, 129, 0.25);
        }
        
        .shape-5 {
            width: 180px;
            height: 180px;
            background: #ec4899;
            bottom: 30%;
            right: 120px;
            clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
            animation: pulse-float 28s ease-in-out infinite;
            box-shadow: 
                0 0 55px rgba(236, 72, 153, 0.5),
                0 0 110px rgba(236, 72, 153, 0.25);
        }
        
        /* 粒子装饰 */
        .particle {
            position: absolute;
            width: 4px;
            height: 4px;
            background: #fff;
            border-radius: 50%;
            box-shadow: 
                0 0 10px rgba(255, 255, 255, 0.8),
                0 0 20px rgba(0, 212, 255, 0.5);
            animation: float-particle 15s ease-in-out infinite;
        }
        
        .particle-1 { 
            top: 20%; 
            left: 15%; 
            animation-delay: 0s;
            background: #00d4ff;
            box-shadow: 
                0 0 15px rgba(0, 212, 255, 0.9),
                0 0 30px rgba(0, 212, 255, 0.5);
        }
        .particle-2 { 
            top: 40%; 
            right: 20%; 
            animation-delay: 2s;
            background: #7c3aed;
            box-shadow: 
                0 0 15px rgba(124, 58, 237, 0.9),
                0 0 30px rgba(124, 58, 237, 0.5);
        }
        .particle-3 { 
            bottom: 30%; 
            left: 25%; 
            animation-delay: 4s;
            background: #f97316;
            box-shadow: 
                0 0 15px rgba(249, 115, 22, 0.9),
                0 0 30px rgba(249, 115, 22, 0.5);
        }
        .particle-4 { 
            top: 60%; 
            right: 15%; 
            animation-delay: 6s;
            background: #10b981;
            box-shadow: 
                0 0 15px rgba(16, 185, 129, 0.9),
                0 0 30px rgba(16, 185, 129, 0.5);
        }
        .particle-5 { 
            bottom: 45%; 
            left: 40%; 
            animation-delay: 8s;
            background: #ec4899;
            box-shadow: 
                0 0 15px rgba(236, 72, 153, 0.9),
                0 0 30px rgba(236, 72, 153, 0.5);
        }
        
        /* 装饰点簇 - 借鉴elegant.html */
        .dot-cluster {
            position: absolute;
            display: flex;
            gap: 12px;
            z-index: 1;
        }
        
        .dot-cluster-1 {
            top: 10%;
            left: 8%;
            flex-direction: column;
        }
        
        .dot-cluster-2 {
            top: 15%;
            right: 10%;
            flex-direction: row;
        }
        
        .dot-cluster-3 {
            bottom: 12%;
            left: 12%;
            flex-direction: row;
        }
        
        .dot-cluster-4 {
            bottom: 18%;
            right: 8%;
            flex-direction: column;
        }
        
        .cluster-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #00d4ff;
            box-shadow: 0 0 12px rgba(0, 212, 255, 0.7);
            animation: cluster-dot-pulse 3s ease-in-out infinite;
        }
        
        .cluster-dot:nth-child(1) { animation-delay: 0s; }
        .cluster-dot:nth-child(2) { animation-delay: 0.5s; background: #7c3aed; box-shadow: 0 0 12px rgba(124, 58, 237, 0.7); }
        .cluster-dot:nth-child(3) { animation-delay: 1s; background: #f97316; box-shadow: 0 0 12px rgba(249, 115, 22, 0.7); }
        
        @keyframes cluster-dot-pulse {
            0%, 100% {
                transform: scale(1);
                opacity: 0.6;
                box-shadow: 0 0 12px currentColor;
            }
            50% {
                transform: scale(1.4);
                opacity: 1;
                box-shadow: 0 0 20px currentColor;
            }
        }
        
        /* 小型装饰圆环 */
        .ring-decoration {
            position: absolute;
            border-radius: 50%;
            border: 2px solid;
            z-index: 1;
            animation: ring-rotate 20s linear infinite;
        }
        
        .ring-1 {
            width: 80px;
            height: 80px;
            top: 8%;
            right: 15%;
            border-color: rgba(0, 212, 255, 0.4);
            box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
        }
        
        .ring-2 {
            width: 60px;
            height: 60px;
            bottom: 10%;
            left: 18%;
            border-color: rgba(124, 58, 237, 0.4);
            box-shadow: 0 0 20px rgba(124, 58, 237, 0.3);
            animation-delay: 5s;
        }
        
        .ring-3 {
            width: 100px;
            height: 100px;
            top: 70%;
            left: 5%;
            border-color: rgba(249, 115, 22, 0.3);
            box-shadow: 0 0 20px rgba(249, 115, 22, 0.3);
            animation-delay: 10s;
        }
        
        @keyframes ring-rotate {
            0% {
                transform: rotate(0deg) scale(1);
                opacity: 0.4;
            }
            50% {
                transform: rotate(180deg) scale(1.1);
                opacity: 0.7;
            }
            100% {
                transform: rotate(360deg) scale(1);
                opacity: 0.4;
            }
        }
        
        /* 装饰性小方块 */
        .square-deco {
            position: absolute;
            width: 10px;
            height: 10px;
            background: rgba(0, 212, 255, 0.5);
            z-index: 1;
            animation: square-float 5s ease-in-out infinite;
        }
        
        .square-1 {
            top: 12%;
            left: 5%;
            transform: rotate(45deg);
            box-shadow: 0 0 15px rgba(0, 212, 255, 0.6);
        }
        
        .square-2 {
            top: 65%;
            right: 8%;
            transform: rotate(25deg);
            background: rgba(124, 58, 237, 0.5);
            box-shadow: 0 0 15px rgba(124, 58, 237, 0.6);
            animation-delay: 1.5s;
        }
        
        .square-3 {
            bottom: 8%;
            right: 12%;
            transform: rotate(60deg);
            background: rgba(249, 115, 22, 0.5);
            box-shadow: 0 0 15px rgba(249, 115, 22, 0.6);
            animation-delay: 3s;
        }
        
        @keyframes square-float {
            0%, 100% {
                transform: translateY(0) rotate(45deg);
                opacity: 0.5;
            }
            50% {
                transform: translateY(-15px) rotate(225deg);
                opacity: 0.8;
            }
        }
        
        /* 装饰性三角形 */
        .triangle-deco {
            position: absolute;
            width: 0;
            height: 0;
            border-style: solid;
            z-index: 1;
            filter: drop-shadow(0 0 10px rgba(0, 212, 255, 0.6));
            animation: triangle-spin 15s linear infinite;
        }
        
        .triangle-1 {
            top: 18%;
            left: 12%;
            border-width: 0 8px 14px 8px;
            border-color: transparent transparent rgba(0, 212, 255, 0.5) transparent;
        }
        
        .triangle-2 {
            bottom: 25%;
            right: 10%;
            border-width: 14px 8px 0 8px;
            border-color: rgba(236, 72, 153, 0.5) transparent transparent transparent;
            filter: drop-shadow(0 0 10px rgba(236, 72, 153, 0.6));
            animation-delay: 7s;
        }
        
        @keyframes triangle-spin {
            0% {
                transform: rotate(0deg);
                opacity: 0.5;
            }
            50% {
                transform: rotate(180deg);
                opacity: 0.8;
            }
            100% {
                transform: rotate(360deg);
                opacity: 0.5;
            }
        }
        
        /* 装饰性波浪线 - 借鉴elegant.html */
        .wave-line {
            position: absolute;
            height: 2px;
            border-radius: 10px;
            z-index: 1;
            opacity: 0.4;
            animation: wave-flow 6s ease-in-out infinite;
        }
        
        .wave-1 {
            width: 300px;
            top: 22%;
            left: 5%;
            background: rgba(0, 212, 255, 0.5);
            box-shadow: 0 0 15px rgba(0, 212, 255, 0.4);
            transform: rotate(-5deg);
        }
        
        .wave-2 {
            width: 250px;
            top: 68%;
            right: 5%;
            background: rgba(124, 58, 237, 0.5);
            box-shadow: 0 0 15px rgba(124, 58, 237, 0.4);
            transform: rotate(8deg);
            animation-delay: 2s;
        }
        
        .wave-3 {
            width: 200px;
            bottom: 15%;
            left: 8%;
            background: rgba(249, 115, 22, 0.4);
            box-shadow: 0 0 15px rgba(249, 115, 22, 0.3);
            transform: rotate(-3deg);
            animation-delay: 4s;
        }
        
        @keyframes wave-flow {
            0%, 100% {
                opacity: 0.3;
                transform: translateX(0) rotate(var(--rotate, 0deg));
            }
            50% {
                opacity: 0.6;
                transform: translateX(20px) rotate(var(--rotate, 0deg));
            }
        }
        
        /* 星形装饰 */
        .star-deco {
            position: absolute;
            width: 20px;
            height: 20px;
            z-index: 1;
            animation: star-twinkle 4s ease-in-out infinite;
        }
        
        .star-deco::before,
        .star-deco::after {
            content: '';
            position: absolute;
            background: rgba(255, 255, 255, 0.6);
            box-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
        }
        
        .star-deco::before {
            width: 2px;
            height: 100%;
            left: 50%;
            transform: translateX(-50%);
        }
        
        .star-deco::after {
            width: 100%;
            height: 2px;
            top: 50%;
            transform: translateY(-50%);
        }
        
        .star-1 {
            top: 14%;
            right: 8%;
            filter: drop-shadow(0 0 10px rgba(0, 212, 255, 0.8));
        }
        
        .star-2 {
            top: 72%;
            left: 7%;
            filter: drop-shadow(0 0 10px rgba(236, 72, 153, 0.8));
            animation-delay: 2s;
        }
        
        .star-3 {
            bottom: 20%;
            right: 15%;
            width: 15px;
            height: 15px;
            filter: drop-shadow(0 0 10px rgba(249, 115, 22, 0.8));
            animation-delay: 3s;
        }
        
        @keyframes star-twinkle {
            0%, 100% {
                transform: scale(1) rotate(0deg);
                opacity: 0.6;
            }
            50% {
                transform: scale(1.3) rotate(90deg);
                opacity: 1;
            }
        }
        
        /* 小型发光点 */
        .glow-dot {
            position: absolute;
            width: 5px;
            height: 5px;
            border-radius: 50%;
            z-index: 1;
            animation: glow-pulse 3s ease-in-out infinite;
        }
        
        .glow-1 {
            top: 25%;
            left: 4%;
            background: rgba(0, 212, 255, 0.7);
            box-shadow: 0 0 15px rgba(0, 212, 255, 0.9);
        }
        
        .glow-2 {
            top: 35%;
            right: 6%;
            background: rgba(124, 58, 237, 0.7);
            box-shadow: 0 0 15px rgba(124, 58, 237, 0.9);
            animation-delay: 1s;
        }
        
        .glow-3 {
            top: 55%;
            left: 3%;
            background: rgba(16, 185, 129, 0.7);
            box-shadow: 0 0 15px rgba(16, 185, 129, 0.9);
            animation-delay: 2s;
        }
        
        .glow-4 {
            bottom: 28%;
            right: 4%;
            background: rgba(249, 115, 22, 0.7);
            box-shadow: 0 0 15px rgba(249, 115, 22, 0.9);
            animation-delay: 1.5s;
        }
        
        .glow-5 {
            bottom: 35%;
            left: 6%;
            background: rgba(236, 72, 153, 0.7);
            box-shadow: 0 0 15px rgba(236, 72, 153, 0.9);
            animation-delay: 2.5s;
        }
        
        @keyframes glow-pulse {
            0%, 100% {
                transform: scale(1);
                opacity: 0.5;
                box-shadow: 0 0 15px currentColor;
            }
            50% {
                transform: scale(1.6);
                opacity: 1;
                box-shadow: 0 0 25px currentColor;
            }
        }
        
        /* 十字装饰 */
        .cross-deco {
            position: absolute;
            width: 12px;
            height: 12px;
            z-index: 1;
            animation: cross-rotate 10s linear infinite;
        }
        
        .cross-deco::before,
        .cross-deco::after {
            content: '';
            position: absolute;
            background: rgba(0, 212, 255, 0.5);
            box-shadow: 0 0 10px rgba(0, 212, 255, 0.6);
        }
        
        .cross-deco::before {
            width: 2px;
            height: 100%;
            left: 50%;
            transform: translateX(-50%);
        }
        
        .cross-deco::after {
            width: 100%;
            height: 2px;
            top: 50%;
            transform: translateY(-50%);
        }
        
        .cross-1 {
            top: 30%;
            left: 10%;
        }
        
        .cross-2 {
            top: 50%;
            right: 12%;
        }
        
        .cross-2::before,
        .cross-2::after {
            background: rgba(124, 58, 237, 0.5);
            box-shadow: 0 0 10px rgba(124, 58, 237, 0.6);
        }
        
        @keyframes cross-rotate {
            0% {
                transform: rotate(0deg);
                opacity: 0.4;
            }
            50% {
                transform: rotate(180deg);
                opacity: 0.7;
            }
            100% {
                transform: rotate(360deg);
                opacity: 0.4;
            }
        }
        
        /* 弧形装饰线 */
        .arc-deco {
            position: absolute;
            border: 2px solid;
            border-radius: 50%;
            z-index: 1;
            animation: arc-breathe 5s ease-in-out infinite;
        }
        
        .arc-1 {
            width: 120px;
            height: 120px;
            top: 8%;
            left: 15%;
            border-color: transparent rgba(0, 212, 255, 0.4) transparent transparent;
            transform: rotate(45deg);
        }
        
        .arc-2 {
            width: 90px;
            height: 90px;
            bottom: 12%;
            right: 18%;
            border-color: transparent transparent rgba(124, 58, 237, 0.4) transparent;
            transform: rotate(-30deg);
            animation-delay: 1.5s;
        }
        
        .arc-3 {
            width: 70px;
            height: 70px;
            top: 75%;
            right: 5%;
            border-color: transparent transparent transparent rgba(249, 115, 22, 0.4);
            transform: rotate(120deg);
            animation-delay: 3s;
        }
        
        @keyframes arc-breathe {
            0%, 100% {
                opacity: 0.3;
                transform: rotate(var(--base-rotate, 0deg)) scale(1);
            }
            50% {
                opacity: 0.6;
                transform: rotate(var(--base-rotate, 0deg)) scale(1.15);
            }
        }
        
        /* 微小装饰点 */
        .micro-dot {
            position: absolute;
            width: 3px;
            height: 3px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.6);
            box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
            z-index: 1;
            animation: micro-twinkle 4s ease-in-out infinite;
        }
        
        .micro-1 { top: 17%; left: 20%; animation-delay: 0s; }
        .micro-2 { top: 28%; right: 25%; animation-delay: 0.5s; }
        .micro-3 { top: 45%; left: 8%; animation-delay: 1s; }
        .micro-4 { top: 62%; right: 20%; animation-delay: 1.5s; }
        .micro-5 { bottom: 22%; left: 15%; animation-delay: 2s; }
        .micro-6 { bottom: 32%; right: 8%; animation-delay: 2.5s; }
        .micro-7 { top: 38%; left: 12%; animation-delay: 3s; }
        .micro-8 { bottom: 40%; right: 18%; animation-delay: 3.5s; }
        
        @keyframes micro-twinkle {
            0%, 100% {
                opacity: 0.3;
                transform: scale(0.8);
            }
            50% {
                opacity: 1;
                transform: scale(1.5);
            }
        }
        
        /* 虚线装饰边框 */
        .dashed-border {
            position: absolute;
            border: 1px dashed;
            border-radius: 10px;
            z-index: 1;
            opacity: 0.3;
            animation: border-flow 8s linear infinite;
        }
        
        .dash-1 {
            width: 150px;
            height: 100px;
            top: 20%;
            right: 10%;
            border-color: rgba(0, 212, 255, 0.4);
            transform: rotate(15deg);
        }
        
        .dash-2 {
            width: 120px;
            height: 80px;
            bottom: 18%;
            left: 10%;
            border-color: rgba(236, 72, 153, 0.4);
            transform: rotate(-20deg);
            animation-delay: 4s;
        }
        
        @keyframes border-flow {
            0% {
                opacity: 0.2;
                border-color: currentColor;
            }
            50% {
                opacity: 0.5;
                border-color: currentColor;
            }
            100% {
                opacity: 0.2;
                border-color: currentColor;
            }
        }
        
        /* 菱形装饰 */
        .diamond-deco {
            position: absolute;
            width: 15px;
            height: 15px;
            background: rgba(0, 212, 255, 0.4);
            transform: rotate(45deg);
            z-index: 1;
            box-shadow: 0 0 15px rgba(0, 212, 255, 0.5);
            animation: diamond-spin 6s ease-in-out infinite;
        }
        
        .diamond-1 {
            top: 32%;
            left: 7%;
        }
        
        .diamond-2 {
            top: 58%;
            right: 9%;
            background: rgba(124, 58, 237, 0.4);
            box-shadow: 0 0 15px rgba(124, 58, 237, 0.5);
            animation-delay: 2s;
        }
        
        .diamond-3 {
            bottom: 24%;
            left: 20%;
            width: 12px;
            height: 12px;
            background: rgba(16, 185, 129, 0.4);
            box-shadow: 0 0 15px rgba(16, 185, 129, 0.5);
            animation-delay: 4s;
        }
        
        @keyframes diamond-spin {
            0%, 100% {
                transform: rotate(45deg) scale(1);
                opacity: 0.5;
            }
            50% {
                transform: rotate(225deg) scale(1.2);
                opacity: 0.8;
            }
        }
        
        @keyframes rotate-glow {
            0% { transform: rotate(0deg); box-shadow: 0 0 60px rgba(0, 212, 255, 0.4), 0 0 120px rgba(0, 212, 255, 0.2); }
            50% { transform: rotate(180deg); box-shadow: 0 0 80px rgba(0, 212, 255, 0.6), 0 0 160px rgba(0, 212, 255, 0.3); }
            100% { transform: rotate(360deg); box-shadow: 0 0 60px rgba(0, 212, 255, 0.4), 0 0 120px rgba(0, 212, 255, 0.2); }
        }
        
        @keyframes rotate-pulse {
            0% { transform: rotate(360deg) scale(1); opacity: 0.2; }
            50% { transform: rotate(180deg) scale(1.1); opacity: 0.3; }
            100% { transform: rotate(0deg) scale(1); opacity: 0.2; }
        }
        
        @keyframes float-glow {
            0%, 100% { 
                transform: translateY(0) rotate(0deg); 
                box-shadow: 0 0 40px rgba(249, 115, 22, 0.6), 0 0 80px rgba(249, 115, 22, 0.3);
            }
            50% { 
                transform: translateY(-30px) rotate(180deg); 
                box-shadow: 0 0 60px rgba(249, 115, 22, 0.8), 0 0 120px rgba(249, 115, 22, 0.4);
            }
        }
        
        @keyframes spin-glow {
            0% { transform: rotate(0deg); opacity: 0.2; }
            50% { transform: rotate(180deg); opacity: 0.35; }
            100% { transform: rotate(360deg); opacity: 0.2; }
        }
        
        @keyframes pulse-float {
            0%, 100% { 
                transform: translateY(0) scale(1);
                box-shadow: 0 0 55px rgba(236, 72, 153, 0.5), 0 0 110px rgba(236, 72, 153, 0.25);
            }
            50% { 
                transform: translateY(-20px) scale(1.08);
                box-shadow: 0 0 75px rgba(236, 72, 153, 0.7), 0 0 150px rgba(236, 72, 153, 0.35);
            }
        }
        
        @keyframes float-particle {
            0%, 100% { transform: translateY(0) translateX(0); opacity: 0.3; }
            25% { transform: translateY(-30px) translateX(20px); opacity: 0.8; }
            50% { transform: translateY(-50px) translateX(-10px); opacity: 1; }
            75% { transform: translateY(-30px) translateX(15px); opacity: 0.6; }
        }
        
        /* 边缘装饰线条 */
        .edge-line {
            position: absolute;
            background: rgba(0, 212, 255, 0.3);
            z-index: 1;
            box-shadow: 0 0 15px rgba(0, 212, 255, 0.5);
        }
        
        .edge-line-top {
            top: 50px;
            left: 50px;
            width: 200px;
            height: 2px;
            animation: line-slide-h 4s ease-in-out infinite;
        }
        
        .edge-line-bottom {
            bottom: 50px;
            right: 50px;
            width: 200px;
            height: 2px;
            animation: line-slide-h 4s ease-in-out infinite;
            animation-delay: 2s;
        }
        
        .edge-line-left {
            top: 50px;
            left: 50px;
            width: 2px;
            height: 200px;
            background: rgba(124, 58, 237, 0.3);
            animation: line-slide-v 4s ease-in-out infinite;
            animation-delay: 1s;
        }
        
        .edge-line-right {
            bottom: 50px;
            right: 50px;
            width: 2px;
            height: 200px;
            background: rgba(249, 115, 22, 0.3);
            animation: line-slide-v-alt 4s ease-in-out infinite;
            animation-delay: 3s;
        }
        
        @keyframes line-slide-h {
            0%, 100% {
                opacity: 0.5;
                width: 200px;
                box-shadow: 0 0 15px rgba(0, 212, 255, 0.5);
                background: rgba(0, 212, 255, 0.3);
            }
            50% {
                opacity: 1;
                width: 280px;
                box-shadow: 0 0 25px rgba(0, 212, 255, 0.8);
                background: rgba(0, 212, 255, 0.5);
            }
        }
        
        @keyframes line-slide-v {
            0%, 100% {
                opacity: 0.5;
                height: 200px;
                box-shadow: 0 0 15px rgba(124, 58, 237, 0.5);
                background: rgba(124, 58, 237, 0.3);
            }
            50% {
                opacity: 1;
                height: 280px;
                box-shadow: 0 0 25px rgba(124, 58, 237, 0.8);
                background: rgba(124, 58, 237, 0.5);
            }
        }
        
        @keyframes line-slide-v-alt {
            0%, 100% {
                opacity: 0.5;
                height: 200px;
                box-shadow: 0 0 15px rgba(249, 115, 22, 0.5);
                background: rgba(249, 115, 22, 0.3);
            }
            50% {
                opacity: 1;
                height: 280px;
                box-shadow: 0 0 25px rgba(249, 115, 22, 0.8);
                background: rgba(249, 115, 22, 0.5);
            }
        }
        
        /* 主容器 */
        .container {
            display: flex;
            flex-direction: column;
            width: 100%;
            height: 100%;
            padding: 80px 60px 60px;
            position: relative;
            z-index: 2;
        }
        
        /* 顶部标题区域 */
        .header {
            margin-bottom: 100px;
            text-align: center;
            position: relative;
        }
        
        .header::before,
        .header::after {
            content: '';
            position: absolute;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            opacity: 0.15;
            animation: header-orb 5s ease-in-out infinite;
        }
        
        .header::before {
            top: -30px;
            left: 10%;
            background: #7c3aed;
            box-shadow: 0 0 60px rgba(124, 58, 237, 0.5);
            animation-delay: 0s;
        }
        
        .header::after {
            top: -20px;
            right: 10%;
            background: #f97316;
            box-shadow: 0 0 60px rgba(249, 115, 22, 0.5);
            animation-delay: 2.5s;
        }
        
        @keyframes header-orb {
            0%, 100% {
                transform: translateY(0) scale(1);
                opacity: 0.15;
            }
            50% {
                transform: translateY(-20px) scale(1.2);
                opacity: 0.25;
            }
        }
        
        .title {
            font-size: 88px;
            font-weight: 900;
            line-height: 1.1;
            color: #ffffff;
            letter-spacing: -2px;
            margin-bottom: 0;
            position: relative;
            display: inline-block;
            text-shadow: 
                0 0 40px rgba(0, 212, 255, 0.5),
                0 0 80px rgba(0, 212, 255, 0.3),
                0 5px 15px rgba(0, 0, 0, 0.5);
            animation: title-glow 4s ease-in-out infinite;
        }
        
        @keyframes title-glow {
            0%, 100% { 
                text-shadow: 
                    0 0 40px rgba(0, 212, 255, 0.5),
                    0 0 80px rgba(0, 212, 255, 0.3),
                    0 5px 15px rgba(0, 0, 0, 0.5);
            }
            50% { 
                text-shadow: 
                    0 0 60px rgba(0, 212, 255, 0.7),
                    0 0 120px rgba(0, 212, 255, 0.4),
                    0 8px 20px rgba(0, 0, 0, 0.6);
            }
        }
        
        .title::before {
            content: '';
            position: absolute;
            top: -20px;
            left: -30px;
            width: 80px;
            height: 80px;
            background: #00d4ff;
            opacity: 0.25;
            z-index: -1;
            clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
            animation: shape-pulse 3s ease-in-out infinite;
            box-shadow: 0 0 30px rgba(0, 212, 255, 0.6);
        }
        
        @keyframes shape-pulse {
            0%, 100% { 
                transform: scale(1) rotate(0deg);
                opacity: 0.25;
                box-shadow: 0 0 30px rgba(0, 212, 255, 0.6);
            }
            50% { 
                transform: scale(1.15) rotate(45deg);
                opacity: 0.4;
                box-shadow: 0 0 50px rgba(0, 212, 255, 0.8);
            }
        }
        
        .title::after {
            content: '';
            position: absolute;
            bottom: -15px;
            left: 0;
            width: 100%;
            height: 4px;
            background: #00d4ff;
            box-shadow: 
                0 0 20px rgba(0, 212, 255, 0.8),
                0 0 40px rgba(0, 212, 255, 0.5);
            animation: line-glow 3s ease-in-out infinite;
        }
        
        @keyframes line-glow {
            0%, 100% { 
                box-shadow: 
                    0 0 20px rgba(0, 212, 255, 0.8),
                    0 0 40px rgba(0, 212, 255, 0.5);
            }
            50% { 
                box-shadow: 
                    0 0 35px rgba(0, 212, 255, 1),
                    0 0 70px rgba(0, 212, 255, 0.7);
            }
        }
        
        /* 图片区域 */
        .image-section {
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
        }
        
        /* 图片周围的光环装饰 */
        .image-section::before,
        .image-section::after {
            content: '';
            position: absolute;
            border-radius: 50%;
            pointer-events: none;
            animation: orbit-glow 8s linear infinite;
        }
        
        .image-section::before {
            width: 1000px;
            height: 1000px;
            border: 1px solid rgba(0, 212, 255, 0.15);
            box-shadow: 
                0 0 40px rgba(0, 212, 255, 0.1),
                inset 0 0 40px rgba(0, 212, 255, 0.05);
        }
        
        .image-section::after {
            width: 1100px;
            height: 1100px;
            border: 1px solid rgba(124, 58, 237, 0.1);
            box-shadow: 
                0 0 50px rgba(124, 58, 237, 0.08),
                inset 0 0 50px rgba(124, 58, 237, 0.04);
            animation-delay: 4s;
        }
        
        @keyframes orbit-glow {
            0%, 100% {
                opacity: 0.3;
                transform: rotate(0deg) scale(1);
            }
            50% {
                opacity: 0.6;
                transform: rotate(180deg) scale(1.02);
            }
        }
        
        .image-container {
            width: 900px;
            height: 900px;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #151936;
            border-radius: 30px;
            overflow: hidden;
            border: 2px solid rgba(0, 212, 255, 0.4);
            box-shadow: 
                0 0 0 1px rgba(255, 255, 255, 0.1),
                0 30px 60px rgba(0, 0, 0, 0.5),
                0 0 100px rgba(0, 212, 255, 0.3),
                0 0 150px rgba(124, 58, 237, 0.2),
                inset 0 0 50px rgba(0, 212, 255, 0.05);
            animation: image-container-glow 5s ease-in-out infinite;
        }
        
        @keyframes image-container-glow {
            0%, 100% { 
                box-shadow: 
                    0 0 0 1px rgba(255, 255, 255, 0.1),
                    0 30px 60px rgba(0, 0, 0, 0.5),
                    0 0 100px rgba(0, 212, 255, 0.3),
                    0 0 150px rgba(124, 58, 237, 0.2),
                    inset 0 0 50px rgba(0, 212, 255, 0.05);
                transform: scale(1);
            }
            50% { 
                box-shadow: 
                    0 0 0 1px rgba(255, 255, 255, 0.15),
                    0 35px 70px rgba(0, 0, 0, 0.6),
                    0 0 140px rgba(0, 212, 255, 0.5),
                    0 0 200px rgba(124, 58, 237, 0.3),
                    inset 0 0 60px rgba(0, 212, 255, 0.08);
                transform: scale(1.01);
            }
        }
        
        .image-container img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        /* 图片装饰角标 - 增强动态效果 */
        .image-container::before,
        .image-container::after {
            content: '';
            position: absolute;
            width: 60px;
            height: 60px;
            border: 3px solid #00d4ff;
            z-index: 10;
            box-shadow: 
                0 0 20px rgba(0, 212, 255, 0.6),
                inset 0 0 10px rgba(0, 212, 255, 0.3);
            animation: corner-glow 3s ease-in-out infinite;
        }
        
        @keyframes corner-glow {
            0%, 100% {
                border-color: #00d4ff;
                box-shadow: 
                    0 0 20px rgba(0, 212, 255, 0.6),
                    inset 0 0 10px rgba(0, 212, 255, 0.3);
            }
            33% {
                border-color: #7c3aed;
                box-shadow: 
                    0 0 25px rgba(124, 58, 237, 0.7),
                    inset 0 0 12px rgba(124, 58, 237, 0.4);
            }
            66% {
                border-color: #f97316;
                box-shadow: 
                    0 0 25px rgba(249, 115, 22, 0.7),
                    inset 0 0 12px rgba(249, 115, 22, 0.4);
            }
        }
        
        .image-container::before {
            top: 20px;
            left: 20px;
            border-right: none;
            border-bottom: none;
            border-radius: 8px 0 0 0;
            animation-delay: 0s;
        }
        
        .image-container::after {
            bottom: 20px;
            right: 20px;
            border-left: none;
            border-top: none;
            border-radius: 0 0 8px 0;
            animation-delay: 1.5s;
        }
        
        /* 内容区域 */
        .content-section {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            padding: 0;
            position: relative;
        }
        
        /* 内容区域装饰圆点 */
        .content-section::before,
        .content-section::after {
            content: '';
            position: absolute;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            animation: dot-pulse 3s ease-in-out infinite;
        }
        
        .content-section::before {
            top: 30%;
            left: 5%;
            background: #00d4ff;
            box-shadow: 
                0 0 20px rgba(0, 212, 255, 0.8),
                0 0 40px rgba(0, 212, 255, 0.4);
        }
        
        .content-section::after {
            bottom: 30%;
            right: 5%;
            background: #7c3aed;
            box-shadow: 
                0 0 20px rgba(124, 58, 237, 0.8),
                0 0 40px rgba(124, 58, 237, 0.4);
            animation-delay: 1.5s;
        }
        
        @keyframes dot-pulse {
            0%, 100% {
                transform: scale(1);
                opacity: 0.6;
            }
            50% {
                transform: scale(1.5);
                opacity: 1;
            }
        }
        
        .content-text {
            font-size: 46px;
            font-weight: 600;
            line-height: 1.6;
            color: #e2e8f0;
            max-width: 90%;
            position: relative;
            padding: 50px 60px;
            background: rgba(21, 25, 54, 0.85);
            border-radius: 24px;
            border: 1px solid rgba(0, 212, 255, 0.2);
            box-shadow: 
                0 20px 40px rgba(0, 0, 0, 0.4),
                0 0 60px rgba(0, 212, 255, 0.15),
                0 0 100px rgba(124, 58, 237, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.1),
                inset 0 0 30px rgba(0, 212, 255, 0.05);
            backdrop-filter: blur(15px);
            animation: content-glow 6s ease-in-out infinite;
        }
        
        @keyframes content-glow {
            0%, 100% {
                box-shadow: 
                    0 20px 40px rgba(0, 0, 0, 0.4),
                    0 0 60px rgba(0, 212, 255, 0.15),
                    0 0 100px rgba(124, 58, 237, 0.1),
                    inset 0 1px 0 rgba(255, 255, 255, 0.1),
                    inset 0 0 30px rgba(0, 212, 255, 0.05);
                border-color: rgba(0, 212, 255, 0.2);
            }
            50% {
                box-shadow: 
                    0 25px 50px rgba(0, 0, 0, 0.5),
                    0 0 80px rgba(0, 212, 255, 0.25),
                    0 0 140px rgba(124, 58, 237, 0.15),
                    inset 0 1px 0 rgba(255, 255, 255, 0.15),
                    inset 0 0 40px rgba(0, 212, 255, 0.08);
                border-color: rgba(124, 58, 237, 0.3);
            }
        }
        
        .content-text::before {
            content: '"';
            position: absolute;
            top: 10px;
            left: 30px;
            font-size: 120px;
            color: #00d4ff;
            opacity: 0.25;
            font-family: Georgia, serif;
            line-height: 1;
            text-shadow: 0 0 30px rgba(0, 212, 255, 0.6);
            animation: quote-pulse 4s ease-in-out infinite;
        }
        
        @keyframes quote-pulse {
            0%, 100% {
                opacity: 0.25;
                text-shadow: 0 0 30px rgba(0, 212, 255, 0.6);
            }
            50% {
                opacity: 0.35;
                text-shadow: 0 0 45px rgba(0, 212, 255, 0.8);
            }
        }
        
        /* 底部装饰条 */
        .footer {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px 0 0;
            margin-top: auto;
            gap: 15px;
        }
        
        .accent-bar {
            height: 6px;
            border-radius: 3px;
            animation: bar-pulse-glow 3s ease-in-out infinite;
            position: relative;
        }
        
        .accent-bar::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 3px;
            animation: bar-shimmer 2s ease-in-out infinite;
        }
        
        .bar-1 {
            width: 120px;
            background: #00d4ff;
            box-shadow: 
                0 0 20px rgba(0, 212, 255, 0.6),
                0 0 40px rgba(0, 212, 255, 0.3);
            animation-delay: 0s;
        }
        
        .bar-1::after {
            background: rgba(255, 255, 255, 0.3);
            animation-delay: 0s;
        }
        
        .bar-2 {
            width: 80px;
            background: #7c3aed;
            box-shadow: 
                0 0 20px rgba(124, 58, 237, 0.6),
                0 0 40px rgba(124, 58, 237, 0.3);
            animation-delay: 0.4s;
        }
        
        .bar-2::after {
            background: rgba(255, 255, 255, 0.3);
            animation-delay: 0.4s;
        }
        
        .bar-3 {
            width: 100px;
            background: #f97316;
            box-shadow: 
                0 0 20px rgba(249, 115, 22, 0.6),
                0 0 40px rgba(249, 115, 22, 0.3);
            animation-delay: 0.8s;
        }
        
        .bar-3::after {
            background: rgba(255, 255, 255, 0.3);
            animation-delay: 0.8s;
        }
        
        @keyframes bar-pulse-glow {
            0%, 100% {
                opacity: 1;
                transform: scaleX(1) scaleY(1);
            }
            50% {
                opacity: 0.8;
                transform: scaleX(1.1) scaleY(1.3);
            }
        }
        
        @keyframes bar-shimmer {
            0% {
                transform: translateX(-100%);
                opacity: 0;
            }
            50% {
                opacity: 1;
            }
            100% {
                transform: translateX(100%);
                opacity: 0;
            }
        }
        
        /* 网格线装饰 */
        .grid-overlay {
            position: absolute;
            width: 100%;
            height: 100%;
            background-image: 
                linear-align(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                linear-align(rgba(255, 255, 255, 0.03) 1px, transparent 1px);
            background-size: 50px 50px;
            z-index: 0;
            opacity: 0.5;
        }
        
        /* 响应式微调 */
        @media (max-width: 1080px) {
            .container {
                padding: 60px 40px 40px;
            }
            
            .title {
                font-size: 72px;
            }
            
            .image-container {
                width: 800px;
                height: 800px;
            }
            
            .content-text {
                font-size: 38px;
                padding: 40px 50px;
            }
        }
    </style>
</head>
<body>
    <!-- 几何装饰背景 - 增强版 -->
    <div class="bg-decoration">
        <!-- 大型几何形状 -->
        <div class="geometric-shape shape-1"></div>
        <div class="geometric-shape shape-2"></div>
        <div class="geometric-shape shape-3"></div>
        <div class="geometric-shape shape-4"></div>
        <div class="geometric-shape shape-5"></div>
        
        <!-- 粒子装饰 -->
        <div class="particle particle-1"></div>
        <div class="particle particle-2"></div>
        <div class="particle particle-3"></div>
        <div class="particle particle-4"></div>
        <div class="particle particle-5"></div>
        
        <!-- 边缘装饰线条 -->
        <div class="edge-line edge-line-top"></div>
        <div class="edge-line edge-line-bottom"></div>
        <div class="edge-line edge-line-left"></div>
        <div class="edge-line edge-line-right"></div>
        
        <!-- 装饰点簇 -->
        <div class="dot-cluster dot-cluster-1">
            <div class="cluster-dot"></div>
            <div class="cluster-dot"></div>
            <div class="cluster-dot"></div>
        </div>
        <div class="dot-cluster dot-cluster-2">
            <div class="cluster-dot"></div>
            <div class="cluster-dot"></div>
            <div class="cluster-dot"></div>
        </div>
        <div class="dot-cluster dot-cluster-3">
            <div class="cluster-dot"></div>
            <div class="cluster-dot"></div>
            <div class="cluster-dot"></div>
        </div>
        <div class="dot-cluster dot-cluster-4">
            <div class="cluster-dot"></div>
            <div class="cluster-dot"></div>
            <div class="cluster-dot"></div>
        </div>
        
        <!-- 装饰圆环 -->
        <div class="ring-decoration ring-1"></div>
        <div class="ring-decoration ring-2"></div>
        <div class="ring-decoration ring-3"></div>
        
        <!-- 装饰方块 -->
        <div class="square-deco square-1"></div>
        <div class="square-deco square-2"></div>
        <div class="square-deco square-3"></div>
        
        <!-- 装饰三角形 -->
        <div class="triangle-deco triangle-1"></div>
        <div class="triangle-deco triangle-2"></div>
        
        <!-- 装饰波浪线 -->
        <div class="wave-line wave-1"></div>
        <div class="wave-line wave-2"></div>
        <div class="wave-line wave-3"></div>
        
        <!-- 星形装饰 -->
        <div class="star-deco star-1"></div>
        <div class="star-deco star-2"></div>
        <div class="star-deco star-3"></div>
        
        <!-- 发光点装饰 -->
        <div class="glow-dot glow-1"></div>
        <div class="glow-dot glow-2"></div>
        <div class="glow-dot glow-3"></div>
        <div class="glow-dot glow-4"></div>
        <div class="glow-dot glow-5"></div>
        
        <!-- 十字装饰 -->
        <div class="cross-deco cross-1"></div>
        <div class="cross-deco cross-2"></div>
        
        <!-- 弧形装饰线 -->
        <div class="arc-deco arc-1"></div>
        <div class="arc-deco arc-2"></div>
        <div class="arc-deco arc-3"></div>
        
        <!-- 微小装饰点 -->
        <div class="micro-dot micro-1"></div>
        <div class="micro-dot micro-2"></div>
        <div class="micro-dot micro-3"></div>
        <div class="micro-dot micro-4"></div>
        <div class="micro-dot micro-5"></div>
        <div class="micro-dot micro-6"></div>
        <div class="micro-dot micro-7"></div>
        <div class="micro-dot micro-8"></div>
        
        <!-- 虚线装饰边框 -->
        <div class="dashed-border dash-1"></div>
        <div class="dashed-border dash-2"></div>
        
        <!-- 菱形装饰 -->
        <div class="diamond-deco diamond-1"></div>
        <div class="diamond-deco diamond-2"></div>
        <div class="diamond-deco diamond-3"></div>
    </div>
    
    <!-- 主要内容容器 -->
    <div class="container">
        <!-- 标题区域 -->
        <div class="header">
            <div class="title">{{title}}</div>
        </div>
        
        <!-- 图片区域 -->
        <div class="image-section">
            <div class="image-container">
                <img src="{{image}}" alt="内容图片">
            </div>
        </div>
        
        <!-- 内容区域 -->
        <div class="content-section">
            <div class="content-text">{{text}}</div>
        </div>
        
        <!-- 底部装饰条 -->
        <div class="footer">
            <div class="accent-bar bar-1"></div>
            <div class="accent-bar bar-2"></div>
            <div class="accent-bar bar-3"></div>
        </div>
    </div>
</body>
</html>