/* ==========================================================
   螺途 LUOTU — 鼠标互动增强层 interactions.css
   所有规则都挂在 html.fx 下（由 interactions.js 添加）。
   删除本文件与 interactions.js 即可完全还原原始页面。
   ========================================================== */

/* ---------- 0. 滚动进度条 ---------- */
.fx-progress{position:fixed;left:0;top:0;right:0;height:3px;z-index:60;transform-origin:0 50%;scale:0 1;background:linear-gradient(90deg,var(--purple),#b36cf0 50%,var(--orange));pointer-events:none}

/* ---------- 1. 蜗牛光标 ---------- */
/* 层级：.cx-snail(定位,JS) > .cx-flip(掉头/坡度,JS) > .cx-size(状态缩放,CSS) > .cx-img(爬行动画,CSS) */
.cx-snail{position:fixed;left:0;top:0;z-index:9999;pointer-events:none;opacity:0;transition:opacity .25s;will-change:transform}
html.cx-on .cx-snail{opacity:1}
html.cx-hide .cx-snail{opacity:0!important}
.cx-flip{position:absolute;will-change:transform}
.cx-size{position:absolute;inset:0;transition:scale .35s cubic-bezier(.3,1.5,.5,1)}
.cx-img{position:absolute;inset:0;background:var(--img-s-snail) center/contain no-repeat;filter:drop-shadow(0 4px 6px rgba(80,60,160,.3));transform-origin:50% 90%}
.cx-snail.moving .cx-img{animation:cx-crawl .5s ease-in-out infinite}
.cx-snail.idle .cx-img{animation:cx-breathe 2.4s ease-in-out infinite}
.cx-snail.is-link .cx-size{scale:1.06}
.cx-snail.is-link .cx-img{animation:cx-wiggle .6s ease}
.cx-snail.is-label .cx-size{scale:1.15}
.cx-snail.is-down .cx-size{scale:1.18 .76;transition-duration:.1s}
/* 触角尖的小光点 = 精确点击位置 */
.cx-dot{position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 2px rgba(255,255,255,.9),0 0 8px rgba(242,116,31,.9);transition:scale .3s}
.cx-snail.is-link .cx-dot{scale:1.6;background:var(--purple);box-shadow:0 0 0 2px rgba(255,255,255,.9),0 0 10px rgba(123,92,245,.9)}
/* 气泡：文字提示 / 发呆台词 */
.cx-tip{position:absolute;left:0;top:-14px;translate:-24% -100%;padding:6px 12px;border-radius:14px 14px 14px 4px;background:#fff;color:var(--purple-ink);font:700 13px/1.2 var(--hand);white-space:nowrap;box-shadow:0 6px 16px rgba(60,40,120,.18);opacity:0;scale:.5;transform-origin:24% 100%;transition:opacity .2s,scale .35s cubic-bezier(.3,1.5,.5,1)}
.cx-snail.is-label .cx-tip{background:var(--orange);color:#fff;font-family:var(--sans);font-weight:800;letter-spacing:.04em;box-shadow:0 8px 20px rgba(226,90,12,.35)}
.cx-snail.show-tip .cx-tip{opacity:1;scale:1}
.cx-trail{position:fixed;left:0;top:0;width:100vw;height:100vh;z-index:9998;pointer-events:none}
@keyframes cx-crawl{0%,100%{scale:1 1}50%{scale:1.07 .94}}
@keyframes cx-breathe{0%,100%{scale:1 1}50%{scale:1.03 .97;translate:0 -1px}}
@keyframes cx-wiggle{0%,100%{rotate:0deg}25%{rotate:-10deg}50%{rotate:8deg}75%{rotate:-4deg}}
html.cx-ready:not(:has(dialog[open])) body,
html.cx-ready:not(:has(dialog[open])) body *{cursor:none!important}
html:has(dialog[open]) .cx-snail,html:has(dialog[open]) .cx-trail{display:none}

/* ---------- 2. 磁吸按钮 + 涟漪 + 流光 ---------- */
.fx .btn{position:relative;overflow:hidden;isolation:isolate;translate:var(--mx,0px) var(--my,0px);
  transition:translate .6s cubic-bezier(.25,1.6,.5,1),transform .2s ease,box-shadow .2s ease,background-color .2s ease}
.fx .btn.is-mag{transition:translate .15s ease-out,transform .2s ease,box-shadow .2s ease,background-color .2s ease}
.fx .btn .arr{display:inline-block;translate:calc(var(--mx,0px) * .45) calc(var(--my,0px) * .45);transition:translate .4s cubic-bezier(.25,1.6,.5,1),transform .2s ease}
.fx .to-top,.fx .round-btn{translate:var(--mx,0px) var(--my,0px);transition:translate .6s cubic-bezier(.25,1.6,.5,1),opacity .3s,transform .3s,visibility .3s,background-color .2s}
.fx .to-top.is-mag,.fx .round-btn.is-mag{transition:translate .15s ease-out,opacity .3s,transform .3s,visibility .3s,background-color .2s}
.fx-ripple{position:absolute;z-index:-1;border-radius:50%;background:currentColor;opacity:.28;scale:0;pointer-events:none;animation:fx-ripple .65s ease-out forwards}
@keyframes fx-ripple{to{scale:1;opacity:0}}
.fx .btn-orange::after{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);pointer-events:none}
.fx .btn-orange:hover::after{animation:fx-shine .7s ease}
.fx .hero-actions .btn-orange::after{animation:fx-shine 1s ease 1.6s,fx-shine 1s ease 6s}
.fx .hero-actions .btn-orange:hover::after{animation:fx-shine .7s ease}
@keyframes fx-shine{from{left:-60%}to{left:130%}}

/* ---------- 3. 导航滑块 ---------- */
.fx .nav-list{position:relative}
.fx .nav-pill{position:absolute;left:0;top:50%;height:44px;margin-top:-22px;width:0;border-radius:12px;background:var(--lav);opacity:0;pointer-events:none;
  transition:translate .45s cubic-bezier(.3,1.3,.5,1),width .45s cubic-bezier(.3,1.3,.5,1),opacity .25s}
.fx .nav-list.pill-on .nav-pill{opacity:1}
.fx .nav-list>li:not(.nav-pill){position:relative;z-index:1}
.fx-fine .nav-link:hover{background:transparent}
.fx .dropdown a{transition:background .2s,translate .25s}
.fx .dropdown a:hover{translate:4px 0}
.fx .dropdown a:hover .dd-ico{animation:fx-jelly .6s}
.fx .has-drop:hover .dropdown a,.fx .has-drop.open .dropdown a{animation:fx-dd-in .4s cubic-bezier(.2,.9,.3,1.2) both}
.fx .dropdown a:nth-child(2){animation-delay:.05s!important}
.fx .dropdown a:nth-child(3){animation-delay:.1s!important}
.fx .dropdown a:nth-child(4){animation-delay:.15s!important}
@keyframes fx-dd-in{from{opacity:0;translate:-10px 0}to{opacity:1;translate:0 0}}
.fx .brand:hover .brand-mark{animation:fx-hop .7s cubic-bezier(.3,1.4,.5,1)}
@keyframes fx-hop{0%,100%{translate:0 0}40%{translate:0 -8px}70%{translate:0 1px}}
@media (max-width:960px){.fx .nav-pill{display:none}}

/* ---------- 4. 首屏 Hero ---------- */
.fx-canvas{position:absolute;inset:0;z-index:1;width:100%;height:100%;pointer-events:none}
@media (min-width:861px){
  .fx-fine .hero-art{scale:1.04;will-change:translate}
}
.fx .hero-copy{will-change:translate}
.fx #hero-title .ch{display:inline-block;transform-origin:50% 80%;transition:translate .45s cubic-bezier(.2,1.4,.4,1),rotate .45s cubic-bezier(.2,1.4,.4,1),color .3s;animation:fx-ch-in .8s cubic-bezier(.2,1.2,.3,1) both;animation-delay:calc(var(--i) * 45ms + .1s)}
.fx #hero-title .hl{white-space:nowrap}
.fx #hero-title .ch.is-hot{color:var(--purple-ink)}
.fx #hero-title .hl .ch.is-hot{color:#ff8a3d}
@keyframes fx-ch-in{from{opacity:0;transform:translateY(.55em) rotate(8deg) scale(.8)}to{opacity:1;transform:none}}
.fx .hl::after{animation:fx-draw .8s cubic-bezier(.6,0,.2,1) 1s both}
@keyframes fx-draw{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.fx .hero-sub,.fx .hero-actions,.fx .hero-note{animation:fx-fade-up .8s cubic-bezier(.2,.8,.2,1) both}
.fx .hero-sub{animation-delay:.7s}.fx .hero-actions{animation-delay:.85s}.fx .hero-note{animation-delay:1.05s}
@keyframes fx-fade-up{from{opacity:0;translate:0 16px}to{opacity:1;translate:0 0}}

/* 理念积木：可悬停/点击 */
.fx .hero-blocks li{pointer-events:auto;padding:.7em 1.1em;cursor:pointer;user-select:none}
.fx .hero-blocks li.is-pop{animation:fx-blk-pop .7s cubic-bezier(.3,1.5,.5,1)}
@keyframes fx-blk-pop{0%{scale:1;rotate:0deg}25%{scale:1.4;rotate:-10deg}55%{scale:.92;rotate:6deg}80%{scale:1.06;rotate:-2deg}100%{scale:1;rotate:0deg}}

/* 跟随小蜗牛 */
.fx-snail{position:absolute;left:0;top:0;z-index:3;width:64px;height:56px;margin:-28px 0 0 -32px;pointer-events:none;opacity:0;transition:opacity .6s}
.fx-snail.show{opacity:1}
.fx-snail b{position:absolute;inset:0;background:var(--img-s-snail) center/contain no-repeat;filter:drop-shadow(0 6px 8px rgba(80,60,160,.25));transition:scale .4s cubic-bezier(.3,1.4,.5,1);animation:fx-crawl 1.2s ease-in-out infinite}
.fx-snail.right b{scale:-1 1}
.fx-snail i{position:absolute;left:50%;bottom:100%;margin-bottom:6px;translate:-50% 4px;padding:6px 12px;border-radius:12px 12px 12px 4px;background:#fff;color:var(--purple-ink);font:700 13px/1.2 var(--hand);font-style:normal;white-space:nowrap;box-shadow:0 6px 16px rgba(60,40,120,.15);opacity:0;scale:.6;transition:opacity .3s,scale .35s cubic-bezier(.3,1.5,.5,1),translate .35s}
.fx-snail.near i{opacity:1;scale:1;translate:-50% 0}
@keyframes fx-crawl{0%,100%{translate:0 0}50%{translate:0 -3px}}

/* ---------- 5. 3D 倾斜卡片 + 光斑 ---------- */
.fx-glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.42),rgba(255,255,255,0) 48%)}
.fx .tilt.is-tilting .fx-glare{opacity:1}
.fx .tilt.in{transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--lift,0px));
  transition:transform .8s cubic-bezier(.2,.8,.2,1),box-shadow .4s ease,opacity .6s ease,background-size .8s cubic-bezier(.2,.8,.2,1)}
