.darb-film { position: relative; height: 100vh; height: 100svh; background: var(--ink); color: var(--bone);
  overflow: clip;   
  
  z-index: 1;
  scroll-snap-align: none;   
  --r: 44px;
  --df-foot: max(20px, env(safe-area-inset-bottom, 0px)); }   
.df-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }


.df-stage { position: relative; height: 100vh; height: 100svh; overflow: hidden; container-type: size; background: var(--ink); }
.df-scene { position: absolute; inset: 0; transform-origin: 50% 0;
  
  --covw: min(100cqw, 100cqh * 16 / 9);
  --cardh: calc(var(--covw) * 9 / 16); --cardw: calc(var(--cardh) * 16 / 9);
  --cardt: calc(50cqh - var(--cardh) / 2); }


.df-card { position: absolute; left: calc(50% - var(--cardw) / 2); top: var(--cardt); width: var(--cardw); height: var(--cardh);
  transform-origin: 50% 50%; opacity: 0;
  will-change: transform, opacity; }   

.df-glow { position: absolute; inset: -24% -18%; pointer-events: none; opacity: 0; will-change: opacity;
  background: url("assets/film/film-glow-16x9.png") center / 100% 100% no-repeat;
  -webkit-mask-image: radial-gradient(closest-side, #000 58%, transparent); mask-image: radial-gradient(closest-side, #000 58%, transparent); }

.df-shadow { position: absolute; inset: 0; pointer-events: none; opacity: 0; will-change: opacity;
  border-image: url("assets/film/film-shadow-16x9.png") 220 / 440px / 250px stretch; }
.df-frame { position: absolute; inset: 0; overflow: hidden; border-radius: var(--r); background: #0b0e27; cursor: pointer;
  clip-path: inset(0 round var(--r)); }
.df-frame video { display: block; width: 100%; height: 100%; object-fit: cover; background: #0b0e27; }
.df-frame::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(239, 235, 227, .09); }   

.df-veil { position: absolute; inset: 0; background: var(--ink); opacity: 0; pointer-events: none; }

.df-veil { background: linear-gradient(to top, rgba(17, 17, 17, .72), rgba(17, 17, 17, .38) 34%, rgba(17, 17, 17, 0) 62%); transition: opacity .9s var(--heavy); }
.darb-film.df-ended .df-veil { opacity: 1; }


.df-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; box-sizing: border-box;
  height: 64px; min-width: 64px; padding: 0 28px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--bone); color: var(--blue); font: 400 22px/1 var(--display); white-space: nowrap;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 -3px 0 rgba(22, 32, 168, .12) inset, 0 22px 50px -18px rgba(0, 0, 0, .75), 0 6px 14px -6px rgba(0, 0, 0, .5);
  transition: transform .45s var(--pop), background-color .2s; -webkit-tap-highlight-color: transparent; }
.df-btn:hover { background: #fff; }
.df-btn:active { transform: scale(.95); }
.df-btn svg { width: 24px; height: 24px; flex: none; }
.darb-film .df-btn:focus-visible { outline: 3px solid var(--bone); outline-offset: 5px; }
.darb-film .df-play:focus-visible { outline-offset: 16px; }   
.df-round { width: 64px; padding: 0; }


.df-bar { position: absolute; left: var(--m); bottom: calc(var(--df-foot) + 28px); display: flex; align-items: center; gap: 16px; z-index: 3;
  opacity: 0; pointer-events: none; transform: translateY(14px);
  transition: opacity .35s ease, transform .6s var(--pop); }
.darb-film.df-live .df-bar, .df-bar:focus-within { opacity: 1; pointer-events: auto; transform: none; }
.darb-film:not(.df-ready) .df-bar { display: none; }
.df-play { position: relative; }
.df-play .ring { position: absolute; inset: -9px; width: calc(100% + 18px); height: calc(100% + 18px); rotate: -90deg; pointer-events: none; overflow: visible; }
.df-play .ring circle { fill: none; stroke-width: 3; }
.df-play .ring .track { stroke: rgba(239, 235, 227, .26); }
.df-play .ring .run { stroke: var(--bone); stroke-linecap: round; stroke-dasharray: 238.76; stroke-dashoffset: 238.76; }
.df-play .i { display: none; }
.df-play[data-state="play"] .i-play, .df-play[data-state="pause"] .i-pause, .df-play[data-state="again"] .i-again { display: block; }
.df-sound span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }   
.df-sound .i-on, .df-sound[data-on="true"] .i-off { display: none; }
.df-sound[data-on="true"] .i-on { display: block; }


.df-cue { position: absolute; left: 50%; bottom: calc(var(--df-foot) + 124px); z-index: 2; translate: -50% 0; max-width: min(900px, 84cqw); box-sizing: border-box;
  padding: 10px 22px; border-radius: 16px; background: rgba(17, 17, 17, .8); color: var(--bone);
  font: 500 26px/1.35 var(--body); text-align: center; white-space: pre-line; pointer-events: none; }
.df-cue:empty, .darb-film:not(.df-cc-on) .df-cue { display: none; }


.df-big { position: absolute; left: 50%; z-index: 2; height: 76px; padding: 0 36px 0 30px; font-size: 26px; gap: 14px;
  opacity: 0; visibility: hidden; transform: translate(-50%, -50%) scale(.9);
  transition: opacity .3s ease, transform .6s var(--pop), visibility 0s linear .3s, background-color .2s; }
