/* Homepage Nexus Skyblock ad: one showreel playing in sync on an iMac and a sideways phone (24 Oct 2026). */
.sbx { position:relative; padding:96px 0 104px; overflow:hidden; font-family:Geist, Inter, system-ui, sans-serif; }
.sbx-wrap { max-width:1120px; margin:0 auto; padding:0 16px; }
@media (min-width:640px) { .sbx-wrap { padding:0 24px; } }

.sbx-head { text-align:center; }
.sbx-head h2 { margin:0; font:600 clamp(2.5rem, 5.4vw, 4.25rem)/1.04 Geist, Inter, system-ui, sans-serif; letter-spacing:-.045em; color:#f5f5f7; }
.sbx-head p { margin:14px 0 0; color:#a1a1aa; font:400 clamp(17px, 1.6vw, 20px)/1.4 Geist, Inter, system-ui, sans-serif; letter-spacing:-.01em; }

/* ---------- Devices ---------- */
.sbx-stage { position:relative; max-width:max(640px, calc((100svh - 300px) * 1.55)); margin:48px auto 0; padding-bottom:4%; }
.sbx-stage figure { margin:0; }
.sbx-screen { position:relative; overflow:hidden; background:#05070d; }
.sbx-video { display:block; width:100%; height:100%; object-fit:cover; background:#05070d; }
/* Glass glare: a soft diagonal sheen that drifts a little as the page scrolls. */
.sbx-screen::after { content:""; position:absolute; inset:-20% -40%; pointer-events:none; background:linear-gradient(112deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,.05) 22%, rgba(255,255,255,0) 36%); transform:translateX(calc((var(--sbx-p, .5) - .5) * 18%)); }

/* iMac: black glass, silver chin and stand. */
.sbx-imac { position:relative; width:82%; margin-left:2%; }
.sbx-imac-screen { padding:1.25%; border-radius:clamp(10px, 1.6vw, 20px) clamp(10px, 1.6vw, 20px) 0 0; background:#0b0b0d; box-shadow:0 0 0 1px #2c2c31, inset 0 0 0 1px #000; }
.sbx-imac-screen .sbx-screen { aspect-ratio:16/9; border-radius:3px; }
.sbx-imac-chin { aspect-ratio:100/8.5; border-radius:0 0 clamp(10px, 1.6vw, 20px) clamp(10px, 1.6vw, 20px); background:linear-gradient(180deg, #e9eaee 0%, #d3d5da 55%, #b9bbc1 100%); box-shadow:inset 0 1px 0 #ffffffa0, 0 0 0 1px #9ea0a6; }
.sbx-imac-neck { width:19%; aspect-ratio:19/10.5; margin:0 auto; background:linear-gradient(90deg, #8f9197 0%, #c9cace 18%, #e4e5e9 50%, #c4c5ca 82%, #8a8c92 100%); clip-path:polygon(4% 0, 96% 0, 100% 100%, 0 100%); }
.sbx-imac-foot { position:relative; width:27%; height:clamp(6px, .8vw, 10px); margin:0 auto; border-radius:0 0 6px 6px; background:linear-gradient(180deg, #d7d8dc, #a7a9ae); }
.sbx-imac-foot::after { content:""; position:absolute; left:-30%; right:-30%; top:100%; height:28px; background:radial-gradient(ellipse at 50% 0, rgba(0,0,0,.65), transparent 70%); pointer-events:none; }

/* Phone held sideways, like Minecraft on mobile. */
.sbx-phone { position:absolute; right:0; bottom:9%; width:41%; z-index:2; }
.sbx-phone-body { position:relative; padding:1.9%; border-radius:9.5% / 20%; background:#0a0a0c; box-shadow:0 0 0 1.5px #55565c, 0 0 0 3px #1d1d21, 0 34px 70px -18px rgba(0,0,0,.85), 0 12px 24px rgba(0,0,0,.45); transform:translateY(calc((.5 - var(--sbx-p, .5)) * 44px)); }
.sbx-phone .sbx-screen { aspect-ratio:2.05/1; border-radius:8% / 17%; }
.sbx-island { position:absolute; left:2.4%; top:50%; width:2.4%; height:26%; transform:translateY(-50%); border-radius:99px; background:#000; z-index:1; }

.sbx-toggle { position:absolute; left:2%; bottom:-6px; z-index:3; display:grid; place-items:center; width:36px; height:36px; padding:0; border:1px solid rgba(255,255,255,.14); border-radius:10px; background:rgba(4,4,10,.6); color:#d4d4d8; cursor:pointer; transition:border-color .15s, color .15s; }
.sbx-toggle:hover { border-color:rgba(255,255,255,.3); color:#fff; }
.sbx-toggle:focus-visible { outline:2px solid #22d3ee; outline-offset:2px; }
.sbx-toggle svg { width:16px; height:16px; fill:currentColor; }
.sbx-toggle .i-play, .sbx-toggle.is-paused .i-pause { display:none; }
.sbx-toggle.is-paused .i-play { display:block; }

/* ---------- Join ---------- */
.sbx-join { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px; margin-top:52px; }
.sbx-join .ui-btn { min-height:50px; font-size:16px; }
.sbx-play { padding:0 26px 0 22px; font-weight:600; }
.sbx-play svg { width:16px; height:16px; fill:currentColor; }
.sbx-addr { gap:12px; padding:0 18px 0 20px; }
.sbx-addr-host { color:#f4f4f5; font-weight:500; }
.sbx-addr-port { color:#a1a1aa; padding-left:12px; border-left:1px solid rgba(255,255,255,.14); }
.sbx-addr svg { width:17px; height:17px; fill:none; stroke:#a1a1aa; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.sbx-addr .i-ok { display:none; stroke:#22d3ee; }
.sbx-addr.ok .i-copy { display:none; }
.sbx-addr.ok .i-ok { display:block; }
.sbx-said { flex-basis:100%; min-height:20px; margin:2px 0 0; color:#a1a1aa; font-size:14px; text-align:center; }

/* ---------- Scroll-in: the iMac rises, the phone slides in just after ---------- */
.home-motion .sbx-imac, .home-motion .sbx-phone { opacity:0; transition:opacity 1s cubic-bezier(.16,1,.3,1), transform 1.3s cubic-bezier(.16,1,.3,1); }
.home-motion .sbx-imac { transform:translateY(64px) scale(.965); }
.home-motion .sbx-phone { transform:translate(48px, 40px); transition-delay:.22s; }
.home-motion .sbx.is-in .sbx-imac, .home-motion .sbx.is-in .sbx-phone { opacity:1; transform:none; }

@media (max-width:719px) {
  .sbx { padding:80px 0 88px; }
  .sbx-stage { margin-top:40px; padding-bottom:0; }
  .sbx-stage .sbx-imac { width:100%; margin:0; }
  .sbx-stage .sbx-phone { position:relative; right:auto; bottom:auto; width:78%; margin:-12% -2% 0 auto; }
  .sbx-toggle { left:0; bottom:auto; top:calc(100% - 36px); }
  .sbx-join { flex-direction:column; margin-top:40px; }
  .sbx-join .ui-btn { width:min(100%, 340px); }
}
@media (prefers-reduced-motion:reduce) {
  .sbx-screen::after, .sbx-phone-body { transform:none; }
}