.fx .tilt.in.is-tilting{--lift:-8px;box-shadow:0 4px 8px rgba(60,40,120,.06),0 26px 50px rgba(60,40,120,.2);
  transition:transform .14s ease-out,box-shadow .4s ease,opacity .6s ease,background-size .8s cubic-bezier(.2,.8,.2,1)}
.fx .tilt-flat.in.is-tilting{--lift:-4px}

/* 产品卡：文字/箭头视差 + 背景推近 */
.fx .p-card .p-top{translate:calc(var(--px,0) * 7px) calc(var(--py,0) * 5px);transition:translate .6s cubic-bezier(.2,.8,.2,1)}
.fx .p-card .p-arrow{translate:calc(var(--px,0) * 12px) calc(var(--py,0) * 12px);transition:transform .25s ease,translate .5s cubic-bezier(.2,.8,.2,1),background-color .25s,color .25s}
.fx .theme-orange{--tc:#d5500b}.fx .theme-blue{--tc:var(--blue-ink)}.fx .theme-green{--tc:var(--green-ink)}
.fx .p-card.is-tilting .p-arrow{background:var(--tc);color:#fff}
@media (min-width:1101px){
  .fx .p-card{background-size:100% auto}
  .fx .p-card.is-tilting{background-size:108% auto}
}

/* 漫剧卡：播放键跟随鼠标 */
.fx .d-card .play{translate:var(--dx,0px) var(--dy,0px);transition:translate .6s cubic-bezier(.25,1.5,.5,1),transform .25s ease,background .25s}
.fx .d-card.is-tilting .play{transition:translate .12s ease-out,transform .25s ease,background .25s}
.fx .d-card .play::before{content:"";position:absolute;inset:-3px;border-radius:50%;border:2px solid #fff;opacity:0}
.fx .d-card.is-tilting .play::before{animation:fx-pulse 1.4s ease-out infinite}
@keyframes fx-pulse{from{opacity:.8;scale:1}to{opacity:0;scale:1.9}}
.fx .d-card .d-cap{transition:translate .6s cubic-bezier(.2,.8,.2,1)}
.fx .d-card.is-tilting .d-cap{translate:calc(var(--px,0) * -8px) calc(var(--py,0) * -5px)}
@media (min-width:961px){
  .fx .d-card{background-size:101% auto}
  .fx .d-card.is-tilting{background-size:110% auto}
}

/* 特色大卡：插画视差 */
.fx .feature-card .fx-glare{z-index:1;background:radial-gradient(520px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.28),rgba(255,255,255,0) 60%)}
@media (min-width:961px){
  .fx .feature-card .fc-art{inset:-20px;translate:calc(var(--px,0) * -16px) calc(var(--py,0) * -12px);transition:translate 1s cubic-bezier(.2,.8,.2,1)}
}
.fx .team-note,.fx .ab-note{translate:calc(var(--px,0) * 12px) calc(var(--py,0) * 9px);transition:translate .9s cubic-bezier(.2,.8,.2,1)}
.fx .about-band{position:relative}
.fx .about-band .ab-copy{position:relative}
.fx .about-band .fx-glare{background:radial-gradient(520px circle at var(--gx,50%) var(--gy,50%),rgba(123,92,245,.10),rgba(123,92,245,0) 60%)}

/* 联系卡：光斑描边 */
.fx .c-card{position:relative}
.fx .c-card .fx-glare{background:radial-gradient(280px circle at var(--gx,50%) var(--gy,50%),rgba(123,92,245,.07),rgba(123,92,245,0) 60%)}
.fx .c-card::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(240px circle at var(--gx,50%) var(--gy,50%),var(--purple),rgba(242,116,31,.7) 45%,transparent 75%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.fx .c-card.is-tilting::after{opacity:1}
.fx .qr img{transition:scale .5s cubic-bezier(.2,.9,.3,1.3)}
.fx .qr:hover img{scale:1.06}

/* ---------- 6. 小元素：果冻 / 摇摆 / 心跳 ---------- */
.fx .chips li,.fx .steps li{transition:translate .35s cubic-bezier(.3,1.5,.5,1),box-shadow .3s,border-color .3s}
.fx .chips li:hover,.fx .steps li:hover{translate:0 -3px;border-color:#c9bbff;box-shadow:0 8px 18px rgba(60,40,120,.12);animation:fx-jelly .6s}
.fx .chips li:hover svg{animation:fx-spin-pop .7s cubic-bezier(.3,1.4,.5,1)}
.fx .steps li b{transition:background-color .3s}
.fx .steps li:hover b{background:var(--orange);animation:fx-flip .6s cubic-bezier(.3,1.4,.5,1)}
.fx .biz-list button:hover .biz-ico{animation:fx-jelly .6s}
.fx .hand{transition:rotate .3s}
.fx .hero-note:hover,.fx .c-brand .hand:hover,.fx .d-card:hover .d-cap,.fx .ab-note:hover{animation:fx-wobble .9s ease}
.fx .c-brand-logo:hover .img-logo{animation:fx-jump .8s cubic-bezier(.3,1.4,.5,1)}
.fx .heart{display:inline-block}
.fx .f-slogan:hover .heart{animation:fx-beat .9s ease infinite}
.fx .sec-head.in .sec-title::before{animation:fx-grow .7s cubic-bezier(.3,1.4,.5,1) .15s both}
@keyframes fx-jelly{0%{scale:1 1}30%{scale:1.12 .88}50%{scale:.92 1.08}70%{scale:1.04 .96}100%{scale:1 1}}
@keyframes fx-spin-pop{from{rotate:0deg;scale:1}50%{scale:1.3}to{rotate:360deg;scale:1}}
@keyframes fx-flip{from{rotate:y 0deg}to{rotate:y 360deg}}
@keyframes fx-wobble{0%,100%{rotate:0deg}20%{rotate:4deg}40%{rotate:-3deg}60%{rotate:2deg}80%{rotate:-1deg}}
@keyframes fx-jump{0%,100%{translate:0 0;scale:1 1}30%{translate:0 -18px;scale:.95 1.05}60%{translate:0 0;scale:1.08 .92}80%{scale:.98 1.02}}
@keyframes fx-beat{0%,100%{scale:1}15%{scale:1.35}30%{scale:1}45%{scale:1.2}}
@keyframes fx-grow{from{scale:1 0}to{scale:1 1}}