/* ============================================================ * Doseclaw v3.2.0 — dc-fx.css * 3D 科技感轉場效果 * (1) Hero parallax + 浮動 * (2) Section 進場 3D 翻轉 * (3) 頁面切換淡入 + 模糊 * (4) 圖片 hover 立體傾斜 * ============================================================ */ /* ---------- 全域 perspective ---------- */ html { perspective: 1200px; } body { transform-style: preserve-3d; } /* 尊重用戶減少動效偏好 */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ============================================================ * 1. PAGE TRANSITION — fade + blur（Apple style） * ============================================================ */ body { opacity: 1; filter: blur(0); transition: opacity .6s cubic-bezier(.2,.7,.2,1), filter .6s cubic-bezier(.2,.7,.2,1); } body.dc-ready { opacity: 1; filter: blur(0); } body.dc-leaving { opacity: 0; filter: blur(10px); transition-duration: .35s; } /* ============================================================ * 2. HERO PARALLAX + 浮動 * ============================================================ */ .dc-hero { position: relative; overflow: hidden; transform-style: preserve-3d; } /* 背景光暈圓 */ .dc-hero::before { content: ''; position: absolute; inset: -20%; background: radial-gradient(60% 60% at 20% 30%, rgba(80,200,255,.12), transparent 60%), radial-gradient(50% 50% at 80% 70%, rgba(120,80,255,.10), transparent 60%); pointer-events: none; z-index: 0; transform: translate3d(var(--mx,0), var(--my,0), 0); transition: transform .25s cubic-bezier(.2,.7,.2,1); } .dc-hero > * { position: relative; z-index: 1; } /* hero 圖片浮動 + 跟著鼠標傾斜 */ .dc-hero__img { transform-style: preserve-3d; will-change: transform; transition: transform .35s cubic-bezier(.2,.7,.2,1); animation: dcFloat 6s ease-in-out infinite; } .dc-hero[data-tilt="on"] .dc-hero__img { transform: rotateX(calc(var(--ty,0) * -6deg)) rotateY(calc(var(--tx,0) * 6deg)) translateZ(0); } @keyframes dcFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } } /* hero text 視差（往反方向位移一點點） */ .dc-hero__text { transform: translate3d(calc(var(--mx,0) * -.5), calc(var(--my,0) * -.5), 0); transition: transform .25s cubic-bezier(.2,.7,.2,1); } /* ============================================================ * 3. SECTION 進場 3D 翻轉 * ============================================================ */ .reveal { opacity: 0; transform: perspective(1000px) rotateX(8deg) translateY(40px); transform-origin: center top; transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); will-change: opacity, transform; } .reveal.dc-in { opacity: 1; transform: perspective(1000px) rotateX(0) translateY(0); } /* 子元素級聯（stagger） */ .reveal.dc-in .dc-feature, .reveal.dc-in .dc-step, .reveal.dc-in .dc-stats__item, .reveal.dc-in .dc-usecase__card, .reveal.dc-in .dc-solcard { animation: dcStagger .7s cubic-bezier(.2,.7,.2,1) both; } @keyframes dcStagger { from { opacity: 0; transform: translateY(20px) rotateX(6deg); } to { opacity: 1; transform: translateY(0) rotateX(0); } } .reveal.dc-in .dc-feature:nth-child(1), .reveal.dc-in .dc-step:nth-child(1), .reveal.dc-in .dc-stats__item:nth-child(1), .reveal.dc-in .dc-usecase__card:nth-child(1), .reveal.dc-in .dc-solcard:nth-child(1) { animation-delay: .05s; } .reveal.dc-in .dc-feature:nth-child(2), .reveal.dc-in .dc-step:nth-child(2), .reveal.dc-in .dc-stats__item:nth-child(2), .reveal.dc-in .dc-usecase__card:nth-child(2), .reveal.dc-in .dc-solcard:nth-child(2) { animation-delay: .15s; } .reveal.dc-in .dc-feature:nth-child(3), .reveal.dc-in .dc-step:nth-child(3), .reveal.dc-in .dc-stats__item:nth-child(3), .reveal.dc-in .dc-usecase__card:nth-child(3), .reveal.dc-in .dc-solcard:nth-child(3) { animation-delay: .25s; } .reveal.dc-in .dc-feature:nth-child(4), .reveal.dc-in .dc-step:nth-child(4), .reveal.dc-in .dc-stats__item:nth-child(4), .reveal.dc-in .dc-usecase__card:nth-child(4), .reveal.dc-in .dc-solcard:nth-child(4) { animation-delay: .35s; } .reveal.dc-in .dc-feature:nth-child(5), .reveal.dc-in .dc-step:nth-child(5) { animation-delay: .45s; } .reveal.dc-in .dc-feature:nth-child(6), .reveal.dc-in .dc-step:nth-child(6) { animation-delay: .55s; } /* ============================================================ * 4. CARD TILT — 卡片 hover 立體傾斜 * ============================================================ */ .dc-feature, .dc-solcard, .dc-usecase__card, .dc-step, .dc-founder__card { transform-style: preserve-3d; transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s cubic-bezier(.2,.7,.2,1); will-change: transform; } /* Tilt（JS 控制 --tx / --ty） */ .dc-tilt { transform: perspective(900px) rotateX(calc(var(--ty,0) * -8deg)) rotateY(calc(var(--tx,0) * 8deg)) translateZ(8px); box-shadow: 0 24px 48px -20px rgba(0,20,60,.35), 0 8px 20px -10px rgba(0,20,60,.25); } .dc-tilt > * { transform: translateZ(20px); } .dc-tilt img { transform: translateZ(40px) scale(1.03); } /* 卡片 hover 默認效果（fallback for touch devices） */ @media (hover: hover) { .dc-feature:hover, .dc-solcard:hover, .dc-step:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -18px rgba(0,30,80,.30); } } /* ============================================================ * 5. 額外光暈 / 邊光（hero 卡片用） * ============================================================ */ .dc-hero__img { position: relative; border-radius: 18px; overflow: hidden; box-shadow: 0 30px 80px -30px rgba(0,30,80,.45), 0 0 0 1px rgba(120,200,255,.18) inset; } .dc-hero__img::before { content: ''; position: absolute; inset: -2px; background: linear-gradient(135deg, rgba(100,200,255,.6), transparent 30%, transparent 70%, rgba(120,80,255,.5)); border-radius: inherit; z-index: -1; filter: blur(8px); opacity: .7; } /* ============================================================ * 6. NAV 點擊反饋（按下變淡 + 微縮） * ============================================================ */ .dc-nav a, .dc-cta-btn, .dc-header__lang button { transition: transform .15s, opacity .15s; } .dc-nav a:active, .dc-cta-btn:active, .dc-header__lang button:active { transform: scale(.96); opacity: .8; } /* ============================================================ * 7. SCROLL INDICATOR — hero 底部指示 * ============================================================ */ .dc-hero::after { content: ''; position: absolute; bottom: 24px; left: 50%; width: 2px; height: 36px; background: linear-gradient(to bottom, transparent, rgba(120,200,255,.7), transparent); transform: translateX(-50%); animation: dcScrollHint 2s ease-in-out infinite; z-index: 2; pointer-events: none; } @keyframes dcScrollHint { 0% { opacity: 0; transform: translate(-50%, -10px); } 50% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, 10px); } } /* 手機關閉 hero scroll hint（避免擋按鈕） */ @media (max-width: 768px) { .dc-hero::after { display: none; } }