/* Beat 11 #studio, "What we do" (spec r3 7.2): the camera orbits the block
   while five offers swap in a glass column on the left; each one lights its
   storefront on the stage. Phone portrait: a horizontal snap row in a bottom
   sheet, the lit storefront above it. */
.sh-beat--studio { --b-step-h: 36svh; }
.sh-beat--studio .b-frame { grid-template-columns: minmax(0, min(560px, 44vw)) 1fr; grid-template-rows: auto 1fr auto; column-gap: 40px; }
.sh-beat--studio .b-head, .sh-beat--studio .b-steps, .sh-beat--studio .b-count { grid-column: 1; }
.sh-beat--studio .b-steps { align-self: start; margin-top: 30px; }
.b-offer { position: relative; padding: 26px 26px 18px; border: 1px solid var(--b-panel-line); border-radius: 20px; background: var(--b-panel); box-shadow: 0 30px 80px -40px rgb(0 0 0 / 85%); }
html[data-tier="full"] .b-offer { -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); background: rgb(9 11 15 / 50%); }
.b-offer::before { content: ""; position: absolute; left: 26px; right: 26px; top: -1px; height: 1px; background: linear-gradient(90deg, var(--sh-gold-hi), transparent 70%); }
.b-offer__no { position: absolute; right: 22px; top: 8px; font: 400 clamp(64px, 6vw, 96px)/1 var(--sh-font-num); color: transparent; -webkit-text-stroke: 1px rgb(229 198 92 / 55%); letter-spacing: -.04em; pointer-events: none; }
.b-offer__tag { color: var(--sh-gold-hi); font: 600 10.5px/1 var(--sh-font-mono); letter-spacing: .22em; text-transform: uppercase; }
.b-offer h3 { margin: 16px 0 12px; font-size: clamp(32px, 3vw, 46px); line-height: 1; letter-spacing: -.035em; }
.b-offer__text { max-width: 30em; color: var(--sh-fg-2); font-size: 16px; line-height: 1.55; }
.b-offer .b-link { margin-top: 14px; }
.sh-beat--studio .b-count { position: relative; align-self: end; width: min(560px, 44vw); padding-top: 14px; }
.sh-beat--studio .b-count::before, .sh-beat--studio .b-count::after { content: ""; position: absolute; left: 0; top: 0; height: 1px; width: 100%; background: var(--sh-line); }
.sh-beat--studio .b-count::after { background: var(--sh-gold-hi); transform-origin: 0 50%; transform: scaleX(.2); transition: transform var(--b-dur) var(--b-ease); }
.sh-beat--studio[data-b-step="2"] .b-count::after { transform: scaleX(.4); }
.sh-beat--studio[data-b-step="3"] .b-count::after { transform: scaleX(.6); }
.sh-beat--studio[data-b-step="4"] .b-count::after { transform: scaleX(.8); }
.sh-beat--studio[data-b-step="5"] .b-count::after { transform: scaleX(1); }
html:not(.b-live) .sh-beat--studio .b-count { display: none; }
html:not(.b-live) .b-offers { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
html:not(.b-live) .b-offers > .b-step { margin: 0; }

/* The offer title swaps with a short rise; the number slides from the right. */
html.b-live .b-offer__no { transform: translateX(18px); opacity: 0; transition: transform .9s var(--b-ease) .1s, opacity .6s ease .1s; }
html.b-live .b-offer.is-active .b-offer__no { transform: none; opacity: 1; }

@media (max-width: 1023px) {
  .sh-beat--studio .b-frame { grid-template-columns: minmax(0, 1fr); }
  .sh-beat--studio .b-count { width: 100%; }
}
@media (max-width: 767px) {
  .b-offer { padding: 20px 18px 14px; }
  .b-offer h3 { font-size: 28px; margin: 12px 0 8px; }
  .b-offer__text { font-size: 14.5px; }
  .b-offer__no { font-size: 56px; right: 14px; }
}
@media (max-width: 767px) and (orientation: portrait) {
  html.b-live .sh-beat--studio[data-b-deck] { height: auto; }
  html.b-live .sh-beat--studio[data-b-deck] > .b-frame { position: relative; height: auto; min-height: 100svh; grid-template-rows: auto 1fr auto auto; overflow: visible; }
  html.b-live .sh-beat--studio .b-steps { display: flex; gap: 10px; align-self: end; margin: 0 calc(var(--sh-gutter) * -1); padding: 0 var(--sh-gutter) 4px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  html.b-live .sh-beat--studio .b-steps::-webkit-scrollbar { display: none; }
  html.b-live .sh-beat--studio .b-steps > .b-step { flex: 0 0 84%; opacity: .5; pointer-events: auto; transform: scale(.96); scroll-snap-align: center; transition: opacity .4s ease, transform .5s var(--b-ease); }
  html.b-live .sh-beat--studio .b-steps > .b-step.is-active { opacity: 1; transform: none; }
  .sh-beat--studio .b-count { margin-top: 12px; }
}
@media (max-width: 767px) and (orientation: portrait) {
  html.b-live .sh-beat--studio .b-steps > .b-step.is-past { transform: scale(.96); }
}