/* ===== BANNER CAROUSEL 公共样式（merchant / platform 页面共用）=====
   页面差异部分（slide 背景、visual 偏移、glow 颜色等）保留在各页面 CSS 中，
   加载顺序：common.css → banner-common.css → 页面.css */

/* Banner container */
.banner-carousel{margin-top:var(--nav-h);position:relative;height:520px;overflow:hidden;background-color:#060b18;background-image:radial-gradient(rgba(140,175,220,.11) 1px,transparent 1.6px),url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='140'%20height='140'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.8'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23n)'%20opacity='0.25'/%3E%3C/svg%3E");background-size:16px 16px,130px 130px;background-position:center}

/* Floating orbs */
.banner-orb{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none;z-index:1}
.banner-orb-1{width:420px;height:420px;top:-12%;right:-8%;background:radial-gradient(circle,rgba(0,220,130,0.18),transparent 70%);animation:orbDrift 14s ease-in-out infinite alternate}
.banner-orb-2{width:320px;height:320px;bottom:-8%;left:-6%;background:radial-gradient(circle,rgba(59,130,246,0.12),transparent 70%);animation:orbDrift 11s ease-in-out infinite alternate-reverse}
@keyframes orbDrift{0%{transform:translate(0,0) scale(1)}100%{transform:translate(30px,20px) scale(1.05)}}

/* Grid overlay */
.banner-grid-overlay{position:absolute;inset:0;z-index:1;background-image:linear-gradient(rgba(255,255,255,0.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.025) 1px,transparent 1px);background-size:50px 50px;mask-image:radial-gradient(ellipse at 35% 50%,black 15%,transparent 65%);-webkit-mask-image:radial-gradient(ellipse at 35% 50%,black 15%,transparent 65%)}

/* Light beam */
.banner-beam{position:absolute;top:-50%;left:45%;width:2px;height:200%;background:linear-gradient(180deg,transparent,rgba(0,220,130,0.08),transparent);transform:rotate(15deg);z-index:1;pointer-events:none;animation:beamSweep 8s ease-in-out infinite}
@keyframes beamSweep{0%,100%{opacity:0.3;transform:rotate(15deg) translateX(0)}50%{opacity:0.6;transform:rotate(15deg) translateX(-30px)}}

/* Slides — directional push transitions */
.banner-slide{position:absolute;inset:0;display:flex;align-items:center;justify-content:flex-start;gap:40px;padding:0 max(24px,calc((100vw - var(--max-w)) / 2 + 24px));opacity:0;z-index:2;transform:translateX(60px);transition:opacity 0.7s cubic-bezier(0.4,0,0.2,1),transform 0.7s cubic-bezier(0.4,0,0.2,1)}
.banner-slide.active{opacity:1;z-index:3;transform:translateX(0)}
.banner-slide.exit-left{opacity:0;z-index:2;transform:translateX(-60px)}
.banner-slide.exit-right{opacity:0;z-index:2;transform:translateX(60px)}
.banner-slide.enter-left{transition:none;transform:translateX(-60px)}
.banner-slide .bg{position:absolute;inset:0;z-index:0}

/* Content */
.banner-content{position:relative;z-index:2;max-width:560px;flex:0 1 560px;padding:0}

/* Right-side animated visual（margin-right 由各页面自行覆盖） */
.banner-visual{flex:0 0 360px;height:430px;position:relative;display:flex;align-items:center;justify-content:center;margin-left:auto;will-change:transform,opacity;transform:translateY(18px) scale(.94);opacity:0;transition:transform .9s cubic-bezier(.2,.8,.2,1),opacity .9s cubic-bezier(.2,.8,.2,1)}
.banner-slide.active .banner-visual{transform:translateY(0) scale(1);opacity:1}
.banner-visual::before{content:'';position:absolute;inset:-40px -20px;background:radial-gradient(ellipse at 50% 50%,rgba(0,220,130,0.06),transparent 65%);pointer-events:none;z-index:-1}
.banner-visual svg{width:100%;height:100%;overflow:visible;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.banner-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.8rem;letter-spacing:.16em;color:var(--accent);font-weight:700;margin-bottom:24px}
.banner-eyebrow::before{content:'';width:22px;height:2px;background:var(--accent);border-radius:2px}

/* Content entrance stagger */
.banner-slide .banner-content>*{opacity:0;transform:translateY(28px);transition:opacity 0.6s cubic-bezier(0.4,0,0.2,1),transform 0.6s cubic-bezier(0.4,0,0.2,1)}
.banner-slide.active .banner-content>*{opacity:1;transform:translateY(0)}
.banner-slide.active .banner-content h1, .banner-content h2{transition-delay:0.2s}
.banner-slide.active .banner-content p{transition-delay:0.4s}
.banner-slide.active .banner-content .btn{transition-delay:0.6s}
.banner-slide.active .banner-content{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.banner-content h1, .banner-content h2{font-size:clamp(2rem,5vw,3.4rem);font-weight:900;line-height:1.45;margin-bottom:24px}
.banner-content h1, .banner-content h2 .accent, .banner-content h2 .accent{color:var(--accent);text-shadow:0 0 40px rgba(0,220,130,0.3)}
.banner-content p{font-size:1.1rem;line-height:1.8;margin-bottom:32px;color:var(--text-sec)}

/* Button shimmer */
.banner-content .btn-primary{position:relative;overflow:hidden;box-shadow:0 4px 24px rgba(0,220,130,0.25)}
.banner-content .btn-primary::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.25),transparent);transform:translateX(-100%);transition:transform 0.6s}
.banner-content .btn-primary:hover::after{transform:translateX(100%)}

