/* ATLAS BEATS — Social page (v6.9.3 formal redesign). Builds on the formal components in about.css
   (.ab-kicker .ab-btn .ab-stats .ab-section .ab-sec-head .ab-values-grid .ab-value .ab-contact .ab-auto .ab-fly .toast). */
.so-main { padding-top: 18px; }
.so-hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); gap: clamp(28px, 5vw, 72px); align-items: center; padding: clamp(28px, 5vw, 64px) 0 clamp(26px, 4vw, 48px); border-bottom: 1px solid var(--ab-line); }
.so-id { min-width: 0; opacity: 0; transform: translateY(14px); transition: opacity .7s ease .1s, transform .7s cubic-bezier(.2, .7, .2, 1) .1s; }
body.ready .so-id { opacity: 1; transform: none; }
.so-title { margin: 18px 0 14px; font: 800 clamp(34px, 5vw, 60px)/1.05 'Montserrat', 'Inter', sans-serif; letter-spacing: -.02em; color: #fff; }
[dir=rtl] .so-title { font-family: 'Vazirmatn', 'Inter', sans-serif; letter-spacing: 0; }
.so-handle { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 16px; border: 1px solid rgba(231, 201, 138, .4); background: linear-gradient(160deg, rgba(231, 201, 138, .12), transparent); color: #fff; font: 800 20px/1 'Montserrat', 'Inter', sans-serif; letter-spacing: -.01em; cursor: pointer; transition: border-color .25s, transform .25s; }
.so-handle .at { color: var(--ab-gold); } .so-handle .i { width: 16px; height: 16px; fill: var(--ab-ink3); } .so-handle .ok { display: none; fill: #35e08a; } .so-handle.done .ok { display: block; } .so-handle.done .cp { display: none; }
.so-handle:hover { transform: translateY(-1px); border-color: rgba(231, 201, 138, .7); }
.so-badge { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px 0 6px; margin-inline-start: 4px; border-radius: 999px; background: linear-gradient(135deg, var(--c1, #7c3aed), var(--c2, #3b82f6)); color: #fff; font: 700 11px/1 'Inter', sans-serif; letter-spacing: .04em; }
.so-badge .i { width: 14px; height: 14px; fill: #fff; padding: 2px; border-radius: 50%; background: rgba(255, 255, 255, .22); }
.so-bio { margin: 18px 0 0; max-width: 58ch; font-size: 15.5px; line-height: 1.85; color: var(--ab-ink2); }
.so-acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.so-stats { margin-top: 32px; }

/* the mark */
.so-mark { position: relative; margin: 0; justify-self: center; width: min(100%, 380px); opacity: 0; transform: translateY(18px) scale(.985); transition: opacity .9s ease .25s, transform .9s cubic-bezier(.2, .7, .2, 1) .25s; }
body.ready .so-mark { opacity: 1; transform: none; }
.so-mark-glow { position: absolute; inset: 8% -6% -4% -6%; border-radius: 40px; background: radial-gradient(60% 60% at 50% 40%, rgba(124, 58, 237, .4), transparent 70%), radial-gradient(50% 50% at 70% 80%, rgba(59, 130, 246, .3), transparent 70%); filter: blur(30px); z-index: 0; }
.so-mark-frame { position: relative; z-index: 1; display: grid; place-items: center; aspect-ratio: 1; padding: 10px; border-radius: 28px; background: linear-gradient(160deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .03) 45%, rgba(231, 201, 138, .16)); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(255, 255, 255, .08); }
.so-mark-frame::before { content: ''; position: absolute; inset: 10px; border-radius: 20px; background: radial-gradient(80% 80% at 50% 30%, #1a1630, #0b0a14 75%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.so-mark-frame img { position: relative; width: 58%; height: auto; filter: drop-shadow(0 24px 40px rgba(124, 58, 237, .45)); }
.so-live { position: absolute; left: 22px; bottom: 22px; z-index: 3; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 10px; border-radius: 999px; background: rgba(7, 6, 13, .72); border: 1px solid rgba(255, 255, 255, .14); font: 800 11px/1 'Montserrat', 'Inter', sans-serif; letter-spacing: .14em; color: #fff; }
.so-live i { width: 8px; height: 8px; border-radius: 50%; background: #35e08a; animation: abPulse 2s infinite; }
.so-mark figcaption { position: relative; z-index: 1; display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 10px; padding: 16px 8px 0; }
.so-mark figcaption b { font: 800 16px/1.2 'Montserrat', 'Inter', sans-serif; color: #fff; } .so-mark figcaption small { font-size: 12.5px; color: var(--ab-ink3); }
.so-mark figcaption span { grid-column: 1 / -1; margin-top: 4px; font: 700 12px/1 'Montserrat', 'Inter', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--ab-gold); }

/* networks */
.so-sec-sub { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 24px; align-items: center; margin: 0 0 22px; }
.so-sub { grid-column: 1; margin: 0; max-width: 60ch; font-size: 15px; line-height: 1.8; color: var(--ab-ink2); }
.so-quick { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: 8px; }
.so-q { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--ab-card); border: 1px solid var(--ab-line); transition: transform .25s, border-color .25s, background .25s; }
.so-q .ico { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; } .so-q .ico svg { width: 17px; height: 17px; fill: #fff; } .so-q .ico.light svg { fill: #0b0b10; } .so-q .ico img { width: 18px; height: 18px; }
.so-q:hover { transform: translateY(-2px); border-color: var(--b, rgba(255, 255, 255, .3)); background: var(--ab-card2); }
.so-sec-sub .ab-auto { grid-column: 1; }
.so-nets { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; perspective: 1600px; }
.so-card { position: relative; min-height: 232px; opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .6s cubic-bezier(.2, .7, .2, 1); }
.so-card.in { opacity: 1; transform: none; }
.so-card-in { position: relative; width: 100%; height: 100%; min-height: inherit; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.so-card.flipped .so-card-in { transform: rotateY(180deg); }
.so-face { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 18px; border-radius: 20px; border: 1px solid var(--ab-line); background: var(--ab-card); backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; transition: border-color .3s, background .3s, box-shadow .3s; }
.so-card:hover .so-face.front { border-color: rgba(255, 255, 255, .22); background: var(--ab-card2); box-shadow: 0 20px 44px -26px rgba(0, 0, 0, .9); }
.so-face.front::after { content: ''; position: absolute; inset: 0 0 auto; height: 2px; background: linear-gradient(90deg, var(--b, #fff), transparent 70%); opacity: .7; }
[dir=rtl] .so-face.front::after { background: linear-gradient(270deg, var(--b, #fff), transparent 70%); }
.so-face.back { transform: rotateY(180deg); background: #fff; color: #0b0b12; align-items: center; justify-content: center; gap: 12px; text-align: center; }
.so-face.back b { font: 700 13px/1.3 'Inter', sans-serif; word-break: break-all; color: #0b0b12; }
.so-face.back .so-mini { background: #0b0b12; color: #fff; border-color: transparent; } .so-face.back .so-open { background: #0b0b12; color: #fff; }
.so-qr { width: 150px; height: 150px; border-radius: 12px; }
.so-card-top { display: flex; align-items: center; gap: 10px; }
.so-card-top .ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.so-card-top .ico svg { width: 24px; height: 24px; fill: #fff; } .so-card-top .ico.light svg { fill: #0b0b10; } .so-card-top .ico img { width: 24px; height: 24px; }
.so-kind { font: 700 10.5px/1 'Montserrat', 'Inter', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--ab-ink3); padding: 6px 9px; border-radius: 999px; border: 1px solid var(--ab-line2); }
[dir=rtl] .so-kind { font-family: 'Vazirmatn', 'Inter', sans-serif; letter-spacing: 0; font-size: 11px; }
.so-flip { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--ab-line2); background: transparent; color: var(--ab-ink2); font: 700 11px/1 'Inter', sans-serif; cursor: pointer; }
.so-flip .i { width: 13px; height: 13px; fill: currentColor; } .so-flip:hover { color: #fff; border-color: rgba(255, 255, 255, .3); }
.so-card-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 16px; }
.so-card-name b { font: 800 20px/1.1 'Montserrat', 'Inter', sans-serif; letter-spacing: -.01em; color: #fff; } .so-card-name .hd { font-size: 12.5px; color: var(--ab-ink3); }
.so-card-d { margin: 8px 0 0; color: var(--ab-ink2); font-size: 13.5px; line-height: 1.75; flex: 1; }
.so-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--ab-line); }
.so-st { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--ab-ink3); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.so-st-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 11px; } .so-st-eq b { width: 3px; height: 100%; border-radius: 2px; background: #c4b5fd; transform-origin: bottom; animation: soEq .8s ease-in-out infinite; } .so-st-eq b:nth-child(2) { animation-delay: .15s; } .so-st-eq b:nth-child(3) { animation-delay: .3s; }
@keyframes soEq { 0%, 100% { transform: scaleY(.4); } 50% { transform: scaleY(1); } }
.so-card-acts { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.so-mini { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 999px; background: var(--ab-card); border: 1px solid var(--ab-line2); color: var(--ab-ink2); cursor: pointer; transition: background .2s, color .2s; } .so-mini .i { width: 15px; height: 15px; fill: currentColor; } .so-mini:hover { color: #fff; background: var(--ab-card2); }
.so-open { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid transparent; background: #fff; color: #0b0b12; font: 700 12.5px/1 inherit; font-family: inherit; text-decoration: none; cursor: pointer; transition: transform .25s, box-shadow .25s; }
.so-open .i { width: 14px; height: 14px; fill: currentColor; } [dir=rtl] .so-open .i { transform: scaleX(-1); }
.so-card:hover .so-open { transform: translateY(-1px); box-shadow: 0 10px 24px -12px rgba(255, 255, 255, .5); }
.so-shine { display: none; }

/* maker */
.so-maker { border-bottom: 0; }

/* dock (standalone only) */
.ab-dock { position: fixed; left: 50%; bottom: 18px; z-index: 60; transform: translate(-50%, 20px); opacity: 0; display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 12px; min-width: 280px; max-width: min(92vw, 420px); padding: 10px 12px; border-radius: 999px; background: rgba(18, 15, 30, .92); border: 1px solid var(--ab-line2); box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .9); transition: opacity .35s, transform .35s; }
.ab-dock.show { opacity: 1; transform: translate(-50%, 0); }
.ab-dock-btn, .ab-dock-mute { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--ab-line2); background: var(--ab-card); color: #fff; cursor: pointer; } .ab-dock-btn .i, .ab-dock-mute .i { width: 16px; height: 16px; fill: currentColor; }
.ab-dock-btn .s { display: none; } .ab-dock.playing .ab-dock-btn .s { display: block; } .ab-dock.playing .ab-dock-btn .p { display: none; }
.ab-dock-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; } .ab-dock-eq i { width: 3px; height: 100%; border-radius: 2px; background: #c4b5fd; transform: scaleY(.3); transform-origin: bottom; } .ab-dock.playing .ab-dock-eq i { animation: soEq .8s ease-in-out infinite; } .ab-dock-eq i:nth-child(2) { animation-delay: .1s; } .ab-dock-eq i:nth-child(3) { animation-delay: .2s; } .ab-dock-eq i:nth-child(4) { animation-delay: .3s; }
.ab-dock-tx { min-width: 0; display: grid; } .ab-dock-tx b { font-size: 13px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ab-dock-tx span { font-size: 11px; color: var(--ab-ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 980px) { .so-hero { grid-template-columns: 1fr; gap: 30px; } .so-mark { order: -1; width: min(100%, 320px); } }
@media (max-width: 767px) {
  .so-title { font-size: clamp(32px, 10vw, 44px); }
  .so-handle { font-size: 17px; padding: 10px 14px; } .so-badge { display: none; }
  .so-sec-sub { grid-template-columns: 1fr; } .so-quick { grid-column: 1; grid-row: auto; flex-wrap: wrap; } .so-sec-sub .ab-auto { grid-column: 1; }
  .so-nets { grid-template-columns: 1fr; }
  .so-mark { width: min(100%, 260px); }
}
@media (prefers-reduced-motion: reduce), (max-width: 767px) { .so-id, .so-mark, .so-card { transition: none !important; opacity: 1 !important; transform: none !important; } .so-live i, .so-st-eq b { animation: none; } }