.df-big svg { width: 28px; height: 28px; }

.df-start { top: 70%; }
.darb-film.df-ask .df-start { opacity: 1; visibility: visible; transform: translate(-50%, -50%);
  transition: opacity .3s ease .15s, transform .6s var(--pop) .15s, visibility 0s, background-color .2s; }

.darb-film.df-ask:not(.df-live) .df-start { opacity: 0; visibility: hidden;
  transition: opacity .25s ease, visibility 0s linear .25s; }
.df-big:active { transform: translate(-50%, -50%) scale(.95); }

.df-ends { position: absolute; left: 50%; top: 70%; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 16px;
  opacity: 0; visibility: hidden; transform: translate(-50%, -50%) scale(.9);
  transition: opacity .3s ease, transform .6s var(--pop), visibility 0s linear .3s; }
.df-ends .df-big { position: static; opacity: 1; visibility: inherit; transform: none; transition: transform .45s var(--pop), background-color .2s; }
.df-ends .df-big:active { transform: scale(.95); }
.darb-film.df-ended .df-ends { opacity: 1; visibility: visible; transform: translate(-50%, -50%);
  transition: opacity .3s ease .15s, transform .6s var(--pop) .15s, visibility 0s; }
.darb-film.df-ended:not(.df-live) .df-ends { opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s linear .25s; }
.df-make { display: inline-flex; align-items: center; gap: 16px; box-sizing: border-box; height: 76px; padding: 0 34px 0 36px; border-radius: 999px;
  background: var(--blue); color: var(--bone); font: 400 26px/1 var(--display); white-space: nowrap; text-decoration: none;
  box-shadow: 0 1px 0 rgba(255,255,255,.28) inset, 0 -5px 0 rgba(10,16,120,.6) inset, 0 26px 50px -20px rgba(22,32,168,.65), 0 6px 14px -6px rgba(17,17,17,.3);
  transition: padding .45s var(--heavy), background-color .2s; -webkit-tap-highlight-color: transparent; }
.df-make i { font-style: normal; display: inline-block; transition: transform .45s var(--heavy); }
.df-make:hover { padding-right: 58px; background: #2f3cf2; }
.df-make:hover i { transform: translateX(10px); }
.df-make:active { box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 -2px 0 rgba(10,16,120,.6) inset, 0 10px 18px -10px rgba(22,32,168,.6); }
.darb-film .df-make:focus-visible { outline: 3px solid var(--bone); outline-offset: 5px; }


@media (orientation: portrait) {
  .darb-film { --r: 24px; }
  .df-scene { --cardh: min(100cqw * 16 / 9, 100cqh); --cardw: calc(var(--cardh) * 9 / 16); }
  .df-glow { inset: -14% -30%; background-image: url("assets/film/film-glow-9x16.png"); }
  .df-shadow { border-image: url("assets/film/film-shadow-9x16.png") 195 / 390px / 250px stretch; }   
  .df-bar { left: 50%; bottom: calc(max(50cqh - var(--cardh) / 2, var(--df-foot)) + 18px); translate: -50% 0; gap: 12px; }
  .df-btn { height: 56px; min-width: 56px; padding: 0 22px; font-size: 20px; }
  .df-round { width: 56px; padding: 0; }
  .df-btn svg { width: 22px; height: 22px; }
  .df-big { height: 64px; padding: 0 28px 0 24px; font-size: 22px; }
  .df-ends { top: 74%; }
  .df-start { top: 50%; }   
  .df-make { height: 64px; padding: 0 26px 0 28px; font-size: 22px; }
  .df-make:hover { padding-right: 40px; }
  .df-ends { flex-direction: column; gap: 12px; }   
  .df-cue { bottom: calc(max(50cqh - var(--cardh) / 2, var(--df-foot)) + 96px); font-size: 20px; padding: 8px 16px; max-width: 88cqw; }
}

@media (orientation: portrait) and (max-aspect-ratio: 9/19) {
  .df-scene { --cardt: clamp(0px, 100cqh - var(--cardh) - 76px - var(--df-foot), 54px); }
  .df-bar { bottom: auto; top: calc(var(--cardt) + var(--cardh) + 20px); }
  .df-cue { bottom: auto; top: calc(var(--cardt) + var(--cardh) - 20px); translate: -50% -100%; }
}


@media (orientation: landscape) and (max-height: 560px) {
  .df-btn { height: 56px; min-width: 56px; padding: 0 22px; font-size: 20px; }
  .df-round { width: 56px; padding: 0; }
  .df-btn svg { width: 22px; height: 22px; }
  .df-bar { gap: 12px; bottom: calc(var(--df-foot) + 20px); }
  .df-ends { top: auto; left: auto; right: calc(50% - 50cqw + var(--m)); bottom: calc(50% - 50cqh + var(--df-foot) + 20px); transform: translateY(12px); }
  .darb-film.df-ended .df-ends { transform: none; }
  .df-ends .df-again { display: none; }
  .df-make { height: 56px; padding: 0 22px 0 24px; font-size: 20px; }
  .df-make:hover { padding-right: 36px; }
}


@media (prefers-reduced-motion: reduce) {
  .df-card { opacity: 1; transform: none !important; }
  .df-glow, .df-shadow { display: none; }
  .df-btn, .df-bar, .df-big, .df-veil, .df-ends, .df-make { transition: none !important; }
}