
.mbcine .mbcine-bar {
  position: absolute; left: 0; right: 0; z-index: 2; height: 50%; pointer-events: none;
  background: #000; transform: scaleY(var(--mbcine-k, 1)); will-change: transform;
}
.mbcine .mbcine-bar--bottom { bottom: 0; transform-origin: 50% 100%; }
.mbcine .mbcine-curtain .mbcine-bar { transition: transform 1.25s var(--ease-cine, cubic-bezier(.77, 0, .18, 1)); }
.mbcine .mbcine-frame { position: absolute; z-index: 2; pointer-events: none;
  inset: calc(var(--mbcine-lbt, 0px) * (1 - var(--mbcine-open, 0)) + 18px) calc(var(--gutter) - 6px) calc(var(--mbcine-lb, 0px) * (1 - var(--mbcine-open, 0)) + 18px) calc(var(--rail, 0px) + var(--gutter) - 6px);
  opacity: calc(.7 - var(--mbcine-open, 0)); transition: opacity .6s; }
.mbcine .mbcine-curtain .mbcine-frame { opacity: 0; }
.mbcine .mbcine-frame i { position: absolute; width: 22px; height: 22px; border: 0 solid rgba(245, 245, 242, .5); }
.mbcine .mbcine-frame i:nth-child(1) { top: 0; left: 0; border-top-width: 1.5px; border-left-width: 1.5px; }
.mbcine .mbcine-frame i:nth-child(2) { top: 0; right: 0; border-top-width: 1.5px; border-right-width: 1.5px; }
.mbcine .mbcine-frame i:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 1.5px; border-left-width: 1.5px; }
.mbcine .mbcine-frame i:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 1.5px; border-right-width: 1.5px; }

