.sync-section{--sync-orange:var(--orange,#ff592f);position:relative;padding:95px var(--pad) 70px;background:#10110f;border-block:1px solid var(--line,#ffffff24);overflow:hidden}.sync-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:45px}.sync-heading h2{font-family:var(--display);font-weight:700;font-size:clamp(62px,6vw,90px);line-height:.96;letter-spacing:-.025em;margin-top:25px}.sync-heading h2 em{color:var(--sync-orange)}.sync-heading-side{display:flex;align-items:flex-end;gap:35px;max-width:680px;padding-bottom:4px}.sync-heading-side>p{font-size:16px!important;line-height:1.9;color:#c2c3b8}.sync-start{min-width:205px;font-size:12px!important;min-height:55px}.sync-start>svg{width:22px;height:22px}.sync-start:disabled{opacity:.55;transform:none;cursor:default}.sync-stage{height:455px;position:relative;isolation:isolate;background:radial-gradient(ellipse at 50% 50%,#ff592f0c,transparent 65%),#151612;border:1px solid #ffffff2b;overflow:hidden}.sync-stage:before,.sync-stage:after{content:'';position:absolute;inset:12px;pointer-events:none;border:1px solid #ffffff08;z-index:4}.sync-stage:after{inset:32px;border:0;border-left:1px solid #ffffff0d;border-right:1px solid #ffffff0d}.sync-stage-meta{position:absolute;top:25px;left:28px;right:28px;display:flex;align-items:center;justify-content:space-between;color:#a2a595;font-size:11px;letter-spacing:.11em;z-index:5;pointer-events:none}.sync-stage-meta>span:first-child{display:flex;align-items:center;gap:9px}.sync-stage-meta i{width:5px;height:5px;border-radius:50%;background:var(--sync-orange)}.sync-stage-meta>span:last-child{color:var(--paper);font-size:12px;letter-spacing:.17em}.sync-depth-grid{position:absolute;inset:30% -50% -80%;background-image:linear-gradient(#ff592f18 1px,transparent 1px),linear-gradient(90deg,#ff592f18 1px,transparent 1px);background-size:90px 60px;transform:perspective(400px) rotateX(60deg);mask-image:linear-gradient(transparent,#000 35%,transparent 70%);opacity:.8;z-index:-1;pointer-events:none}.sync-halo{position:absolute;width:520px;height:520px;border-radius:50%;border:1px solid #ff592f15;left:50%;top:50%;transform:translate(-50%,-50%);z-index:-1;pointer-events:none}.sync-halo:before,.sync-halo:after{content:'';position:absolute;inset:42px;border:1px solid #ff592f12;border-radius:50%}.sync-halo:after{inset:90px;border-color:#ffffff0d}.sync-light{position:absolute;top:50%;height:1px;width:50%;background:linear-gradient(90deg,transparent,var(--sync-orange));box-shadow:0 0 14px #ff592f50;opacity:.7;z-index:0;pointer-events:none}.sync-light-left{left:0;transform:rotate(-20deg);transform-origin:right center}.sync-light-right{right:0;transform:rotate(20deg) scaleX(-1);transform-origin:left center}.sync-target-line{position:absolute;top:50%;left:24px;right:24px;display:flex;align-items:center;justify-content:space-between;pointer-events:none;z-index:0}.sync-target-line:before{content:'';position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,#ff592f9c,transparent 20%,transparent 80%,#ff592f9c)}.sync-target-line>span{height:11px;width:11px;border:1px solid #ff592f70;border-radius:50%}.sync-target-line>i{width:7px;height:7px;border:1px solid #ff592f50;transform:rotate(45deg);opacity:.4}.sync-symbols{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;gap:clamp(18px,4vw,60px);align-items:center;justify-content:center;width:80%;max-width:810px;pointer-events:none;z-index:2}.sync-symbol{position:relative;width:clamp(110px,14vw,190px);height:240px;display:grid;place-items:center;flex-shrink:0}.sync-ghost{position:absolute;width:100%;height:100%;fill:none;stroke:#ffffff1c;stroke-width:.5;opacity:.9}.sync-moving{position:relative;width:100%;height:100%;transform:translateY(var(--seven-y,0px)) rotate(var(--seven-tilt,0deg));will-change:transform;z-index:2}.sync-moving>svg{width:100%;height:100%;display:block;filter:drop-shadow(0 7px 15px #0008);overflow:visible}.sync-symbol:not(.is-active):not(.is-locked) .sync-moving{opacity:.43}.sync-symbol-trail{position:absolute;left:25%;top:45%;width:37%;height:70%;background:linear-gradient(#ff592f35,transparent);transform:skew(-26deg);filter:blur(12px);z-index:-1;opacity:0;transition:opacity .4s}.sync-symbol.is-active .sync-symbol-trail{opacity:.65}.sync-symbol.is-active .sync-ghost{stroke:var(--sync-orange);stroke-width:.8;opacity:.75}.sync-symbol.is-active .sync-moving{filter:drop-shadow(0 0 20px #ff592f18)}.sync-symbol.is-ready .sync-moving>svg>path{fill:var(--sync-orange)}.sync-symbol.is-locked .sync-moving>svg>path{fill:var(--paper)}.sync-symbol.is-locked .sync-moving{transition:transform .45s cubic-bezier(.16,1,.3,1)}.sync-symbol.is-locked .sync-ghost{stroke:#ff592f50}.sync-symbol-index{position:absolute;bottom:-26px;left:0;right:0;text-align:center;font-size:10px;color:#727769;letter-spacing:.18em}.sync-symbol.is-active .sync-symbol-index{color:var(--sync-orange)}.sync-symbol.is-locked .sync-symbol-index{color:var(--paper)}.sync-hit-area{position:absolute;inset:0;width:100%;height:100%;z-index:6;opacity:1;cursor:crosshair;background:transparent;border:0;padding:0;touch-action:manipulation}.sync-hit-area:disabled{cursor:default}.sync-hit-area:focus-visible{outline:2px solid var(--sync-orange);outline-offset:-7px}.sync-center-cue{position:absolute;left:0;right:0;bottom:65px;display:flex;align-items:center;justify-content:center;gap:10px;pointer-events:none;z-index:5;color:#a4a797;font-size:10px;letter-spacing:.13em;font-weight:600}.sync-center-cue svg{width:14px;height:14px;opacity:.6}.sync-stage-bottom{position:absolute;bottom:25px;left:28px;right:28px;display:flex;justify-content:space-between;align-items:center;gap:20px;z-index:5;pointer-events:none}.sync-steps{display:flex;gap:26px}.sync-steps>span{display:flex;align-items:center;gap:7px;font-size:10px;letter-spacing:.045em;color:#777d6d;white-space:nowrap}.sync-steps i{height:4px;width:4px;border:1px solid currentColor}.sync-steps .is-active{color:var(--sync-orange)}.sync-steps .is-locked{color:#e5e6da}.sync-steps .is-locked i{background:var(--sync-orange);border-color:var(--sync-orange)}.sync-input-hint{display:flex;align-items:center;gap:9px;font-size:9px;letter-spacing:.12em;color:#8b9080}.sync-input-hint kbd{font-family:var(--body);font-size:8px;letter-spacing:.08em;border:1px solid #ffffff2c;padding:4px 6px}.sync-caption{display:flex;justify-content:space-between;align-items:center;gap:25px;padding-top:20px;min-height:50px}.sync-caption>p{font-size:14px!important;line-height:1.8;color:#b7bbac}.sync-caption>span{font-size:10px;letter-spacing:.1em;color:#838a78;white-space:nowrap}.sync-announcement{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important}.sync-burst{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:var(--sync-orange);stroke-width:.8;opacity:0;pointer-events:none;z-index:1}.sync-section.is-target-ready .sync-target-line:before{background:linear-gradient(90deg,var(--sync-orange),#ff592f22 20%,#ff592f22 80%,var(--sync-orange))}.sync-section.is-target-ready .sync-center-cue{color:var(--sync-orange)}.sync-section[data-state=active] .sync-halo{border-color:#ff592f30}.sync-section[data-state=complete] .sync-stage{background:radial-gradient(ellipse at 50% 50%,#ff592f26,transparent 64%),#151612;border-color:#ff592f7a}.sync-section[data-state=complete] .sync-moving>svg>path{fill:var(--sync-orange)}.sync-section[data-state=complete] .sync-moving>svg{filter:drop-shadow(0 0 26px #ff592f30)}.sync-section[data-state=complete] .sync-center-cue{color:var(--paper)}.sync-section[data-state=complete] .sync-caption>span{color:var(--sync-orange)}.sync-section[data-state=complete] .sync-light-left{transform:rotate(0)}.sync-section[data-state=complete] .sync-light-right{transform:rotate(0) scaleX(-1)}.sync-section[data-state=complete] .sync-light{opacity:1;box-shadow:0 0 35px #ff592f80}.sync-section[data-motion=full][data-state=complete] .sync-burst{animation:sync-converge 1.2s cubic-bezier(.16,1,.3,1) both}.sync-section[data-motion=full][data-state=complete] .sync-symbols{animation:sync-lock-in .75s cubic-bezier(.16,1,.3,1) both}.sync-section[data-motion=full] .sync-light{transition:transform 1.2s cubic-bezier(.16,1,.3,1),opacity 1s}.sync-section[data-motion=full].is-in-view:not([data-state=active]) .sync-depth-grid{animation:sync-grid-drift 20s linear infinite}@keyframes sync-converge{0%{opacity:.8;transform:scale(.4)}100%{opacity:0;transform:scale(1.8)}}@keyframes sync-lock-in{0%{transform:translate(-50%,-50%) scale(.94)}100%{transform:translate(-50%,-50%) scale(1)}}@keyframes sync-grid-drift{to{background-position:0 60px}}.sync-section[data-motion=reduced] *{animation:none!important;transition:none!important}.sync-section[data-motion=reduced] .sync-moving{will-change:auto}body[data-motion=full] .sync-section[data-state=complete] .sync-burst{animation:sync-converge 1.2s cubic-bezier(.16,1,.3,1) both!important}body[data-motion=full] .sync-section[data-state=complete] .sync-symbols{animation:sync-lock-in .75s cubic-bezier(.16,1,.3,1) both!important}body[data-motion=full] .sync-section.is-in-view:not([data-state=active]) .sync-depth-grid{animation:sync-grid-drift 20s linear infinite!important}
.sync-section[data-state=idle] .sync-symbol .sync-moving{opacity:.92}.sync-section[data-state=idle] .sync-moving>svg{filter:drop-shadow(0 8px 18px #0009) drop-shadow(0 0 25px #ff592f12)}
@media(max-width:1100px){.sync-heading-side{flex-direction:column;align-items:flex-start;gap:22px}.sync-heading h2{font-size:72px}.sync-stage{height:430px}.sync-symbol{width:160px;height:215px}.sync-symbols{gap:35px}.sync-heading-side>p{font-size:15px!important}}
@media(max-width:850px){.sync-section{padding-block:70px}.sync-heading{gap:25px}.sync-heading h2{font-size:65px}.sync-heading-side>p{font-size:14px!important}.sync-start{min-width:190px;font-size:11px!important;gap:15px}.sync-stage{height:410px}.sync-symbol{width:135px;height:190px}.sync-symbols{gap:25px}.sync-steps{gap:16px}.sync-steps>span{font-size:9px}.sync-input-hint{font-size:8px;gap:6px}.sync-stage-meta{font-size:9px}.sync-center-cue{bottom:70px}.sync-caption>p{font-size:13px!important}.sync-caption>span{font-size:9px}}
@media(max-width:650px){.sync-section{padding:55px var(--pad) 45px}.sync-heading{flex-direction:column;align-items:flex-start;gap:25px;margin-bottom:29px}.sync-heading h2{font-size:60px;line-height:.97;margin-top:22px}.sync-heading .eyebrow{font-size:11px}.sync-heading-side{flex-direction:row;align-items:flex-end;justify-content:space-between;width:100%;gap:20px}.sync-heading-side>p{font-size:13px!important;line-height:1.7;max-width:195px}.sync-start{min-width:0;padding:13px 15px;min-height:49px;max-width:160px;font-size:10px!important;gap:12px;text-align:left}.sync-start>svg{height:18px;width:18px;flex-shrink:0}.sync-stage{height:365px}.sync-stage-meta{top:19px;left:17px;right:17px;font-size:8px;letter-spacing:.045em}.sync-stage-meta>span:last-child{font-size:10px}.sync-stage-meta>span:first-child{gap:6px}.sync-symbol{width:clamp(65px,19.2vw,105px);height:145px}.sync-symbols{gap:9px;width:87%}.sync-symbol-index{bottom:-20px;font-size:9px}.sync-center-cue{font-size:9px;bottom:72px;letter-spacing:.045em;gap:8px}.sync-center-cue svg{width:12px;height:12px}.sync-halo{width:330px;height:330px}.sync-halo:before{inset:35px}.sync-halo:after{inset:70px}.sync-stage-bottom{left:17px;right:17px;bottom:21px;gap:14px;flex-wrap:wrap;justify-content:center}.sync-steps{width:100%;justify-content:space-between;gap:6px}.sync-steps>span{font-size:8px;letter-spacing:0;gap:4px}.sync-input-hint{font-size:8px;letter-spacing:.08em}.sync-input-hint kbd{font-size:7px;padding:3px 4px}.sync-caption{align-items:flex-start;flex-direction:column;gap:8px;padding-top:17px;min-height:70px}.sync-caption>p{font-size:13px!important;line-height:1.7}.sync-caption>span{font-size:9px}.sync-target-line{left:12px;right:12px}.sync-target-line>span{height:7px;width:7px}.sync-stage:after{inset:25px}.sync-stage:before{inset:8px}}
@media(max-width:360px){.sync-heading-side{flex-direction:column;align-items:flex-start;gap:18px}.sync-heading-side>p{max-width:none}.sync-start{max-width:none;min-width:190px}.sync-symbol{width:63px;height:135px}.sync-symbols{gap:8px}.sync-stage{height:350px}.sync-stage-meta{font-size:7px}.sync-steps>span{font-size:7px}.sync-heading h2{font-size:53px}}
