/* 可见的模板动效：循环大字、图层浮动、波纹、逐字入场。速度在此统一修改。 */
:root { --marquee-speed: 78s; --float-distance: 16px; }
.motion-ribbon { padding: 35px 0 51px; background: white; overflow: hidden; }
.marquee-window { overflow: hidden; width: 100%; mask-image: linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); }
.marquee-item { display: flex; flex: 0 0 auto; flex-direction: column; align-items: flex-start; gap: 10px; }
.marquee-caption { padding-left: 3px; color: var(--muted); font-size: 13px; letter-spacing: .12em; line-height: 1.8; transition: color .35s ease; }
.marquee-track { display: flex; width: max-content; }
.marquee-group { display: flex; flex: 0 0 auto; align-items: center; gap: 54px; padding-right: 54px; }
.marquee-word { flex-shrink: 0; color: transparent; -webkit-text-stroke: 1px #9894a4; font-family: Impact,"Arial Narrow","Segoe UI",sans-serif; font-size: clamp(65px,8.5vw,132px); font-weight: 700; line-height: 1.2; letter-spacing: .035em; white-space: nowrap; transition: color .35s ease, -webkit-text-stroke-color .35s ease; }
.marquee-icon { display: inline-grid; place-items: center; flex-shrink: 0; width: 66px; height: 66px; color: var(--primary); }
.marquee-icon svg { width: 100%; height: 100%; stroke: currentColor; stroke-width: 1.2; }
:is(.motion-enabled,.motion-paused) .marquee-track { animation: marquee-flow var(--marquee-speed) linear infinite; }
:is(.motion-enabled,.motion-paused) .marquee-icon { animation: decorative-spin 18s linear infinite; }
@keyframes marquee-flow { to { transform: translateX(-50%); } }
@keyframes decorative-spin { to { transform: rotate(360deg); } }

/* 两张照片有各自的节奏，正文文字不参与持续浮动。 */
:is(.motion-enabled,.motion-paused) .hero-small-one { animation: float-left 6.2s ease-in-out infinite; }
:is(.motion-enabled,.motion-paused) .hero-small-two { animation: float-right 7.4s -.8s ease-in-out infinite; }
:is(.motion-enabled,.motion-paused) .about-home-inset { animation: float-photo 6s ease-in-out infinite; }
:is(.motion-enabled,.motion-paused) .hero-orbit { animation: orbit-turn 24s linear infinite; }
:is(.motion-enabled,.motion-paused) .hero-art::before { animation: decorative-spin 12s linear infinite; }
@keyframes float-left { 0%,100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(calc(-1 * var(--float-distance))) rotate(-3deg); } }
@keyframes float-right { 0%,100% { transform: translateY(0) rotate(6deg); } 50% { transform: translateY(calc(var(--float-distance) * .85)) rotate(3deg); } }
@keyframes float-photo { 0%,100% { transform: translateY(0); } 50% { transform: translateY(calc(-1 * var(--float-distance))); } }