.mbcine .mbcine-leader { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; pointer-events: none;
  background: radial-gradient(ellipse at center, #1a1a1c 0%, #0b0b0c 62%, #050505 100%); transition: opacity .55s ease; }
.mbcine .mbcine-leader.is-done { opacity: 0; }
.mbcine .mbcine-leader > * { grid-area: 1 / 1; }
.mbcine .mbcine-leader__ring { width: min(46vmin, 380px); aspect-ratio: 1; border-radius: 50%; border: 2px solid rgba(245, 245, 242, .55); }
.mbcine .mbcine-leader__ring--in { width: min(36vmin, 300px); border-width: 1.5px; border-color: rgba(245, 245, 242, .3); }
.mbcine .mbcine-leader__sweep { width: min(46vmin, 380px); aspect-ratio: 1; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(217, 14, 67, .5) var(--mbcine-a, 0deg), transparent 0); opacity: .85; }
.mbcine .mbcine-leader.is-tick .mbcine-leader__sweep { animation: mbcine-sweep .52s linear both; }
@property --mbcine-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes mbcine-sweep { from { --mbcine-a: 0deg; } to { --mbcine-a: 360deg; } }
.mbcine .mbcine-leader__cross { width: 100%; height: 100%;
  background: linear-gradient(rgba(245, 245, 242, .22), rgba(245, 245, 242, .22)) center / 100% 1px no-repeat,
              linear-gradient(rgba(245, 245, 242, .22), rgba(245, 245, 242, .22)) center / 1px 100% no-repeat; }
.mbcine .mbcine-leader__n { position: relative; font-size: min(26vmin, 220px); line-height: 1; color: #F5F5F2; }
.mbcine .mbcine-leader.is-tick .mbcine-leader__n { animation: mbcine-num .52s steps(1) both; }
@keyframes mbcine-num { 0% { opacity: 1; } 12% { opacity: .55; } 18% { opacity: 1; } 70% { opacity: 1; } 76% { opacity: .7; } 82% { opacity: 1; } }

.mbcine .mbcine-leak { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; mix-blend-mode: screen; opacity: 0;
  transition: opacity 2.4s ease .3s; }
.mbcine .mbcine-lit .mbcine-leak { opacity: .55; }
.mbcine .mbcine-leak i { position: absolute; width: 60vw; height: 60vw; border-radius: 50%; filter: blur(70px); will-change: transform; }
.mbcine .mbcine-leak i:nth-child(1) { left: -18vw; top: -26vw; background: radial-gradient(circle, rgba(217, 14, 67, .55), rgba(217, 14, 67, 0) 65%);
  animation: mbcine-drift-a 16s ease-in-out infinite alternate; }
.mbcine .mbcine-leak i:nth-child(2) { right: -22vw; bottom: -30vw; background: radial-gradient(circle, rgba(255, 150, 60, .38), rgba(255, 150, 60, 0) 65%);
  animation: mbcine-drift-b 21s ease-in-out infinite alternate; }
@keyframes mbcine-drift-a { from { transform: translate(0, 0) scale(1); } to { transform: translate(14vw, 10vw) scale(1.25); } }
@keyframes mbcine-drift-b { from { transform: translate(0, 0) scale(1.1); } to { transform: translate(-16vw, -8vw) scale(.9); } }
.mbcine .mbcine-lit .hero__title { animation: mbcine-flicker 1.1s steps(1) .15s both; }
@keyframes mbcine-flicker { 0% { opacity: .2; } 8% { opacity: .9; } 14% { opacity: .35; } 22% { opacity: 1; } 30% { opacity: .7; } 38%, 100% { opacity: 1; } }

.mbcine .mbcine-slate {
  position: fixed; z-index: 60; bottom: 22px; inset-inline-start: calc(var(--rail, 0px) + var(--gutter));
  display: flex; align-items: center; gap: .75rem; padding: .5rem .9rem .5rem .55rem;
  border-radius: 10px; background: rgba(11, 11, 13, .82); color: #F5F5F2;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(245, 245, 242, .1); pointer-events: none;
  font-size: var(--fs-micro, .68rem); font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  opacity: 0; transform: translateY(12px); transition: opacity .45s, transform .6s var(--ease-out, ease);
}
.mbcine .mbcine-slate.is-on { opacity: 1; transform: none; }
.mbcine .mbcine-slate__clap { position: relative; width: 34px; height: 24px; flex: none; }
.mbcine .mbcine-slate__clap::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 15px; border-radius: 2px; background: #F5F5F2; }
.mbcine .mbcine-slate__clap::after { content: ""; position: absolute; left: 3px; right: 3px; bottom: 5px; height: 1.5px; background: rgba(5, 5, 5, .5); }
.mbcine .mbcine-slate__clap i { position: absolute; left: 0; top: 2px; width: 100%; height: 6px; border-radius: 1px; transform-origin: 0 100%;
  background: repeating-linear-gradient(115deg, #F5F5F2 0 5px, #050505 5px 10px); transform: rotate(-24deg); }
.mbcine .mbcine-slate.is-snap .mbcine-slate__clap i { animation: mbcine-snap .55s var(--ease-out, ease) both; }
@keyframes mbcine-snap { 0% { transform: rotate(-24deg); } 45% { transform: rotate(0deg); } 60% { transform: rotate(-4deg); } 100% { transform: rotate(0deg); } }
.mbcine .mbcine-slate__txt { display: flex; align-items: baseline; gap: .6rem; }
.mbcine .mbcine-slate__txt b { color: var(--c-red, #D90E43); font-weight: 700; }
.mbcine .mbcine-slate__txt em { font-style: normal; color: rgba(245, 245, 242, .5); }
.mbcine .mbcine-slate.is-snap .mbcine-slate__txt { animation: mbcine-txt .5s var(--ease-out, ease) both; }
@keyframes mbcine-txt { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.mbcine .rail__scene { display: none; }
@media (max-width: 899px) {
  .mbcine .mbcine-slate { display: none; }
  .mbcine .rail__scene { display: block; }
}

.mbcine .mbcine-credits { position: relative; max-width: 1080px; margin: 0 auto; padding: clamp(2rem, 5vh, 3.5rem) var(--gutter); color: #F5F5F2; }
.mbcine .mbcine-perf { height: 12px; margin: 0 calc(var(--gutter) * -1);
  background: linear-gradient(90deg, rgba(245, 245, 242, .13) 0 16px, transparent 16px 30px) 0 0 / 30px 100% repeat-x; border-radius: 2px;
  -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.mbcine .mbcine-credits__head { text-align: center; margin: clamp(2.2rem, 6vh, 3.6rem) 0 clamp(2rem, 5vh, 3rem); }
.mbcine .mbcine-credits__kicker { font-size: var(--fs-micro, .68rem); font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: rgba(245, 245, 242, .5); }
.mbcine .mbcine-credits__title { margin-top: .6rem; font-size: clamp(2.4rem, 5.4vw, 4.8rem); line-height: .95; text-transform: uppercase; }
.mbcine .mbcine-credits__cols { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
.mbcine .mbcine-credits__crew { margin: 0; padding-inline-end: clamp(1.5rem, 4vw, 3.5rem); border-inline-end: 1px solid rgba(245, 245, 242, .12);
  display: grid; row-gap: 1.15rem; }
.mbcine .mbcine-credits__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); column-gap: 1.25rem; align-items: baseline; }
.mbcine .mbcine-credits dt, .mbcine .mbcine-credits__label { font-size: var(--fs-micro, .68rem); font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: rgba(245, 245, 242, .5); }
.mbcine .mbcine-credits dt { text-align: end; }
.mbcine .mbcine-credits dd { margin: 0; font-size: clamp(.98rem, 1.3vw, 1.1rem); font-weight: 500; }
.mbcine .mbcine-credits__trusted { padding-inline-start: clamp(1.5rem, 4vw, 3.5rem); }
.mbcine .mbcine-credits__label { margin-bottom: 1rem; }
.mbcine .mbcine-credits__clients { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 1.5rem; }
.mbcine .mbcine-credits__clients li { break-inside: avoid; padding: .2rem 0; font-size: clamp(.95rem, 1.25vw, 1.05rem); font-weight: 500; }
.mbcine .mbcine-credits__endrow { text-align: center; margin: clamp(2.4rem, 6vh, 3.6rem) 0 clamp(1.6rem, 4vh, 2.4rem); }
.mbcine .mbcine-credits__thanks { font-size: var(--fs-small, .85rem); color: rgba(245, 245, 242, .62); }
.mbcine .mbcine-credits__end { margin-top: 1.1rem; font-size: clamp(2.8rem, 7vw, 6rem); line-height: 1; letter-spacing: .08em; text-transform: uppercase; }
.mbcine .mbcine-credits__end i { display: inline-block; width: .16em; height: .16em; margin-inline-start: .06em; border-radius: 50%; background: var(--c-red, #D90E43); vertical-align: baseline; }
.mbcine .mbcine-credits [data-mbcine-roll] { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease-out, ease), transform 1.1s var(--ease-out, ease); }
.mbcine .mbcine-credits [data-mbcine-roll].is-in { opacity: 1; transform: none; }
@media (max-width: 699px) {
  .mbcine .mbcine-credits__cols { grid-template-columns: 1fr; row-gap: 2rem; }
  .mbcine .mbcine-credits__crew { padding-inline-end: 0; border-inline-end: 0; padding-bottom: 2rem; border-bottom: 1px solid rgba(245, 245, 242, .12); }
  .mbcine .mbcine-credits__trusted { padding-inline-start: 0; text-align: center; }
  .mbcine .mbcine-credits__clients { text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .mbcine .mbcine-curtain .mbcine-bar { transition: none; }
  .mbcine .mbcine-leak i, .mbcine .mbcine-lit .hero__title { animation: none; }
  .mbcine .mbcine-slate, .mbcine .mbcine-slate.is-snap .mbcine-slate__clap i, .mbcine .mbcine-slate.is-snap .mbcine-slate__txt { transition: none; animation: none; }
  .mbcine .mbcine-slate__clap i { transform: none; }
  .mbcine .mbcine-credits [data-mbcine-roll] { opacity: 1; transform: none; transition: none; }
}

.mbcine .mbcine-strip { height: 22px; margin: 1.4rem calc(var(--gutter) * -1) 1.4rem; pointer-events: none;
  background-color: #070707;
  background-image: linear-gradient(90deg, rgba(245, 245, 242, .16) 0 14px, transparent 14px 28px);
  background-size: 28px 9px; background-repeat: repeat-x; background-position: var(--mbcine-x, 0px) 50%;
  border-block: 1px solid rgba(245, 245, 242, .06);
  -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
@media (max-width: 899px) { .mbcine .mbcine-strip { height: 16px; background-size: 22px 7px; margin-block: 1rem; } }
