/* 全頁共用動態語彙：互動較快、文字沉穩、環境光緩慢，僅影響服務頁。 */
.digital_services_body { --services-duration-fast: 320ms; --services-duration-scene: 850ms; --services-duration-line: 950ms; --services-ease-out: cubic-bezier(.2,.75,.2,1); --services-ease-flow: cubic-bezier(.45,0,.2,1); }
.services_line { display: block; overflow: clip; padding-block: .09em; margin-block: -.09em; }
.services_line > span { display: block; }
.is_scene_entered [data-services-reveal] { animation: services_line_enter var(--services-duration-line) var(--services-ease-out) both; animation-delay: var(--services_reveal_delay, 0ms); }
@keyframes services_line_enter { from { opacity: 0; transform: translate3d(0, 32px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@media (max-width: 900px) { .is_scene_entered [data-services-reveal] { animation-duration: 650ms; } @keyframes services_line_enter { from { opacity: .3; transform: translate3d(0, 20px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } }
@media (prefers-reduced-motion: reduce) { .is_scene_entered [data-services-reveal] { animation: none; } }

/* 以完整光學玻璃山景取代舊的瀏覽器示意；前景曲面、細線與文字各有景深。 */
.digital_services_body .services_hero { height: min(100svh, 1500px); background: #dce9f1; }
.digital_services_body .services_hero_mountains { inset: 8% 0 0 auto; width: auto; height: 92%; opacity: 1; mask-image: linear-gradient(90deg,transparent,#000 40%),linear-gradient(180deg,transparent,#000 7%); mask-composite: intersect; object-fit: contain; object-position: right bottom; transform: scale(1.025) translate3d(var(--services_pointer_x, 0px),var(--services_pointer_y, 0px),0); transition: transform 1.2s var(--services-ease-out); }
.services_hero_wash { background: linear-gradient(#dce9f1 0%,#dce9f1 4%,#dce9f180 10%,transparent 18%),linear-gradient(90deg,#edf5f8c9 0%,#eff5f7a1 27%,#f1f7f94a 43%,transparent 61%); }
.services_hero_floor { height: 16%; bottom: -14%; opacity: .6; }
.digital_services_body .services_hero_type { width: 55%; }
.digital_services_body .services_hero_type h1 .digital_period { display: inline; }
.digital_services_body .services_hero_art { width: 55%; height: 77%; top: 13%; right: 2%; mix-blend-mode: normal; max-width: none; }
.services_hero_orbit { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; opacity: .48; }
.services_hero_orbit path { stroke: #4698aa; stroke-width: .65; stroke-dasharray: 1; stroke-dashoffset: 0; }
.services_hero.is_scene_entered .services_hero_orbit path { animation: services_orbit_draw 1.6s var(--services-ease-flow) .45s both; }
.services_orbit_traveller { fill: #218fa4; offset-path: path('M115 455C-25 366 335 24 541 98S636 475 318 590'); animation: services_travel 26s ease-in-out infinite alternate; }
.services_hero_reflection { position: absolute; top: 5%; left: 25%; height: 88%; width: 25%; transform: skew(-18deg); background: linear-gradient(105deg,transparent 42%,#fff8 50%,transparent 58%); opacity: 0; }
.services_hero.is_scene_entered .services_hero_reflection { animation: services_glass_sweep 2.1s var(--services-ease-flow) .4s; }
.services_hero_controls .digital_round_arrow { transition: transform var(--services-duration-fast) var(--services-ease-out), background var(--services-duration-fast); }
.services_hero_controls .digital_scroll_link:hover .digital_round_arrow { transform: translateY(4px); background: #fff8; }
.services_hero.is_scene_entered .services_hero_controls { animation: services_line_enter .7s var(--services-ease-out) .7s backwards; }
@keyframes services_orbit_draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes services_travel { from { offset-distance: 0%; opacity: .3; } 55% { opacity: .85; } to { offset-distance: 100%; opacity: .4; } }
@keyframes services_glass_sweep { 0% { opacity: 0; translate: -80% 0; } 40% { opacity: .38; } 100% { opacity: 0; translate: 180% 0; } }
@media (min-width: 901px) { .services_hero_type { opacity: calc(1 - var(--services_scene_exit, 0) * .78); } .services_hero_controls { opacity: calc(1 - var(--services_scene_exit, 0) * 1.8); } .services_hero_side { opacity: calc(1 - var(--services_scene_exit, 0)); } }
.services_hero_controls:focus-within { opacity: 1; }
@media (max-width: 1100px) and (min-width: 701px) { .digital_services_body .services_hero { height: 90svh; min-height: 760px; } .digital_services_body .services_hero_mountains { inset: auto 0 0 auto; width: 120%; height: auto; mask-image: linear-gradient(90deg,transparent,#000 40%),linear-gradient(180deg,transparent,#000 15%); object-position: 60% bottom; } .services_hero_wash { background: linear-gradient(90deg,#edf5f8e6,#edf5f899 37%,transparent 68%); } .digital_services_body .services_hero_art { width: 60%; top: 26%; height: 65%; } }
@media (max-width: 700px) { .digital_services_body .services_hero { height: auto; min-height: 850px; padding-bottom: 420px; } .digital_services_body .services_hero_type { width: 100%; } .digital_services_body .services_hero_mountains { inset: auto -3% 0 auto; width: 187%; height: 470px; object-fit: contain; object-position: right bottom; mask-image: linear-gradient(transparent, #000 23%); transform: none; } .services_hero_wash { background: linear-gradient(#e8f1f6 5%,#edf5f8 39%,transparent 65%); } .digital_services_body .services_hero_art { width: 90%; height: 350px; top: auto; bottom: 25px; } .services_hero_orbit { opacity: .2; } .services_orbit_traveller, .services_hero_reflection { display: none; } .services_hero_controls { bottom: 37px; } }
@media (max-width: 380px) { .digital_services_body .services_hero { min-height: 805px; padding-bottom: 370px; } .digital_services_body .services_hero_mountains { height: 400px; } }
@media (prefers-reduced-motion: reduce) { .digital_services_body .services_hero_mountains { transform: none; transition: none; } .services_hero.is_scene_entered :is(.services_hero_reflection,.services_hero_controls,.services_hero_orbit path), .services_orbit_traveller { animation: none; } .services_hero_type,.services_hero_controls,.services_hero_side { opacity: 1; } }

/* 深色山景中的真實金屬圓環；細弧只補光，不堆疊第二個霓虹圓環。 */
.services_belief { height: max(650px,54vw); }
.services_belief_landscape { inset: -3% -2%; width: 104%; height: 106%; object-position: center top; filter: none; transform: scale(calc(1 + (1 - var(--services_scene_enter, 1)) * .08)) translate3d(var(--services_pointer_x,0px),var(--services_pointer_y,0px),0); transition: transform 1.5s var(--services-ease-out); }
.services_belief::before { background: linear-gradient(90deg,#06182799 0%,#081e2b42 36%,transparent 63%); }
.services_belief::after { z-index: 5; inset: auto -8% -74px; height: 95px; background: #fafcfb; border-radius: 50% 50% 0 0; opacity: 1; transform: rotate(3deg); }
.services_belief_copy { padding-top: clamp(90px,8vw,160px); }
.services_belief_ring { width: 47%; height: 87%; right: 7%; top: 1%; }
.services_ring_trace { position: absolute; width: 100%; height: 100%; opacity: calc((1 - var(--services_scene_enter, 1)) * .38); transform: rotate(7deg); }
.services_ring_trace ellipse { stroke: #e3f8ff; stroke-width: .65; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--services_scene_enter, 1)); transform-origin: center; transform: rotate(-95deg); }
.services_ring_wordmark { top: 51%; left: 50%; color: #16394e; width: 100%; text-shadow: 0 1px 8px #f1faffbf; }
.services_ring_wordmark span { color: #294f63; font-weight: 600; }
.services_ring_wordmark strong { font-size: clamp(24px,2.4vw,43px); }
.services_belief.is_scene_entered .services_ring_wordmark[data-services-reveal] { animation-name: services_wordmark_enter; }
@keyframes services_wordmark_enter { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
.services_belief_glow { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: clip; }
.services_belief_glow i { position: absolute; width: 50%; height: 62%; top: 10%; left: 20%; border-radius: 50%; background: radial-gradient(ellipse,#beeaff18,transparent 68%); animation: services_ambient_drift 29s ease-in-out infinite alternate; }
.services_belief_glow i + i { top: 40%; left: 58%; width: 40%; height: 55%; animation-duration: 33s; animation-delay: -12s; animation-direction: alternate-reverse; }
@keyframes services_ambient_drift { from { transform: translate3d(-5%,7%,0) scale(.92); opacity: .35; } 48% { opacity: .8; } to { transform: translate3d(9%,-12%,0) scale(1.1); opacity: .5; } }
@media (max-width: 1050px) { .services_belief { height: max(620px,65vw); } .services_belief_ring { width: 52%; right: 0; top: 2%; } .services_belief_copy { width: 47%; } }
@media (max-width: 700px) { .services_belief { height: auto; padding-bottom: 425px; } .services_belief_copy { width: 100%; padding-top: 70px; } .services_belief_landscape { inset: auto -10% -8px auto; width: 196%; height: 495px; object-fit: cover; object-position: 65% bottom; transform: none; mask-image: linear-gradient(transparent,#000 22%); } .services_belief::before { background: linear-gradient(#0c2134 0%,#0c2134f0 36%,transparent 75%); } .services_belief_ring { width: 85%; height: 410px; right: 9%; top: auto; bottom: 12px; } .services_ring_wordmark { top: 47%; } .services_ring_wordmark strong { font-size: 24px; } .services_ring_trace,.services_belief_glow { display: none; } }
@media (prefers-reduced-motion: reduce) { .services_belief_landscape { transform: none; transition: none; } .services_belief_glow i { animation: none; } .services_ring_trace ellipse { stroke-dashoffset: 0; } }

/* 最後一個句點成為連接節點，沿實際量測的路徑引向合作入口。 */
.services_image_cta .services_cta_copy { position: relative; z-index: 2; pointer-events: none; }
.services_image_cta h2 > .services_line:first-child { color: #173949; }
.services_connect_point { color: #189ca8; display: inline-block; transform-origin: 50% 85%; }
.services_connect_line { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; overflow: visible; }
.services_connect_line path { fill: none; stroke: #157f9299; stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1; }
.is_scene_entered .services_connect_line path { animation: services_orbit_draw 1.4s var(--services-ease-flow) .7s both; }
.services_conversation_link { z-index: 3; }
.services_image_cta:has(.services_conversation_link:hover) .services_connect_point { animation: services_point_pulse .75s ease-out; }
.services_image_cta:has(.services_conversation_link:hover) .services_connect_line path { stroke: #139fa8; stroke-width: 1.5; }
.services_cta_landscape { transform: scale(calc(1 + (1 - var(--services_scene_enter, 1)) * .06)); }
@keyframes services_point_pulse { 50% { transform: scale(1.45); } }
@media (max-width: 900px) { .services_connect_line { opacity: .65; } .services_cta_landscape { transform: none; } }
@media (max-width: 700px) { .services_connect_line { display: none; } }
@media (prefers-reduced-motion: reduce) { .is_scene_entered .services_connect_line path { animation: none; stroke-dashoffset: 0; } .services_image_cta:has(.services_conversation_link:hover) .services_connect_point { animation: none; } .services_cta_landscape { transform: none; } }

/* 所有循環只在可見場景執行，背景分頁與全螢幕 MENU 停止繪製。 */
[data-services-scene]:not([data-motion-visible='true']) :is(.services_orbit_traveller,.services_belief_glow i),
.digital_services_body[data-motion-paused='true'] [data-services-scene] *,
.digital_services_body[data-services-paused='true'] [data-services-scene] * { animation-play-state: paused !important; }

/* 偏好改為降低動態後，已閱讀場景固定完成；切回時只恢復環境光。 */
[data-motion-settled='true'] [data-services-reveal],
[data-motion-settled='true'] :is(.services_hero_controls,.services_hero_reflection,.services_hero_orbit path) { animation: none !important; }
[data-motion-settled='true'] .services_connect_line path { animation: none !important; stroke-dashoffset: 0; }