/* A quiet, gold collaboration scene. All motion is decorative. */
.cooperation{position:relative;isolation:isolate;overflow:hidden}
.cooperation>.shell{position:relative;z-index:1}
.cooperation-ambient{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1;background:radial-gradient(ellipse at 80% 53%,#c8a6630d,transparent 55%)}
.coop-orbit{position:absolute;right:-8%;top:-20%;width:670px;aspect-ratio:1;border:1px solid #cfac6c10;border-radius:50%;transform:rotate(-24deg) scaleY(.68);transition:transform 1.5s cubic-bezier(.22,1,.36,1)}
.coop-orbit:before{content:"";position:absolute;inset:17px;border:1px dashed #e1be7b12;border-radius:50%;animation:coopOrbit 65s linear infinite}
.coop-orbit:after{content:"";position:absolute;left:15%;top:12%;width:5px;height:5px;border-radius:50%;background:#e0bd7c88;box-shadow:0 0 16px #d5b47250}
.coop-orbit-inner{right:-3%;top:-11%;width:530px;transform:rotate(28deg) scaleY(.8);opacity:.65}
.coop-orbit-inner:before{animation-direction:reverse;animation-duration:48s}
.cooperation[data-partner-scene="region"] .coop-orbit{transform:rotate(35deg) scaleY(.84)}
.cooperation[data-partner-scene="region"] .coop-orbit-inner{transform:rotate(-20deg) scaleY(.65)}
.cooperation-ambient>span{position:absolute;width:3px;height:3px;border-radius:50%;background:#e8c98e66;box-shadow:0 0 10px #deb87235;animation:coopMote 11s ease-in-out infinite;left:52%;top:72%}
.cooperation-ambient>span:nth-of-type(2){left:91%;top:64%;animation-delay:-4s;animation-duration:15s}
.cooperation-ambient>span:nth-of-type(3){left:64%;top:27%;animation-delay:-7s;animation-duration:13s;width:2px;height:2px}
.cooperation-ambient>span:nth-of-type(4){left:11%;top:86%;animation-delay:-2s;animation-duration:17s;width:2px;height:2px}

/* Equal-width tabs let the gold indicator glide without layout measurements. */
.cooperation .partner-tabs{position:relative;gap:0;--tab-width:110px;margin-bottom:28px}
.cooperation .partner-tabs button{flex:0 0 var(--tab-width);padding:15px 0 18px;text-align:left;transition:color .35s,text-shadow .35s}
.cooperation .partner-tabs button.active{color:#edd09a;text-shadow:0 0 18px #d8b67520}
.cooperation .partner-tabs button.active:after{display:none}
.cooperation .partner-tabs:after{content:"";position:absolute;bottom:-1px;left:0;width:var(--tab-width);height:2px;background:linear-gradient(90deg,#e9ca8e,#c5984a 64%,transparent);box-shadow:0 2px 14px #d8b67525;transform:translateX(0);transition:transform .65s cubic-bezier(.22,1,.36,1);pointer-events:none}
.cooperation .partner-tabs[data-active-tab="region"]:after{transform:translateX(100%)}
.partner-panels{min-height:220px}
.cooperation .cooperation-copy [role="tabpanel"]{animation:none}
.cooperation[data-animating="true"] [role="tabpanel"]:not([hidden])>h3,
.cooperation[data-animating="true"] [role="tabpanel"]:not([hidden])>p,
.cooperation[data-animating="true"] [role="tabpanel"]:not([hidden]) .partner-types>span{animation:coopContentIn .75s cubic-bezier(.22,1,.36,1) backwards}
.cooperation[data-animating="true"] [role="tabpanel"]:not([hidden])>p{animation-delay:.07s}
.cooperation[data-animating="true"] .partner-types>span:nth-child(1){animation-delay:.13s}
.cooperation[data-animating="true"] .partner-types>span:nth-child(2){animation-delay:.2s}
.cooperation[data-animating="true"] .partner-types>span:nth-child(3){animation-delay:.27s}
.cooperation .partner-types>span{position:relative;overflow:hidden;isolation:isolate;transition:transform .4s cubic-bezier(.22,1,.36,1),border-color .4s,background .4s,box-shadow .4s}
.cooperation .partner-types>span:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 20%,#f3d9a825 50%,transparent 80%);transform:translateX(-130%);transition:transform .8s cubic-bezier(.22,1,.36,1);pointer-events:none}
.cooperation .partner-types>span:hover:before{transform:translateX(130%)}
.cooperation .partner-types>span:hover{border-color:#d9b67788;box-shadow:0 6px 22px #c29c5410;background:#d6af6c12}

/* The text stays still while a soft wash moves through the three steps. */
.cooperation .division{padding:31px 32px 22px;background:linear-gradient(135deg,#24241cdd,#161b1fef);border-color:#d7b47738;box-shadow:0 24px 65px #0003,inset 0 1px 0 #f2d6a00a}
.cooperation .division:after{content:"";position:absolute;top:0;left:0;width:45%;height:1px;background:linear-gradient(90deg,transparent,#f6d99d99,transparent);animation:coopEdge 9s ease-in-out infinite;pointer-events:none}
.cooperation .division-title{padding-bottom:21px;margin-bottom:6px}
.division-steps{position:relative;padding:5px 0 0}
.cooperation .division-row{position:relative;isolation:isolate;align-items:flex-start;gap:18px;margin:0;padding:18px 9px 18px 0;border-radius:8px;--step-delay:0s}
.cooperation .division-row:nth-of-type(2){--step-delay:3.6s}
.cooperation .division-row:nth-of-type(3){--step-delay:7.2s}
.cooperation .division-row:before{content:"";position:absolute;inset:5px -12px;z-index:-1;border-radius:9px;background:linear-gradient(100deg,#d4af6b15,#d4af6b04 70%,transparent);opacity:0;animation:coopStepWash 10.8s ease-in-out var(--step-delay) infinite;pointer-events:none}
.cooperation .division-number{position:relative;flex:0 0 30px;height:30px;display:flex;align-items:center;justify-content:center;padding:0;border:1px solid #c5a5683d;border-radius:50%;background:#20221f;color:#d7b67c;font-size:12px;line-height:1;box-shadow:0 0 0 5px #1b1f1c;z-index:1}
.cooperation .division-number:after{content:"";position:absolute;inset:-1px;border:1px solid #f1d091a0;border-radius:inherit;box-shadow:0 0 17px #d1aa5a25;opacity:0;animation:coopStepWash 10.8s ease-in-out var(--step-delay) infinite}
.cooperation .division-row>div{min-width:0;padding-top:3px}
.cooperation .division-row h4{font-size:15px;margin-bottom:7px;line-height:1.8;color:#e7dcc6}
.cooperation .division-row p{line-height:2;color:#b5b4a7}
.division-track{position:absolute;left:14px;top:37px;bottom:54px;width:1px;background:linear-gradient(#d9b57522,#d9b57555,#d9b57522);overflow:hidden}
.division-track>i{position:absolute;inset:0;transform:translateY(-100%);background:linear-gradient(transparent 38%,#ebcc90 70%,transparent);animation:coopFlow 10.8s linear infinite}

/* Stop hidden scenes and honor the page's existing motion controls. */
.cooperation-ambient *, .cooperation-ambient *:before,
.cooperation .division:after,.cooperation .division-row:before,
.cooperation .division-number:after,.division-track>i{animation-play-state:paused}
.cooperation[data-animating="true"] .cooperation-ambient *,
.cooperation[data-animating="true"] .cooperation-ambient *:before,
.cooperation[data-animating="true"] .division:after,
.cooperation[data-animating="true"] .division-row:before,
.cooperation[data-animating="true"] .division-number:after,
.cooperation[data-animating="true"] .division-track>i{animation-play-state:running}
html[data-motion="paused"] .cooperation *,html[data-motion="paused"] .cooperation *:before,html[data-motion="paused"] .cooperation *:after{transition:none!important}

@keyframes coopOrbit{to{transform:rotate(360deg)}}
@keyframes coopMote{0%,100%{opacity:.15;transform:translate3d(0,8px,0)}50%{opacity:.7;transform:translate3d(12px,-24px,0)}}
@keyframes coopContentIn{from{opacity:0;transform:translate3d(0,13px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes coopEdge{0%,15%{opacity:0;transform:translateX(-110%)}35%{opacity:1}70%,100%{opacity:0;transform:translateX(330%)}}
@keyframes coopStepWash{0%,33%,100%{opacity:0}7%,26%{opacity:1}}
@keyframes coopFlow{0%{opacity:0;transform:translateY(-100%)}8%,90%{opacity:1}100%{opacity:0;transform:translateY(100%)}}

@media(max-width:1040px) and (min-width:761px){.cooperation-layout{gap:32px}.cooperation .division{padding-inline:24px}.partner-panels{min-height:210px}}
@media(max-width:760px){
  .cooperation .partner-tabs{--tab-width:100px;margin-bottom:24px}
  .partner-panels{min-height:245px}
  .cooperation .division{padding:25px 22px 14px}
  .cooperation .division-row{padding-block:16px;gap:15px}
  .cooperation .division-row h4{font-size:14px}
  .cooperation .division-row p{font-size:13px}
  .cooperation .partner-note{margin-top:14px}
  .coop-orbit{width:470px;right:-240px;top:20%}
  .coop-orbit-inner{width:370px;right:-200px;top:30%}
  .cooperation-ambient>span:nth-of-type(n+3){display:none}
}
@media(max-width:380px){.partner-panels{min-height:265px}}
@media(prefers-reduced-motion:reduce){
  .cooperation-ambient>span,.cooperation .division:after,.division-track>i{display:none}
  .cooperation *, .cooperation *:before,.cooperation *:after{animation:none!important;transition:none!important}
}

/* Exploded isometric sculpture -> assembled cluster -> collaboration details. */
@property --voxel-drift-strength{syntax:"<number>";inherits:true;initial-value:1}
.cooperation .cube-division{min-height:450px}
.cube-stage{position:absolute;inset:9px 0 81px;pointer-events:none;opacity:1;transform:translate3d(0,0,0) scale(1);transform-origin:center;transition:transform 1.5s cubic-bezier(.4,0,.2,1),opacity 1s cubic-bezier(.4,0,.2,1)}
.cube-sculpture{display:block;width:100%;height:100%;overflow:visible}
.cube-guides{opacity:.2;transition:opacity .55s}
.coop-voxel{--voxel-drift-strength:1;transform:translate(var(--scatter-x),var(--scatter-y));transition:transform 1.6s cubic-bezier(.4,0,.2,1) var(--voxel-delay),--voxel-drift-strength 1.4s cubic-bezier(.4,0,.2,1)}
.voxel-drift{animation:voxelIndependentDrift var(--drift-duration) ease-in-out var(--drift-phase) infinite;animation-play-state:paused}
.cooperation[data-animating="true"] .voxel-drift{animation-play-state:running}
.coop-voxel path{stroke:#efcf9438;stroke-width:.65;stroke-linejoin:round}
.voxel-bright .voxel-top{fill:url(#coop-voxel-top)}
.voxel-bright .voxel-left{fill:url(#coop-voxel-left)}
.voxel-bright .voxel-right{fill:url(#coop-voxel-right)}
.voxel-glass .voxel-top{fill:#eed7a52b}
.voxel-glass .voxel-left{fill:#d1b27612}
.voxel-glass .voxel-right{fill:#cba25e20}
.voxel-dark .voxel-top{fill:#49473c}
.voxel-dark .voxel-left{fill:#222722}
.voxel-dark .voxel-right{fill:#151c1a}
.cube-ready .division-details{opacity:0;visibility:hidden;transform:translate3d(0,12px,0);transition:opacity .2s ease,transform .5s ease,visibility 0s .25s}
.cube-toggle{position:absolute;inset:0;z-index:3;display:block;width:100%;height:100%;padding:0;border:0;border-radius:inherit;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.cube-toggle:focus-visible{outline:2px solid #e8c98e;outline-offset:-7px}
.cube-prompt{position:absolute;left:32px;right:32px;bottom:27px;display:flex;align-items:center;justify-content:space-between;gap:15px;transition:opacity .22s,transform .4s}
.cube-prompt small{display:block;font:10px Arial,sans-serif;letter-spacing:.24em;color:#b89c68;margin-bottom:9px}
.cube-prompt strong{display:block;font-family:var(--font-display);font-size:26px;font-weight:600;line-height:1.7;letter-spacing:.03em;color:#ead4a9;margin-bottom:6px}
.cube-desktop-hint,.cube-touch-hint{font-size:13px;line-height:1.9;color:#a8a38e}
.cube-touch-hint{display:none}
.cube-prompt-arrow{display:flex;align-items:center;justify-content:center;flex:0 0 39px;height:39px;border:1px solid #d7b57640;border-radius:50%;font:24px Arial,sans-serif;color:#e7c78c;background:#d2ab6008;transition:transform .6s,background .6s}
.cube-toggle:hover .cube-prompt-arrow{transform:rotate(45deg);background:#d2ab6014}
.cube-close{position:absolute;right:22px;top:18px;font-size:12px;letter-spacing:.08em;color:#d7bb86;opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .2s,transform .35s,visibility 0s .2s}
.cube-division.is-assembled .coop-voxel{--voxel-drift-strength:0;transform:translate(0,0);transition-duration:1.45s,1.2s}
.cube-division.is-assembled .cube-guides{opacity:0}
.cube-division.is-assembled .cube-stage{transform:translate3d(34%,-31%,0) scale(.37);opacity:.22;transition-delay:.65s,.65s}
.cube-division.is-assembled .division-details{opacity:1;visibility:visible;transform:translate3d(0,0,0);transition:opacity .8s ease .9s,transform .95s cubic-bezier(.22,1,.36,1) .9s,visibility 0s .9s}
.cube-division.is-assembled .cube-prompt{opacity:0;transform:translateY(9px);pointer-events:none}
.cube-division.is-assembled .cube-close{opacity:1;visibility:visible;transform:translateY(0);transition-delay:.8s,.8s,0s}
.cube-ready:not(.is-assembled) .division-row:before,.cube-ready:not(.is-assembled) .division-number:after,.cube-ready:not(.is-assembled) .division-track>i{animation-play-state:paused!important}
/* Keep each drift clock alive, easing only its strength to zero while assembling.
   This avoids the position jump caused by removing and restarting animations. */
@keyframes voxelIndependentDrift{0%,100%{transform:translate(calc(var(--drift-x) * var(--voxel-drift-strength)),calc(var(--drift-y) * var(--voxel-drift-strength)))}50%{transform:translate(calc(var(--drift-x) * var(--voxel-drift-strength) * -1),calc(var(--drift-y) * var(--voxel-drift-strength) * -1))}}
@media(max-width:1040px) and (min-width:761px){.cooperation .cube-division{min-height:480px}.cube-prompt{left:24px;right:24px}.cube-desktop-hint{font-size:12px}.cube-prompt strong{font-size:24px}}
@media(max-width:760px){.cooperation .cube-division{min-height:460px}.cube-stage{inset:12px -9px 101px}.cube-prompt{left:24px;right:24px;bottom:25px}.cube-prompt strong{font-size:25px}.cube-desktop-hint,.cube-touch-hint{font-size:12px}.cube-division.is-assembled .cube-stage{transform:translate3d(31%,-33%,0) scale(.31);opacity:.17}.cube-close{right:20px;top:15px}}
@media(hover:none),(pointer:coarse){.cube-desktop-hint{display:none}.cube-touch-hint{display:inline}}
@media(prefers-reduced-motion:reduce){.voxel-drift{animation:none!important;transform:none!important}.cube-division *{transition:none!important}}