/* Visual inner animations */
@keyframes vfFloat{0%,100%{transform:translateY(0) rotate(0deg);opacity:.88}50%{transform:translateY(-10px) rotate(-.8deg);opacity:1}}
.banner-visual .vf-float{animation:vfFloat 4.6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes vfPulse{0%,100%{opacity:.5;transform:scale(.96)}50%{opacity:1;transform:scale(1.04)}}
.banner-visual .vf-pulse{animation:vfPulse 2.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.banner-slide.active .banner-visual .st1{animation:stepOn .5s ease forwards .3s}
.banner-slide.active .banner-visual .st2{animation:stepOn .5s ease forwards .85s}
.banner-slide.active .banner-visual .st3{animation:stepOn .5s ease forwards 1.4s}
@keyframes stepOn{0%{opacity:.35}100%{opacity:1}}
.banner-slide.active .banner-visual .flow-line{animation:drawLine 1.4s ease forwards .4s}
@keyframes drawLine{to{stroke-dashoffset:0}}
.search-cursor{animation:curBlink 1s step-end infinite}
@keyframes curBlink{50%{opacity:0}}
.flow-dash{stroke-dasharray:5 7;animation:dashFlow 1.4s linear infinite}
@keyframes dashFlow{to{stroke-dashoffset:-24}}

/* Result & success cards pop-in */
.banner-visual .result-card,.banner-visual .success-card{opacity:0;transform-box:fill-box;transform-origin:20% 60%;transform:scale(.75) translateY(8px);transition:opacity .4s ease,transform .5s cubic-bezier(.34,1.56,.64,1)}
.banner-visual .result-card.show,.banner-visual .success-card.show{opacity:1;transform:translateY(0) scale(1)}
.banner-visual .success-card.show{transition-delay:.38s}

@media(prefers-reduced-motion:reduce){
    .banner-visual .result-card,.banner-visual .success-card{opacity:1;transform:none;transition:none}
    .flow-dash{animation:none}
    .banner-visual svg,.banner-slide.active .banner-content{transition:none}
}

/* Dots & progress */
.banner-dots{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);z-index:10;display:flex;gap:10px}
.banner-dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,0.15);border:none;cursor:pointer;transition:all 0.3s}
.banner-dot.active{background:var(--accent);width:32px;border-radius:6px;box-shadow:0 0 12px var(--accent-glow)}
.banner-progress{position:absolute;bottom:0;left:0;right:0;height:3px;background:rgba(255,255,255,0.05);z-index:11}
.banner-progress-bar{height:100%;background:linear-gradient(90deg,var(--accent),#00b36b);width:0;box-shadow:0 0 8px var(--accent-glow)}

/* Responsive */
@media(max-width:1024px){
    .banner-visual{display:none}
    .banner-content{max-width:none;flex:1 1 auto}
}
@media(max-width:768px){
    .banner-carousel{height:400px}
    .banner-content{padding:0 24px;min-width:0;width:100%}
}