/* WINS AI workshop — motion / tech presentation layer.
   Pure presentation: no copy or structure changes. Loaded after the page CSS.
   Everything animated is gated by html.fx (set by fx.js) and prefers-reduced-motion. */

@property --fx-s{syntax:'<integer>';inherits:false;initial-value:0}
@property --fx-f{syntax:'<integer>';inherits:false;initial-value:0}
@property --fx-a{syntax:'<angle>';inherits:false;initial-value:0deg}

:root{--fx-sig:#3ddc97;--fx-sig2:#1dab8b;--fx-ink:#0e1411;--fx-mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace}

/* ---------- Global texture: dot grid on paper sections ---------- */
body.tech-workspace{background-image:radial-gradient(#0e141112 1px,transparent 1.3px);background-size:26px 26px;background-attachment:fixed}

/* ---------- Scroll progress ---------- */
.fx-progress{position:fixed;left:0;top:0;height:2px;width:100%;z-index:1000;pointer-events:none;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#1dab8b,#3ddc97 70%,#c9ffe6);box-shadow:0 0 12px #3ddc97aa}

/* ---------- HERO ---------- */
.fx-field{position:absolute;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);z-index:-1;pointer-events:none;opacity:0;transition:opacity 1.4s ease}
.fx-field.on{opacity:1}
.fx .hero .eyebrow{display:inline-flex;align-items:center;gap:10px}
.fx .hero .eyebrow:before{content:'';width:7px;height:7px;border-radius:50%;background:var(--fx-sig);box-shadow:0 0 0 0 #3ddc9799;animation:fx-ping 2s infinite;flex:none}
@keyframes fx-ping{0%{box-shadow:0 0 0 0 #3ddc9799}80%,100%{box-shadow:0 0 0 9px #3ddc9700}}

/* Headline: luminous gradient type + one-time light sweep */
.tech-workspace .hero h1{background:linear-gradient(100deg,#f4f8f3 0%,#f4f8f3 46%,#a9f5cf 72%,#3ddc97 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.fx .hero h1{background:linear-gradient(100deg,#f4f8f3 0%,#f4f8f3 30%,#ffffff 40%,#f4f8f3 50%,#a9f5cf 76%,#3ddc97 100%);background-size:240% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;animation:fx-sheen 2.6s .35s cubic-bezier(.3,.6,.2,1) both}
@keyframes fx-sheen{from{background-position:100% 0}to{background-position:0 0}}
.fx .hero h1{filter:drop-shadow(0 0 28px #3ddc9722)}

/* Hero visual: HUD chrome, scan line, timecode, terminal */
.fx .hero-visual{overflow:visible}
.fx-hud{position:absolute;inset:-10px;pointer-events:none;z-index:3;
 --c:#3ddc97;--l:18px;
 background:
  linear-gradient(var(--c),var(--c)) 0 0/var(--l) 1.5px,linear-gradient(var(--c),var(--c)) 0 0/1.5px var(--l),
  linear-gradient(var(--c),var(--c)) 100% 0/var(--l) 1.5px,linear-gradient(var(--c),var(--c)) 100% 0/1.5px var(--l),
  linear-gradient(var(--c),var(--c)) 0 100%/var(--l) 1.5px,linear-gradient(var(--c),var(--c)) 0 100%/1.5px var(--l),
  linear-gradient(var(--c),var(--c)) 100% 100%/var(--l) 1.5px,linear-gradient(var(--c),var(--c)) 100% 100%/1.5px var(--l);
 background-repeat:no-repeat;opacity:.85;animation:fx-hud-in .9s .5s cubic-bezier(.2,.8,.2,1) both}
@keyframes fx-hud-in{from{inset:4px;opacity:0}to{inset:-10px;opacity:.85}}
.fx-hud-label{position:absolute;font:500 10px/1 var(--fx-mono);letter-spacing:.14em;text-transform:uppercase;color:#9fdcbf;white-space:nowrap}
.fx-hud-label.tl{left:26px;top:-4px;transform:translateY(-100%);padding-bottom:4px}
.fx-hud-label.tr{right:26px;top:-4px;transform:translateY(-100%);padding-bottom:4px;display:flex;align-items:center;gap:6px}
.fx-hud-label.tr:before{content:'';width:6px;height:6px;border-radius:50%;background:#ff5a4f;box-shadow:0 0 8px #ff5a4f;animation:fx-blink 1.2s steps(2) infinite}
@keyframes fx-blink{50%{opacity:.15}}
.fx-tc{animation:fx-tc-s 3600s steps(3600) infinite,fx-tc-f 1s steps(25) infinite;counter-reset:s var(--fx-s) f var(--fx-f)}
.fx-tc:after{content:'00:' counter(s,decimal-leading-zero) ':' counter(f,decimal-leading-zero)}
@keyframes fx-tc-s{from{--fx-s:0}to{--fx-s:3600}}
@keyframes fx-tc-f{from{--fx-f:0}to{--fx-f:25}}
.fx-hud-label.bl{left:26px;bottom:-4px;transform:translateY(100%);padding-top:5px;color:#6f9c87}

.fx .hero-visual picture{position:relative;overflow:hidden}
.fx-scan{position:absolute;left:0;right:0;top:0;height:30%;pointer-events:none;z-index:2;background:linear-gradient(180deg,transparent,#3ddc9714 70%,#3ddc9755 99%,#c9ffe6 100%);mix-blend-mode:screen;animation:fx-scan 5.5s 1.2s cubic-bezier(.45,.05,.55,.95) infinite;transform:translateY(-110%)}
@keyframes fx-scan{0%{transform:translateY(-110%)}55%,100%{transform:translateY(380%)}}

/* Route bar: data packet travelling 原始资料 → AI → 人工核对 */
.fx .workspace-route .route-line{overflow:visible}
.fx .workspace-route .route-line:before{content:'';position:absolute;top:-1.5px;left:0;width:22px;height:4px;border-radius:4px;background:linear-gradient(90deg,transparent,#c9ffe6);box-shadow:0 0 10px #3ddc97;animation:fx-packet 2.4s cubic-bezier(.6,0,.4,1) infinite}
.fx .workspace-route .route-line+span+.route-line:before{animation-delay:1.2s}
@keyframes fx-packet{0%{left:-10%;opacity:0}15%{opacity:1}85%{opacity:1}100%{left:100%;opacity:0}}

/* Terminal card overlapping the hero photo */
.fx-term{position:absolute;z-index:4;left:-34px;bottom:74px;width:min(340px,78%);background:#0b1210ee;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid #2f5646;border-radius:10px;box-shadow:0 24px 60px -12px #000c,0 0 0 1px #3ddc9712,0 0 40px -10px #3ddc9744;font:12px/1.65 var(--fx-mono);color:#cfe7da;overflow:hidden;animation:fx-rise .8s 1.1s cubic-bezier(.2,.8,.2,1) both}
@keyframes fx-rise{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
.fx-term-bar{display:flex;align-items:center;gap:6px;padding:8px 11px;border-bottom:1px solid #1f3a2f;font-size:10px;color:#7fa593;letter-spacing:.04em}
.fx-term-bar i{width:8px;height:8px;border-radius:50%;background:#2a4639}
.fx-term-bar i:nth-child(1){background:#ff5f57aa}.fx-term-bar i:nth-child(2){background:#febc2eaa}.fx-term-bar i:nth-child(3){background:#28c840aa}
.fx-term-bar span{margin-left:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fx-term-body{padding:10px 13px 12px;min-height:118px}
.fx-term-line{display:block;white-space:nowrap;overflow:hidden;text-overflow:clip}
.fx-term-line.prompt{color:#f2fbf6;white-space:normal}
.fx-term-line.prompt b{color:var(--fx-sig);font-weight:500;margin-right:6px}
.fx-ch{font-style:normal;opacity:0;animation:fx-ch .01s forwards}
@keyframes fx-ch{to{opacity:1}}
.fx-term-line.prompt .fx-caret{display:inline-block;width:7px;height:13px;background:var(--fx-sig);vertical-align:-2px;margin-left:2px;opacity:0;animation:fx-ch .01s forwards,fx-blink 1s steps(2) infinite}
.fx-term-line.dim{color:#7fa593}
.fx-term-line.ok{color:var(--fx-sig)}
.fx-term-line.warn{color:#f0c674}
.fx-term-line.in{animation:fx-line .35s ease both}
@keyframes fx-line{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
.fx-spin{display:inline-block;width:1.2em;color:var(--fx-sig)}

/* ---------- Kinetic ticker under hero ---------- */
.fx-ticker{position:relative;overflow:hidden;background:#0b1210;border-block:1px solid #1f3a2f;color:#8fb8a4;font:500 12px/1 var(--fx-mono);letter-spacing:.16em;text-transform:uppercase;padding:14px 0}
.fx-ticker:before,.fx-ticker:after{content:'';position:absolute;top:0;bottom:0;width:12%;z-index:1;pointer-events:none}
.fx-ticker:before{left:0;background:linear-gradient(90deg,#0b1210,transparent)}.fx-ticker:after{right:0;background:linear-gradient(-90deg,#0b1210,transparent)}
.fx-ticker-track{display:flex;width:max-content;animation:fx-marquee 48s linear infinite}
.fx-ticker:hover .fx-ticker-track{animation-play-state:paused}
.fx-ticker-group{display:flex;align-items:center;gap:28px;padding-right:28px}
.fx-ticker-group span{white-space:nowrap}
.fx-ticker-group em{font-style:normal;color:var(--fx-sig);font-size:14px}
@keyframes fx-marquee{to{transform:translateX(-50%)}}

/* ---------- Section HUD indices & headline reveal ---------- */
main#top{counter-reset:fxsec}
.fx .section-intro .eyebrow{display:inline-flex;align-items:center;gap:10px}
.fx .section-intro .eyebrow:before{counter-increment:fxsec;content:'/' counter(fxsec,decimal-leading-zero);font:500 11px/1 var(--fx-mono);letter-spacing:.08em;color:var(--fx-sig2);padding:4px 7px;border:1px solid currentColor;border-radius:4px;opacity:.9}
.fx #learn .section-intro .eyebrow:before,.fx .os-section .section-intro .eyebrow:before{color:var(--fx-sig)}
.fx .section-intro .eyebrow:after{content:'';width:46px;height:1px;background:linear-gradient(90deg,currentColor,transparent);opacity:.5}
.fx .section-intro h2{transition:filter .9s cubic-bezier(.2,.8,.2,1),opacity .9s ease,letter-spacing 1.1s cubic-bezier(.2,.8,.2,1)}
.fx .section-intro:not(.fx-in) h2{filter:blur(10px);opacity:.15;letter-spacing:-.01em}

/* ---------- Pain cards: reading bar fills in ---------- */
.fx #pain article{position:relative;padding-top:16px}
.fx #pain article:before{content:'';position:absolute;left:0;top:0;height:2px;width:100%;background:#d8dfd3}
.fx #pain article:after{content:'';position:absolute;left:0;top:0;height:2px;width:100%;background:linear-gradient(90deg,var(--fx-sig2),var(--fx-sig));transform:scaleX(0);transform-origin:0 50%;transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.fx #pain article.fx-in:after{transform:scaleX(1)}
.fx #pain article:nth-child(2):after{transition-delay:.15s}.fx #pain article:nth-child(3):after{transition-delay:.3s}
.fx #pain article>span{font-family:var(--fx-mono);letter-spacing:.06em}

/* ---------- Dark panels: travelling border beam ---------- */
.fx .industry-demo,.fx .os-system{position:relative;isolation:isolate}
.fx-beam{position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;z-index:5;padding:1px;
 background:conic-gradient(from var(--fx-a),transparent 0 70%,#3ddc9700 72%,#3ddc97 82%,#c9ffe6 84%,transparent 86%);
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
 animation:fx-spin 7s linear infinite}
@keyframes fx-spin{to{--fx-a:360deg}}
.fx .industry-demo{background-image:radial-gradient(600px circle at var(--mx,50%) var(--my,-20%),#3ddc9714,transparent 60%)!important}
.fx .os-system{background-image:radial-gradient(600px circle at var(--mx,50%) var(--my,-20%),#3ddc9712,transparent 60%),linear-gradient(#a5d5c406 1px,transparent 1px),linear-gradient(90deg,#a5d5c406 1px,transparent 1px);background-size:auto,28px 28px,28px 28px}
.fx .industry-tabs button{transition:transform .25s cubic-bezier(.2,.8,.2,1),border-color .25s,background .25s,color .25s}
.fx .industry-tabs button:hover{transform:translateY(-2px);border-color:#3ddc97aa;color:#dff7ea}
.fx .industry-tabs button[aria-selected=true] svg{filter:drop-shadow(0 0 6px #3ddc97aa)}
.fx .os-node{transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .3s}
.fx .os-node:hover{transform:translateY(-2px);box-shadow:0 0 0 1px #3ddc9766,0 10px 30px -10px #3ddc9755}

/* ---------- Light cards: cursor spotlight + lift ---------- */
.fx .fx-spot{position:relative;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s}
.fx .fx-spot:hover{transform:translateY(-3px);box-shadow:0 18px 40px -22px #0e141155,0 0 0 1px #1dab8b40}
.fx .fx-spot>.fx-glow{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),#3ddc9722,transparent 70%)}
.fx .fx-spot:hover>.fx-glow{opacity:1}
.fx #takeaway .steps li>span{font-family:var(--fx-mono);color:var(--fx-sig2)}

/* ---------- Teaching section (dark): HUD corners on the frame ---------- */
.fx #learn{position:relative}
.fx #learn:before{content:'';position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(#ffffff07 1px,transparent 1px),linear-gradient(90deg,#ffffff07 1px,transparent 1px);background-size:40px 40px;-webkit-mask-image:radial-gradient(ellipse at 30% 40%,#000,transparent 75%);mask-image:radial-gradient(ellipse at 30% 40%,#000,transparent 75%)}
/* data flowing along existing connector lines */
.fx .os-lines path{stroke-dasharray:5 9;animation:fx-dash 1.1s linear infinite}
.fx .industry-engine svg{stroke-dasharray:6 8;animation:fx-dash 1s linear infinite}
@keyframes fx-dash{to{stroke-dashoffset:-28}}
.fx .industry-engine img,.fx .os-node img,.fx .os-core img{animation:fx-core 2.4s ease-in-out infinite;border-radius:6px}
@keyframes fx-core{0%,100%{box-shadow:0 0 0 0 #e0785a00}50%{box-shadow:0 0 0 6px #e0785a22,0 0 22px #e0785a66}}
.fx .teaching-frames{position:relative}

/* ---------- Signup: live batch cards ---------- */
.fx .batch{position:relative;overflow:hidden}
.fx .batch .number{font-family:var(--fx-mono);letter-spacing:.14em;display:inline-flex;align-items:center;gap:8px}
.fx .batch .number:before{content:'';width:6px;height:6px;border-radius:50%;background:var(--fx-sig);animation:fx-ping 2s infinite}
.fx .batch:after{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,var(--fx-sig),transparent);transform:translateX(-100%);animation:fx-slide 3.2s cubic-bezier(.6,0,.4,1) infinite}
.fx .batch+.batch:after{animation-delay:1.6s}
@keyframes fx-slide{to{transform:translateX(100%)}}

/* ---------- Buttons: light sweep + magnetic ---------- */
.fx .button{position:relative;overflow:hidden;isolation:isolate}
/* 底部固定报名按钮要保持 fixed，不被上面那条 position:relative 压掉（否则手机版会撑出横向滚动）。 */
.fx .mobile-cta{position:fixed}
.fx .button:after{content:'';position:absolute;top:0;bottom:0;left:-60%;width:40%;z-index:-1;pointer-events:none;background:linear-gradient(100deg,transparent,#ffffff59,transparent);transform:skewX(-18deg);animation:fx-btn 4.5s 2s ease-in-out infinite}
@keyframes fx-btn{0%{left:-60%}22%,100%{left:130%}}
.fx .fx-mag{transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,background .2s}
.fx .hero .button:hover,.fx header .button.small:hover{box-shadow:0 0 0 4px #3ddc9726,0 10px 30px -6px #3ddc9799}

/* ---------- Mobile tuning ---------- */
@media(max-width:700px){
 .fx-term{position:relative;left:auto;bottom:auto;width:auto;margin:-34px 12px 4px;font-size:11px}
 .fx-term-body{min-height:104px}
 .fx-hud{inset:-6px;--l:12px}
 .fx-hud-label.tl,.fx-hud-label.tr{font-size:9px;left:16px}
 .fx-hud-label.tr{left:auto;right:16px}
 .fx-hud-label.bl{display:none}
 .fx-ticker{font-size:11px;padding:12px 0}
 body.tech-workspace{background-attachment:scroll}
}

/* ---------- Reduced motion: keep the look, drop the movement ---------- */
@media(prefers-reduced-motion:reduce){
 .fx *,.fx *:before,.fx *:after{animation:none!important;transition:none!important}
 .fx .section-intro:not(.fx-in) h2{filter:none;opacity:1}
 .fx-ch{opacity:1}
 .fx-scan,.fx-field{display:none}
 .fx #pain article:after{transform:scaleX(1)}
}

/* OS core: breathing glow — the "brain" of the system map */
.fx .os-core{animation:fx-breathe 3.2s ease-in-out infinite}
@keyframes fx-breathe{0%,100%{box-shadow:0 0 0 1px #3ddc9722,0 0 30px -12px #3ddc9744}50%{box-shadow:0 0 0 1px #3ddc9766,0 0 46px -6px #3ddc9777}}
@media(prefers-reduced-motion:reduce){.fx .os-core{animation:none}}