/* Companion stages for Social and Labs; functional content stays in the foreground. */
body:is([data-destination=social],[data-destination=labs]) #main.main { margin-inline:auto; }
body:has(.destination-masthead) .section-atmosphere { display:none; }
body:has(.destination-masthead) #main.main { max-width:1620px; }
.destination-masthead,.destination-masthead * { letter-spacing:0; }
.destination-masthead { --destination-accent:#a2e5ee; position:relative; isolation:isolate; display:grid; place-items:center; min-height:236px; padding:22px 0 28px; }
.destination-labs { --destination-accent:#99e2c1; min-height:246px; }
.destination-scene { position:absolute; inset:-30px calc(-1 * var(--gutter)) -65px; z-index:-1; overflow:hidden; pointer-events:none; }
.destination-scene>img { position:absolute; height:100%; width:auto; max-width:none; right:0; top:0; object-fit:contain; transform-origin:76% 52%; mask-image:linear-gradient(90deg,transparent,#000 24%),linear-gradient(180deg,#000 78%,transparent); mask-composite:intersect; animation:destination-drift 16s ease-in-out infinite; }
.destination-labs .destination-scene>img { animation-name:lab-drift; animation-duration:18s; }
.destination-light { position:absolute; inset:0 0 0 48%; background:linear-gradient(115deg,transparent 38%,#c5f9ff1c 49%,transparent 60%); background-size:260% 100%; mix-blend-mode:screen; mask-image:linear-gradient(180deg,transparent,#000 40%,transparent 96%); animation:destination-sweep 10s ease-in-out infinite; }
.destination-labs .destination-light { background-image:linear-gradient(110deg,transparent 38%,#bfffe51c 49%,transparent 60%); animation-duration:12s; }
.destination-signal { position:absolute; right:8%; top:16%; height:1px; width:22%; background:linear-gradient(90deg,transparent,var(--destination-accent),transparent); opacity:0; animation:destination-signal 8s ease-in-out infinite; }
.destination-social .destination-signal { top:auto; bottom:24%; animation-name:crew-signal; }
.destination-title { width:100%; text-align:center; position:relative; z-index:1; }
.destination-kicker { display:flex; align-items:center; justify-content:center; gap:9px; font:600 10px/1.5 Consolas,monospace; color:var(--destination-accent); }
.destination-title h1 { margin:14px 0; font:900 72px/1 var(--display-font); color:#f3f3ef; text-shadow:0 4px 28px #0009; }
.destination-title h1 em { font-style:normal; color:var(--destination-accent); }
.destination-title p { margin:0 auto; max-width:540px; font-size:13px; line-height:1.6; color:#cdd1d8; }
.destination-facts { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:9px 15px; margin-top:17px; font:10px/1.5 Consolas,monospace; color:#bec4cd; }
.destination-facts span+span { border-left:1px solid #c4d8dc33; padding-left:15px; }
.destination-facts span:first-child { color:#e9ce8c; }
body:has(.destination-social) .social-layout { position:relative; border-radius:6px; border:1px solid #c0d9e12b; border-top:2px solid #a2e5ee; box-shadow:0 12px 30px #0002; }
body:has(.destination-social) :is(.social-roster,.chat-pane,.chat-profile) { background:#121519f5; min-width:0; }
body:has(.destination-social) .chat-header { background:#1b2027; }
body:has(.destination-social) .social-profile-cover img { object-position:77% 50%; }
body:has(.destination-social) .chat-header h2 { overflow-wrap:anywhere; }
body:has(.destination-social) .chat-header>.row:first-child { min-width:0; }
body:has(.destination-social) .chat-header>.row:last-child { flex-shrink:0; }
.labs-workbench { display:flex; align-items:center; justify-content:space-between; gap:16px; position:relative; padding:19px 0; margin-bottom:22px; border-top:1px solid #99e2c13b; border-bottom:1px solid #d6dbe51c; }
.labs-workbench h2 { margin:0; font-size:20px; letter-spacing:0; }
.labs-workbench span { font:10px/1.5 Consolas,monospace; color:#b5c7be; }
body:has(.destination-labs) .project-grid { gap:22px; grid-template-columns:repeat(3,minmax(0,1fr)); }
body:has(.destination-labs) .project-card { min-width:0; border-radius:6px; transition:border-color .2s,transform .25s; }
body:has(.destination-labs) .project-card:hover { border-color:#99e2c18a; transform:translateY(-3px); }
body:has(.destination-labs) .project-card:focus-visible { outline:2px solid #99e2c1; outline-offset:4px; }
body:has(.destination-labs) .project-art { height:auto; aspect-ratio:16/9; overflow:hidden; }
body:has(.destination-labs) .project-art img { width:100%; height:100%; object-fit:cover; transition:transform .5s; }
body:has(.destination-labs) .project-card:hover img { transform:scale(1.025); }
body:has(.destination-labs) .project-copy { background:#131619; }
body:has(.destination-labs) .project-copy * { letter-spacing:0; overflow-wrap:anywhere; }
body:has(.destination-labs) .project-copy h2 { font-size:24px; }
body:has(.destination-labs) .project-copy .eyebrow { color:#b7d8c9; }
@keyframes destination-drift { 0%,100% { transform:translate(0,0) scale(1); } 50% { transform:translate(-4px,-4px) scale(1.018); } }
@keyframes lab-drift { 0%,100% { transform:translate(0,0) scale(1); } 50% { transform:translate(3px,-6px) scale(1.02); } }
@keyframes destination-sweep { 0%,18% { background-position:100% 0; opacity:0; } 40%,64% { opacity:.8; } 86%,100% { background-position:0 0; opacity:0; } }
@keyframes destination-signal { 0%,18% { opacity:0; transform:translateY(0); } 30%,55% { opacity:.4; } 80%,100% { opacity:0; transform:translateY(130px); } }
@keyframes crew-signal { 0%,100% { opacity:0; transform:scaleX(.5); } 45%,55% { opacity:.6; transform:scaleX(1); } }
@media(min-width:1101px) { body:has(.destination-social) .social-layout { height:calc(100dvh - 420px); min-height:420px; max-height:850px; } }
@media(min-width:761px) and (max-width:1250px) { body:has(.destination-social) .social-layout { grid-template-columns:250px minmax(0,1fr); } }
@media(max-width:1100px) {
 .destination-masthead { min-height:360px; grid-template-rows:172px auto; padding:0 0 24px; }
 .destination-title { grid-row:2; }
 .destination-title h1 { font-size:60px; }
 .destination-scene { inset:-16px calc(-1 * var(--gutter)) 0; }
 .destination-scene>img { height:235px; top:-8px; right:calc(50% - 108px); mask-image:linear-gradient(180deg,#000 75%,transparent); }
 .destination-light { inset:0 12% 45%; }
 .destination-signal { right:calc(50% - 75px); width:150px; top:25px; }
 .destination-social .destination-signal { top:154px; bottom:auto; }
 body:has(.destination-labs) .project-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 body:has(.destination-social) .social-layout { height:560px; }
}
@media(max-width:760px) {
 .destination-masthead { min-height:296px; grid-template-rows:140px auto; padding-bottom:22px; }
 .destination-scene>img { height:192px; right:calc(50% - 90px); top:-5px; }
 .destination-title h1 { font-size:44px; margin:10px 0; }
 .destination-title p { font-size:12px; max-width:340px; }
 .destination-kicker { font-size:9px; }
 .destination-facts { font-size:9px; margin-top:12px; gap:6px 10px; }
 .destination-facts span+span { padding-left:10px; }
 .destination-social .destination-signal { top:128px; }
 .destination-signal { width:120px; right:calc(50% - 60px); }
 .labs-workbench { padding:15px 0; margin-bottom:18px; }
 .labs-workbench h2 { font-size:18px; }
 .labs-workbench span { font-size:9px; }
 body:has(.destination-labs) .project-grid { gap:14px; }
 body:has(.destination-labs) .project-copy h2 { font-size:20px; }
 body:has(.destination-social) .social-layout { height:560px; min-height:475px; }
}
@media(max-width:480px) { body:has(.destination-labs) .project-grid { grid-template-columns:1fr; } }
@media(max-width:360px) { .destination-title h1 { font-size:38px; } .destination-title p { font-size:11px; } }
body:is(.reduced-motion,.reduce-atmosphere) .destination-scene>img { animation:none!important; transform:none!important; }
body:is(.reduced-motion,.reduce-atmosphere) :is(.destination-light,.destination-signal) { display:none!important; }
body.reduced-motion:has(.destination-labs) :is(.project-card,.project-art img) { transition:none; transform:none; }
body.arena-backgrounded .destination-masthead * { animation-play-state:paused!important; }
@media(prefers-reduced-motion:reduce) {
 .destination-scene>img { animation:none!important; transform:none!important; }
 .destination-light,.destination-signal { display:none!important; }
 body:has(.destination-labs) :is(.project-card,.project-art img) { transition:none; transform:none; }
}