.about-motion-section { position: relative; overflow: hidden; }
.about-motion-section > .container { position: relative; z-index: 1; }
.about-motion-section::before,.about-motion-section::after { content: ""; position: absolute; pointer-events: none; top: 8%; width: 180px; height: 80%; opacity: .6; background-image: radial-gradient(#c7c2d2 1.5px,transparent 1.5px); background-size: 15px 15px; }
.about-motion-section::before { left: 0; mask-image: linear-gradient(90deg,#000,transparent); }
.about-motion-section::after { right: 0; mask-image: linear-gradient(270deg,#000,transparent); }
:is(.motion-enabled,.motion-paused) .about-motion-section::before { animation: dots-drift 12s ease-in-out infinite alternate; }
:is(.motion-enabled,.motion-paused) .about-motion-section::after { animation: dots-drift 12s -6s ease-in-out infinite alternate-reverse; }
@keyframes dots-drift { to { background-position: 30px 30px; } }

.about-service-list { margin-top: 25px; }
.about-service { display: flex; align-items: center; gap: 20px; padding: 19px 0; border-top: 1px solid var(--line); }
.about-service > div { flex: 1; }
.about-service strong { display: block; font-size: 17px; font-weight: 600; }
.about-service > div > span { display: block; margin-top: 5px; color: var(--muted); font-size: 12px; }
.service-icon { flex-shrink: 0; width: 48px; height: 48px; color: var(--primary); stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
:is(.motion-enabled,.motion-paused) .service-icon { animation: icon-float 4s ease-in-out infinite; }
.about-service:nth-child(2) .service-icon { animation-delay: -2s; }
.about-service .arrow { color: var(--primary); }
.about-service:hover .arrow { transform: translate(4px,-4px); }
@keyframes icon-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.art-discover { position: absolute; z-index: 6; left: 40%; bottom: 27%; display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: white; color: var(--primary); box-shadow: 0 5px 30px #36245912; font: 28px Arial,sans-serif; transition: background .3s,color .3s; }
.art-discover > span:first-child { transition: transform .3s; }
.art-discover:hover { background: var(--primary); color: white; }
.art-discover:hover > span:first-child { transform: translate(3px,-3px); }
.discover-ring { position: absolute; z-index: -1; inset: -1px; border: 1px solid #c6b6ef; border-radius: 50%; opacity: .7; pointer-events: none; }
:is(.motion-enabled,.motion-paused) .discover-ring { animation: ring-wave 2.8s ease-out infinite; }
:is(.motion-enabled,.motion-paused) .discover-ring:last-child { animation-delay: 1.4s; }
@keyframes ring-wave { 0% { opacity: .65; transform: scale(1); } 100% { opacity: 0; transform: scale(1.7); } }

/* 标题逐字掀起，每行单独裁剪；可读名称仍保留在 h2 上。 */
.hero-title .title-line { display: block; overflow: hidden; color: white; line-height: 1.3; padding-bottom: .03em; }
.hero-title .title-line-accent { color: #b5a0ff; }
.hero-title .title-char { display: inline-block; color: inherit; transform-origin: bottom; }
:is(.motion-enabled,.motion-paused) .hero-panel.is-active .title-char { animation: letter-rise 1s var(--ease) calc(var(--char-order,0) * 45ms) both; }
.hero-panel.is-entering .hero-title { animation: none; }
@keyframes letter-rise { from { opacity: 0; transform: translateY(110%) rotate(8deg); } to { opacity: 1; transform: translateY(0) rotate(0); } }

.reveal-ready { transform: translate3d(var(--reveal-x,0px),var(--reveal-y,46px),0); transition-duration: .95s; }
.about-home-art { --reveal-x: -65px; --reveal-y: 0px; }
.about-home-copy { --reveal-x: 65px; --reveal-y: 0px; }
.reveal-ready.is-revealed { transform: translate3d(0,0,0); }
.photo-wipe { position: absolute; z-index: 8; inset: 0; background: #a28ad5; transform: translateX(101%); opacity: 0; pointer-events: none; }
.reveal-ready .photo-wipe { transform: translateX(0); opacity: 1; }
.is-revealed .photo-wipe { animation: photo-uncover 1.1s var(--ease) both; }
@keyframes photo-uncover { to { transform: translateX(101%); } }

/* 系统减少动态效果、离开视口或切到后台时暂停持续动画。 */
.motion-paused .ambient-motion,.motion-suspended .ambient-motion,
.js-enabled .motion-scene:not(.is-motion-visible) .ambient-motion,
.motion-paused .hero-art::before,.motion-suspended .hero-art::before,
.motion-paused .about-motion-section::before,.motion-paused .about-motion-section::after,
.motion-suspended .about-motion-section::before,.motion-suspended .about-motion-section::after { animation-play-state: paused !important; }
.motion-paused .reveal-ready { opacity: 1; transform: none; transition: none; }
.motion-paused .photo-wipe { opacity: 0; }
.motion-paused .hero-panel,.motion-paused .hero-panel *, .motion-paused .culture-panel { animation: none !important; }
.motion-paused .title-char { opacity: 1; transform: none; }
@media (max-width:800px) {
  .about-service { gap: 15px; }
  .service-icon { width: 38px; height: 38px; }
  .about-service strong { font-size: 15px; }
  .art-discover { width: 65px; height: 65px; }
}
@media (max-width:600px) {
  :root { --float-distance: 10px; --marquee-speed: 62s; }
  .motion-ribbon { padding: 22px 0 32px; }
  .marquee-word { font-size: 64px; }
  .marquee-caption { font-size: 11px; letter-spacing: .07em; }
  .marquee-group { gap: 27px; padding-right: 27px; }
  .marquee-icon { width: 40px; height: 40px; }
  .about-motion-section::before,.about-motion-section::after { width: 80px; background-size: 13px 13px; opacity: .45; }
  .about-home-art { --reveal-x: -30px; }
  .about-home-copy { --reveal-x: 30px; }
  .art-discover { width: 60px; height: 60px; bottom: 24%; left: 44%; font-size: 24px; }
}
@media (prefers-reduced-motion:reduce) {
  html:not(.motion-enabled) .ambient-motion { animation: none !important; }
}

@media (hover:hover) and (pointer:fine) {
  .subsidiary-card::before { content:""; position:absolute; z-index:5; inset:0; pointer-events:none; background:linear-gradient(110deg,transparent 35%,#ffffff66 50%,transparent 65%); transform:translateX(-130%); transition:transform .85s var(--ease); }
  .motion-enabled .subsidiary-card:hover::before { transform:translateX(130%); }
}

/* 保留动画时间轴：移开鼠标后从停下的位置继续，无须额外按钮。 */
@media (hover:hover) and (pointer:fine) {
  .motion-ribbon:hover .marquee-track,
  .motion-ribbon:hover .marquee-icon { animation-play-state: paused !important; }
  .marquee-item:hover .marquee-caption { color: var(--primary); }
  .marquee-item:hover .marquee-word { color: var(--primary); -webkit-text-stroke-color: var(--primary); }
}

/* 首屏中文排版：放松字间距和行距，让标题与图片共同构成视觉重点。 */
.hero-title { font-size: clamp(40px,4.1vw,58px); font-weight: 500; letter-spacing: .045em; }
.hero-title .title-line { line-height: 1.5; padding-bottom: 0; }
.hero-title .title-line-accent { color: #b5a0ff; }
@media (min-width:801px) {
  .hero-content { min-height: 345px; }
}
@media (min-width:601px) and (max-width:800px) {
  .hero-title { font-size: 38px; }
}
@media (max-width:600px) {
  .hero-title { font-size: clamp(32px,8.7vw,44px); letter-spacing: .04em; }
  .hero-content { min-height: 270px; }
}