/* ========================================
   趣游旅图 · 动效增强层 — 2026-06-09
   ======================================== */

.scroll-progress-bar{position:fixed;top:0;left:0;height:3px;background:linear-gradient(to right,#0d9488,#14b8a6);z-index:10000;width:0;transition:width .12s linear;box-shadow:0 0 12px rgba(13,148,136,.35)}

@keyframes anim-slide-up{from{opacity:0;transform:translateY(48px)}to{opacity:1;transform:translateY(0)}}
@keyframes anim-slide-left{from{opacity:0;transform:translateX(-48px)}to{opacity:1;transform:translateX(0)}}
@keyframes anim-slide-right{from{opacity:0;transform:translateX(48px)}to{opacity:1;transform:translateX(0)}}
@keyframes anim-scale-in{from{opacity:0;transform:scale(.88)}to{opacity:1;transform:scale(1)}}
@keyframes anim-rotate-in{from{opacity:0;transform:rotate(-6deg) scale(.92)}to{opacity:1;transform:rotate(0) scale(1)}}

[data-anim]{opacity:0;transition:opacity .7s cubic-bezier(.25,.46,.45,.94),transform .7s cubic-bezier(.25,.46,.45,.94)}
[data-anim=up]{transform:translateY(48px)}
[data-anim=left]{transform:translateX(-48px)}
[data-anim=right]{transform:translateX(48px)}
[data-anim=scale]{transform:scale(.88)}
[data-anim=rotate]{transform:rotate(-6deg) scale(.92)}
[data-anim].anim-visible{opacity:1;transform:translate(0,0) scale(1) rotate(0)}

[data-anim-stagger] > *{opacity:0;transform:translateY(36px);transition:opacity .5s ease,transform .5s ease}
[data-anim-stagger].anim-visible > *:nth-child(1){transition-delay:.04s}
[data-anim-stagger].anim-visible > *:nth-child(2){transition-delay:.10s}
[data-anim-stagger].anim-visible > *:nth-child(3){transition-delay:.16s}
[data-anim-stagger].anim-visible > *:nth-child(4){transition-delay:.22s}
[data-anim-stagger].anim-visible > *:nth-child(5){transition-delay:.28s}
[data-anim-stagger].anim-visible > *:nth-child(6){transition-delay:.34s}
[data-anim-stagger].anim-visible > *:nth-child(7){transition-delay:.40s}
[data-anim-stagger].anim-visible > *:nth-child(8){transition-delay:.46s}
[data-anim-stagger].anim-visible > *{opacity:1;transform:translateY(0)}

@keyframes anim-btn-pulse{0%,100%{box-shadow:0 0 6px rgba(13,148,136,.35),0 0 18px rgba(13,148,136,.15)}50%{box-shadow:0 0 14px rgba(13,148,136,.5),0 0 36px rgba(13,148,136,.25)}}
.btn-pulse{animation:anim-btn-pulse 2.8s ease-in-out infinite}

@keyframes anim-cloud-drift{0%{transform:translateX(-5%)}100%{transform:translateX(105%)}}
.cloud-drift{animation:anim-cloud-drift var(--cdur,30s) linear infinite;animation-delay:var(--cdelay,0s)}

@keyframes anim-route-draw{from{stroke-dashoffset:1000}to{stroke-dashoffset:0}}
.route-draw{stroke-dasharray:1000;stroke-dashoffset:1000;animation:anim-route-draw 3s ease forwards}

@keyframes anim-compass-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
.compass-spin{animation:anim-compass-spin 20s linear infinite;transform-origin:center}

.back-to-top{position:fixed;bottom:36px;right:36px;z-index:9999;width:50px;height:50px;background:#fff;color:#0d9488;border:1px solid #0d9488;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(16px);transition:all .35s ease;font-size:1.4rem;box-shadow:0 4px 20px rgba(0,0,0,.12)}
.back-to-top.show{opacity:1;visibility:visible;transform:translateY(0)}
.back-to-top:hover{transform:translateY(-4px);box-shadow:0 8px 28px rgba(0,0,0,.18);background:#0d9488;color:#fff}

.hero-particle-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
@keyframes anim-particle-rise{0%{transform:translateY(105vh) scale(0);opacity:0}8%{opacity:.8}88%{opacity:.7}100%{transform:translateY(-8vh) scale(1.6);opacity:0}}
.hero-particle{position:absolute;animation:anim-particle-rise var(--pdur,9s) linear infinite;animation-delay:var(--pdelay,0s);left:var(--px,50%);font-size:var(--psize,0.9rem);opacity:0}

@keyframes anim-count-up{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
[data-count-up].count-done{animation:anim-count-up .5s ease-out forwards}

[data-parallax]{will-change:transform}
.card-tilt-active{transition:transform .15s ease-out,box-shadow .15s ease-out}

@keyframes anim-line-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.line-grow{transform-origin:left;animation:anim-line-grow .8s cubic-bezier(.25,.46,.45,.94) forwards}

@keyframes anim-blink-caret{0%,100%{border-color:transparent}50%{border-color:#0d9488}}
.typewriter-cursor{display:inline-block;border-right:2px solid #0d9488;animation:anim-blink-caret .75s step-end infinite}

@keyframes anim-shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.shimmer-overlay{background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.12) 50%,transparent 65%);background-size:200% 100%;animation:anim-shimmer 2.5s ease-in-out infinite}

@media (prefers-reduced-motion:reduce){
  [data-anim],[data-anim-stagger] > *,.hero-particle,.scroll-progress-bar,.cloud-drift,.route-draw,.compass-spin,[data-parallax]{animation:none!important;transition:none!important;opacity:1!important;transform:none!important}
}